SkinStudio Tutorial - Creating a Taskbar

A tutorial by August Skinner of the Month, .Zer0.

Monday, August 21, 2006 by Zoomba | Discussion: WindowBlinds Tutorials

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

 

Island Dog
Reply #1 Monday, August 21, 2006 11:56 AM
Thanks for writing this. I will definitely use this when I decide to make my next WB.
cybermessiah
Reply #2 Monday, August 21, 2006 12:05 PM
Thanyou Zero for taking the time and effort to explain things so clearly. Hope to hear more from you on how to skin like a true pro.
skinz2nice
Reply #3 Wednesday, August 23, 2006 9:26 AM
Thank you so much. This really helps me understand a little better about skinning. I'm still having a little trouble but i truly understand how to make a good taskbar now. THANKS!!
Diafragma
Reply #4 Saturday, September 2, 2006 10:09 AM
Excellent tutorial I will start practicing right away. One thing Ive noticed that you repeated a whole paragraph see under the subtitle 'Importing a Selection into a frame' is the same paragraph you used at the beginning of your tutorial maybe you can correct it in case we are missing something...
Pumakitten57
Reply #5 Friday, October 6, 2006 9:43 AM
Thanks for the tut Zero! I will be looking forward to each one. This makes it less confusing!
SheriDansComputers
Reply #6 Tuesday, November 27, 2007 4:32 PM
GREAT TUT! Thank you from one anxious NewBie... When do you think we can expect the next part of the series?

Staying tuned!
RobJK
Reply #7 Thursday, March 13, 2008 12:23 AM
Thank you Allot I followed your steps and had allot of trial and error but I got everything figured out. I am just haveing a problem with the start button. It looks exactly like i want in the preview but when I apply it the windows clasic start button shows and After I apply it and then open the applied windows blinds skin(in skinstud) it says that the file is not found or specified (for the start menu? Is there something I have to do?
Alternate Setting
Reply #8 Thursday, March 13, 2008 9:18 AM
Cheers Zer0
zakai1369
Reply #9 Thursday, March 13, 2008 9:52 AM
another good one to find later on.
Zoomba
Reply #10 Thursday, March 13, 2008 10:13 AM
Necrothread! 
messiah1
Reply #11 Thursday, March 13, 2008 10:20 AM
Necrothread!


  
ZubaZ
Reply #12 Thursday, March 13, 2008 10:47 AM
It's almost Easter . . a good time to resurrect a thread. 
RobJK
Reply #13 Wednesday, March 19, 2008 6:22 AM
Zubaz I never knew that when you went into stardock central, skin studio 6 was a whole seperate install? I thought it would be an update. So I just installed it and It works so much better. Better interface. Easier. And I havnt had any problems so far!
blazespirit
Reply #14 Friday, November 7, 2008 11:40 PM

Good and easy understanding tutorial for the newbie like me. Thanks a lot.

rachelm920
Reply #15 Tuesday, May 19, 2009 11:49 AM
Is this from a different version of skin studio? I am using version 6.4 and I cannot find where to enter a template anywhere. Anyone know how? Or can you no longer use this tutorial with version 6?
2of3
Reply #16 Tuesday, May 19, 2009 12:25 PM

Is this from a different version of skin studio? I am using version 6.4 and I cannot find where to enter a template anywhere. Anyone know how? Or can you no longer use this tutorial with version 6?

this was for skinstudio 5........a bit dated, yeah.

To answer your question; no you cannot import a template into sks and slice it up there with sks6.

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!



web-wc01