Respuesta
botones dinámicos
Es posible crear botones de tamaño dinámico utilizando Scene7 Image Serving. A continuación, se muestran algunas plantillas que proporcionan una base para el desarrollo de botones de interfaz de usuario de tamaño automático utilizando IS. Los ejemplos utilizan la fuente predeterminada distribuida con IS. El arte derivado debe ser lo suficientemente ancho para alojar la etiqueta de texto más larga que se espera. Una implementación real probablemente usaría arte de mayor resolución, una fuente diferente y varios comandos RTF e IS para afinar la apariencia y posición de la etiqueta de texto.
El ejemplo de abajo tiene un fondo de color sólido. El texto debe estar en la capa 0 para que el tamaño del botón sea determinado por la cadena de texto. El arte de los botones debe ser transparente en el centro para que la etiqueta y el relleno sean visibles:
Enlace: http://sample.scene7.com/is/image?fmt=gif&layer=0&text=$text$&extend=10,1,10,1&bgColor=$color$&layer=1&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&$text=button%20with%20solid%20color%20fill&$color=aaffaa
http://sample.scene7.com/is/image?fmt=gif&layer=0&text=$text$&extend=10,1,10,1&bgColor=$color$&layer=1&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&$text=button%20with%20solid%20color%20fill&$color=aaffaa
Este ejemplo tiene el botón de arte que proporciona el relleno. Necesita renderizar el texto dos veces; una vez en la capa 0 para proporcionar el tamaño total, y otra vez encima del arte. En este caso, el arte sería opaco:
Enlace: http://sample.scene7.com/is/image?fmt=gif&text=$text$&extend=10,1,10,1&layer=1&src=TechSupport/b-comp&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-comp&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&layer=3&text=$text$&$text=button%20with%20image%20fill
http://sample.scene7.com/is/image?fmt=gif&text=$text$&extend=10,1,10,1&layer=1&src=TechSupport/b-fill&op_colorize=$color$,off&layer=2&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=3&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&layer=4&text=$text$&$text=colorized%20gradient&$color=6666ff
Aquí se encuentra un ejemplo utilizado por uno de nuestros clientes. La diferencia principal y el aumento de la complejidad se debe al hecho de que esta llamada genera botones PNG transparentes. Esto requiere llamadas anidadas en las capas 1 y 2. El modo de desarrollador en SPS es necesario para crear la plantilla.
http://sample.scene7.com/is/image/TechSupport/button_small_default?$txt=Put+your+text+here
Plantilla button_small_default
&$txt=Details%20here&layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=is{TechSupport?layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=TechSupport/background_button&originN=-0.5,0&posN=-0.5,0}&clipPath=M0,0L20,0L20,20L0,20Z&layer=2&src=is{TechSupport?layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=TechSupport/background_button&originN=0.5,0&posN=0.5,0}&clipPath=M20,0L800,0L800,20L20,20Z&layer=4&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,crisp&extend=25,3,25,1&originN=0,0&effect=-1&pos=1,1&color=0xEDD2A8&op_blur=1&op_grow=1&fmt=png-alpha
Respuesta
Desafortunadamente, en este momento no admitimos la importación de transformaciones de capas de archivos PSD a la plantilla básica generada.
Respuesta
Un ruta de recorte es una ruta vectorial cerrada, o forma, utilizada para recortar una imagen 2D en un software de edición de imágenes. Cualquier cosa en la ruta, se incluirá después de aplicar la ruta de recorte; cualquier cosa fuera de la ruta, se omitirá del resultado.
Puede utilizar rutas de recorte de imágenes para definir áreas transparentes en imágenes colocadas en aplicaciones de composición de páginas. Además, los usuarios de OS X pueden incrustar imágenes de Photoshop en muchos archivos de procesadores de texto.
Es posible que desee utilizar solo parte de una imagen de Photoshop al imprimirla o colocarla en otra aplicación. Por ejemplo, puede utilizar un objeto frontal y excluir el fondo. Una ruta de recorte de imagen le permite aislar el objeto frontal y hacer transparente el resto al imprimir la imagen o colocarla en otra aplicación.
Los trazados están basados en vectores y, por lo tanto, tienen bordes duros. No puede conservar la suavidad de un borde calado, como en una sombra, al crear una ruta de recorte de imagen.
Ver http://help.adobe.com/es_ES/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7715a.html#WSfd1234e1c4b69f30ea53e41001031ab64-7711a para más información.
Respuesta
Si una imagen contiene una ruta de recorte, la ruta de recorte se muestra en el panel Rutas de Photoshop con su nombre en negrita.
Respuesta
Los formatos de archivo de Scene7 que admiten rutas de recorte incluyen:
PSD
EPS (raster)
TIFF
JPG
Respuesta
Una de las opciones de edición de imágenes en SPS bajo las opciones de trabajo de carga es crear una máscara a partir de una ruta de recorte. Esta página de ayuda tiene una breve descripción de esta opción:
http://help.adobe.com/es_ES/scene7/using/WS1C6180F2-3FB5-4222-BB0F-08C53AB21188.html
Cuando se selecciona esta opción y la imagen cargada contiene una ruta que se denomina ruta de recorte (los archivos solo pueden tener una ruta de recorte), la máscara se asocia con el ID de Asset para el archivo cargado. Específicamente, se vincula al activo un MaskPath que hace referencia a una imagen de máscara de escala de grises de 8 bits. El canal alfa para el área fuera de la ruta de recorte de la imagen de la máscara será completamente transparente, y el canal alfa será completamente opaco para el área dentro de la ruta de recorte. Encontrará más información sobre MaskPath en la documentación de Image Serving:
http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-image_catalog-MaskPath
El catálogo::MaskPath anula el canal alfa en la imagen principal (catálogo::Path), si está presente, y si el canal alfa no está asociado (es decir, no está premultiplicado). Si la imagen alfa está premultiplicada, se ignora el catálogo::MaskPath y siempre se utiliza el canal alfa de la imagen principal.
El resultado es que la región fuera de la ruta de recorte será transparente cuando se haga referencia a ella mediante el ID de Asset desde Image Server. Es posible ignorar la máscara usando maskuse=off en la URL de Image Serving, que elimina efectivamente la transparencia creada por la ruta de recorte. Consulte la documentación de Image Serving para obtener más información sobre maskUse.
http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-maskUse
Aquí hay un ejemplo que muestra la transparencia que se crea a partir de la máscara:
http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100
Y cómo puede ignorar la máscara y, por lo tanto, perder la transparencia:
http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100&maskUse=off
Glosario de términos
canal alfa no asociado
Las imágenes RGB con transparencia alfa se pueden almacenar de dos maneras diferentes. Una forma es almacenar los valores RGB brutos y los valores alfa como canales separados e independientes; esto se denomina "alfa no asociado". PNG estandarizado en alfa "no asociado" (no premultiplicado) para que las imágenes con máscaras de transparencia separadas puedan almacenarse sin pérdidas. La mayoría de los programas de procesamiento de imágenes almacenan imágenes con alfa no asociado, para poder manipular el RGB y el alfa independientemente uno del otro, y no perder datos RGB al poner a cero el alfa.
canal alfa premultiplicado
Otra forma es almacenar los valores RGB no en bruto, sino premultiplicados por el valor alfa correspondiente, que luego se denomina "alfa asociado".
Si se utiliza un canal alfa en una imagen, es común también multiplicar el color por el valor alfa. Esto se conoce generalmente como alfa premultiplicado. "Alfa premultiplicado", almacena valores de píxeles premultiplicados por la fracción alfa. La información alfa de un píxel no solo se almacena en el propio canal alfa, sino que ya está "multiplicada" en los canales rojo, verde y azul. El software de renderizado prefiere el alfa asociado, porque con los valores RGB ya multiplicados por alfa, queda menos trabajo por hacer en tiempo real cuando se realiza la mezcla alfa. Los TIFF son compatibles con ambos tipos de alfa, pero con frecuencia están mal etiquetados.
Respuesta
Las rutas son dibujos vectoriales que pueden estirarse y remodelarse sin perder detalle. En Photoshop, puede utilizar una ruta como máscara vectorial para una capa. Las máscaras vectoriales, al igual que las rutas, pueden redimensionarse sin pérdida de detalle. Puede indicar que una ruta es una ruta de recorte y utilizarla para definir áreas transparentes en las imágenes. Esto le permite aislar el área del primer plano y hacer todo lo demás transparente.
Con Scene7, tiene la opción de crear una máscara vectorial tras la carga en SPS basada en la ruta de recorte. Además, toda la información de la ruta, incluyendo las rutas de recorte, puede ser devuelta opcionalmente como parte de cualquier respuesta de imagen generada dinámicamente. También es posible utilizar la información de la ruta para definir dinámicamente las áreas transparentes de una capa o imagen.
En una versión futura de Scene7, también puede ser posible recortar dinámicamente una capa o imagen basándose en una ruta.
Respuesta
Una vez cargada en Scene7, solo se puede utilizar la ruta de recorte para crear automáticamente una máscara. Sin embargo, tenemos soporte para referenciar una ruta nombrada incluida en la imagen solicitada que enmascara toda el área de la imagen que cae fuera de la definición de la ruta. Esto no requiere extraer la ruta a una máscara dentro de SPS, ya que la ruta se puede utilizar a través de solicitudes estándar de Scene7 Image Serving.
Respuesta
Scene7 es compatible con la referencia a una ruta con nombre incluida en la imagen solicitada, lo que enmascara toda el área de la imagen que queda fuera de la definición de la ruta. Esto no requiere extraer la ruta a una máscara dentro de SPS, ya que la ruta se puede utilizar con las solicitudes estándar de Scene7 Image Serving.
El comando de servidor de imágenes se llama clipPathE, y puede encontrar documentación sobre este comando aquí:
http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-clipPath
Aquí hay un par de ejemplos que muestran el uso de clipPathE:
No se llama a la ruta, no hay transparencia:
http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100
Se llama a la ruta, muestra transparencia:
Otra imagen con diferentes rutas definidas:
Respuesta
Esta funcionalidad se agregó en nuestra versión de primavera del 2014.
Hay enfoques alternativos: la API de IPS ofrece getPhotoshopPath y getPhotoshopPathNames. El servidor de imágenes puede recortar y enmascarar según el nombre de la ruta.
Respuesta
El modo de desarrollador se utiliza cuando se desea crear una plantilla sin utilizar las herramientas de diseño de la interfaz de usuario (UI). Una plantilla entrará en modo desarrollador si devmode=true está en la plantilla, o si el analizador no es capaz de analizar la plantilla.
Respuesta
La documentación de servidor de imágenes proporciona alguna información sobre el comando de solicitud de plantilla:
http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-template
De la documentación:
Cuando template= está presente, el objeto especificado en la ruta de solicitud no se aplicará como fuente para la capa 0, sino que se puede referenciar como src= o mask= en cualquier parte de la plantilla utilizando la variable de ruta predefinida $object$ como valor src=. catalog::Modifier del objeto especificado en la ruta de solicitud solo se aplica en relación con la sustitución de $object$ dentro de la plantilla, mientras que catalog::PostModifier se aplica siempre.
Este es un ejemplo:
http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$
http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$
URL original:
http://testvipd4.scene7.com/is/image/ajhco?layer=0&size=360,270&src=ajhco/redjacket&layer=1&src=ajhco/ni_360_270_redborder&wid=360
añadir una nueva capa 0 para solucionar el problema de que la línea no aparezca correctamente. La capa 0 se reduce a 270 x 270 porque la imagen es cuadrada, y la capa 1 se recorta a 270 x 270:
http://testvipd4.scene7.com/is/image/ajhco?layer=0&size=360,270&layer=1&size=360,270&src=ajhco/redjacket&layer=2&src=ajhco/ni_360_270_redborder&wid=360
Utilice la función de plantilla para permitir que la plantilla se utilice en una configuración prefijada:
http://testvipd4.scene7.com/is/image/ajhco/redjacket?template=jbsimpletemplate&wid=360
de esa manera:
http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$ http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$
Aquí está la plantilla (jbsimpletemplate):
devmode=true&layer=0&size=360,270&layer=1&src=$object$&size=360,270&layer=2&src=ajhco/ni_360_270_redborder&size=360,270
Y la preconfiguración (jbpreset):
wid=360&fmt=jpeg&qlt=85,1&op_sharpen=0&resMode=sharp2&op_usm=1,1,6,0&iccEmbed=0&template=jbsimpletemplate
Respuesta
Por diseño, solo los PSD de varias capas pueden convertirse en plantillas. Una sola plantilla posterior no tiene ninguna ventaja como plantilla y no hace nada más que duplicar el número de activos de la empresa para la imagen y la plantilla.
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea