Making a theme - The little mini-tutorial

Many people have asked me how I create styles. So I took some of my valuable time and started to write this little Mini-tutorial. It explains some basic stuff when it comes to styling Windows XP and GTK for Linux.

Useful software

Windows XP - SP2

- A patched uxtheme.dll file.
- Photoshop / The GIMP (Costs / Free).
- Stylebuilder (Costs).
- ResEdit (Free).

Linux - Gnome (Free)

- The Widget Factory.
- The GIMP (Or photoshop in wine).
- A good text editor.
- Pixmap engine. (If you're on Ubuntu I think it's sudo apt-get install gtk-engines-pixmap).
- A finished theme for the Pixmap engine that you can edit.

Where to start

Create a concept design in Photoshop or The GIMP. It's always good to know how the theme should look like before you start styling.

If you're thinking about styling GTK I suggest that you take a screenshot with The Widget Factory open and then paste it into The GIMP. Then start designing all the buttons and fields in the screenshot. After that I recommend that you edit a finished Pixmap theme. If you know more about GTK setup you can also change many values in the theme's .gtkrc file.

If you have Stylebuilder I recommend that you import a finished VS (.msstyle file). Feel free to use any of my themes. When you open Stylebuilder everything should be pretty easy from the start. Some good things to know about:
- Make sure Photoshop or The GIMP is set as your standard image editor. ( Tools > Options ).
- The Colorize tab. It allows you to change the color scheme of any style.
- SizingMargins. What it does is explained in the program, but it's THE fixer when an edited image looks stretched.
- It's a puzzle. The rest should be pretty easy to figure out.

If you're using ResEdit I belive most of the values can be found in the menus. The layout however is very different compared to Stylebuilder. It's not a puzzle.

What to think about when designing the theme

Borders

Any border that will face a wallpaper will either blend in with it or contrast against it. Almost everyone uses a different wallpaper, so the best thing you can do is to create a 2px border. The first line should have a dark color on the outside and the 2nd line should be a bright color on the inside. The border will now be visible on all wallpapers.

Colors

This one is pretty annoying. Everyone have different monitors with different contrasts, gamma etc. First of all I recommend that you take a look on the greyscale image below this tutorial. When you've done that you can take a look at www.colourlovers.com/ to find a good color scheme for your style. Try to choose something that doesn't "scream in your eyes".