Content

Color-Shifted Images

Color-Shifting

Color-shifted images can be used in: 

• Menu Elements:  Images will follow the color you select for each "element state" (Normal, Hover or Selected).  A menu element is considered to be selected when it is the current page.
• Menu Box Backgrounds:  You can select a background image, as well as one color, for a menu bar.
• Box Backgrounds:  You can select up to two colors on the style sheet, as well as on the Edit Layout Tab.

Color-shifted images cannot be used in:

• Page Backgrounds.
• Images within text boxes.

How Color-Shifting Works

The principle of the shift is quite simple:  Select a "source" color in your image.  The selected color, as well as other colors that are "close" to that color are "shifted" to one of the colors in your palette.  Remember, you can select up to two colors to be shifted.   The key to all of this is to decide in advance which colors you want to shift, and which ones you don't want to shift.  Because it is not possible to indicate where in the image you want to shift the color, the shift is based on the color itself.

Ideal Cases for Shifting:

1. You have a single, solid color in the middle of an image that you want to "shift".
2. You want shift the color of an abstract image that has been filtered so that all of the colors are different shades of the same color.  Experiment with selecting different shades of the source color, choosing a Range (same idea as "Tolerance" in Photoshop's magic wand), and choosing a Shifting Method (Linear or Bezier). 

It is possible to combine both of these techniques (e.g. shift an abstract image with one color shift, but reserve the other to shift some artwork embedded in that image), as long as the two source colors are far enough apart.

The more challenging case is where you have a color-filtered image that has a color image superimposed on top of it (for example, a person's face).  In this case, because the person's face will very likely contain some of the same colors as the filtered image, the results will be unpredictable.  So if you want to use this type of artwork in a header, it would be a good idea to create the super-imposed image separately, and "float" it over the heading using Layout Mode in siteZen.

Controlling the Color Shift

Source Color

Select the source color by clicking Set Color.  All of the colors in all of the palettes of all of the various image slices (if you are using composite images) will be displayed in order of how often they appear.  In most cases, the first few colors are the ones you want.

Types of Shift

The type of shift greatly influences how well the shift will work.  There are three types of Shift:

• Shift Solid - Used for simple solid color shifts.  You can specify that you want to shift a "range" of RGB colors by specifying that you want to shift all pixels which the red, green and blue no more than X difference from the corresponding color component in the shift color you specify.  The range is very similar to the Photoshop Magic Wand's "Tolerance" setting.
• Shift Solid (Anti-aliased) - Used for artwork that contains curves in the portion that have been anti-aliased with other colors in the artwork.  Anti-aliasing is the choosing of in-between colors to smooth the jagged edges and is used by most graphics projgrams (i.e. Photoshop) when you place one layer on top of another.
• Shift Gradient - Used for artwork containing gradient colors (i.e. 3-D shading).  The gradient shifts are designed to shift all of the colors that are close to the source color in a way that preserves the gradient.  There are two methods - Linear and Bezier.  Linear is recommended, as it generally gives more accurate color shifts.  If your image contains a lot of 3-D shading however, Linear may not produce the results you want.  If this is the case, try Bezier.

Anti-alias to Canvas

The Anti-alias to Canvas feature should be used when you have artwork with a transparent color that was anti-aliased to that color, i.e. artwork created with transparency using "save for the web" in Photoshop.  In most cases your artwork will be adjusted so that it will anti-alias to the background you use for the image.  This is important in order to avoid the "halo" effect.

There are two things that you should know about the Anti-alias to Canvas feature:

• The background is selected color based on the background color you select for the page (or page zone).  If you use an image as your page background, you must also select a background color that is close to the color in the background image.
• Because only one color can be used for anti-aliasing, the image cannot overlap multiple colors.