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 StyleSkin then 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 us!

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:

Menu Bar	This is the standard Windows bar located at the top of your screen.
Standard Toolbar	This is generally the first toolbar (starting with the tool images shown above) located near the top of your screen.
Drawing Toolbar	This is usually the second toolbar (starting with the tool images shown above)  located near the top of your screen.
Tool Palettes Bar	When you first open StyleSkin you will notice that there is a bar vertically going down the right hand side of your screen (it can optionally be changed to appear at the bottom of the screen by clicking "View" on your menu bar, choosing "Orientation" and checking horizontal). This bar offers a variety of tools for working with your interface and will be referred to as your Tool Palettes Bar. You can choose to show or hide different tools on the palette by selecting "View" on the Menu bar, "Tool Palettes" and selecting the element you would like to show/hide.
Workspace	The dialog box that appears in the middle area of your screen will be referred to as your workspace. On opening StyleSkin shows a default template in this area (shown below). At the bottom of the Workspace you are able to select three tabs: Template, Texture and Output. These represent in order the three main steps involved in creating your graphic.

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!

StyleSkin 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 finished graphic.

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

Basic Drawing Concepts
l	Select any shapes (left click an item to select it) shown on the default template that you don't want and then press the "Delete Object" button  (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 items.
l	To draw a shape select the "Draw New Shape" button (Drawing Toolbar) and then the required shape.
l	The Drawing Toolbar offers three shapes you can select to draw. These are a rectangle/square, a rounded edge rectangle/square and an ellipse shape.
l	For each of these shapes you can choose to draw them with or without a border of your choice or a fill color.
l	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.
l	You 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.
l	You 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.
l	To 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.
l	A 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.
l	To 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 Grid" button (Standard Toolbar).  If you would like to stop the snap to grid feature then deselect the "Snap to Grid" button (Standard Toolbar). Selected items in the template area can be moved irrespective of the grid when using the keyboard arrows.
l	If you wish to enlarge your template area, click on the corner lines of the template workspace and drag it to your desired size. Alternatively, under the "Drawing" heading (Tool Palettes Bar) you can adjust the "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.
l	If 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 Back" button (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.
l	Remember 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.
l	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 Standard Toolbar.

To 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 Palettes 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 Toolbar.

 

When 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 faster.

To leave areas unrendered

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

When you render your template any areas that are not a key color will not be rendered.

Saving and Opening Template

Once you have created your template you are ready to move on to the next step! 

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

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

To open a new template click the "New Skin" button or "File" on the Menu bar and "New Skin".

Points to note when creating your template outside of StyleSkin

l	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.
l	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:   Form Area Recessed Button Area Flat Area Display Text Red 255 0 255 255 0 0 Green 255 255 0 0 255 0 Blue 0 255 0 255 0 255
l	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.
l	StyleSkin includes an automatic "Export to Autorun Maestro" feature. Autorun 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.

© 2007 POLLEN SOFTWARE, ALL RIGHTS RESERVED.