Tutorial ~ Step 3. Effects and Colors

  Welcome   Applications   Sites

ß QUICK LINKS  


You are now ready for the most enjoyable step. In this step you will choose your graphic colors, render your graphic and if desired, add special touches to your graphic. Click on the "Output" tab underneath your Workspace. You are now ready to select your graphic colors. 

Choosing your graphic colors

In StyleSkin you can select your own combination of colors for your graphic or make a choice from around 18 skin color schemes already offered by StyleSkin. 

If you would like to view the skins StyleSkin offers, press the "Show Effects Browser" button  (Standard Toolbar). The first time you use this browser it will need some time to render a thumbnail of each scheme. However, once it has rendered these images it will remember these for future reference. These skins are offered, in part, to demonstrate the endless myriad of colors and effects that can be created with StyleSkin. If you would like to use one of the offered schemes just double click on the effect or alternatively you can select the effect name under "Effects" (Menu Bar).

If you would like to choose your own colors for your skin, show the details under "Skin Colors" (Tool Palettes Bar). To change the default colors simply right click on a default color and select a new color from the resulting color palette dialog. 

To render your skin colors at any time all you need to do is click the "Render Complete Skin" button (Standard Toolbar). If you only wish to render/re-render a part of your output skin then either click on the down arrow beside the "Render Complete Skin" button and select the part you wish to render or click on "Render" (Standard Toolbar) and select the form part you wish to render. 

Congratulations! You have created your own skin. However, StyleSkin doesn't stop there! StyleSkin has many features to allow you to adjust and tweak your "Output" graphic to gain your desired appearance. Below we have divided these features into the part of the "Output" graphic they relate to: 
Form Features

Button and Text Features

Display Features
; and 
Photo Rendering
. Enjoy experimenting and don't forget to save your designs!

Saving your output

If you are happy with this graphic don't forget to save it! To save your graphic ensure that the "Output" tab is selected in your Workspace area and either click on the "Save Image" button (Standard Toolbar) or click on "File" (Menu Bar) and choose "Save Image/Template as". You have a choice of saving your image as either a bitmap or jpeg (underneath where you enter the filename). If you choose jpeg then StyleSkin will by default save it at a high quality level. This means that the size of your file will be larger but the quality of your image will be better. If you would like to decrease the Jpeg file size go to "Tools" (Menu Bar), "StyleSkin Options" and click on "Jpeg Image Quality".

If you have selected your own textures and skin colors then you may also wish to save these as an Effect setting which you will be able to apply to any future templates. Any Effect settings you save to StyleSkin's default "Effects" folder will automatically be listed under "Effects" on the Menu Bar. You can save effects by clicking on the "Save Effect Settings" button (Standard Toolbar) or by clicking on "Effects" and choosing "Save Effects Settings as". You can even save any notes to yourself about your Effect by typing notes in the "Effects Notes" area (Tool Palettes Bar) before you save.

Useful tools to remember

 Useful tools to remember

l Undo/Redo

When experimenting with different graphic alterations don't forget to make use of the Undo or Redo features (the curved arrows on your Standard Toolbar). The Undo tool allows you to quickly return to a previous graphic. It can also be useful to toggle between the previous and current image to see what changes have occurred. By default you have five levels of undo. You can increase this up to ten by clicking on "Tools" (Menu Bar), "StyleSkin Options" and "Levels of Undo". 

l

Zoom/Preview

This box shows a small section of your graphic being rendered. This is handy because you can quickly get an impression for how your image will appear and if you wish to make more changes you can stop the render to make them without having to wait for the full image to be rendered.

l

Fine Slider Adjustments

When adjusting any of the Tool Palettes Bar sliders remember that you can make fine adjustments by left clicking on the slider and using your left or right keyboard arrows to increase or decrease the value.

l

Rendering Individual Skin Parts

Remember you don't have to render the "Complete Skin" for any little changes you do. If you have just made an adjustment to one part of the skin, such as a flat area, then you can choose to only render that part of the skin. Click on "Render" (Menu Bar) and select the part you would like to render or click the down arrow beside the "Render Complete Skin" button and select the skin part to be rendered. This can also be handy if you want to have completely different skin colors, textures etc for different parts of the graphic (such as the buttons or flat areas). 

 

Form features

Auto-Tone Skin

StyleSkin can automatically be set to render your skin in a middle tone for the color you have chosen. This helps to create a more visually convincing skin as the lighting and shadows can appear more even over the different form areas. To turn this feature on go to "Tools" (Menu Bar) and check "Auto-Tone Skin". When this is checked StyleSkin will automatically adjust the skin tone whenever you render.

If you would like your skin to be rendered with the exact skin color you have chosen, ensure that Auto-Tone Skin is not checked.


Skin Rendering Adjustments

You can adjust the skin rendering properties under "Skin Rendering" (Tool Palettes Bar). Following is a brief description of each adjustment that can be made. After making your adjustment re-render your graphic. When you are experimenting with these adjustments it can be handy to remember the "Undo" and "Redo" buttons (Standard Toolbar) to quickly return your skin to its previous state for comparison. 

Edge Width  - This effect can vary the amount that the graphic areas appear to be raised or sunken by adjusting the reach of the lighting around form shapes. Increasing the edge width also makes the edges around shapes to appear slanted. Minor adjustments can make big changes so you should adjust in small amounts. If your template items are close together you may not have enough room between them to see the full effect.

Edge Depth - This effect can alter the depth appearance of edges in your graphic by adjusting the lighting levels around form shapes. To get the best results this should be used in combination with "Edge Width". For example, to make items on your form appear further raised you should increase both Reach and Depth.

Tex. Contrast - this is useful if you want to strengthen the texture pattern that is shown on your "Output" graphic. The higher the contrast number the stronger the texture. 

Brightness - adjusts the brightness of the entire graphic. This is handy if you feel that the entire graphic is a little too dark or bright.

Create Gutter - this feature allows you to strengthen the appearance of edges around shapes. This feature may be particularly useful if you do not have a border around your template shapes or have a light skin.


Smoothing Jagged Edges

As StyleSkin renders your template based on the color of the pixels in your template, you may find with curved shapes that edges appear jagged. To remove the jagged appearance, StyleSkin includes 3 methods for smoothing edges.  

Smooth lines - this tool is very good for smoothing around any shape edges that have a border. After rendering your final edge click the "Smooth lines"  button on the Standard Tool bar or click "Render" (Menu Bar), "Accents" and then "Line Smoothing".  Note: if your template does not have borders around your shape please also use one of the other smoothing methods.

Pixel Smooth - this tool is for smoothing around all edges. It is useful to smooth edges that do not have a border or where you have allocated text as a button. To apply smoothing, after you have rendered your complete skin, click on "Render" (Menu Bar), choose "Accents" and then "Pixel Smooth". 

Button Smooth - this tool is for smoothing the color on buttons. It does not smooth edges. This tool may be useful if you want the shine or shading of a button to be a little smoother. To apply smoothing, after you have rendered your complete skin, click on "Render" (Menu Bar), choose "Accents" and then "Button Smooth". StyleSkin will ask you for a smoothing level. It is recommended that you use a very low number (i.e. 1, 2 or 3). Using a high number will result in the button being smoothed to a single color and appearing as a flat area.


Surface Shine

This adds the effect that some areas are reflecting light. This accent can also give your skin a glossier appearance. You can add Surface Shine after rendering your complete skin by clicking on "Render" (Menu Bar), choosing "Accents" and selecting Surface Shine. The shine color used is the "Shine" color in the "Button Colors" tool Palette. You can adjust the Surface Shine features to your liking (such as the reflection (strength), width, offset (distance from form parts), as well as let the shine fall over text and fade the shade into the skin) under "Surface Shine" (Tool Palettes Bar). 

Surface Shine will render over the current Output image therefore when experimenting it is a good idea to use "Undo" (Standard Bar) to undo the last Surface Shine before implementing a new Surface Shine.


Illumination Angle

In StyleSkin you can set the angle which the form's rendering will be illuminated from. This can be changed simply be moving the handle under "Illumination Angle" (Tool Palettes Bar) to the preferred angle or by simply entering a new degree in the box underneath. The platform at the base of the handle will show the illumination angle that will be used in the next rendering.


Photo Skin

In StyleSkin you can use a photo to create your skin. This topic is covered further below under "Photo Rendering". Also see the "Copy Texture Color" topic below for how to wrap your photo around a skin.


Color Variance

Color Variance allows you to add interesting designs to your graphic as well as have multi-colored graphics. In simple terms, this gives you the option of altering the color on your graphic where the darker areas of your texture occur. The color you can apply depends on the Skin colors you have chosen and how much you vary them. The "Color Variance" options are located on the Tool Palettes Bar. Below is provided a visual demonstration of the effects of color variance.

Shown below is a texture and skin colors for an example skin. Without making any "Color Variance" adjustments the skin appeared as shown below right.


Reptile Texture 
(Texture Render/Effect Density of 113)

è

è

è


Skin Colors chosen

è

è

è


Graphic with no Color Variances. 
(Skin Rendering/Tex. Contrast of 25)

However, below right you can see the graphic after Color Variance adjustments (also shown) have been made. For this skin the same "Texture" and "Skin Color" settings as shown above were used. You can see that the yellow color now only appears where the palest/whitest areas of the texture were. How each adjustment was used to create this result is explained in Texture Threshold below:


Texture Threshold
By adjusting this slider you change how much of the graphic will be replaced with the altered color. This feature measures the tone of each pixel in your texture, where the tone is less than the threshold you have set the corresponding part on your graphic will be recolored. For example:

 

l To add a different color to only the areas corresponding to darker toned areas on your texture choose a low percentage.
l To add a different color for the majority of the skin except for areas corresponding to the whitest toned areas of your texture choose a high percentage. The example's "Texture Threshold" is changed to 80% - this means that most of the graphic's color is actually colored with the altered color (which in this case is red). In the new skin you can see that the yellow color now only appears where the palest areas of the texture occur.

 


Red/Green/Blue Color Adjustments
After selecting your threshold percent you need to create your variance color. This is called variance color because you decide how much you would like to vary from the original "Skin Colors" you have chosen for your Base and Buttons. For example, the example "Skin Colors" above show a yellow-gold color for the skin. The color is made up of the values: Red = 255, Green = 220 and Blue = 10. For your Color Variance you need to say whether you would like your Variance color to have more or less red/green/blue than your current values.

To change a color level tick the box beside its name and move the slider. If the slider is on 1.0 then the color's value will not be changed from your original color. If you move the sliders above the 1.0 value then the tone of your color will be brighter and if you adjust it below the 1.0 your color tone will be darker.

As shown in the example, a dark red was required so the sliders were adjusted beneath the 1.0 level to gain a darker tone. The yellow "Base" color contains a very high level for red so the red slider needed to be lowered considerably. The yellow color contained very little blue so it needed to be adjusted up quite high to obtain the required color.

If you are unsure of the red/green/blue values to obtain your color just play with the adjustments and watch the preview area to see what sort of color will appear. 


Color Variance with chosen settings

 


The example skin with the Color Variance settings shown above

You cannot vary a color that does not exist in your Base or Button color. For example, if the Base or Button color has a zero for the red, green or blue value then any variance adjustments to that particular color will have no effect. To allow for flexibility with your Variance color it is a good idea to make sure that your Base and Button colors contain at least a small value of each color.

Autolevel Out 
The Autolevel Out feature under "Color Variance" helps even out the tone of the varied color if required. It may aid the strength the textured areas color contrast.


Copy Texture Color

If you have imported a colored texture you can choose to have the color tone transferred over onto your skin to give the effect of the photo being wrapped around the skin. To do this, choose a middle grey (Red - 128, Green - 128, Blue - 128) for your skin colors (Tool Palettes Bar). Also adjust both the "Tex. Contrast" and "Brightness" (under "Skin Rendering" on the Tool Palettes Bar) up to 100. After you have skinned your graphic click on "Tools" (Menu Bar), "Render Tools" and "Copy Texture Color" to have your skin colors transferred onto the skin. 


Export to Autorun Maestro

If you are using StyleSkin to make a menu for Autorun Maestro then StyleSkin will automate a lot of the image transfers and begin the menu set up process for you. To make use of this feature, once you are happy with your rendered graphic (with Up button images) click on "Tools" (Menu Bar) and "Export to Autorun Maestro". A screen will appear that will allow you to choose the directory to create your menu in as well a list of processes that StyleSkin will do. If you don't want StyleSkin to do some of the processes then simply uncheck the boxes beside them. Please note that StyleSkin is only able to automatically export to Autorun Maestro if you created your template within StyleSkin.

If you created your template outside of StyleSkin then don't be concerned. Simply render your graphic and save the image into the same directory as Autorun Maestro. If you have buttons use your graphics package to select around each of your button images for up, mouse over and down positions and save them also into your Autorun Maestro directory. Run the Maestro editor (MaestrEd.exe) in your Autorun Maestro directory to create your menu.

 

Button and text features


Button Types

StyleSkin offers six different button styles: Skin, Dome, Gel, Resin, Gradient and Concave. The button type can be selected by clicking "Render" (Menu Bar), and selecting "Buttons" or clicking the arrow beside the button image (default setting "Render - Up Position") on the Standard Toolbar and selecting the preferred button type. The greyed out button type is the currently selected option.

The color/s for each button type are set in the "Button Colors" palette (Tool Palettes Bar). When selecting a button type, StyleSkin will offer to change the colors and variables for the button type. This enables you to see how the button is intended to appear. It is recommended to accept the suggestion, you can then alter the colors and variables to suit your theme. It may be helpful to keep the shading similar to the example e.g. replace a light color with another light color, to keep the button effect convincing.

The  settings for each button type can be altered in the "Button Rendering" palette (Tool Palettes Bar) but vary for each button type. See the button type below for information on the settings.

The settings for the text on buttons can also be altered. See the "Button Text" topic below.


Button Positions

For each type of button you can also create button images for up, mouse over (or active) and down positions or even create a blank area for the buttons. To do this go to "Render" (Menu Bar), select "Buttons" and select the button position you would like to render. The ticked button type is the currently selected style of button. Alternatively, you can also click the arrow beside the "Render: Up Position" button on the Standard Toolbar and select the position you would like to render. The greyed out position is the currently selected option.

Up Position - This is the button appearance in its usual position.

Active Buttons - This is the appearance of the button when the mouse is held over the button. Although a different image for the active state is not always used, having a slightly altered active button image is useful to indicate to the user when their mouse is aligned correctly for the button. An active button will often appear slightly lighter in the center of the button. The color for an active button can be changed in the "Button Colors" palette by right clicking on the "Active Btns" color shown and selecting the preferred color.

Mouse Down - This is the appearance of the button when the button has been clicked and is useful to indicate to the user that an action has taken place. A down button will often be darkened in some manner. The color for a down button can be changed in the "Button Colors" palette by right clicking on the "Down Btns" color shown and selecting the preferred color.

Blank Flats - This will render the button area as a flat area. This may be useful if you would like the background graphic without the button images as part of it.

Recessed Buttons - When this option is ticked the buttons will appear recessed into the form area, giving an indented look.

Floating Buttons - Floating buttons appear to float on top of the form, casting a shadow on underlying areas.


Skin Buttons

Skin buttons use the same skin style and settings as the form area of the skin ("Skin Rendering" palette). The button color is set by right clicking on the "Primary" color under the "Button Colors" (Tool Palettes Bar). 

Active or Down Buttons - For Skin Buttons when you create an Active or Mouse Down button the text on the button will appear slightly illuminated or blurred. The color used to add the illuminated effect can be altered in the "Button Colors" palette under the Inner Glow heading.  You can adjust how strongly the illuminated effect will appear by adjusting the "Active Button" or "Mouse Down" slider located under "Button Text" (Tool Palettes Bar). As the colder colors do not illuminate as well you may find that you will need to adjust the sliders higher for these colors.


Dome Buttons

Dome buttons create a button with a domed profile. For added control both the light and dark colors can be set for the shading, allowing for color effects and even reverse (indented) dome buttons.

Button Colors - colors are set in the "Button Colors" palette (Tool Palettes Bar) as follows:

Primary Color - The main color of the button, midway between the bright centre and dark edge. This color is only used when rendering Up Buttons. When rendering Active or Down buttons the respective Inner Glow color is used.

Secondary Color - The outer area of the button, which would normally correspond to a dark color.

Shine Color - The inner shine area of the button, which would normally correspond to a light color.

Text Color - The color of text in the button

Button Rendering settings (Tool Palettes Bar) for Dome buttons are as follows:

Center - This controls the placement of the centre of shine (Primary color). A value of 50 will place the center of brightness in the center of the button. Moving the value to a lesser value will move the center of shine towards the source of light, while a greater than 50 value will move it away.

Center Intensity - This controls the intensity of the shine (Primary color), a greater value will increase the range and intensity, while a lesser value will reduce it.

Gutter - The gutter controls the width of the shaded black band around the button shape which provides the effect of depth.

Quality - Controls the quality of the rendering. The greater the quality the smoother the shading will be, but the slower the buttons will render. Differences in appearance can also be achieved by adjusting the Quality slider, such that a quality of 1 looks completely different to a quality of 10.

Transparency - Controls the amount of texture which appears on, or shows through, the button.

Active or Down Buttons - For Dome buttons when you create an Active or Down button, StyleSkin will use the "Button Colors" palette (Tool Palettes Bar), Inner Glow - Active Btns or Down Btns color instead of the "Primary" button color. This enables the user to select a preferred color to indicate the button change of state. An active button will often appear similarly colored but lighter than the up button. A down button will often appear darker than the up position button. 


Gel Buttons

Gel Buttons create a button which looks like a solid clear gel with text over a colored background.

Button Colors - colors are set in the "Button Colors" palette (Tool Palettes Bar) as follows:

Primary Color - The color of the button.

Text - The color of text that appears in the button.

Shine - The color of shine that reflects off the button.

Button Rendering settings (Tool Palettes Bar) for Gel buttons are as follows:

Reflection - The intensity of the reflection off the button. A higher slider value will increase the intensity.

Reflection Width - The width of the reflection off the button. A higher slider value will increase the width.
Generally a lower width value will increase the button's reflective appearance.

Reflection Offset - The reflection offset controls the distance from the edge the reflections starts from. A higher slider value will be further from the button edge.

Refraction -
This will alter the extent of light refracted or deflected across the button. Changes will affect how light is cast onto the background of the button. A higher value will decrease the background lighting level.

Contrast - The contrast controls the intensity of the refractive effect. A higher slider value will increase the refractive effect.

Transparency - Controls the amount of texture which appears on, or shows through, the button. The transparency should only be adjusted in small amounts if you wish to keep the gel button appearance.

Active or Down Buttons - When you create an Active or Down button, StyleSkin will use the "Button Colors" palette (Tool Palettes Bar), Inner Glow - Active Btns or Down Btns color as a central glow color in the button. This enables the user to select a preferred color to indicate the button change of state. An active button will often appear similarly colored but lighter than the up button. A down button will often appear darker than the up position button. 


Resin Buttons

Resin Buttons create a button which looks like a translucent plastic with the option of a color gradient (horizontally banded inner glow) and multiple shine bands. With the multiple shine bands, two distinct looks can be achieved by illuminating from an angle or 0º. Similarly the same effect as that achieved by illuminating from 0º can be achieved from other right-angles (i.e. 90º, 180º, 270º).

Button Colors - colors are set in the "Button Colors" palette (Tool Palettes Bar) as follows:

Primary Color - The color of the inner glow in the button.

Secondary Color - The color of the outer areas of the button.

Text - The color of text in the button.

Shine - The color of shine reflecting off the button.

Button Rendering settings (Tool Palettes Bar) for Resin buttons are as follows:

Reflection - The intensity of the reflection off the button. A higher slider value will increase the intensity.

Reflection Width - The width of the upper reflection band on the button. A higher slider value will increase the width. Generally a lower width value will increase the button's reflective appearance.

Gutter - The gutter controls the width of the shaded black band around the button shape which provides the effect of depth.A higher value will increase the band width.

Inner Glow - Controls the amount and width of the primary color band. A higher slider value will increase the amount of the primary color.

Refraction - This will alter the intensity of the lower band of shine. A higher value will increase the shine.

Transparency - Controls the amount of texture which appears on, or shows through, the button. 

Active or Down Buttons - When you create an Active or Down button, StyleSkin will use the "Button Colors" palette (Tool Palettes Bar), Inner Glow - Active Btns or Down Btns color as a central glow color in the button. This enables the user to select a preferred color to indicate the button change of state. An active button will often appear similarly colored but lighter than the up button. A down button will often appear darker than the up position button. 


Gradient Buttons

Gradient buttons create a button that incorporate a gradient between two colors or shades.

Button Colors - colors are set in the "Button Colors" palette (Tool Palettes Bar) as follows:

Primary Color - The upper color of the color gradient in the button.

Secondary Color - The lower color of the color gradient in the button.

Text - The color of text in the button.

Shine - The color of shine reflecting off the button.

Button Rendering settings (Tool Palettes Bar) for Gradient buttons are as follows:

Reflection - The intensity of the reflection off the button. A higher slider value will increase the intensity.

Reflection Width - The width of the reflection and shading bands on the button. A higher slider value will increase the width. 

Gutter - The gutter controls the width of the shaded black band around the button shape which provides the effect of depth. A higher value will increase the band width.

Refraction - Controls the vertical placement of the center of the color gradient. A higher value will increase the primary colors extent on the button.

Contrast - The contrast controls the variance between the color gradience. A higher slider value will increase the strength of the primary and secondary colors.

Transparency - Controls the amount of texture which appears on, or shows through, the button. The transparency should only be adjusted in small amounts if you wish to keep the gradient button appearance.

Active or Down Buttons - When you create an Active or Down button, StyleSkin will use the "Button Colors" palette (Tool Palettes Bar), Inner Glow - Active Btns or Down Btns color as a central glow color in the button. This enables the user to select a preferred color to indicate the button change of state. An active button will often appear similarly colored but lighter than the up button. A down button will often appear darker than the up position button. 


Concave Buttons

Concave buttons create a button which has a raised out rim, with an indented center. For added control both the light and dark colors can be set for the shading, allowing for color and reverse shading effects.

Button Colors - colors are set in the "Button Colors" palette (Tool Palettes Bar) as follows:

Primary Color - The bright color of the button, which would normally correspond to the area of the button well lit. 

Secondary Color - The dark area of the button, which would normally correspond to the area less illuminated.

Text - The color of text in the button.

Button Rendering settings (Tool Palettes Bar) for Concave buttons are as follows:

Center - This controls the intensity of the shine (Primary color), a greater value will increase the range and intensity, while a lesser value will reduce it.

Quality -
Controls the quality of the rendering. The greater the quality the smoother the shading will be, but the slower the buttons will render. Differences in appearance can also be achieved by adjusting the Quality slider, such that a quality of 1 looks completely different to a quality of 10.

Convex Edge  - Controls the width of the convex outer edge portion of the button.

Transparency - Controls the amount of texture which appears on, or shows through, the button. The transparency should only be adjusted in small amounts if you wish to keep the gradient button appearance.

Active or Down Buttons - For Concave buttons when you create an Active or Down button, StyleSkin will use the "Button Colors" palette (Tool Palettes Bar), Inner Glow - Active Btns or Down Btns color instead of the "Primary" button color. This enables the user to select a preferred color to indicate the button change of state. An active button will often appear similarly colored but lighter than the up button. A down button will often appear darker than the up position button. 


Button Text

The Button Text controls are the same for all of the button types with the exception of Skin buttons.

The controls for Skin Buttons are:

Active Button/Mouse Down - the text on an Active or Mouse Down button appears slightly illuminated or blurred. The color used to add the illuminated effect can be altered in the "Button Colors" palette under the Inner Glow heading.  You can adjust how strongly this will appear by adjusting the "Active Button" or "Mouse Down" slider located under "Button Text" (Tool Palettes Bar). As the colder colors do not illuminate as well you may find that you will need to adjust the sliders higher for these colors.

The controls for all of the other button types are as follows:

Transparency - increase this slider to increase the extent the texture shows through the button text.

Shadow - this slider enables you to provide a shadow for your text. A zero equals no shadow. Increasing the slider increases the distance away the shadow is cast from the text.

Reflection - this slider controls how clearly the text is visible in areas where the light angle creates a reflection on the button. This can add realism to the appearance of the button text but may decrease readability. A low slider value will show the text as solid and a higher value will lighten the text where any button reflection falls. The text tone is still controlled by the text transparency value. Therefore, if you would like the text to be clear irrespective of texture and reflection, ensure that both the transparency and reflection sliders are set to low values.

 

Export Buttons

If you are creating your graphic for a web page, menu, program or other such items then you may wish to have cut-outs of your buttons. Rather then doing this manually in your graphics software, StyleSkin can automatically select around the buttons on your current output graphic and save them as separate files. To do this simply choose "Tools" on the menu bar, "StyleSkin Options" and select "Export buttons". A dialog will appear which will allow you to choose the button name options as well as decide whether you would like to save your buttons as jpegs or bitmaps. Don't forget to render your buttons in the active and down positions and export them after each rendering also.

StyleSkin can only export your buttons if you drew your template in StyleSkin. If you imported your template then you will need to use your graphics software to select around each button and save them.

Button Glow

StyleSkin allows you to give your buttons a slight glow effect if desired. How well this effect appears will depend on your skin colors and button style. To add this effect simply click on "Render" (Menu Bar), choose "Accents" and "Button Glow". By default StyleSkin has a yellow color for the glow. This color may not be appropriate for your skin colors. You can make adjustments to the brightness, reach and color of the button glow effect under "Button Glow" (Tool Palettes Bar). The Button Glow effect is added over the top of the current button image, therefore when experimenting with Button glow remember to "Undo" the last button glow before rendering the button glow again. 


Transpose Text Down

This is useful for users who have imported their template. By clicking on "Transpose Text Down" under "Tools" (Menu Bar), the text will appear slightly moved down on your template. If you then re-render your graphic your text will also be moved slightly down on your graphic. This is useful for down button or text images which often use the effect of moving the text slightly to give the impression of being pressed.


Auto Text Down

When StyleSkin renders button down positions it also by default moves any text on the button slightly down. This helps give the impression that the button has been pressed. If you don't want the text to be moved then uncheck the "Auto Text Down" option under "Tools" on your Menu Bar.


Display features


Display Rendering Adjustments

StyleSkin allows you to adjust how inset or sunken the display area will render. Under "Display Rendering" (Tool Palettes Bar) you are able to adjust the Depth and the Density. 

Depth allows you to adjust how inset the display area appears. 

Density will adjust the shadow lighting levels. To gain the best results it is a good idea to experiment with adjusting both the depth and density together. 

Refraction - Increasing the refraction level will also increase the appearance of the display's depth. Refraction focusing on the appearance of depth irrespective of the lighting angle.


Display Glow

This accent helps to give you the effect that the display is illuminated. To make use of this accent, render your graphic, go to "Render" (Menu Bar), choose "Accents" and select "Display Glow". 

You can adjust the brightness and extent of the glow under "Display Accents" (Tool Palettes Bar). Accents will appear over the "Output" graphic you already have. Therefore if you are making adjustments remember to undo your previous "Display Glow" render or you will have a doubled accent or may not notice any difference.


Display Grain

This adds a slight 'grainy' accent to your display to make it look more like an LCD screen. To do this all you need to do is render your graphic, then go to "Render" (Menu Bar), choose "Accents" and select "Display Grain". You can adjust how strongly this grain will appear under "Display Accents", Grain (Tool Palettes Bar).

Accents will appear over the " Output" graphic you already have. Therefore if you are making adjustments remember to undo your previous "Display Grain" render or you will have a doubled accent or may not notice any difference.


Lamp Displays (On and Off)

Lamp Displays adjust the brightness of the display area to make it appear as though it were an indicator lamp, either on or off. To add this accent render your graphic, go to "Render" (Menu Bar), choose "Accents" and select "Lamp Displays" (On or Off).

 

Photo Rendering

StyleSkin even includes features to allow you to turn a photo into a skin! To make use of Photo Rendering you should import a photo as your "Texture". If you need more help with this please read Step 2, Import your own texture.

If you would like to wrap your photo around a normal skin see the "Copy Texture Color" above.

To see how your "Output" graphic will appear with the Photo Skin default settings, press the "Render", "Photo Render", " Complete Skin". If you only wish to render/re-render a part of your output skin then click on "Render" (Standard Toolbar), "Photo Render" and select the form part you wish to render.

StyleSkin allows you to make many adjustments to the way your photo will render. As many of the "Tool Palettes Bar" controls relate to normal skinning adjustments, it is better to convert these controls to Photo Rendering controls. Click on "Render" (Menu Bar), "Photo Render" and "Photo Control Descriptions". You will notice that many of the "Tool Palettes Bar" descriptions will change. Following is a description of the new tools and how they will adjust your photo skin. Any tools on the Tool Palettes Bar that are not discussed below continue to operate the same for Photo Rendering as they did for Standard Rendering.

You can sometimes get good results from using a mix of both "Photo Rendering" and Standard Rendering with your photo skins. For example, try using Photo Render for the Display, Flat and Button areas but use standard rendering for the form. This results in your image appearing like a drawing through your form colors but being a full colored photo showing through the display area.

 
The Skin Colors tool palette does not operate with Photo Rendering. To change the color of the buttons, displays and flat areas, use Color Variance.


Color Variance

For "Photo Rendering" the "Color Variance" tool can be used to change the default color for the display, buttons and flat area. The first slider ("Texture Threshold") is not used with Photo Rendering. To adjust a color tick beside a Red, Green or Blue value and move the slider above 1.0 if you would like more of that color or below 1.0 for less of that color. By experimenting with the three sliders you should be able to achieve any color that you desire. To see your changes re-render your photo skin.


Button Rendering

These controls operate the same as they do for "Skin Rendering" except they only apply to the buttons. Please read "Skin Rendering Adjustments" above for information on these controls.


Display Rendering/Flat Rendering

Both the "Display Rendering" and "Flat Rendering" controls operate the same way but relate to either the "Display" area or "Flat" area of the form. For the best results it is a good idea to use the "Contrast" and "Brightness" controls in conjunction with each other.

Contrast - Use this control to strengthen or fade your image's appearance through the display/flat area. A higher slider value will make the design lines appear stronger and vice versa.

Brightness - Use this control to lighten or darken the hue of the entire display/flat area. A higher slider value will result in a brighter display area.


Border Shade

This control allows you to adjust a thin line of shade that appears around your Display, Buttons and Flat areas. This line of shading has been included to allow you to decide how clearly you would like to define the areas on your form. If the "Border Shade" slider is adjusted to a very low value then once you re-render your skin a thin black line will appear around your skin items. The line shade will appear lighter the higher you adjust the slider value.

The "Import Texture" button is offered as another way to import your photo into the texture area. For more information on Importing Textures please read "Step 2, Import your own texture".


Display Edge

Fade Reach - This control allows you to adjust the appearance of your display area to either appear flat or slightly raised. A higher slider value will make your display appear flatter and vice versa.

Shade - Use this control to lighten or darken the shade of the entire display area. A higher slider value will result in a more brightly colored shade in the display area. For example, if you chose a red color for your "Color Variance" then a low slider value would result in a deep red and a high slider value will result in a bright red. This control differs from the "Display Rendering" Brightness tool as the brightness adjusts the hue or the amount of black or white in the display area.

 

That concludes this Tutorial! If there is anything contained in this tutorial which you are still having difficulty with or that we have not mentioned then please do not hesitate to contact us. Not only might we be able to help you but we can also include it here for everyone else. Have fun experimenting with StyleSkin!

 

 

 

 

© 2007 POLLEN SOFTWARE, ALL RIGHTS RESERVED.