HTML Tutorial

Fanzing Forum

Creating Desktop Themes

F.A.Q.

A good site on how to create themes can be found at http://eoni.themes.tucows.com/creating.htm.
I will be quoting from there several times (ALL quotes are from that site, so I won't bother annotating each); feel free to check out the full document!

All components of a Desktop Theme will be credited to the authors (including e-mail address) in the Readme file for the Theme.

Fanzing has decided to begin offering Desktop Themes. There are several reasons for doing so. First off, with all of the desktop theme sites out there, we can upload our themes on many servers and thus get noticed by more people. The main reason to do this, though, is that there is a lack of good comics-oriented desktop themes. Almost all of them are about Batman or Superman. Many have screen captures or scans of pictures which aren't well done or which, while beautiful, do not work as wallpapers because they cause eye strain.

With the wealth of creative people working on Fanzing, I think we could create some gorgeous desktop themes which will delight the many comics fans out there! This document will help you to do it.

If you'd like to do a theme for Fanzing, the FIRST thing to do is contact Fanzing and let us know what your idea is or which of the suggested themes you're doing. There are so many topics to choose from, and we don't want to duplicate efforts. This isn't to say that there can only be one Superman Theme, one Batman Theme, one Legion Theme, etc., as we can use more than one wallpaper per character. For instance, one Superman themepack can contain several Superman wallpapers and color sets but use the same icons, cursors, etc. At the bottom of this document is a list of suggested themes, as well as some theme-making resources.

There are several components to desktop themes:

• The Wallpaper
• The Icons
• The Cursors
• The Sounds
• The Colors and Fonts
• The Logo Screens
• The Screen Saver

I will deal with each one separately. These instructions will cover not only general instruction in theme-making but also covers the requirements for Fanzing themes.

The Wallpaper

The most essential part of the theme is the "wallpaper", an image which fills the desktop screen either by tiling an image many times or by making one picture. For our purposes, we'll stick to the latter. Wallpapers can be done in either bitmap (.bmp) or Jpeg (.jpg) formats, but we're going to ask for Jpegs only, as they are much smaller. This allows us to do more detailed (i.e. "prettier") pictures without bloating the theme file into a multi-megabyte download.

Standard monitor screens are in proportions of 4 across by 3 down. The standard monitor setting (used by slightly more than half of all web users) is 800 pixels across by 600 down. The second-largest number of users use a setting of 640x480. Thus, we'll aim for our wallpapers to be 800x600, since it's better to compress a large graphic than to stretch a small one.

In your imaging software (LviewPro, Paint Shop Pro, Photoshop, etc) open a new graphic measuring 800x600 in order to begin your wallpaper. If you're using existing artwork, you can copy-and-paste it in, rearrange layers until it looks nice. If you're drawing from scratch, make sure you draw something in dimensions of 4 wide by 3 high, then scan it in and resize it to 800x600.

Considerations when making the wallpaper:

1. Try to focus the wallpaper to the center or the right of the screen, because the left side is usually covered by icons.
2. Colors can make or break a desktop theme! While colors are a matter of taste, just bear in mind that people have to look at your artwork as a BACKGROUND while they're working. So many wallpaper creators are focusing on what "looks cool" and not on what is easy to look at. Some of the wallpapers for my favorite things (Dr. Who, Star Trek, Comic Books, MST3K) are impossible to leave on my desktop for long, while other stuff like coral reefs and sunsets I can look at for months just because the peaches and aquas and ocean blues are easy on the eyes. A good test of your wallpaper is to set it as your desktop wallpaper for a day (if you know how to do that) or just leave it up on your monitor screen in your paint utility and look at it for a while. Unfortunately, we're dealing with primary-colored superhero costumes here, but we can tone them down if necessary. If your finished artwork looks too harsh, save a backup copy of it and then try playing with the tones and light contrast and other adjustments. (If you don't feel confident of your skills, ask some of the more proficient members of Fanzing to give you a hand with this part.)
3. Fanzing will be putting a logo in the bottom right 1/4 of the wallpaper (about 225x70, maybe smaller), so try to leave that relatively empty. Right now, we've no idea what that logo's going to look like or whether it will be transparent or opaque; we'll keep you updated on that front.
4. Sign your artwork on the bottom-center or bottom-left of the wallpaper. Don't get carried away with the size of the signature, as you'll get written credit in the readme file, but make sure it's there. These will be passed around freely on the web, so we want you to get the credit you deserve!

The Icons

Theme-oriented icons will be necessary to accompany the subject of the wallpaper. The four usual icons are "My Computer", "Network Neighborhood", "Recycle Bin (Empty)" and "Recycle Bin (Full)". Try to pick meaningful icons. For instance, my idea for a Legion of Super-Heroes theme is to use Brainiac 5 (the computer brain) for My Computer, Triad (the three-in-one girl) for Network Neighborhood (running multiple computers off one system), Chuck Taine for the empty Recycle Bin and the bloated Bouncing Boy for full Recycle Bin. Recycle Bins are always fun!

Icons will measure 32x32. That's right, 32 pixels, that's all. Look at these icons for Jay Garrick and Wildcat that I made from a JSA wallpaper previously submitted to Fanzing.

Obviously, you can't get too detailed. My recommendation is to try to do a face or body shot that is no more detailed than an animated cartoon, for that will look the cleanest when it's icon-sized.

Now, as to HOW you go about creating the icons. Well, there are numerous methods. First off, if you don't have an Icon program, don't worry; all you need to do is send me the 32x32 bitmaps and I can create the icons. If you'd like to purchase an icon maker, I'm curently testing out a program called A-X Icons, which you can get from Axialis.com for only $14! (NOT a bad price.) They also make similar cursor software for the same price. Both programs are shareware with a 30-day trial and a lifetime purchase (meaning you never pay to upgrade to the latest version).

A-X icons lets you import pictures and make them icon-sized. I've had a few surprises in doing this; some pictures that I thought would look wretched if compressed came out all right.

OR, you can snag a 32x32 portion of a picture using a capture option.

If you don't use A-X Icons, you can try shrinking your image down to the right dimensions in your image software. You may want to try cleaning up your image later, but beware this advice:

ALL ICONS LOOK SUCKY CLOSE-UP! Many of the afore-mentioned nice icons looked like absolute crap and I thought there was no way they'd work, but then I reduced them and lo and behold they look okay. If you don't know what I mean, try saving those two icons up there and blow them up on your image software. Yuck! And that's AFTER I cleaned them up.

It all comes down to this: whether you're shrinking larger artwork or building from scratch in an icon-editor, use clear thick lines and cartoon resolution.

If all else fails…enlist the help of people who can do icons and cursors. People like Aaron J. Sams [email protected] and Scott McCullar [email protected]

The Cursors

Doing cursors is up to you. Unlike the icons, which are an essential part of the theme, cursors are relatively generic and needn't match the theme. If you don't come up with any cursors, I'll just use a standard icon.

HOWEVER, should you choose to include cursors, you can really dazzle the user!

Like icons, cursors are 32x32, and they need not be animated unless you feel up to it. You can make them as .bmp files and send them to me, or you can purchase A-X Cursors, which you can get from Axialis.com for only $14. Be sure to check out the Icons program, mentioned above, as well. Both programs are shareware with a 30-day trial and a lifetime purchase (meaning you never pay to upgrade to the latest version).

Here is a full list of the cursors, which I'm copying from the Tucows site.

There are 14 cursors to be created;

• Normal Select: the normal arrow pointer.
  
• Text Select: the beam that floats over text on a document with which you highlight, cut, paste, etc.
  
• Precision Select: the "crosshair" cursor.
  
• Help Select: displays when you click on a program's "help" dialog box.
• Move: sometimes displays when you move a window or selection.
• Unavailable: when you do not have access to click on something.
• Vertical Resize: the double ended arrows that display when you resize a window.
• Horizontal Resize:
• Diagonal Resize 1:
• Diagonal Resize 2:
• Handwriting: the pen cursor.
• Alternate Select: the arrow that points up.
• Busy: (usually animated) shows when Windows is too busy to perform other functions.
• Working in Background: (also animated) shows when Windows is opening a program or file, asking you to wait.

On some of these cursors, you can cheat and just flip over or rotate the graphic for another cursor. Thus, the vertical resize becomes the horizontal resize, for example.

The main difference between the icons and the cursors is the "hot spot", the area that is used to select with the cursor. Usually, with such things as arrows, this is the upper left. I can do the programming of this if necessary, but it's important for the artist to make sure that there is something to point with. I've seen cursors which were animated dogs and you had to use the rounded ear to click! NOT a good idea, as the "pointing area" was not intuitive.

Again, if all else fails…enlist the help of people who can cursors. Aaron J. Sams [email protected] might be willing to help.

The Sounds

If you don't have a sound set-up, don't worry about this part. I'll handle the sounds.

Some themes such as Batman and Superman movies or cartoons make it easy to find sounds for them. But for most of our themes, there won't be ready-made sounds. What sounds would you use for, say, "Adam Strange", "Hawkman", "The Teen Titans" or "Young Justice"? Every JLA theme I've seen on the web uses sounds from "Superfriends" because that's about all there is.

You can try to find sounds on the web to go with your theme, but don't steal from other themes. Look for Web resources where generic sounds are made available for theme use. Not every computer action needs a sound; in fact, at this point most people like to have their themes stick to the basics: Minimize, maximize, restore up, restore down, empty recycle bin, Windows Startup and Windows Shutdown. There are more actions available, but some of them are damned trying (such as "menu select" sounds that go off whenever you're looking through a menu). An incredibly noisy sound scheme will get a desktop theme deleted even faster than an ugly wallpaper, so we want to put the emphasis on "subdued sounds". It's important that the frequently used window resizing sounds are short and sweet. No one wants to minimize their window to glance at something and listen to the Joker and Harley talking for ten seconds.

The Colors and Fonts

Don't worry about this too much. If you have a general color scheme, suggest it or talk to me in detail via e-mail.

The Logo Screens

THIS is fun! Logo Screens are what you see when the computer shuts down and starts up. There are three of them: the start-up screen ("Welcome"), the wait screen ("Please wait while your computer's powering down"), and the shutdown screen ("It's now safe to turn off your computer").

Unfortunately, the way Windows is organized, you can't just shuffle back and forth amongst your logo screens. Installing one means overwriting the previous logo screen. Maybe Bill Gates will wise up and find a way to make this an option, but for now it means not everyone wants to delete their start-up screen in favor of Fanzing's. What we might do is package Logo screens separately from the theme, to make them an option. Thus, it isn't really necessary to do logo screens for every theme.

Unless you WANT to! :-)

Whether you're doing logo screens to match your desktop theme, or if you'd just like to submit three logo screens to Fanzing, here's how you do it:

First off, there are some good utilities at http://www.cadvision.com/xrx/. You don't need to use them, since I can take your images in .bmp format and convert them, but there is a handy tool called XRX Add Bar Utility which can put an animated message (such as "Please Wait") on your start screen.

As I said, I can take them from you in bitmap format and prepare them if you like. What you need to do is create an image measuring 640x480. The rest I'm going to quote directly from Tucows:

"When you have finished working the image to your liking, you can convert it into a logo file by first resizing the image to 320x400, and then changing the image depth to 256 colors. (Most image editors can perform this function, however, you must make sure that you do NOT select "maintain aspect ratio" or your image will not resize correctly. Now you will notice that your image looks "squashed" but that is fine. Windows stretches the image across the entire screen.) Save your image as a bitmap. If you would like to add the animated bar to the bottom of the screen thare is a handy utility called XrX Addbar that is simple to use and has an infinite color range so you can get it to match up with your image. XrX Addbar will also do your resizing for you as well as save your image in its proper format. When you're finished, rename your bitmap "logo.sys" and that is all. Wait and Shutdown screens are made in the same fashion, except there is no animated bar, and they are named "logow.sys" (wait), and "logos.sys" (shutdown)."

The Screen Saver

A screen saver isn't necessary…but again, if you want to do one, you can. If it's theme-specific, you can include it in the theme. Or you can just offer the screen saver separately.

Unless you're a programmer, you'll be limited to a slide-show type of screen saver (the kind that just shows pictures in a rotation or by random). We'll probably be creating some screen savers using the artwork of various contributors. If you want to do your own, you can assemble one with your own artwork using a screensaver utility. Tucows has an assortment of them here: http://eoni.themes.tucows.com/editscreen.htm

Fanzing Theme Topics

The following are ideas I've had for themes. Some are just general ideas, others are concepts I'm proud of and/or would really like to see done. (Those themes are marked with a Wildcat head…because I'm wild about them) To let me know which ones you'd like to do, be sure to e-mail me at [email protected]. If you'd like to discuss specific ideas in depth, you can e-mail me or we can arrange a WebEx meeting to talk online! The "Claims" section is just to mark which ones are being worked on; it doesn't hurt to have two different themes on the same concept (good Lord, how many different Batman themes are out there!), but you may want to claim one of the open ones instead.
Theme Suggestion	Ideas	Contributor Claim
The JSA	I already have a JSA wallpaper, so I'm starting on one, but we can use more wallpapers for it!
Legion of Super-Heroes	Brainiac as "My Computer", Triad as "Network Neighborhood", and Chuck Taine/Bouncing Boy for "Recycle Bin Empty/Full". I have the idea. I have the sound scheme. I'm working on cursors. I just need someone to draw a wallpaper (or two) and make up the images for the icons!
Superman's Fortress of Solitude (any era)	Superman giving Lois, Jimmy or whomever a guided tour, with robots and all the trimmings all around.
Batcave	Batman at his computer is central, with the penny, T-Rex, Joker card, Alfred, the Batmobile and all the trimmings.
Mystery in Space	A scenic wallpaper. Create a bizarre planetscape with floating cities and multiple suns and rocket ships, etc.; not Rann, necessarily, but make it look cool. Then put Adam Strange and some Thanagarians…maybe even Space Cabby's cab…flying in the distance. I'll package it with some sci-fi sounds and Babylon Zoo's "Mr. Spaceman". For icons, maybe Kanjar Ro, Alanna and Sardath?
Starman 1: Opal City	Jack Knight soaring above the scenic Opal City. (All three Starman wallpapers could be in one theme. I'm creating an animated cursor of Jack's gravity rod in action!)
Starman 2: Starman's legacy	All the Starmen in one wallpaper
Starman 3: Jack and Co.	An atmospheric wallpaper with Jack, the Mist, the Shade, the O'Dares, Ted Knight, Elongated Man and all the other interesting characters from the past six years of Starman.
JLA - current
JLoA - classic	The JLA at it's finest, either in action or in the satellite meeting room (Remember to put Atom's little chair on the table!). This should be the full early 1980s roster, with Firestorm, Red Tornado, Elongated Man and Zatanna as well as the older guys (including the retconned Superman, Batman and WW).
The All-Star Squadron	Show the ASq's main members (Liberty Belle, Johnny Quick, Amazing Man, Robotman, Shining Knight, Tarantula, Firebrand, etc) posing in front of the Perisphere or in action
Men of War	Perhaps have Sgt. Rock, Easy Co, Gravedigger, Creature Commandoes, G.I. Robot, etc. all charging at the screen as the Blackhawks fly overhead.
Birds of Prey	Oracle at her computers, with Black Canary onscreen
Young Justice	Kids horsing around in the YJ cavern, with Red Tornado's face on the giant monitor screen
Impulse	Here's a cool idea: have Impulse at the center of the screen looking straight at the "camera" in obvious agitation. at the bottom of the screen, in front of him, is a keyboard. (In other words, he's sitting at his computer staring at you just like you are at him.) He's obviously agitated that his computer is taking so long to boot up. Behind him, we can see several afterimages of him in numerous places doing other things while waiting for the computer.
Nightwing	Nightwing does those cool McDaniel-esque acrobatics across the screen.
Fanzing and DC	Remember the Aregones-esque logo for Fanzing #17? Remember how George Perez used to draw tons of characters in one piece of artwork? Well, combine 'em. Have DC's characters crawling, flying, rapelling, climbing and peeking around the corners of the giant letters FANZING (or use our logo once we establish it).
Fanzing Tower	Instead of the Giant T, there's the giant F-A-N-Z-I-N-G. The Titans characters fly, zoom and hang around the letters.
Captain Carrot	Captain Carrot and the Zoo Crew. In action, or posing…or perhaps with the Z-Building as the Z in FanZing!
DC Characters	Jam-pack the wallpaper with DC Characters a la George Perez
Plastic Man	Make a goofy, gaudy wallpaper with the zany character. Or maybe have him disguised as the desktop! (In other words, one big rectangle with his colors and the flattened goggle-eyed face)
Marvel Family	Captain Marvel, with Mary Marvel and CM3 and all the oddball characters of Fawcett City
Swamp Thing	Swampy in a Louisiana swamp. Could be gorgeous. Maybe use a photo for the background? We can use flowers and plants for icons and cursors.
The Shade	Dark theme of the villain/anti-hero known as The Shade, with his shadowstuff in action.
Suicide Squad	The Squad in violent combat.
DC Magic	Zatanna, Zatara, Spectre, Dr. Fate or whomever, with a surrealistic background. Maybe put Fate's tower in the background (if Fate's in the picture).
Speedsters	Wallpaper of all the speedsters in the DCU	X

Theme Resources

Icon and Cursor programs: There are a number of them, but for the best deal at the best price I'd recommend A-X Icons and A-X Cursors, which you can get from Axialis.com for only $14 each! (NOT a bad price.) Both programs are shareware with a 30-day trial and a lifetime purchase (meaning you never pay to upgrade to the latest version).

Aaron J. Sams ([email protected]) does work with icons and cursors, and may be willing to help you design a theme if you need help.

Want to work with sounds and .wav files? In looking for some good editing utilities (my current computer has NOTHING as good as my last computer had), I came across Turtle Beach's AudioStation® 32. It has WAV editing and other features, all for only $19.95! (A bargain, as I've found hardly anything else in that price range.)

Screen saver utilities: http://eoni.themes.tucows.com/editscreen.htm

Theme instructions: http://eoni.themes.tucows.com/creating.htm

If you need a cheap alternative to Photoshop, I use Paint Shop Pro. You can find it online for around $50-80 from various software retailers.

Fanzing is not associated with DC Comics.
All DC Comics characters, trademarks and images (where used) are ™ DC Comics, Inc.
DC characters are used here in fan art and fiction in accordance with their generous "fair use" policies.

Fanzing site version 7.1