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
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.
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.
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.
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.
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.
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 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.
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
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.
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 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 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 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 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 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 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.
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.
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. |
|
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.
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.
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.
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.
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.
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.
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.
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".
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.
|