Designing a Windows XP Logon
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.
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.
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
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…
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
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
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.