 StyleSkin

Help Version: 4.0

Available Topics

General

Skinning Concepts and Uses

Program Overview

Step-by-Step Basics

Button Positions and Text Transposing

Printing Skins

The “Repeat Last Render” Button

The Native Template Editor

Graphic Templates

Exporting to Autorun Maestro

Program Tools

Tool Palettes
Standard Toolbar

Drawing Toolbar

How To’s

Set Key Colors
Set Skin Colors
Wrap an Image around a Skin
Create a Photo Skin
Make a Program that Uses a Skin
Continue Work on a Skin
Stop an Area from being Rendered
Set Custom, Non-Rendered Shape Colors

Speed-up Rendering

Information

Contact Details and Further Information

Online Tutorial

Click Here to go to our full step-by-step guide online!


Skinning Concepts and Uses

The term “Skin” comes from early Quake style gaming, where you could create different image sets to be used to identify yourself while playing online. These images were wrapped around your character, to form its “skin”, they usually depicted a uniformed burly, or a muscle-bound heavy, more often they involved color variations of the same outfit, designating individuals or team colors.

This term has since expanded to cover the even newer practice of creating images for use in a program’s custom interface. Most programs in MS Windows use standard buttons and controls, that is, Windows provides the program with controls. The reason this is done is two-fold. One, this allows users to easily recognize buttons and controls for what they are. A menu looks the same in any program, and the knowledge gained in learning how to use a menu in one program can be used in using a menu in another program. Secondly, by allowing the programmer the ability to hook into preprogrammed controls the programmer can spend his/ her energy more profitably, by getting on and creating programs that work.

Problem with standard Windows controls is just that… they are standard. This can lead to interfaces which are visually quite boring. To overcome this many programmers “skin” their program. This involves creating images for use in defining the appearance of a program. This however does involve a significant amount of effort, in designing the background graphic, the button images in their default, selected and down positions, text and display areas etc etc etc. Various methods and techniques have been developed in order to make this job easier, and the results more visually impressive. Many of these techniques have been developed for popular programs which can load up their skin from externally sourced images. These programs allow the user to create and set the skin when they use the program. One of the most popular is the ubiquitous WinAmp media player (www.winamp.com). This program, and programs like this one, allow users to create and distribute interface skins, rather than “hard-wiring” the images into the program.

More and more programs are now using interface skins in order to make their software more attractive and more visually inviting to the user. User’s enjoy working with an interface which is visually interesting, and will obviously spend more time in, and get more out of, a program which they enjoy using. StyleSkin, with its revolutionary template driven rendering, can make the job of producing these graphics not only easy, but truly enjoyable!


Program Overview

To quickly find help on any item in StyleSkin, try clicking Help, What’s This? and clicking on the item you are interested in. You can highlight the items in menus and click F1 to find out about menu commands.

If you have not used StyleSkin before, press the “Render: Complete Skin” button on the Standard bar. This will render the default template and give a quick impression of how StyleSkin works. StyleSkin uses a revolutionary three-stage process to create skins:

First	You create a template which defines the layout of your skin, which areas are buttons, which are display, where flat areas are etc. StyleSkin supports two types of templates, a native object based template, as well as templates imported as images. This allows you to create intelligent graphics quickly in the native template designer, as well as using other programs to create graphical templates of complex or unusual design. The native template can be saved, re-opened and easily edited and adjusted.

Second	StyleSkin creates a texture for the skin. StyleSkin includes many different textures built-in, and you can obtain different effects using these textures by adjusting the Effect Density slider in the Texture Rendering tool palette. Optionally StyleSkin can apply a weathering effect on the texture using the skin template as a reference. Alternatively, you can import a texture you have saved or obtained or created elsewhere by using the program’s import texture function. This imported image is then tiled across the skin to form the texture. The imported image can be any bit-depth and or color palette, the program will convert the image to grayscale on the fly while doing its rendering. Native textures have the great advantage that they are not tiled patterns, but are unique across the entire skin, adding depth and detail to the skin.

Third	StyleSkin uses these two inputs, the template and the texture, to render an output of the skin using the current rendering settings. This includes setting and varying the color, contrast, depth, brightness, display features, text, etc. This rendered output can be saved as an image to be cut up with a graphics editor, or, if the template is a native one, StyleSkin can export the button areas as individual bitmaps. You can save and open the setting used to render a skin as “Effects Settings” files. This allows you to easily save, retrieve, re-use and distribute effects settings.

StyleSkin offers power and flexibility at all stages of the design process, however StyleSkin is not intended to replace a graphics editor. You might consider StyleSkin as a graphics “generator” or renderer, not an editor. While on most systems you will be able to open JPEG images in the program, JPEG and other compressed images are unsuitable for saving templates in as the compression both changes the colors as well as blurs the edges of all objects. This makes the image unsuitable as a rendering source, as the integrity of key colors will be completely lost, making them unrecognizable to the program.


Step-by-Step Basics

If you have never created a skin before, or have never used StyleSkin before, read through the information below to get a working knowledge of creating a skin in StyleSkin. It is well worth your time to read through the following at least once. If after reading this you would like further assistance, please feel free to work through with our Online Tutorial

Firstly you need to understand the program you are skinning. Where do you want buttons? Where are the display areas? Do you want to create a TitleBar area? Are there areas which should be flat? Once you decide on what is required from your layout, you can begin designing your template. Click on File, New Skin to start a new skin document. It is best then to drag the right and bottom margin out to allow yourself some room to move. You can do this by placing your mouse over the thin bars visible directly to the bottom right of the template design area, clicking the mouse button down, and dragging the bar left or down appropriately.

You can now adjust the elements provided to the position where you would like them, delete any unwanted shapes and add new shapes. For drawing instructions in a native template see the The Native Template Editor topic. You can change the appearance of the shape by clicking on the formatting buttons on the toolbar, these include changing its shape, fill or border appearance, text alignment etc. The colors of each shape designate what they will represent once the skin is rendered. For example a red shape signifies a button. You can change a shape’s key color by clicking on the shape, and then clicking the key color you want the shape to be. Key colors are available in the Key Colors tool palette. To add text to a shape right click to select the shape and type the text you would like. You can adjust the shape’s text margin by clicking the object and adjusting the margin slider in the “Drawing” tool palette. Any text can also be altered in the “Shape Caption” field in the “Drawing” tool palette. When you are happy with your layout, remember to SAVE the template by clicking on the Template tab in your skin, clicking File, Save Image/ Template.

Now that you have laid out your template, we can move on to what we want the skin to look like. Next we’ll have to texture the skin. You can set the texture by clicking on the Texture menu, and clicking on the texture you want to use. If you wish to see what your texture will look like, simply click the "Render Texture" button on your menu bar to have it rendered. You can adjust the appearance of the texture by adjusting the Effect Density slider (under Texture Rendering on the Tool Palette). You can alternatively import your texture by clicking Texture, Import Texture. You can save your texture by clicking on the Texture tab in you skin, and clicking File, Save Template/ Image.

Now that we have the texture we like, we can get onto rendering the skin. If you have already rendered your texture, remember to uncheck “Auto Texture” in the Tools menu before you click Render. You can try the default settings, or load up a saved scheme (by clicking on File, Open Effects Settings), or you can try adjusting the various settings yourself. When you have the settings you like, click Render, Complete Skin. The program will now systematically render all the elements of your skin. When it has finished, your completed skin will appear before you in the “Output” tab of your skin document.

Now that you have the images, you will need to export and save them to use them in your application. You can save your rendered skin by clicking on the Output tab in you skin, and clicking File, Save Template/ Image. But those buttons, you’ll need images of them when they are active and when they are pushed down as well. First (after you have saved your output), save the normal (up) button images. Click on Tools, Export Button Images. In the Export Buttons dialog which comes up you can name your button scheme, for example type “Skin1” in the first box, and “Up” in the second. The program will export all of your buttons as images to the Export directory. If we were using the default template, we would end up with two images “skin1 -OK- Up.BMP” and “skin1 -Cancel- Up.bmp”. Now that the normal buttons are saved, click Render, Buttons, Active Buttons to create images to use for when the button is the currently selected control (or the “active button”). After exporting the buttons, entering “Active” in the second box, click Render, Buttons, Mouse Down to generate images to use for when the user has pressed the mouse on the button. These can be exported putting “Down” in the second box of the export dialog.

Congratulations! You have created your complete skin. How you will use these images depends on what you are skinning for, you may have to rename these files for your particular application, you may have to create compound image sets (where multiple images go into a single source image). Alternatively you may want to import them directly into the program you are creating, or save then as externally loaded in resources.


Button Positions and Text Transposing

StyleSkin automatically transposes text one pixel over and one pixel down for the down position of buttons. This transposition makes the down image much more visually convincing, and can greatly enhance the overall effect. While it is rare however, this transposition may not be suited to some buttons, particularly those which are very crowded or small and have text very close to the bottom or right edge. In these cases you can uncheck Tools, Auto Text Down.

StyleSkin automatically manages the different text in native templates, transposing only button text. In imported, image based templates, this effect cannot be achieved. This can lead to undesirable text transposing if you have text or graphics, in areas that are not buttons. This can easily be overcome by rendering the complete skin with normal (up) buttons, saving this image, and then Transposing the text before rendering active and down positions and exporting the button images. Otherwise some text and graphics will be one pixel over and one pixel down from where they should be.


Printing Skins

StyleSkin can print your skins for reference. This is achieved by clicking File, Print. Please note that the default setting is to print “Selection which is the currently showing element of the Skin. Therefore you can click the Template tab of your skin, then print, to get a print of the template, equally click the Texture tab to print the texture, and Output tab to get the rendered output. If you would like a print of all three elements, click File, Print and specify All in the print range. This will print all the elements tiled down a page.


The Go Button

The “Repeat Last Render” Button

The Repeat Last Render button (a right facing arrow in the Standard toolbar) in StyleSkin repeats the last rendering, if no rendering has been done (i.e. you have just opened the program), then the Repeat Last Render button will provoke a Render Complete Skin. The Repeat Last Render button is very useful if you find yourself changing settings and re-rendering while experimenting with effects. In this case you only need to go through the menu the first time, after that you can simply click the arrow.

One case would be to experiment with textures, click Render, Texture. If the texture is not quite what you were looking for, adjust your texture by clicking Texture and the style of your choice, or by adjusting the Effect Density slider on the Texture Rendering tool palette, and click the Repeat Last Render button. The program will render the texture again, as if you were clicking Render, Texture.


The Native Template Editor

StyleSkin’s native template editor can create powerful and useful templates very quickly. You can quickly and easily add, remove and adjust elements and shapes, change and add text etc. The native template can also automatically adjust for different key colors. What this means is if another person uses a different color to represent the button areas, form area, display area etc, and gives you an Effects Settings file, you can open his/ her file and your template will automatically adjust to be in the correct key colors. This allows you to share your files easily. You, or someone you give the template to, can also easily open the file and change the elements to suit the current application.

To work with template shapes, you can do the following:

•	To add a new shape, click the Draw New Shape tool on the Drawing toolbar, click on the template and drag until the shape is the required size.

•	To delete a shape, click on the shape and either press Delete, or click the red X on the Drawing toolbar.

•	To Select multiple items left click and drag a square around all of the items, the selected item’s borders will change color to show they are selected, or hold down the Shift key while left clicking on each shape. To deselect an item Hold down Ctrl and click on the shape. Group selections can be moved, deleted, cut, copied or pasted together. Format changes cannot be performed on a group selection.

•	To resize an object, simply click it and then click and drag the size handles which appear.

•	To resize objects pixel by pixel, click the object and then hold shift while you use the arrows on your keyboard. Drag Handles will be removed to allow an unobstructed view of the shape, click the shape again to bring the handles back.

•	To move an object make sure Select Objects is the current tool (the arrow in the Drawing toolbar) and then left click on the object and drag it to a new location. If multiple items are selected left click in one of the selected items and drag the group to a new location.

•	To move objects pixel by pixel, click the object and then use the arrow keys on your keyboard. Drag Handles will be removed to allow an unobstructed view of the shape, click the shape again to bring the handles back.

•	To change the shape of an object, simply click it and then click the shape you want in the drawing toolbar.

•	To make a shape transparent or invisible you can click the object and then click Draw Border and/ or the Fill Area buttons in the toolbar.

•	For shapes that are stacked on top of each other, use the “Bring to Front” or “Send to Back” buttons on the drawing toolbar to change whether they appear above or below any other shapes. To increment a shape up or down one level use the “Bring Forward” or “Send Backward” buttons.

•	To enter text in a shape click on the shape and type the required text. To change the text that appears in a shape, click the shape to select it and change the text in the “Shape Caption” field on the “Drawing” tool palette.

•	To change the alignment of text in an object, click the object then click the Align left, Center or Right Align button on the drawing toolbar.

•	To adjust the text margin in a shape, click the shape then adjust the Text Margin slider in the Drawing tool palette.

•	To change the designation of an object, simply click the shape, and then click the appropriate key color in the Key Colors tool palette. If you want the text on buttons to glow, then make sure you click the “Glow-Text” Key.

•	For exact placement try turning off or changing the Snap to Grid (click Snap to Grid in the Drawing toolbar) increments.

To adjust the default new shape, simply deselect all objects by clicking on the template background area, and then adjust the setting as above. The changes will then be reflected in each new shape drawn (in the current template).

Please note you can also draw the template in your preferred graphics package and paste it into StyleSkin. See the Graphic Templates for further information on this topic.


Graphic Templates

Although StyleSkin enables you to create your template within the program, it also allows you to import a bitmap image as a template. Either click the Open Template button and browse to your saved bitmap file, or open your template in your graphics package, select all of the image and copy it, open StyleSkin and make sure the Template tab is selected and paste the image. Please keep in mind the following points when creating your template in a graphics package:

•	While on most systems you will be able to open JPEG images in the program, JPEG and other compressed images are unsuitable for use as templates as the compression both changes the colors as well as blurs the edges of all objects. This makes the image unsuitable as a rendering source, as the integrity of key colors will be completely lost, making them unrecognizable to the program.

•	If you are not running your monitor at True Color, and you create and save your image in a graphics package, your image might suffer from color patterning. It is best to use the StyleSkin key colors: Red, Green, Blue, Cyan, Magenta and Yellow for Key Colors as they can be reliably read on any computer. When MS Windows and graphic programs cannot match a color exactly, they will pick the two closest colors and “pattern” them in an effort to make the results visually the same. To check if your image suffers from patterning, you can zoom in on it in your graphics editor and try to pick the different shaded pixels, or you can open it in StyleSkin and click Tools, Pattern Check.

•	If creating your template involves taking a screenshot, remember to turn off font smoothing on your computer. If you do not, then the edges of the text will be blurred, leading to an undesired effect in the resulting skin. Also if creating your template involves typing text into your graphics editor, make sure your graphic editor is not smoothing fonts.

•	There are some features that will not operate with an imported template. The “Export Button Features” (located under Tools, StyleSkin Options) and the “Export to Autorun Maestro” features only operate with native templates. However, these functions can also be performed through your graphics package. Simply render your skin and save the Output. Open the Output file in your graphics package and cut around each button and save it. If you are using Autorun Maestro save the background image and button images into the Autorun Maestro directory and start Autorun Maestro to set up your menu (MaestroEd.exe)

If you have received a template which is in different key colors to the ones you use, you can do the following to correct the template’s colors:

•	Open the template in StyleSkin.

•	If you do not have an effects settings file that specifies the current key colors, then make one by clicking the “Sample Pixel” tool in the drawing color, and then clicking the first key color (Form Area) in the Key Colors tool palette. On the template click on the area which represents the Form Area. Work through the rest of the key colors, clicking on the Key Color, then on a point on the template which represents that color. If some areas do not exist, right click on the Key Color and select a color which does not appear on the template. Save the template with a name something like “John’s Key Colors.efx”

•	Open an Effects Settings file, which defines the key colors you normally use.

•	Click Tools, Convert Key Colors. When prompted locate the file which defines the key colors of the current template. StyleSkin will run through and convert the template image from the old key colors into the current key colors.


Exporting to Autorun Maestro

StyleSkin can directly export your skin to an Autorun Maestro menu. Autorun Maestro is software which allows you to create you own fully graphical programs. These programs form menus, with buttons you can set to do various tasks. You could have a button start a program when it was clicked, or open a document, maybe even just give a message to the user. You can even have the buttons open sub-menus, or go to an Internet site in the user’s browser. By default StyleSkin will not only create all necessary elements for your menu, but will create the menu itself, copy it over to where you want it and open it in the Autorun Maestro Menu Editor. In the Menu Editor you can add commands to assign each of your buttons a task.

In order to export your skin you only need to render your skin, with the buttons in their “up” state. Once your skin is rendered just click “Tools”, “Export to Autorun Maestro…”, or press Ctrl+M. This will bring up the Autorun Maestro export dialog. Normally all you need to do is click “Begin”, StyleSkin will then increment through, rendering and saving all necessary components for your menu. You can optionally enter your menu caption, text color and any default menu text right in the exporter (alternatively you can change or enter any of these in the Autorun Maestro Menu Editor later).

Creating Menus with Transparency
Autorun Maestro allows you to create menus of any shape, not just Windows rectangles. StyleSkin helps you to create menus of any shape you can imagine. Most popularly people want to have the corners of their menu rounded, so specific instructions are given here on how to do that. Just be aware that any shape can easily be achieved through using other shapes or clusters of shapes, the only limit is your imagination.

Overview
Creating your transparent menu is a simple process of creating a new background for your menu with a new shape/s (which only includes those parts of the menu you want to be visible), and then setting the rest of the back to the Fill “Custom” Color.

In Detail
To create your menu with transparent corners simply create your menu as you normally would. After your menu is done, create a new shape (rounded rectangle) and size it to that of your skin. This shape will be the shape of your menu, and should include all elements of your skin (buttons, displays, flat areas etc), in other words it should be completely covering your skin except for the rounded corners. Set the key color of the new shape to that of the form area by clicking the Form Area color in the Key Colors tool palette. If your shape is not filled or is missing its border, then click the “Draw Border” and/ or “Fill Area” toolbar buttons so that it is filled and bordered. Now click the “Send to Back” toolbar button to send this new shape to the back of your skin. Your skin should now look as it did before, except for rounded lines in the corners. We are now ready for the next step

Now create a new shape (rectangle) and click the Fill Custom Color by clicking the new shape and then clicking the “Fill” color in the “Custom Colors” tool palette. Now position your new shape so that the left and top are beyond the left and top edges of the skin, then drag the right and bottom edges so that they go beyond the right and bottom edges of your skin. The new shape should now cover your skin, with nothing visible except the color of the top middle custom color. Click the “Send to Back” toolbar button to send this new shape to the back of your skin. Your skin is now ready to be converted to a Maestro menu with transparency. The parts of the menu which are the Fill custom color will not be shown in the resulting menu. For best results, right click the top middle custom color and set it to Red: 223, Green: 223, Blue: 223 (very light gray). Then when the edges are smoothed they will be well presented in Autorun Maestro.


Set Key Colors

How to: Set Key Colors

StyleSkin uses Key Colors to identify the various areas to render on a skin. When rendering the program recognizes these colors and renders the area accordingly. For example in the default template the red areas are set to render as buttons. The default Key Colors that StyleSkin uses are usually the best. This is because some computers can only use a lower color depth. True Color is the best, and displays all possible colors (16 million). Older computers are incapable of dealing with all possible colors and limit the number of colors they can show to High Color (65,500 Colors), or worse yet to 256 Colors. This can cause some colors to be unrecognized on these machines.

In StyleSkin you can change the Key Colors by right-clicking on the Key Color you wish to change and choosing the color in the Color Dialog. If you are using an image based template, then you can also set your color by left-clicking on the Key Color you wish to change and then clicking on the template.


Set Skin Colors

How to: Set Skin Colors

In StyleSkin you can change the Skin Colors by right-clicking on the Skin Color (in the Skin Colors’ Tool Palette) you wish to change and choosing the color in the Color Dialog. You can also set your color by left-clicking on the Skin Color you wish to change and then clicking on a color on an already rendered skin output or texture.


Wrap an Image around a Skin

How to: Wrap an Image around a Skin

StyleSkin’s Photo rendering options allow you to create powerful images based on photographic style images. These effects have been specifically designed to allow you to create skins with minimal disruption to the clarity of the source image. But what if you want to wrap an image around a skin? Well, the standard StyleSkin rendering styles can still be used to render a photo based skin, just follow the following steps:

1.	Create/ import your template as you always would. However make your Form Area and Buttons’ Key Color (Key Colors Tool Palette) a middle grey, that is Red – 128, Green – 128, blue – 128.

2.	Import your photo as a custom texture (Texture, Import Texture).

3.	For the best effect, try adjusting the texture contrast to 100% in the Skin Rendering Tool Palette. Try setting the Brightness to 75%.

4.	Render your skin as per normal.

5.	Click Tools, Copy Texture Color to transfer the color information from your photo to your skin. This effectively “colorizes” you skin.

6.	You may now wish to render your text and display again, to remove the color copied to those areas


Create a Photo Skin

How to: Create a Photo Skin

StyleSkin’s Photo Skin rendering options allow you to add skinning options to your photos. Many of the Toolbar controls need to change for Photo Skins so it is a good idea to show these by clicking “Render”, “Photo Render” and “Photo Control Descriptions”. For detailed information on the various controls for Photo Render please visit our OnlineTutorial and view the Photo Render topic.


Make a Program that Uses a Skin

How to: Make a Program that Uses a Skin

There are many, many ways to create a program that uses a “skin” to define its appearance, our sample assumes that your are using Visual Basic and that you want a simple, straightforward method of implementing a skin.

To create a program that uses a skin, one simple method is as follows:

1.	Create your buttons as you normally would, but add code to the form’s load event to move them out of sight (e.g. Command1.Left = -Comman1.left).

2.	Place an imagebox at the top left of your form, and place code in the form load event to load in your main form image (e.g. imgBack.Picture = LoadPicture(SkinDir & "main.bmp")).

3.	Place ImageBoxes where your buttons will be, and place code in the images MouseDown, MouseUp events to show the relevant button images (e.g. imgCOM1.Picture = LoadPicture(SkinDir & "com1d.bmp").

4.	Call the relevant CommandButton click event in the ImageBox click events (e.g. Command1_Click).

This method will allow you to quickly create a program that uses a skin. You could advance on this design by adding code to show which button is the active button, so that the User knows what will happen if s/he just presses <Enter>.


Continue Work on a Skin

How to: Continue Work on a Skin

There is no doubt that situations occur where you are “up past your bedtime”, but you feel you are nearing a perfect skin. While StyleSkin does not natively support continuing work on an output, you can easily get around this. Just save your Effect Settings File, Template, Texture and your rendered output (to save the different Workspace elements remember to ensure the required Workspace area is showing ie Template before you click File, Save Image/ Template). When you wish to continue work, just open up your template, open your Effects Settings, and then import your rendered output graphic as your texture. Click on the texture tab, click copy (or CTRL+C), switch to your rendered output and click Paste (or CTRL+V), then import your saved texture as your texture. You are now exactly back to where you left off.


Stop and Area from being Rendered

How to: Stop an Area from being Rendered

If you do not wish to render an area, for example if a large area of your skin will be covered or cut out anyway, you can simply set the area’s color to a non-key color. This will speed rendering, and can be easily achieved in either a native template or an image based template. When using a native template, just draw a shape to fill the area that you do not wish to render. Then set this shape’s color to the “Fill” custom color (Custom Colors Tool Palette). The box will become filled with the Custom Color (if the box is set to be filled, otherwise click the “Fill Area” button on the Drawing Toolbar). If you wish to change the color the box is filled with, just right-click on the “Fill“ Custom Color box and select a new color. If your skin will be used over a set background color, such as a menu on a website, it can be a good idea to make the custom color the same color as the intended background color. This is particularly useful if you make use of StyleSkin’s “Smooth Edges” feature as the edges will be smoothed into the background color.


Set Custom Non-Rendered Shape Colors

In some cases you may wish to set areas of your skin to a custom, non-rendered color. This can include the text, the background color of the shape, or the border of the shape. This is easily done through the use of Custom Colors, available in the Custom Colors tool palette.

•	To set a custom text color, simply click the shape you want to change and click the Text custom color.

•	To set a custom shape background color, click the shape you want to change and click the Fill custom color.

•	To set a custom border color, click the shape you want to change and then click the Border custom color.

You can change any of the offered custom colors by right-clicking on them.

Custom Colors can also be useful if you would like for large text to appear on the form as a button. To do this draw a shape and change its Key color (Key Colors Tool Palette) to the same as the background color, change the text color to the same color as the Button Key Color by right clicking on the Text Custom Color (Custom Colors Tool Palette) and selecting the relevant color (red in default templates). Before rendering check the “Render Text as Indented” control under Options on the menu bar.


Speed Up Rendering

How to: Speed Up Rendering

There are various strategies for speeding up rendering if you find it is taking too long to render your skins.

Consider minimizing the Zoom/ Preview tool palette. This takes time to show, and while it can make rendering time seem shorter it does slow down the process.

If you are continually rendering the same skin while adjusting colors and other settings, try reducing the edge width of your skin. The speed of rendering increases logarithmically with the Edge Width value (in the Skin Rendering Tool Palette). Reducing this value will change the look of your skin, but can be useful when you are “surfing” for the right color etc.

Another method, which is good to use, is to create a small test skin. You can then render the small skin to test out various color and setting changes. This also allows you to leave your edge width settings intact. When you are satisfied with the render on the test, you can then render your main skin.


Tool Pallets

Tool Palettes

To allow easy and uncluttered access to the many settings available in StyleSkin, tool palettes have been added. These can easily be shown and hidden as needed if your display resolution does not permit showing them all at one time.

The following tool palettes are available:

Skin Rendering

Button Rendering

Gel Buttons 1

Gel Buttons 2

Gel Colors

Text Properties

Display Rendering

Illumination Angle

Color Variance

Texture Rendering

Weathering

Key Colors

Skin Colors

Custom Colors

Zoom/ Preview

Surface Shine

Button Glow

Display Accents

Drawing

Effects Notes


Skin Rendering Tool Palette
The Skin Rendering tool palette allows you to adjust the skin rendering properties.

Edge Width: This setting will vary the graphic’s appearance of thickness by adjusting the reach of the lighting. Minor adjustments can make big changes so it should be adjusted 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 setting will alter the depth appearance of your graphic by adjusting the intensity of the lighting effect. Minor adjustments can make big changes so it should be adjust in small amounts. 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, increase Edge Width and Edge Depth.

Texture Contrast: This is useful for strengthening the texture pattern that is shown on your "Output" graphic. The higher the contrast number the stronger the texture.

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


Text Rendering Tool Palette
The Button Rendering tool palette allows you to adjust the appearance of active and down buttons. In Skin (standard) button rendering mode this setting adjusts the brightness of text on buttons in the active and mouse down state. Adjusting these higher causes the areas, which have been marked as “Glow-Text” in the “Key Colors”, to glow more brightly. In Dome button mode this setting adjusts the brightness of the button. This control has no effect on Gel Buttons.


Gel Buttons 1 Tool Palette
The Gel Button 1 tool palette allows you to adjust the look of gel buttons by changing refraction, text and texture settings.

Refraction: Adjusts the amount of light which is refracted by the gel. A higher value will cause the button to darken and the light concentrate in the area of the button farthest from the source of light.

Refr. Contrast: Adjust the overall contrast of refraction. A higher value will give the appearance of a single source of light, while a lower value will give the appearance of more ambient light and a brighter button.

Lens Effect: Adjusts subtleties on how the light is concentrated on the back of the button. Adjust up to decrease the light concentration, or down to increase it.

Texture Trans: Adjust the transparency of the button, allowing the texture to show though. Adjust up to allow more of your texture to come through, and down for less.

Text Shadow: Adjust the distance from text that a shadow will appear on the back of the button. Adjust to 0 to set no shadow.


Gel Buttons 2 Tool Palette
The Gel Button 2 tool palette allows you to adjust the look of gel buttons by changing the reflection properties of the button and appearance of the text.

Reflection: Adjusts the intensity of the reflected shine off the button.

Reflection Width: Adjusts the maximum width of the reflection. Note that the actual width will be dependent on the button size and available reflective edge.

Reflection Offset: Adjusts the distance from the edge that the reflection starts.

Shine Over Text: Tick to have the shine also applied to the text in the button. This can increase realism, but decrease text visibility.

Render Text: Tick to have the button re-render the text when you render the button.


Gel Colors Tool Palette
The Gel Colors tool palette allows you to adjust the colors used in gel buttons.

Gel Btns: The color of the button.

Gel Text: The color of text for use in gel buttons.

Shine: The color to use in the reflected shine off of buttons. Should be a very light or luminous color for best results.

Active Btns: The color of the inner shine which is used to indicate an active gel button.

Down Btns: The color of the inner shine on gel buttons in the down position.


Text Properties Tool Palette
The Text Properties tool palette allows you to adjust the appearance of rendered text on your skin.

Clarity: Adjust how true to the shade of the set text color the text is. Adjust down for greater blending into your skin, and up for greater clarity.

Opacity: Adjusts the finish of the text. Adjust down to allow more texture to show through, adjust up to make the text more in keeping with the general surrounding shade of your skin.

Brightness: Adjust the brightness of the text, which can help to create clearer text that still blends well with the skin.


Display Rendering Tool Palette
The Display Rendering tool palette allows you to adjust the appearance of the display areas in your skin. Adjusting the depth slider changes the visual depth of the display, or the thickness of the bordering drop shadow. Adjusting the Density slider changes the darkness of the shadow.

If you find unsatisfactory results try changing the Depth to 5 and the Density to 50, and work from there.


Illumination Angle Tool Palette
The Illumination Angle tool palette allows you to adjust the direction of light that illuminates your skin. Typically interface graphics are illuminated from 315º (i.e. top left), but special effects can be gained from lighting your skin from below, or another angle.


Color Variance Tool Palette
The Color Variance tool palette allows you to adjust the color of the skin based on the brightness of the texture. For example this tool can allow you to change the color of your skin for any light or dark texture areas.

Texture Threshold: By setting the top slider you can change the threshold level for the color change to occur. The program then tests each pixel of the texture as it renders, and if the pixel is darker than the threshold, then the corresponding skin pixel color will be adjusted for each color component that has been checked.

Color Components: To adjust the color components ensure you check the box beside the relevant red/green/blue color and move the slider. Move the sliders up to raise that color, or down to lower. Please note that when you are adjusting the colors, you are varying them from the “Skin Colors” you have chosen.

For example, if your “Base” skin color is purple, in order to have your color variance appear blue you would need to adjust the red value very low, but may not need to make any adjustments to the blue as it may already be present at ample levels in your Base skin color.

Autolevel Out - Checking the Autolevel Out box will make the color varied texture to be of an even color.


Texture Rendering Tool Palette
The Texture Rendering tool palette allows you to adjust the appearance of the texture. The effect is different for each texture and is best experimented with!

The Import Texture button allows you to import an image for use as the skin texture.


Weathering Tool Palette
The Weathering tool palette allows you to adjust the appearance of the Weathering effect. Adjusting Edge Width adjusts the length of the weathering effect, and changing the smoothness adjusts how smooth the effect is, from very smooth up to very jagged.


Key Colors Tool Palette
The Key Colors tool palette allows you to work with the Key Colors. The Key Colors designate what the shapes will represent in your skin. You can set the Key Colors by right-clicking on the Key Color or by clicking on the template (imported/image templates only). You can set a native template’s object color by clicking on the object and clicking on the corresponding key color.


Skin Colors Tool Palette
The Skin Colors’ tool palette allows you to set the skin colors. These are the colors the skin is rendered in. You can set the Skin Colors for each part of the end graphic by right-clicking on the relevant Skin Color.

StyleSkin can be set to automatically adjust the chosen Skin Colors to a middle shade when it renders the Output Graphic. This means that should you choose very bright or dark Skin Colors they will automatically be rendered in a middle shade which can help to make the skin more visually convincing. If you would like to turn this feature on, go to “Tools” on the Menu bar and check “Auto-Tone Skin”.


Touch-Up Tool Palette
The Custom Colors’ tool palette allows you to set the Custom Colors. These colors come in handy when touching up textures, or rendered outputs, or image based templates. You can set the Custom Colors by right-clicking on one of the “Custom Color” boxes. You can select it as the current color by clicking on the color.

For further information also see the Set Custom, Non-Rendered Shape Colors help topic.


Zoom/ Preview Tool Palette
The Zoom/ Preview tool palette has two uses. It functions as an adjustable zoom, allowing you to see your skin in more detail, and as a preview when rendering your skin. To use the zoom, just restore the Zoom/ Preview and then place your mouse over the active document’s skin, template or texture. The Zoom box will give you a magnified image centering on where you have the mouse positioned.

The preview function will show you the skin as it is rendered, allowing you to preview the skin and see the progress of the render. Please note, however, that this preview function can slow the rendering process down a small amount, hence causing the render to take slightly longer.


Surface Shine Tool Palette
The Surface Shine tool palette allows you to set the variables for the Surface Shine Accent (added by clicking Render/Accents/Surface Shine). Adjusting the Reflection will change the strength of the shine, while adjusting Width will change how widely spread the effect is. Reflection Offset moves the reflection further away from edges. Unchecking “Shine over Text” will stop any reflection being rendered over text. Check “Fade Shine” to create a fading effect, where the effect will be strongest closest to the light source, and weakest furthest away.


Display Glow Tool Palette
The Display Glow tool palette allows you to set the variables for the Display Glow Accent (added by clicking Render/Accents/Display Glow). Adjust the sliders to vary the Brightness of the glow around display areas, and the Reach of the glow. Depending on your selected skin color you may wish to change the color that is used for the glow by right clicking on “Glow Color”.


Button Glow Tool Palette
The Display Accents tool palette allows you to set the variables for the Button Glow Accent (added by clicking Render/Accents/Button Glow) and Display Grain Accent (added by clicking Render/Accents/Display Grain).

Adjust the top two sliders to vary the Brightness of the glow in and around button areas, and the Reach of the glow. To alter the “Glow Color” simply right click on the current color.

Adjusting the Grain slider changes the intensity of the tonal graininess. This effect is best used in moderation, and can greatly improve the photo-realism of the resulting skin.


Drawing Tool Palette
The Drawing tool palette allows you to work with the native template and grid spacing. You can adjust the size of your skin by adjusting the Form sliders. By clicking on a shape in your native template you can adjust the text margin and add or edit the shape’s text. If no object is selected, then the default new shape is adjusted. Adjusting the grid spacing adjusts the pixel resolution of the Snap to Grid feature.


Effects Notes Tool Palette
The Effects Notes’ tool palette allows you to add notes about your effects settings. If you save your effect these notes are saved into the Effects Settings’ file. When this file is opened a message box will be displayed containing the text you entered into this box. This is handy for advising Users (or yourself) of effect particulars.


Smoothing
The Smoothing Accent Effects smooth the edges between the different elements of your skin. This can make the skin look softer and more photo-realistic while also removing the jagged edges around text. Use the Normal smoothing to smooth most skins, use the Plus Text smoothing to include the text in the smoothing operation.


Lamp Displays
The Lamp Displays’ functions allow you to render the display areas of your skin to look like lamps. These incorporate a ribbed design, and in the case of the Off style, a drop shadow. Adjusting the Display Depth and Density on the Display Properties tool palette adjusts the depth of the drop shadow and tone of the rib respectively. Hint: When rendering the “On” style follow up with rendering the “Display Glow” functions to complete the “On” effect.


Reverse Weathering
Reverse Weathering alters the weathering effect to lighten, rather than darken, the weathered areas. This can be useful for various effects, including a “worn edge” look.


Indented Text
Setting “Render Text As Indented” causes StyleSkin to add text areas to the 3D render. This gives text areas a slightly indented look. How much the text impacts on the skin surface will depend on the skin’s properties and the text weight. This tool also needs to be turned on if you are rendering text as a button.


Standard ToolBar

The Standard Toolbar contains the most often used StyleSkin Commands, from opening and saving Effects Settings, Images and Templates, to Cut, Copy and Pasting. A description of each button is below:

Creates a new skin document.

Opens a Template file from disk, either in native format, or in image format.

Template browser allows you to view thumbnails of your templates for easy selection.

Saves current image or template in current skin. The currently selected Template/ Texture or Output will be saved.

Opens an Effects Settings file, which describes the skin’s properties and colors.

Saves current skins setting to an Effects Setting file. This includes colors, texture settings, skin properties, etc.

Prints the currently showing image/ template of the current skin.

Cuts current image or template object.

Copies current image or template object.

Pastes current image or template object.

Undo last image change.

Redo last image change.

Repeat last rendering action. See The “Go” Button

Render Complete Skin (all areas).

Render Form Area.

Render Display Area.

Render Flat Area.

Render Text.

Render Normal (Up) Button.

Render Active (Selected) Button.

Render Down Button.

Render Blank Flats.

Render Texture.

Render Weathering.

Allows you to transfer the color/s of your texture over onto the Output image.

Smooth Edges and around Text.

Snap to Grid. Snap all drawing elements, both native and image based, to the grid.

Show Grid. Show the current grid for reference. Grid can be adjusted in the Drawing tool palette (F11).

Allows you to see thumbnail images of the Effects offered by StyleSkin and make a selection.

Allows you to see thumbnail images of the Textures offered by StyleSkin and make a selection.

Exports all of your images to Autorun Maestro and does preliminary menu set up.

Register StyleSkin (only visible if StyleSkin unregistered).


The Standard Toolbar contains the most often used StyleSkin Commands, from opening and saving Effects Settings, Images and Templates, to Cut, Copy and Pasting. See help for a description of each button available.


Drawing ToolBar

The Drawing Toolbar contains template and graphic formatting and editing tools. A description of each button is below:

Select Objects Tool. Used to select and manipulate native template shapes.

Eyedropper Tool. Used to set Colors in the Key, Skin and Custom Colors. Simply click the Tool Palette color you want to set, click the eyedropper tool, and click on the image where the color you want to pick up is. You can also set the colors by right-clicking on them.

Draws a new shape in either a native template or an image.

Draw Line Tool. Draws a line on an image (not available on native templates).

Draw Pixel Tool. Draws a pixel of the current color on the current image (not available on native templates).

Delete Object Tool. Used to delete the selected shape on a native template. Pressing the keyboard Delete key performs the same task.

Rectangle. Sets the current shape or the next shape if no shapes are selected or the template is image based.

Rounded Rectangle. Sets the current shape or the next shape if no shapes are selected or the template is image based.

Ellipse. Sets the current shape or the next shape if no shapes are selected or the template is image based.

Draw Border. Specifies the border, if any, to draw on the current shape, or the next shape if no shapes are selected or the template is image based.

Fill Area. Specifies that a the area on the current shape, or the next shape if no shapes are selected, or the template is image based, is to be filled.

[X]	Drop-down list to set template shape font type.

[X]	Drop-down list to set template shape font size.

Bold. Makes text in template shape bold.

Italic. Makes text in template shape Italic.

Underline. Underlines text in template shape.

Align Left. Aligns text in native template shapes.

Center. Aligns text in native template shapes.

Align Right. Aligns text in native template shapes.

Bring currently selected shape in native template to the fore.

Send currently selected shape in native template to the back.

Bring currently selected shape in native template forward one layer.

Send currently selected shape in native template backward one layer.

Transpose Text Down (useful in mouse-down button images).

Reload/ Restore Template from File.


The Drawing Toolbar contains the most often used StyleSkin Commands for creating your template or touching up textures. See help for a description of each button available.


Checking Auto-Tone skin allows StyleSkin to automatically adjust the skin tone to middle. This allows the most visually convincing skins to be produced. You can uncheck this to produce brighter or darker than normal skins.


Checking Auto Text Down allows StyleSkin to automatically adjust placing of text when drawing the down position of buttons. While text is fully managed in native skins, there are circumstances where transposing text may be inappropriate.


Transpose Text Down transposes all the text and glow-text pixels on the current template image over and down one pixel, which can add depth to down button positions. See Help for full details.


You can set StyleSkin to remember the number of image undo and redo’s. This is particularly important if your system has limited resources and you want to work on large skins. Changes take effect after StyleSkin is restarted


This will reload the template file from disk, scrapping any changes that have been made since the last save.


Checking Auto Texture causes StyleSkin to automatically include rendering a texture for the skin when “Render Complete Skin” is clicked.


Checking Auto Weather causes StyleSkin to automatically include weathering the skin’s texture when “Render Complete Skin” is clicked.


The “Export Button Images” function can automatically save the button areas of a native template to individual files, ready for use in your application.


The Pattern Check function can test an imported image based template for color patterning which is an issue on computers with a resolution set lower than true color.


The Convert Key Colors function can convert the key colors of an image based template from one set to another. This function refers to an Effects Settings File to define the key color scheme the image is in, and then converts these to the current key colors.


Sets the type of texture to be applied during a texture rendering.


Imports a texture from an external file. Texture will then be tiled (if it is smaller than the skin) to form the skin’s texture.


Renders the specified element of the Skin.


Find out more about registering StyleSkin, or enter your registration details.


Shows or hides the tool palette.


Starts a new Skin document.


Closes the current Skin document.


Opens a template file from disk.


Saves the current image or template to disk.


Opens an Effect Setting file, which defines the color, texture and other properties of a skin.


Save an Effect Setting file, which defines the color, texture and other properties of a skin.


Shows file size, dimensions and location information about the current skin.


Allows you to configure your printer’s page setup for print jobs.


Allows you to print the current skin element, or all skin elements.


Allows you to reopen recently used files.


Uses Render Optimizations to speed up rendering.


Displays the edge map being calculated as the skin output.


Toggles button type between standard and dome style.


The Copy Texture Colors command asserts the color of the texture (provided you have a color texture) onto the skin output. This is useful if you use a color texture, like a photo, for a texture and wish to also use the color in the texture in your output. This command only copies the hue (while preserving saturation levels), not the luminosity of the texture… in other words you might say it copies the color, not the brightness. To increase the luminosity transferal turn up the Texture Contrast in the Skin Rendering tool palette.


Other Information

This program is shareware and may be distributed and freely used for testing purposes in its shareware state. For full information on what usage you are authorized for please see our site.

PLEASE NOTE: the program is a 32-bit application, and as such will not run on anything previous to Windows 95.

This program was written by Sean C Flanagan, and is copyrighted 1999 - 2003, by Pollen Software. If you have any suggestions for improvements to the program then contact us.

To register this program, please see our site:

You can find us on the Internet at:

Pollen Software (http://www.pollensoftware.com/)

Registration Details can be found on our Online Registration Page

Program Information and Updates can be found at the Homepage for StyleSkin

An Online Tutorial for StyleSkin can be found at the Tutorial Page

You can contact us at admin@pollensoftware.com

Our mailing Address is:	Pollen Software Pty Ltd
PO Box 314
Morningside, QLD 4170
AUSTRALIA

This package, its files and programs are © Pollen Software Pty Ltd 1999 - 2003.