As StyleSkin is packed
with a considerable number of features we have decided to write this
tutorial to help you take full advantage of what it has to offer. This
tutorial will not only cover the basic steps but also explain all of the
software's intricate features. If you are not yet familiar with
please feel free to work through with this tutorial. If you have any questions,
need further help, would like to give feedback or would like to
contact us for any other reason then please don't hesitate to e-mail
This tutorial assumes
that you have already downloaded and installed StyleSkin. If you
have not yet downloaded StyleSkin feel free to download it here.
To open StyleSkin, click
on your Window's Start button, show all of your programs and choose
StyleSkin. For easy reference, following are some definitions of the basic tools in StyleSkin:
If any of
the above toolbars are not showing, go to "View" on the Menu
bar and check the required toolbar option.
Before you begin
creating your own skin, we suggest new users immediately click the
"Render Complete Skin" button
(Standard Toolbar). This button will create a skin based on all
of the current settings and quickly allows you to get a feel
for what can be created and the processes involved. So if you are new to
StyleSkin, try it now!
Step 1 -
Design Your Template
The first step is to create a simple template for skinning!
automatically shows a default template in your workspace on opening
(shown below). You will notice that there is a bright
color filling each shape. If you look at the Tool
Palettes Bar there is a "Key Colors"
heading (if the
details beneath this heading are not showing click on the arrow
pointing down beside it). Under this heading it shows what
each color will represent on your finished product. For example, in the
default template the yellow will represent a background area, the pink
a flat area, the green a display area etc. So to create your Template
all you need to do is draw the shapes you would like for your skin and
assign them with a "Key Color".
|These colors are only used to designate what the shape
represents - these are not the colors that will appear on your
StyleSkin includes some
simple drawing tools to design your template. However, if you would
prefer a complex design then simply draw your template in your
favorite graphics software and copy it, open StyleSkin, ensure the
"Template" tab in your workspace is selected and paste your image.
When creating your skin outside of StyleSkin there are some points you should be aware of.
Please read about these here
before creating your template.
To create your
template using StyleSkin's drawing tools
any shapes (left click an item to select it) shown on the default template that you don't want and
then press the "Delete
(Drawing Toolbar) or your keyboard's delete key. To
delete several items together, left click and hold
it down while dragging a square around the items you wish
to select or hold down the Shift key while clicking on the
shapes you want to select. The border of the selected items will change
color. To deselect a shape hold down Ctrl and click on the
shape. Press the delete key to delete the selected
draw a shape select the "Draw New Shape"
button (Drawing Toolbar) and then
the required shape.
offers three shapes you can select to draw. These are a
a rounded edge rectangle/square
and an ellipse shape.
For each of these shapes you can choose to draw them with or
without a border of your choice
or a fill color.
|| To actually draw the shape after making your selection go
to the Template Workspace, click the left mouse button and hold
it down, drag the mouse button until the shape is the desired size
and let go of the mouse button. Repress the "Draw New
Shape" button to draw each item.
The "Sample Pixel" button (Drawing
Toolbar) cannot be used in the Template Workspace unless
your image was copied from another program.
If you wish to draw a line
with StyleSkin's drawing facilities simply use the
"Rectangle" button without the "Fill Area"
button depressed and drag it in a straight line.
can resize a drawn shape by right clicking the item (small
"handles" should appear around the item), left
click on one of the handles and while holding the click,
drag the shape to the new size. You can also resize a
selected object by holding down the Ctrl key and using the
keyboard arrows to resize pixel by pixel.
can reposition a drawn shape by positioning your mouse over the
middle of it, left clicking and holding it down while dragging the
shape to your desired position. For finer
movement use the keyboard's arrow keys to move the
selected items one pixel at a time.
A group of selected items can be moved by left
clicking in the middle of the selection and dragging the group
(or using the keyboard arrows) to a new location.
select several items at once, left click and hold it down
while dragging a square around the items you wish to
select. The border of the selected items will change color. Alternatively, to select certain
items only, hold down the shift key and left click on each
item. A shape can be deselected by holding down Ctrl and
clicking on the shape again.
number of selected items can be grouped by clicking the
"Group" button. Grouped items are treated as a
single item which assists with repositioning, copying or
pasting multiple items. Grouped items can be separated at
any time again by clicking the "Ungroup" button.
assist with the aligning of your shapes StyleSkin by default has a
grid set at 4 pixels. You will notice if you drag a shape slowly
in one direction that it will continually snap to a standard grid
spacing. If you would like to increase or decrease this increment
go to "Drawing" (Tool
Palettes Bar) and drag the "Grid
Spacing" tab to the required increment (for fine adjustments
click on the tab and use the left or right keyboard
arrows). If you would like to
view the grid lines on your template press the "Show
would like to stop the snap to grid feature then deselect the
"Snap to Grid"
Toolbar). Selected items in the template area can be moved
irrespective of the grid when using the keyboard arrows.
|| If you wish to enlarge your
template area, click on the corner lines of the template workspace
it to your desired size. Alternatively, under the "Drawing"
"Form Height" and "Form Width" tabs to a desired size. The measure is shown in pixels. This is useful if
you need to make your graphic a specific size.
you have shapes placed on top of each other you may wish to adjust
which one appears on top. You can do this by left clicking on the
shape and then either pressing the "Bring to Front"
button or "Send to
(Drawing Toolbar). If you
have a number of items partially stacked on top of each
other you may wish to move a shape up or down only a
level. In this situation click either the "Bring
Forward" or "Send Backward" button as many
times as is required to have the item correctly placed.
if you accidentally make a change or do not like a change
you have made, it is often easiest to hit the
"Undo" button to undo a change. StyleSkin can also redo any changes that you have undone
by clicking the "Redo" button.
Any of the shapes in a
StyleSkin Template can be cut, copied and pasted by
selecting the item and using the relevant button on the
define what a filled shape represents on your end graphic, right
click on the shape in your Template
Workspace (small boxes should
appear around the item), then left click on the corresponding
item color under "Key Colors" (Tool
Bar). For example
if you have just drawn a shape that you would like to be a button,
after selecting the shape left click on the red color beside "Buttons" under
"Key Colors" - your shape's
fill color should turn red.
Repeat the steps
above until you have all of the shapes and lines that you would
like on your template. You will need to re-press the "Draw New
Shape" button each time you want to draw another shape.
To add text to a
shape you can simply click on the shape and start typing, or
alternatively click on the
shape, show the details under "Drawing"
(Tool Palettes Bar) and type the text in
the "Shape Caption" box. If you wish to alter any text
in a shape you can also do this in the "Shape Caption"
box. The "Text Margin"
that also appears under "Drawing" can be
adjusted to move the text further away from the left edge of the
shape. Text features such as font, font size, bold, italics, underline
and centering can all be located on the Drawing
rendering your graphic StyleSkin needs to perform many
calculations. Therefore, if your template is large then it
will need more time to render your graphic. If you are just
experimenting with StyleSkin or do not yet know exactly what
colors and textures you intend to use, then we recommend you
use a small template which will show you your results
leave areas unrendered
you are creating a graphic that will not be square shaped, you
may wish to leave some areas on your form unrendered. This can
make selecting around your finished graphic in your favorite
graphics software easier. If you are creating an Autorun Maestro
menu that will have transparent areas, then you will also need to
leave areas unrendered. To do this:
a rectangle/square and size it so that it is larger than
your drawn template.
it a color other than one of the "Key Colors" by
left clicking on the "Fill" color
of the "Custom Colors" (If the "Custom
Colors" palette is not showing on the Tool
Palettes Bar, click "View"/"Tool
Your box should change to this color. This will also allow the automatic "Export to Autorun
Maestro" button feature to work correctly with areas
you wish to be transparent.
If you wish, you can change the "Custom Color"
color by right clicking on the box. Although you can
choose any color, if you are creating graphics for a
program or Autorun Maestro we suggest the following color
readings: Red: 223, Green: 223, Blue: 223 (very light gray).
If you later decide to use StyleSkin's "Smooth"
or "Smooth (Plus text)" feature (a great feature
which we often use), we feel this color gives
your graphic's edges the versatility to look good on the
most common backdrop colors. If your graphic will always
appear on a set color, for example if it is included on a
web page, then we recommend you use the web page background color as your
this shape behind your other form items by clicking the
"Send to Back" button (Drawing Toolbar).
you render your template any areas that are not a key color will
not be rendered.
Saving and Opening Template
you have created your template you are ready to move on to the
It is a good idea to save your template
now. To do this ensure that the "Template" tab on your
Workspace is selected, click the "Save Image/
Template" button or go to "File" on the Menu Bar and
select "Save Image/ Template".
allows you to save your templates, textures and Outputs. It
determines which of these you wish to save by which one of
these is selected in your Workspace at the time of saving. If
you want to save your template then make sure you have the "Template" tab
selected on your workspace
before you click "Save Image/ Template".
When creating your skin you may find there are times
where you want to go back to the original saved
template without loosing the currently rendered
Texture and Output skin. The "Restore Template
from File" button is very useful for doing just
that. It will simply replace the current template
with the last template saved with that name.
To open a template you have created click "File" on the Menu Bar and
Select "Open Template" or click the "Open Template" button
on the Standard toolbar. You can also select a template by clicking the
"Open Template browser" and double clicking the template image or
selecting the thumbnail and clicking the Load button. If not all of the template
images are showing press the "Update" button.
open a new template click the "New Skin" button or "File" on
the Menu bar and "New Skin".
to note when creating your template outside of StyleSkin
offers a button exporting feature which automatically cuts
around and saves a copy of each button. This feature does not operate
for imported templates. If you need separate button images then we recommend that once you have
rendered your output
graphic, copy the graphic (click on edit on the menu bar and
select copy) and paste it back into your graphics package. Use
your graphics package to select around each button and save them
as new images.
||The colors that Styleskin
uses for rendering shapes are set to the key colors shown
on the tool palettes bar. When designing your template in
another graphics package, you will need to use these colors.
Each color is made up of the following red, green, blue
values as follows:
|| If you are
including text in your non-native template, you will need
to turn off screen font smoothing before pasting your
image into the StyleSkin template area. Screen font
smoothing is a windows operation which shades around the
text to make it look less jagged. StyleSkin caters for
font smoothing in native templates but may have difficulty
assigning a key color to all the varying shades around a
font which can result in unrendered pixels.
includes an automatic "Export to Autorun Maestro"
Maestro is software that we provide to create autorun menus
for CDs. This feature will not operate for imported templates.
Do not be concerned if you would like to use an imported
template for an Autorun Maestro menu. 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.
© 2009 POLLEN SOFTWARE, ALL RIGHTS RESERVED.