SkinStudio Tutorial - Creating a Taskbar

By .Zer0.

Description

How to use SkinStudio to create a taskbar for WindowBlinds
 

Materials

Any Graphics Program (Photoshop, Paint Shop Pro etc...)
SkinStudio
WindowBlinds
 

Introduction

This is the first tutorial in a series of tutorials that I plan to do. My idea is to make it easier for people new to skinning to create a skin. If you have any comments or questions, please visit my website rjsmith.templaytes.com. There you can find links to contact me.

The Basics

The taskbar consists of several different parts: the taskbar background, taskbar buttons, quick launch buttons, tray background, tray arrow, resizing bar, and the start button. You need to create a template in a graphics program of your choosing. I use Adobe Fireworks (formerly Macromedia Fireworks), but some other popular software is Adobe Photoshop, Adobe Illustrator, Paintshop Pro, and the free software The Gimp. Gimp is similar to Photoshop in many ways, especially the layout.

The Layout

The first and most important part of creating a skin is creating your template image. Creating your skin how you want it to look is the best way to make a great skin. The easiest way to do this is to create a template or mock up of your skin. Make it look like it would look if you had applied it. Copy in a wallpaper and build you graphics on top of it. Rather than creating each part of you skin separately, create them all at once so you can see how they will look before you apply the skin. This will save you time and effort.

After you have created your layout, move each separate part of your template around so you can slice them easily. In this tutorial we will be working with the taskbar.

Importing Your Graphics

Once you have a template ready, it is time to import the images into SkinStudio. Open up SkinStudio. You will see three columns. The left one is for navigation, the middle is for previewing your skin, and the right is for properties. There is also a row across the bottom that contains options for the properties that you select. Ok, let's get dirty. To navigate to the taskbar in SkinStudio, click the taskbar icon in the column just to the left of the preview. Next, click on the background of the taskbar. Next, click on the template tab. There you will see a button to open to open your saved layout.

Using the Marquee Tool

When you open your template you can select the different parts with the marquee. It has been my experience the "select all" option and the option to adjust the size of the marquee with the properties pane do not work correctly. It is best to use the zoom panel in the left column. Select the bottom version of you taskbar background with the marquee tool. Click the cut button. A window will pop up with several options. Select the "Multiply" option as show below.

Multiplying Frames

It is best to multiply your image when you just want to see what the image will look like when applied. As long as you have the first frame multiplied throughout, you can always go back and add the others.

Importing a Selection into a Frame

The first and most important part of creating a skin is creating your template image. Creating your skin how you want it to look is the best way to make a great skin. The easiest way to do this is to create a template or mock up of your skin. Make it look like it would look if you had applied it. Copy in a wallpaper and build you graphics on top of it. Rather than creating each part of you skin separately, create them all at once so you can see how they will look before you apply the skin. This will save you time and effort.

Lather, Rinse, Repeat

Now, practice doing these steps on your own by importing the other parts of your taskbar.

Tips

Framing Troubles

If you are having trouble getting your different frames to line up correctly, try using the slice tool in your graphics program. In Fireworks you can right click on the object that you want to add a slice to and select the option to insert a slice just the right size over the object. By doing this you can see how large each frame should be and save yourself lots of time. By adding extra "white space" around a taskbar button you can keep it from touching the edge of the taskbar. This cannot be done by adjusting the content margins.

Taskbar Height

A problem for designers new to skinning for WindowBlinds is adjusting the height of the taskbar. The first thought would be to make the images bigger, but that is not correct. The secret is adjusting the content margins for the taskbar buttons. Look at this image.

By increasing the content margins of the taskbar buttons you will get a taller taskbar; by decreasing them you get a smaller taskbar.

Materials List

Here are links to the software used as well as a few others.

SkinStudio
WindowBlinds
Fireworks
Photoshop
Illustrator
The Gimp