Interested in making skins or themes but don’‘t know where to begin? Here are some handy steps picked up after several years of skinning that serve as general guidelines on how to take your concepts from your brain to the screen, as well as some skinning pitfalls to avoid.This tutorial is more “concept” oriented, instead of being geared specifically towards PhotoShop, PaintShop Pro, SkinStudio, etc…, although some of these will be used as examples.
.: by mrbiotech :.
.: by mrbiotech :.
A conceptual tutorial to help get you started theming.
As most themers, I learned how to theme the hard way, diving head-first into a project that seemed much more advanced than I could handle. The years have taught me some standard techniques that, once learned, have greatly simplified the theming process. We’ll discuss some of these general conceptual methods, such as what to know about the app being skinned, the overall process of creating a theme, and how to piece it all together.
Transparency: Alpha-blending vs. Magic Pink.
A critical consideration of your theme design will be how it’s edges interact with your desktop. Will your theme or theme component be purely rectangular (and thus not require any transparency)? Will your skin have free-form edges (angles, curves, and bends) that require that certain parts be made transparent? Will you be using anti-aliased edges requiring blended edges, or is it okay to get by with ìjagged edges?î
Earlier versions of skinnables, and a great deal of the ones currently available, make use of ìMagic Pink Transparency.î This entails using the hex color #FF00FF (Red=255, Green=0, Blue=255 in RGB) to represent parts of a skin that are transparent. When the program writes the skin to your screen, it interprets the Magic Pink as being invisible, and fills in whatever else is behind it, such as your desktop or other windows.
Newer software (SysMetrix, LiteStep, AstonShell, RainLendar, RainMeter) support the use of Alpha-Blending to permit softer edges on curved shapes.† The following image demonstrates Magic Pink Transparency in an older SysMetrix skin I made.†† Compare the edges used for Magic Pink circle below to the one using alpha-blending (drop-shadowed, smooth edges):
If you zoom up on most icons, font text, etc., you will see that they don’t have hard edges to them, but rather the operating system or software (depending on your individual settings) will add subtle changes in color blended with the background in order to fool the eye into believing that you’re looking at a smooth curve as opposed to a jagged edge. The Quartz Renderer of the Mac OSX is a wonderful demonstration of this, anti-aliasing all the fonts and graphics in order to fool the user into believing they have a much higher resolution screen than they really do. Linux also inherently does this quite well.
So to anti-alias or not? Hint: Magic Pink Transparency renders much faster and requires far less system resources. Try to stick to 90 Degree or 45 Degree angles for areas bordering transparent zones, however. Masking rounded shapes and curves with Magic Pink can be done, but can be difficult, and inexperienced skinners often leave a skin looking terribly jagged-edged, or with bits of pink visible because they forgot to anti-alias.
I tend to create all my graphics in Photoshop using antialiased edges (requiring you have ìAntiAliasedî checked for your selection tools, brushes, etc.), and then create a layer above all the others and use a NON-ANTIALIASED pencil tool to add magic pink, artificially creating the transparency mask. If you use the selection tools in the generation of your Magic Pink mask, make sure Anti-Aliased IS NOT CHECKED, or when the skin comes out, you will have pink areas around certain borders.
Certain skins will require alpha-blending for extremely complex borders or internal areas that are translucent instead of transparent. Although this may be accomplished with Magic Pink Transparency (with GREAT difficulty), you’ll be better off using Alpha-Transparency. Only certain file formats support transparency, GIF, Targa (TGA), and PNG. Although GIF’s are commonly used for web sites, few skinnable apps support its use. The only application I’ve seen that supports TGA files is StarDock’s WindowBlinds (and SkinStudio). Your best bet for multiple applications is PNG. DesktopX, AstonShell, SysMetrix, LiteStep, RainMeter, and RainLendar all support the use of PNG images.
Special requirements: graphic dimensions, types.
Certain graphics are limited to no transparency or to specific sizes. For example, the taskbar graphics of AstonShell (Start button, taskbar background, normal, mouse-over, and pressed states) do NOT permit any kind of transparency, meaning any attempts to use Magic Pink will yield patches of visible pink in your screen (this could be an advantage, depending on if you like the magic pink color). Another example, the MDI buttons for child windows skinned by WindowBlinds used to be limited to 17×17 pixels. This has probably changed by now, but used to be a major design consideration.
If you notice inexplicable behavior of some of your graphics, check out the forums for that specific application and note if there is some specific reason why. Skin authors will tend to share bugs, problems, and other unanticipated abnormalities of skinning.
Stretching vs. Tiling images: Certain parts of themes, such as task-bars, certain buttons, scroll-bars, and window-borders are of variable size. To accommodate this, most skinnable programs make use of tiling or stretching, defined below:
Stretching involves taking an image you supply and setting the software to alter it’s dimensions. A gradient scroll-bar would look sloppy if it starts at the top as black, fades to white, then abruptly changes back to black again, as it would if tiled. Stretching presents a significant draw on your CPU and memory, however. It is therefore recommended that tiling be used as much as possible. If you must use a stretched graphic, realize that small graphics stretched long distances can look highly distorted (a gradient image consisting of 3 vertical pixels, when stretched over 150 pixels, will simply look like three zones of different colors 50 pixels high).
Tiling works just like it sounds, one copy of your image is loaded into memory and then re-referenced as needed to expanding shapes, much like laying duplicate floor tiles next to each other. Tiling is much easier on the user’s CPU and memory and is the preferred method, if available.
Certain applications (DesktopX, WindowBlinds, and LiteStep, noticeably) permit combinations of both, even within one image. This can be handy, for instance, if you have a gel button which will get horizontally longer, but you don’t want the semi-circular ends to distort and become triangular. The software will let you define pixel widths at both ends that will remain the same whether the interior portion is stretched or tiled.
Does the program have it’s own theme creator, or will you have to code it yourself?
Most of the newer themable programs have either an included dialog for theme creation (AstonShell, Talisman, Sysmetrix, and RainLendar, for example) or have a separate application used to design its skins (WindowBlinds+SkinStudio, StyleXP and StyleBuilder). There are still some programs that require hand-coding of theme parameters in an INI style file, such as LiteStep, RainMeter, and Chroma. Sometimes certain themers actually prefer coding a theme themselves, even if the program sports a GUI for this purpose.
If you have to code it yourself, you’ll want to know the specific commands to get particular things skinned, of course. You will ALSO want to know basic general commands, such as how to comment out lines of code, or complete blocks. It’s also helpful to know what conditional statements and variables are permitted. This can aid greatly in your debugging and construction of the theme, and elements causing problems can quickly be deactivated.
Most of the GUI’s to construct themes still rely on writing changes to some sort of parameters file, often in a user-readable format. Don’t knock the text interface simply because it seems like more work. Quite often, the really good themes have changes made at the code level that make them unique. Check out the default themes for RainMeter, and how certain sections can be made to hide or reveal additional meters by accepting user input (a mouse-click) and conditionally displaying content.
This is my favorite part of the theming process! It’s where you let out all the creative stops and create the images in your graphics editor to encapsulate the vision you have in your head. Even if you don’t start with a complete theme envisioned, sometimes just starting with a couple of key elements of the theme (forms, shapes, colors, and position) will be a sufficient foundation from which to springboard the remainder of the theme.
Use your Layers! Layers and layer groups permit you to audition different ideas, while not getting rid of anything. Enjoy the shape of your interface but not the style? Duplicate it as another layer and apply some different effects! This is also a great way to design color variations of the theme, but duplicating a layer containing a red glass orb, for instance, and filtering and/or adjusting it to become a sleek black sphere instead. Don’t be afraid of using lots of layers (unless your working on a system with severely limited resources): initially just through down any ideas that come to your head as part of the brainstorming process, and then just show the ones you like. I’ve developed some of my favorite layer-styles in Photoshop while making themes in which they were never used. SAVE EVERYTHING!
If possible, try to keep different elements of the same theme in the same file until it’s time to export to BMP or PNG. This lets you see how all the elements work together. Specific things you need to consider for the whole:
1. Is the lighting uniform? There have been a great many themes with excellent concept that come off looking like crap because the lighting is coming from different angles in different parts of the theme. Choose your light-sources’ positions BEFORE shading. That way the effects come out more believable in the end.
2. Do the shapes and forms match? If your theme is predominantly composed of organic, flowing shapes and you suddenly skin your system meter to look like a sharp rectangle, the system meter will look like it’s in the wrong theme. Try to maintain a continuity of form, using similar radii, proportional lengths, and angles.
3. The same goes for colors. Try to keep a defined palette (I KNOW that Photoshop and PaintShop Pro both do this, so NO EXCUSES!!!). If your theme has metallic shapes punctuated by green orbs, try to make sure the green orbs all have the same (or very similar) coloration.
4. Does anything look out of place? As you are wrapping up the final touches, step back from the screen and look at the whole thing. Does any particular part seem like it came from another theme? Is there a focal point on the desktop other than that upon which you want it?
Method 1: Create a separate layer above all the others in the image and use your selection tools (ovoid or rectangular selections) to set up the different ìzonesî of the theme. Fill these in with different colors. Set the blending mode to “COLOR” or “OVERLAY” so you can still see your original graphics to see if you got the selection right where you want it. Once you’ve filled the separate zones with different colors, you can use your Magic Wand Tool to select areas to export, disable the Zone Layer visibility (transparency=100%), and then merge the visible area (in Photoshop, CTRL+SHIFT+C), copy to a new file, and save it optimized. This is the way I learned how, although it’s clearly not the most efficient.
Method 2: Similarly, Channels can be created with Quick Masks and Masks to save your selection areas. This does mean that for every area (Start Button, Task Button, etc…) you’ll have to have a separate Channel Mask. Although multiple selections can be combined, I don’t recommend it unless you really know what you are doing in your graphics program.
Method 3: Slices! PhotoShop, ImageReady, and presumably PaintShop Pro permit a user to use specific tools (Slice Tool and Slice Select Tool) to chop up your big graphic into the smaller pieces used by the actual theming software. This also simplifies things because each ìSlice” (or selection area) can be named, and have it’s optimization parameters set differently. In Photoshop, once all the selections are made, you can simply perform a Web Export command and all of the images will be chopped out and saved individually for you. This is a common feature of web design, and one that I’m only now beginning to play with. Certainly, you’ll want to read the documentation on this in your graphics package!
Another critical step (and one which your theme users will appreciate) is *optimizing the graphics. *
At WinCustomize.com, many of the best themes (made by the pros) weigh in at under 600Kb in file size. Most amateurs submit themes with sizes greater than 2Mb!!! What’s the difference? The pros are using indexed palettes for their graphics to minimize each individual graphic file’s size. In addition to faster download times to obtain the theme, this also means that when the theme is running, it’s consuming fewer system resources. Web-site authors know all about graphic optimization!
PNG files are inherently compressed. If you can afford some drop in quality, you can also lower the BIT-DEPTH of the PNG image to further decrease the image size.
JPG’s are also tightly compressed. Photoshop, Gimp, and PaintShop Pro allow you to save JPG’s with varying degress of integrity, usually defined as a percentile, 100% being as true to the original image as can be. This quality can sometimes be lowered to 65-70% and still remain very true to the original graphics, while reducing file size. I tend to aim at about 80-90% quality, which decreases the file-size some. Most of the graphic editors will also give you a predicted file-size and preview image while you tweak the quality so you can visually determine where your best compromise in size-to-quality is.
BMP’s offer little-to-no inherent compression, and get exponentially bigger with file dimensions and palette depth. A 1024×768 wallpaper in JPG format may be optimized to approximately 120-300Kb and still look great, while an unoptimized BMP can get up to about 3.7Megs!!! There is hope, however. Most graphic software will let you save INDEXED bitmaps in which a color palette (usually a 256 color palette) is generated for individual slices, or for the whole theme (try to do it by individual images). Although some loss of quality is perceptible, the savings in file size will be very advantageous.
GIF images are also compressed. Generally, GIF’s are suitable only for web-based applications, and I don’t immediately know of any skinnable applications that support the use of GIF’s. I’ll include their optimization capabilities anyway, to be as inclusive as possible. GIF’s have two great features: transparency and dithering. The transparency is NOT TRUE ALPHA-BLENDING, and is more like Magic Pink Transparency only no Magic Pink is required. This equates to hard-edge transparency that will give a pixely, jagged edge on rounded shapes, as discussed earlier. This hasn’t stopped it from becoming the key format for Emoticons and Smileys, however. GIF’s also can be dithered, that is, using a decreased color palette, your graphics software can alter the placement of two different colors to yield a perceived new color, a way of expanding the perceptual palette. GIF’s can also be saved with 4, 8, 16, 32, 64, 128, and 256 color palettes, with and without dithering and transparency, so there are multiple ways to optimize their file-size (hint: kill transparency if you’re not gonna use it). You’d be amazed at what kind of gradient you can form with a 16 or 32 color palette and some dithering!
1. Use this to your advantage. As you are making graphics, don’t be afraid to plug ‘em in, even before they are finished. This way you can check to see if it is actually progressing towards what you want in the final project.
2. This is also a great way to get to know the program being themed, as you can make small changes, even to someone else’s theme (provided you are not publishing it) in order to view the effects. Don’t understand what a ìScroll-Bar Glyph” is? Plug in a random graphic, and see where it ends up!
3. Skinning can be as much trial-and-error as it is forethought. Sometimes limitations in the software will prevent you from creating a theme EXACTLY the way you designed it in the layout phase. By periodically checking to see how things fit, you can determine this while in progress and make changes as needed.
Case in point: Singularity for LiteStep, my second released theme (available at: http://www.deviantart.com) had a very non-conventional free-form toolbar approach not amenable to direct porting to AstonShell, which uses a very linear Start Button/QuickLaunch/Taskbar. In order to maintain the original feel of the theme while still porting it, siginificant modification was subtley made in order to keep the Start Button separate from the orb beneath (which itself became just simple shortcuts).
Above all, just have fun with it! Most skinnable apps also have great communities to go with them, which provide exceptional resources for the questions you will certainly have. If you’re experiencing a problem or difficulty, chances are others have already encountered it and can provide some choice instruction.
If this was helpful to you, please leave a comment. And if you successfully create a skin, please upload a screenshot of it in the Forums so the rest of us can take a peek.