Designing a Windows XP Logon Screen

Designing a Windows XP Logon Screen

I. Introduction
Hey there, folks! What follows is a fairly in-depth look at designing Windows XP logon screens. Please note that this is written as-is, and I'd rather you not send me a bunch of email asking me detailed and specific questions about individual items within this article.thanks. Another thing you might note is that I cover a few basic design elements in this tutorial that apply to things other than Windows logon screens. If you're a practicing designer, ignore them - otherwise, you might consider them a blessing. Note that I use Photoshop. Any references to graphics software will be in terms of Photoshop. That having been said, let's roll.


II. Requirements
Before we begin designing this thing, some basic tools are necessary - requirements, if you will. First of all, you'll need a nifty little decompiler/recompiler called ResHack. For the code-challenged individuals in the audience, not to worry; ResHack is pretty simple to use. Believe me when I say that if I was able to figure it out, you will be too. The current version of ResHack is available here. After you've got that installed, you'll need to select an image editor - you are, after all, creating a graphical user interface, so you'll need a graphics program. Hopefully, you've already got one. If not, you could always rely on MS Paint.I don't recommend it, though. Some higher end applications that some of you may be familiar with include Jasc's Paint Shop Pro and Adobe's Photoshop. Also, make sure you have XPLogon UI - it aids in UI switching tremendously. If you've got this stuff covered, we can move on to the design phase.


III. Concept
Before you start executing your design, you may want to give it some thought. I'm not going to delve into color theory here, but keep in mind that you're designing an interface, not some far-out image with four billion colors - it's a piece of artwork that's designed to be used, so keep it clean. I find that black or other dark hues/shades are good to work with for this, since white and lighter colors are very overpowering on a monitor. Other than that, it's up to you.


IV. Graphics, Part I
The first thing you'll probably want to do is create a single directory to keep all of the resulting junk from these things in. Open your graphics editor. Right now we'll be creating one image - the background (the simplest part). Make sure that the initial canvas size on this beast is the same as your monitor resolution - in other words, if you run at 1280 x 1024, make the image 1280 x 1024. Now design your background. Envision where on the image you want the logon icons and buttons to display; this will all be edited in later.

After you finish the background, save it in the native file format of your graphics software - Photoshop users, that'd be a PSD file. Now, you'll need to edit/create some other images in order to complete the logon. But where are the templates? Why, inside of logonui.exe, of course! If only we could rip them out.


V. ResHack, Part I
Now we're going to learn all about ResHack. But first, find a logon screen you already have on your computer. Copy it's logonui.exe file, and then paste it into the directory where you're keeping the files for your new logon! Now, fire up ResHack. Once you're in ResHack, follow the menu to File > Open and select the copy of logonui.exe that you made. Once you've got it open, you'll see a weird directory tree in the left pane, and a blank one to the right. The directory tree should contain the directories UIFILE, Bitmap, String Table, and Version Info. No need to mind all of these just yet. Right now, we're only interested in the graphics. and those would be located in the Bitmap directory, as you may have guessed. Opening it up, you'll be confronted with a bunch of folders, numbered on-and-off from 100 though 127. Each folder contains an image that is somehow related to the GUI display of your logon. Many of these folders contain images that are minute details of the logon, but since I'm a nice guy I'll detail all of the ones I can figure out right here and now:

100 - background image
102 - password entry field
103 - arrow button
104 - arrow button rollover
105 - help button
106 - help button rollover
107 - power button
108 - rollup arrow
109 - scroll down arrow
110 - scroll up arrow
111 - scrollbar
112 - selected user bubble
113 - icon square
114 - default icon
119 - highlighted icon square
121 - power button rollover
122 - rollup button rollover
123 - ?
124 - vertical line
125 - line @ top of screen
126 - line @ bottom of screen
127 - ?

So anyways.right now we're concerned with a few in general. Click on the folder labeled 112; right click on the image and select "Save Resource". This will prompt you to save the BMP image.save it as "112.bmp" in your logon directory, and switch back into Photoshop. Open 112.bmp and give it a look over. This is the image that's displayed in the background when you click a user's icon and are prompted to enter their password. Customizing this is key to a good logon, since it's a pretty large usable element - think of it as a big button. Once you've edited this to your liking, save it. Switch back into ResHack and repeat this process for any other images you wish to modify, using the chart above - this way you can change icons and such. Have fun, and be sure to save the images as bitmaps, and by the numbers they have in ResHack - otherwise, things will get very confusing.

VI. ResHack, Part II
Now we're going to get into a little bit of coding. Switch back to ResHack and open the folder of logonui.exe called "UIFILE". Open the folder called "1000", and then click on the file called "1033". It looks blank at first, but if you scroll down about 1/2 of the way, you'll start to see the code - this is the code that powers your logon. Each 'style' tag in the code here represents an object in the design, what color it is, and where it is placed. At the beginning of each tag, where the code reads "resid=", whatever follows the "=" sign is the object being defined. The first object, "framess", is the main background - if you read further into its style tag, you can see where it specifies the image to be read: 112 follows the rcbmp command. After the background, toppanelss and bottompanelss represent the two borders at the top and bottom of the screen in each WinXP logon. Any style tag that includes a line containing "rgb(X,X,X)" is a color value that you can define. If your logon uses the colors yellow and black, for instance, you may want to change the RGB color values for styles to the RGB color equivalent of yellow. The code would then read "rgb 255,216,0)". Make sure not put spaces after the commas that separate the numbers. If you're having trouble getting specific RGB color values, use the Photoshop pallete. Alternatively, the Windows color palette is a crude method of obtaining RGB color values. Scrolling down, you can see all the different text color options that can be changed; some of the more noticeable ones include the "Welcome" text, usernames, and note text.

More importantly than color, the last two paragraphs of this file allow you to change the positioning and sizes of the username and password boxes. I don't recommend messing with these a lot, as it takes a little bit of luck to know where to put the boxes. Make sure you know the pixel dimensions you want the panels to be, and the pixel alignment (X and Y axis, numeric values) you want them to be located at. Since I'm more of an artist, I usually compromise, leave these as is, and work my images around them.

While we're still in the coding portion of this project, let's take a look at a few other (easier to edit) variables that you can set. Looking to the left navigation pane of ResHack, open the String Table folder. The contents of folders 1, 2, 3, 4, and 7 all contain the messages found around XP logons - from welcome messages to those displayed for password errors. These are all pretty self-explanatory, so I'm not going to bother commentating on all of them. If you're familiar with the way an XP logon looks (as you should be by now) then you'll have no trouble with this stuff.


VII. Wrapping Up
At this point you've finished the coding, so the only thing remaining is to include your new graphics into the logonui.exe file! The simplest way to replace them is by choosing Action > Replace Bitmap from the toolbar. When the window pops up, click through the list to the right (make sure you've got the right one in the preview pane) and then select what you want to replace it with by clicking "open file with new bitmap". This is where it comes in handy to number them as they were originally. Unfortunately, the popup window closes every time you replace a bitmap, so if you've modified a lot of them, it might take a few minutes to complete.but hey, you're almost done.

Alright, now that you've got that finished, just go to the File menu and Save.that's it! You're done! Now, Open XPLogon UI, select your logon, and put it into use! A quick logoff command will let you know if you've done the job right.