Running 18 days
without a restart.

Skinning iTunes by George Krueger

If you've been wanting to create your own iTunes makeover, or "skin," but didn't know where to start, then this tutorial is for you.

Here's what you will need to get started:

• ResEdit (or another resource editor)
  
• A copy of iTunes (always work on a copy!)
  
• Your favorite graphics application
  
• An adventurous spirit and creativity
  

Since we will be dealing only with the PICT resources of iTunes, lets get acquainted with some of primary resources you will be concerned with. Open iTunes in ResEdit and take a look at the following PICT resources:

Here are some of the equivalent resources for the minimized view of iTunes:

And some of the resources that appear in the main part of the window:

These are some of the major components you may want to alter. Of course there are many others, so feel free to look around. Most of the components also have corresponding "masks", which I'll discuss later.

Use ResEdit to open and copy the PICT resource from iTunes and paste it into your graphic editor. Let's start with the background texture, PICT id # 1024. The main thing to keep in mind is that this resource will be tiled to fill the window, so make sure that you use a pattern that tiles well (by this, I mean you should make sure that the edges match up on all sides). If you use Photoshop, you can use the offset filter to help you with this. Try setting the filter for 10 pixels right and 10 pixels down with "wrap around" enabled, then edit it so that there are no "seams."

I've chosen a simple striped background for the above example, which tiles well, but there are many possibilities. For this "wooden" background, I had to pay more attention to the edges:

Another thing to point out is this resource will only display in grayscale. As far as I know, no one has figured out how to display the main window in anything but grayscale. (If someone knows of a way to add color to the window, please let us know!)

A second simple change we can make is to the Apple mask, id #153 (157 for the minimized view). Although this is technically a "mask," if you replace it with a color image, it will show up in color (as the above image illustrates). Make sure that you keep the size of this at 35 pixels high x 30 pixels wide for the main view (id #153), and 21h x 19w for the minimized view (id #157).

Start out with these small changes and work from there. One thing you can do that affects the overall "feel" of iTunes is to change the appearance of the display window - ID #152 for the main view, and #156 for the minimized view. I usually start with this component and then try to make the other elements match. I find this is a good way to work (with the exception of my "Oak" skin, where I started with the wooden background texture and went from there).

Now, lets talk about the buttons. Each button has three states, which I will designate as: grayed out, normal and pressed. These are all contained within the same PICT resource, and these resources have corresponding masks:

And some can also change, like the Play button:

If you change the shape of any of these buttons, be sure you change its mask. Be aware that some resources share the same mask. For instance, both the previous and next buttons (ID's #437 & #438, respectively) use the same mask (id #436), so they will always have to be the same shape. Pay close attention to which masks go with which buttons.

Note that these are grayscale masks. This means we can play with transparencies. For instance, here I've changed the mask (id #151) for the display window to a lighter shade, allowing the background texture to show through:

This is a nice effect. Try playing around with the masks for the buttons as well.

Another place where masks come into the picture is for the "wells" around the buttons and the "search well." You can eliminate the wells by carefully making the masks fit the buttons (id #434) and the search well (id #492):

For the previous/play/next buttons, you can also accomplish this by replacing the mask with a plain white image. Do not, however, just delete the mask. Also, don't try this approach for the "search well", the result is undesirable.

By now you should be well on your way to creating your very own iTunes masterpiece. Don't be afraid to experiment, and have fun. Also, be sure to check out Michael Coyle's very informative tutorial on editing the scroll bars, to further enhance your creation.