Question: How can I dynamically create buttons?

Answer

dynamic buttons

It is possible to create dynamically sized buttons using Scene7 Image Serving. Below are some templates that provide a basis for developing self-sizing UI buttons using IS. The examples use the default font distributed with IS. The derived art must be wide enough to accommodate the longest text label expected. An actual implementation likely would use higher-resolution art, a different font, and various RTF and IS commands to fine-tune the appearance and position of the text label.

The example below has a solid color background.The text must be in layer 0 so that the button size is driven by the text string. The button art must be transparent in the center to make the label and fill visible:

Link: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

Opomba:

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

This example has the button art providing the fill. You need to render the text twice; once in layer 0 to provide the overall size, and then again on top of the art. In this case the art would be opaque:

Link: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

Opomba:

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

Here is an example used by one of our customers. The primary difference and increased complexity is due to the fact that this call generates transparent PNG buttons. This requires nested calls on layer 1 and layer 2. The developer mode in SPS is needed to create the template.

http://sample.scene7.com/is/image/TechSupport/button_small_default?$txt=Put+your+text+here

Template button_small_default

Opomba:

&$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

Question: I created the text layer in my PSD file with some rotation, but when I import that into SPS, the template that is generated does not have this transformation applied.Is there something I need to do differently? OR Do you support layer transforms when importing PSD files for basic templates?

Answer

Unfortunately, at this time we do not support importing layer transforms from PSD files into the generated basic template.

Question: What is a clipping path?

Answer

A clipping path is a closed vector path, or shape, used to cut out a 2D image in image editing software. Anything inside the path will be included after the clipping path is applied; anything outside the path will be omitted from the output.

You can use image clipping paths to define transparent areas in images you place in page-layout applications. In addition, OS X users can embed Photoshop images in many word-processor files.

You may want to use only part of a Photoshop image when printing it or placing it in another application. For example, you may want to use a foreground object and exclude the background. An image clipping path lets you isolate the foreground object and make everything else transparent when the image is printed or placed in another application.

Note: Paths are vector-based; therefore, they have hard edges. You cannot preserve the softness of a feathered edge, such as in a shadow, when creating an image clipping path.

See http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7715a.html#WSfd1234e1c4b69f30ea53e41001031ab64-7711a   for more information.

Question: Determine if a path is a clipping path in Photoshop CS6?

Answer

If an image contains a clipping path, the clipping path is displayed in the Photoshop “Paths” panel with its name displayed in bold font.

Question: What Scene7 file formats support clipping paths?

Answer

The Scene7 file formats that support clipping paths include:

PSD

EPS (raster)

TIFF

JPG

Question: How can clipping paths be used to create a transparent image in Scene7?

Answer

One of the image editing options in SPS under the upload job options is to create a mask from a clipping path. This help page has a brief description of this option:

http://help.adobe.com/en_US/scene7/using/WS1C6180F2-3FB5-4222-BB0F-08C53AB21188.html

When this option is selected and the uploaded image contains a path that is denoted as the clipping path (files can have only one clipping path), the mask is associated with the Asset ID for the uploaded file. Specifically a MaskPath which references an 8-bit greyscale mask image is tied to the asset. The alpha channel for the area outside of the clipping path on the mask image will be completely transparent, and the alpha channel will be completely opaque for the area inside the clipping path. More information about MaskPath can be found in the Image Serving documentation:

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-image_catalog-MaskPath

The catalog::MaskPath overrides the alpha channel in the main image (catalog::Path), if present, and if the alpha channel is unassociated (i.e. not pre-multiplied). If the image alpha is pre-multiplied, catalog::MaskPath is ignored and the alpha channel of the main image is always used.

The result is that the region outside of the clipping path will be transparent when referred to by the Asset ID from the Image Server. It is possible to ignore the mask by using maskuse=off in the Image Serving URL, which effectively removes the transparency created by the clipping path. See the Image Serving documentation for more information on maskUse.

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-maskUse

Here is an example showing the transparency which is created from the mask:

http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100

And how you can ignore the mask and therefore lose the transparency:

http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100&maskUse=off

Opomba:

Glossary of terms

unassociated alpha channel

RGB images with alpha transparency can be stored in two different ways. One way is to store raw RGB values and alpha values as separate and independent channels; this is called "unassociated alpha". PNG standardized on "unassociated" ("non-premultiplied") alpha so that images with separate transparency masks can be stored losslessly. Most image processing programs stores images with unassociated alpha, to be able to manipulate RGB and alpha independently of one another, and not lose RGB data when zeroing out alpha.

pre-multiplied alpha channel

Another way is to store RGB values not raw, but premultiplied by corresponding alpha value, which is then called "associated alpha".
If an alpha channel is used in an image, it is common to also multiply the color by the alpha value. This is usually referred to as premultiplied alpha. "Premultiplied alpha", stores pixel values premultiplied by the alpha fraction. The alpha information of a pixel is not only stored in the alpha channel itself, but it is already "multiplied" into the red, green and blue channel. Rendering software prefers associated alpha, because with RGB values already multiplied by alpha, less work remains to be done in real time when doing alpha blending. TIFF support both types of alpha, but are frequently mis-labelled.

Question: What are paths?

Answer

Paths are vector-based drawings that can stretch and re-shape and will not lose detail. In Photoshop, you can use a path as a vector mask for a layer. Vector masks, like paths, can be resized without loss of detail. You can denote one path to be a clipping path, and use it to define transparent areas in images. This allows you to isolate the foreground area and make everything else transparent.

With Scene7, you have the option to create a vector mask upon upload into SPS based on the clipping path. In addition, all path information, including clipping paths, can optionally be returned as part of any dynamically generated image response. It is also possible to use path information to dynamically define transparent areas of a layer or image.

In a future version of Scene7, it may also be possible to dynamically crop a layer or image based on a path.

Question: Can a mask be created based on a specific path name?

Answer

Upon upload into Scene7, only the clipping path can be used to automatically create a mask. However, we do have support for referencing a named path included in the requested image which will mask out all of the image area that falls outside the path definition. This does not require extracting the path to a mask within SPS, since the path can be used through standard Scene7 Image Serving requests.

Question: Is it possible to dynamically mask out all of an image area that falls outside of a path definition?

Answer

Scene7 does support referencing a named path included in the requested image which will mask out all of the image area that falls outside the path definition. This does not require extracting the path to a mask within SPS, since the path can be used with standard Scene7 Image Serving requests.

The image serving command is called clipPathE, and you can find documentation on this command here:

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-clipPath

Here are a couple of examples showing the use of clipPathE:

No path called, no transparency:

http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100

Path called, shows transparency:

http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100&clipPathE=Path%201

Another image with different paths defined:

http://s7d9.scene7.com/is/image/TechSupport/grilltest?wid=400&bgcolor=200,100,100&clipPathE=Path%201 http://s7d9.scene7.com/is/image/TechSupport/grilltest?wid=400&bgcolor=200,100,100&clipPathE=work%20brown

Question: Is it possible to crop an image dynamically based on a path or clipping path?

Answer

This functionality as added in our Spring 2014 release.

There are alternate approaches: The IPS API offers getPhotoshopPath and getPhotoshopPathNames. The image server can crop and mask based on path name.

Question: What is developer mode for?

Answer

Developer mode is used when you would like to create template without using the User Interface (UI) design tools. A template will go into developer mode if devmode=true is in the template, or if the parser is not able to parse the template.

Question: How do I use the template request command?

Answer

The image serving documentation provides some information on the template request command:

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-template

From the documentation:
When template= is present, the object specified in the request path will not be applied as the source for layer 0, but can be referenced as a src= or mask= anywhere in the template by using the predefined path variable $object$ as a src= value. catalog::Modifier of the object specified in the request path is only applied in connection with the substitution of $object$ within the template, while catalog::PostModifier is always applied.

Here is an example:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$

http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$

Original URL:

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

add a new layer 0, to fix issue of hairline not appearing correctly. Layer 0 is downsized to 270x270 because the image is square, and layer 1 therefore is cropped to 270x270:

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

Use the template feature to allow the template to be used in a preset:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?template=jbsimpletemplate&wid=360

like so:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$ http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$

Here is the template (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

And the preset (jbpreset):

wid=360&fmt=jpeg&qlt=85,1&op_sharpen=0&resMode=sharp2&op_usm=1,1,6,0&iccEmbed=0&template=jbsimpletemplate

Question: Why doesn't SPS create a template for my single layer PSD?

Answer

By design, only multiple layer PSDs can be converted to a template. A single later template has no advantage as a template and does nothing more that duplicating the number of assets for the company for the image and template.

Za ta izdelek je bila izdana neprenosljiva licenca za priznanje avtorstva, nekomercialno uporabo in skupno rabo pod enakimi pogoji 3.0  Objav v storitvah Twitter™ in Facebook ne urejajo pogoji pogodbe Creative Commons.

Pravna obvestila   |   Pravilnik o zasebnosti v spletu