Making a theme - The little mini-tutorial

6 min read

Deviation Actions

lassekongo83's avatar
By
Published:
4K Views
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".


Featured

Epsilon Lyrae by Pr3t3nd3r
"Epsilon Lyrae by *Pr3t3nd3r = pretty!"



Misc info

If you have any questions about my stuff, see my FAQ first!

For the best experience with my themes I recommend that you adjust your screen brightness and contrast until you can see all shades of grey in the image below.


Adjust your screen
© 2008 - 2022 lassekongo83
Comments21
Join the community to add your comment. Already a deviant? Log In
vipiish's avatar
Tack för att du lagt upp denna lilla tutorial :D Hjälpte verkligen! Nu har jag kommit igång med en VS!