Step 1 - Preparation
- If you are creating a WorkShelf theme on it's own, create a folder whose name corresponds with what you are
going to call the theme (in this case, Sinter). This new folder should be inside the 'Winstep\Themes' folder
on the drive where you installed your WinStep apps (probably 'C:\Program Files\WinStep\Themes' if you installed it in the
default location). In our case we already have this folder and our NextStart images from the previous part of the tutorial.
- In a similar manner to the NextStart theme, we need to start with a template for our design. I generally use the
same image which I used for my NextStart theme, with some modifications. Note that magenta (rgb 255/0/255) pixels will
once again be used as a transparency mask. The parts which we need for a complete skin are as follows (the numbers are labeled on the snapshot):-
the 'mini' tabs (these are the left and right 'endcaps' for the row of tab tops on our shelf):
wstabml -- 1 - the left mini tab (at the very top left of the shelf)
wstabmr -- 2 - the right mini tab (at the very top right of the shelf)
the tabs:
wstabla -- 3 - active tab, left section
wstaba -- 4 - active tab, middle section
wstabra -- 5 - active tab, right section
wstabli -- 6 - inactive tab, left section
wstabi -- 7 - inactive tab, middle section
wstabri -- 8 - inactive tab, right section
the body:
wsbleftt -- 9 - left hand side top
wsbleft -- 10 - left hand side middle
wsbleftb -- 11 - left hand side bottom
wsbodyt -- 12 - top of the main body section
wsbody -- 13 - the main body section
wsbodyb -- 14 - bottom of the main body section
wsbrghtt -- 15 - right hand side top
wsbrght -- 16 - right hand side middle
wsbrghtb -- 17 - right hand side bottom
wsclock -- clock background (conveniently created from our NextStart menu buttons!)
wstrashf -- trash can image 'full' (created to match the NextStart 'tasks' tile image)
wstrashe -- trash can image 'empty'
the icons:
wsprefs / wsprefsm -- the icon to open the preferences dialogue
wshide / wshidem -- the icon to hide WorkShelf to it's tabs (or frame) - shown when the shelf is 'open'
wshidec / wshidecm -- the icon to unhide WorkShelf when collapsed (when tabs are shown in WorkShelf's collapsed state)
wsuparrow / wsuparrowm -- arrow to scroll up shelves that have more than one row of icons (shown on the snapshot)
wsdnarrow / wsdnarrowm -- arrow to scroll down shelves that have more than one row of icons
Note - In my 'Sinter' theme I've cheated a little bit on the 'hide' icons. I wanted both the prefs and hide icons to be
transparent (i.e. just to show the tab image behind them), so I created a blank transparent icon for wsprefs and wshide. Since
WorkShelf will use the wshide if I don't provide a wshidec icon (the version used when the shelf is collapsed), I didn't need to create one specifically for it.
However, I did need mouseover versions for both states, so I do have wshidem and wshidecm icons.
- Slicing up the template into the individual parts is a little more involved than for the NextStart theme.
As a rule of thumb I always try to create my 'mini-tab' images at a width of 28 pixels. At this width they are less likely to be
stretched by WorkShelf, which might spoil the design. In practise, as WorkShelf is stretched horizontally, any extra
pixels which are needed to 'fill in' the line of tabs on the shelf (i.e. if the width of the shelf in pixels is an odd number) are added onto the mini-tabs dimensions. It's also
probably better to keep any curves on the mini-tabs to a maximum diameter of about 20 pixels.
- When slicing up the body into it's separate parts, make sure that the width of the left and right parts match - that is,
keep wsleftt, wsleft, wsleftb, wsrghtt, wsrght and wsrghtb the same width. They do not have to be the same width as the
mini-tabs though (in Sinter, the mini-tabs are 28 pix wide, while the left and right body parts are 14 pix wide).
- Ensure that the width of left and right parts accommodate any design elements you have. For example, if you have a
large curve on the left bottom corner but not on the right, don't forget that you will be slicing both sides the same width,
resulting in rather a lot of wasted space on the right! You could put part of your curve in the bottom image (wsbodyb),
in which case it would be either tiled or stretched. Take this into account when you design your template. Also, when slicing
the left, right, bottom and top images, try and include any bevels there, rather than leave them as part of the wsbody image.
This is the image most likely to get stretched or tiled, so the bevels would not look correct.
- When designing icons for the up/down arrows, I find that it's better to make as much of the icon transparent as possible.
In our Sinter design we have a gradient from light to dark down the body. When the up/down icons are placed on the shelf,
we won't know exactly where they will be repective to the gradient (it will depend on how many rows of icons we display).
Therefore, the only colour on the icon is the actual arrow, with no background.
|
the WorkShelf template
the clock and full / empty trash images
|