JJ.Ying´s GUI World Professional Skin & Icon Design

This post will be about the whole process of the building up the skin I called Atlas, the purpose is to show you the interesting and frustrating sides of windows theme design.  You can trace the progress and see many aspects of skin design being talked here as I will update frequently.

I got great feedback from WinCustomize forum where I also posted this article, it's great idea to make more interactions, so if you have any problem to ask about the process, please be free to leave a comment and I will try to answer as possible as I can.

1. Concept

It's really hard to say where the inspiration comes from, sometimes it's 6 o'clock am on bed, sometimes it's when you see a certain texture and many other times, it's just an impulse.  For this example, my next skin Atlas, it is started from 3 keywords: Elegant, Functional and Bright.

Initially, I make a new PSD file and added a random background.  After that, drew the window borders and titlebar buttons, I always love to play around the borders and titlebar buttons before going deeper, so in the concept stage, no detailed elements will be added here.  The goal is to make myself want to touch the titlebar using my fingers, if failed, the concept will be dropped.  But here, I've done a simple window with only borders and titlebar buttons, a kinda good beginning for the project:

2. Start Panel

Today is about to extend the rough design to other parts.  Window borders and start panel play big role in a theme, so after the rough design of window borders is done, I choose to add the start panel in Atlas for this stage.

To keep functionality and simplicity, no textures are used here, but to make the plain panel more interesting, I added some highlight and a stripe in the top part of the panel.  And as I always do in the past, I use 2 different colors for the background of left/right hand side.  And for the log off/turn off area, a very dark blue is there to keep visually balance with the stripe in the top part of the panel.

Consistency should be considered at any time, and the whole panel has the same look & feel with the window, and for now, the basic tune is shown, the overall appearance has gradually been shown.

3. Taskbar

I've done the initial design of the window borders and start panel, what's next?  Sure it's taskbar.  Taskbar usually only takes less than 30 pixel height in the screen, but it has many parts to take care, and the taskbar buttons will have 6 different states (Normal, Hover, Pressed, Selected, Selected Hover an Flashing, see below for example).  We must carefully deal with these states, make them easy to reconginize and, of course, beautiful.

Taskbar Button in Slider XP by I.R. Brainiac

We have many ways to make each state looks different for others, colors, fonts, shapes and even animations.  Personally, as a user, I think the most important contrast should be applied between the normal and the selected state.  Talking about user, how can a skinner don't try more skins?  Use more, feel more and learn more, things always become different when seen in different views.  Go back to the taskbar, another one we should not forget is the flashing state.  In SkinStudio, it is saved as a single image, and doesn't have individual font settings.

The combination with light gray and dark blue has been applied as main tune in Atlas, so the taskbar I'm doing are still use this combination.  No detailed design for now so the start button is still temporary, and other parts like quick start buttons and tray arrows will be added later.

4. Mockup

So far the Atlas has already got her window borders, start panel and taskbar, very rough and only stay as a draft, but it's time to put it in action to see whether it's good.

To test it, I put them together like the real desktop, and added some text & icons to get the simulated desktop environment.  Also I made a set of push buttons, still not final one, just to confirm and overall color scheme, and initially decide which styles will be used for global hover state, pressed state, etc.


And one more important thing is to try different kinds of backgrounds for the skin.  Dark ones, light ones, simple ones and complicated ones, then adjust the skins, especially the edges, to make sure it look clear and standing out from all kinds of desktop wallpapers.  So, this is an critical stage to make the skin usable.  Shadows, edge colors and stroke width should be carefully re-touched and usually this needs pretty much patience cause we may have to try dozens of times.


Maybe let you down, but for mockup, I only stopped here, I usually wont start coding before every details are done.  Take Atlas as example, tomorrow I'll directly go into SkinStudio because I think the best way to make a better skins is designing while testing, and it also helps a lot to save time because if every single elements are designed it self, I don't need to slice them and re-arrange all the states to become one image.  But of course, the weakness is obvious, we can't get the full look before the skin is finally coded and to keep consistency for all the elements, we must put the final look in our mind and build up a certain visual guidelines only in brain.

5. Getting Start with SkinStudio

Just as I said before, the next stage is using SkinStudio to import the current graphics to our new skin.

Before that, we certainly need to create a new skin file.  But in most cases, I don't start a skin from scratch or the default skin, instead, I usually start by editing an existing skin.  Why?  Default skin has no latest features and if I choose a certain new skin as template, the time spent on setting up properties for new feature will be less.  Also, if I build the skin from my own old ones, I will have better control over the preset font/color settings since I'm familiar with them.

Looks like everything is ready for us, but it's only a very start for the skinning, especially the coding works.  There are more than one hundred bitmaps left to edit(even more for vista, lots more), so we can take a little break before really getting deeper in SkinStudio.

(To be continued...)