Okay, so ya want to create a theme using ThemePark. This little tutorial should give you enough of an idea of what's involved to get you started.
This is a work in progress, and contributions are welcome. Encouraged, in fact, because they mean I have to do less work!
If you've got any questions, you can try emailing Jason at , but I probably won't be much help since I've never made a theme myself. Another alternative is posting a request for help in the MacNN Forums.
You may find it helpful to design the lion's share of your theme in Photoshop first - this will allow you to work out a consistent design you're happy with before having to slog through resources and will allow for much more flexible revision cycles (having to update every resource after a global contrast change can get pretty tedious, for example). Once you're happy with the master design, building the actual theme becomes much less of a guessing game... this is actually the fun part (although building out the actual resources can be fun as well if you enjoy tedious activities I guess).
Technical Tip 1: Be realistic - make sure that what you've designed will actually work within the confines of Aqua. You'll quickly realize that the appearance framework was designed specifically to accommodate Aqua and Aqua only - so you'll have to familiarize yourself with just what you can and cannot change, how resources are handled differently between Carbon and Cocoa applications, etc. Some of the things to keep in mind are:
Text colors can be changed, but changes will only appear in Carbon applications, so get used to that black type and forget about designing dark interfaces...
Widget locations (close, collapse, zoom and toolbar buttons) are hard-coded in Cocoa applications - so although shuffling the masks within the resource is possible, your widget placement will be inconsistent between Carbon and Cocoa apps... in fact, the placement of just about everything in Aqua is built right in (which is probably why most themes resemble Aqua in some way)...
Technical Tip 2: Work to a template - one way to do this is to assemble a collage of the various interface elements you'll be reworking into an Aqua 'mock-up'… Assemble screenshots of windows, palettes, menus, tabbed panes, etc and compose a mocked-up theoretical desktop - the goal here is to provide you with a good smattering of all the elements you'll eventually have to deal with in actual relation to each other, provide a skeleton over which to lay your design (with the assurance that it will all fit nicely into its Aqua confines), and give you a good idea as to what the whole thing will look like when it's up and running.
Technical Tip 3: Use Photoshop's layer effects to your advantage - recreate Aqua's built-in stroke and shadow setup with a compound layer effect (transparent outer 1-pixel black stroke set to multiply , transparent slight outer glow in black set to multiply, and a transparent black dropshadow set like Aqua's active window dropshadow for example). Simply turn them off before assembling resources that utilize the built-in system effects or merge them with their host layer before building out to resources that fake them with alpha transparency. You'll find these help a great deal when you're designing by providing an accurate example of what you'll actually see once you're done (and by providing you with an easy drag and drop method of playing out these effects across the entire interface with consistency).
Design Tip 1: Be consistent - design a few really nice elements, adapt them, stretch them, tile them and play them out across the entire design rather than redesigning each element from scratch. You'll be amazed how far a really nice button will take you when you start building tabs, thumbs and popups.
Design Tip 2: Forget what you know - many of the tricks you might have utilized in the past to get 8-bit graphics to appear dimensional and pop from the screen in the past will no longer apply. Flat, graphical and classic-style interfaces adapted to Aqua tend to look odd. Why? Because Aqua is supposed to look 3D with real depth and utilizes 32-bit graphics with neat effects like dropshadows and alpha transparency to achieve this. In the past interfaces had to rely on tricks like strokes and hard bevels to achieve a sense of depth, and these effects will likely clash with Aqua's window strokes and shadows. Rather than struggle trying to squeeze a graphical style into Aqua, explore more realistic designs and work those built-in shadows and strokes to your advantage:
look to real world materials and try to reproduce them... see how a simple light-from-above setup like Aqua's plays across their surfaces (check out the glossy real world reflections on slick car finishes for example and you'll suddenly have a million ideas to play with)...
Try setting up lighting and material models in a 3D program... the possibilities are limitless and you'll have a really good idea of how your final material should look. Work with simple geometrical shapes such as capsules, spheres and cubes for reference, or push the limits and build your actual interface elements in 3D. Render them out for composition into your master design (and then eventual building into resources)...
Design Tip 3: Depth in the vertical - if you look at Aqua you'll notice that it's essentially made up of panels and bubbles. Titlebars, toolbars, menu backgrounds, dialog boxes - these are the panels. Buttons, icons, popups, sliders, scrollthumbs - these are the bubbles. It's a case of extreme flatness and extreme depth mixed, with Aqua utilizing the system's global window stroke and dropshadow to give a sense of depth to the panel areas. Because of this, most of the panel regions you see onscreen are derived from fills without edges - fine if you're going with a similar 'panel and bubble' approach, but lousy if you wanted to increase the apparent depth of these big flat regions. As a result, the only way to achieve any substantial and consistent depth effect with these panel elements is to explore bevels and edges in the vertical as opposed to the horizontal (top and bottom not the sides). This way a toolbar panel and titlebar will always play nicely together and into any implied depth you've created without looking overly flat (which most panel regions will always actually be).
Design Tip 4: Get used to vast expanses of sweet nothing - Aqua is very open concept as opposed to the interfaces of the past, which were an exercise in the conservation of space (chalk it up to the average monitor resolution having increased exponentially over the past few years - available screen real estate is no longer at a premium, although some would argue that point). Unfortunately, this is handled in a higgledy-piggledy manner with Aqua - there are dozens of resources patchworking any given 'panel' area, so you can also forget about using a variety different backgrounds throughout the system. You could create an 8x8 pixel region filled with a repeatable pattern or solid color and use this to fill in these areas (many windows will ignore anything beyond the upper left 8x8 pixel square). Alternatively you could go with a 128x128 pixel pattern for these areas as long as the upper left 8x8 region tiles in a visually pleasing and consistent manner.
Design Tip 5: Two interfaces in one - keep in mind that in addition to Aqua you'll need to accommodate 'metal' windows like those in the iApps or Quicktime, so you're actually designing two window/widget combinations. You can use this to your advantage by playing with the cool layered gradient fills, beveled edges and unique widget sets these windows provide.
Now that we've got the design philosophy covered, let's begin actually creating your theme.
The majority of Mac OS X theme information is stored in a file named 'Extras.rsrc' hidden deep in the bowels of your operating system. You will need to edit this file to create your theme. However, it's not wise to edit it directly since it's essential to the proper operation of your computer. Thus, we're going to create a copy of it.
Step 1: Open a new finder window at the root level of your hard drive. From within the Finder, select the Go menu and choose Computer.
Step 2: Double-click the hard drive that contains your Mac OS X installation.
Step 3: By double-clicking, navigate through the following folder hierarchy: System -> Library -> Frameworks -> Carbon.framework -> Frameworks -> HIToolbox.framework -> Resources
Step 4: Select the file Extras.rsrc by single-clicking it.
Step 5: Copy the file by choosing Copy from the Edit menu.
Step 6: Navigate to a convenient location such as your Documents folder. You can do this by clicking the Home button on the toolbar and then double-clicking the Documents folder.
Step 7: Create a copy of the Extras.rsrc file by choosing Paste from the Edit menu.
At this point, you should have a file name Extras.rsrc saved in a convenient location, such as your Home directory. Open this file with ThemePark by dragging it onto ThemePark's icon, or choosing Open from ThemePark's File menu.
You should see something similar to the following:
Image 1: A ThemePark window
The left-most column shows the types of resources that can be edited with ThemePark. The middle column shows the numeric IDs and (for some resource types) names of the resources present that have the type selected in the left-most column. The right-most column is an editor for the resource with the type selected in the left-most column and the ID selected in the middle column (see Image 1).
Of the resource types that can be edited with ThemePark, the most important are the pxm# and ppat resources. Here's a brief description of the different types of resources:
clr# Resources of this type contain a list of different colors. You don't generally need to edit the clr# resources to create a theme.
clut Resources of this type contain a list of different colors. For all intents and purposes, these resources have the same format as the clr# resources. You don't generally need to edit the clut resources to create a theme.
ppat Resources of this type contain a pattern that can be tiled to form a textured background. These resources generally specify window backgrounds and the like.
pxm# Each resource of this type contains a number of bitmapped images. Each image is generally used for a specific purpose. The images in a pxm# resource each have an index (see Image 2) that identifies which is which. These indices can also be referred to as frames or image numbers. The pxm# editor displays four images for each index. These will be discussed further in the next section.
Since the pxm# editor is where you'll spend the majority of your theme-creating time, let's dive right in and explore it. Image 2 shows the pxm# editor.
Image 2: The pxm# editor
The column labeled Num gives the index of each frame of the pxm#.
The images in a pxm# resource generally contain transparency. The Opaque, Transparent and Composite columns describe the image and the way that it is composited onto a drawing surface using transparency. The column labeled Opaque shows what each frame of the pxm# would look like if there was no transparency applied.
The column labeled Transparent is the transparency mask for each frame of the pxm#. This image describes how the Opaque image is composited onto a drawing surface. The areas of the Transparent image that are completely white correspond to areas of the composited image that consist of only the Opaque image. Conversely, areas of the Transparent image that are completely black correspond to areas of the composited image that consist of only the drawing surface.
The Mask column does not relate to transparency, instead, it describes the areas of the frame that respond to mouse clicks. Black areas will respond to mouse clicks, while white areas do not sense them. For example, the pxm# resource shown in Image 2 responds to mouse clicks anywhere in the square that defines the image, not just in the circular button that one might think.
Finally, the Composite image shows how a frame of the pxm# resource is composited onto a drawing surface. You can experiment with changing the drawing surface color by using the Background control.
The Zoom slider changes the zoom-level with which the images are displayed. It does not modify the resource itself - it merely allows you to view it with more detail.
An editor doesn't do much good if there's no way to edit its contents. Let's look at different ways to change the contents of a pxm# resource.
You edit a pxm# resource by transferring its contents to an external image editor such as Adobe Photoshop, editing it there, and then transferring it back. You can accomplish this by using either Copy/Paste, or, Drag & Drop.
But, what is it that you wish to transfer? ThemePark will transfer different images depending on what you've selected in the pxm# editor. Here's a brief run-down of what's possible:
Transfer all frames of a given column - You can copy every frame of a column by choosing the column header (which selects the column), and then choosing Copy from the Edit menu. If you chose the Composite column, the image that is copied will contain a transparency mask that can be pasted into applications that support pasting transparent TIFF images (unfortunately, Photoshop is not one of these, but Preview is). Image 3 shows the result of copying the Composite column of the pxm# resource we've been examining.
Image 3: The copied Composite column
Transfer all frames of adjacent columns - You can also copy every frame of multiple column by choosing the column header of the first column, holding the Shift key and choosing the column header of the last column, and then choosing Copy from the Edit menu. Image 4 shows the result of copying all of the columns of the pxm# resource we've been examining.
Image 4: All of the columns were copied
Transfer all columns of a given index range - You can also copy every column of a given index by selecting the index's row header (which selects the row), and then choosing Copy from the Edit menu. Likewise, you can copy a range of indices by selecting the first row header and then holding the Shift key and selecting the last index. Image 5 shows the result of copying several of the indices from the pxm# resource we've been examining.
Image 5: All images for several indices
Transfer an individual image - Finally, you can (unsurprisingly) copy just a single image corresponding to either the Opaque, Transparent, Mask or Composite segment of an individual frame. Just select the single image you wish to copy. Or you can select one corner of an assortment of images and then hold the Shift key and select the other corner. Image 6 shows the result of copying the Opaque and Transparent images of several of the indices in the pxm# resource we've been examining.
Image 6: More copied pxm# images
Pheww. You can also drag any of these selections into any graphics program that will accept them.
So, let's say that you've edited your image(s) and now want to Paste them back into ThemePark. ThemePark is smart about what you paste. If the image you're pasting “fits” into the selection you're trying to paste it into, ThemePark will do the right thing. But just in case it doesn't, let's go over exactly how this works.
A group of multiple images that were copied from ThemePark may look like Image 7. Notice that the images are separated by a 1-pixel white line. At the intersections, there is a 1x1 pixel green dot.
Image 7: Close-up of multiple pxm# images
These grid lines are used to paste multiple images back into ThemePark. ThemePark looks for grid lines and grid dots to determine how to paste multiple images. Your grid lines and dots do not need to be the colors shown above - you can use any color, as long as you use the same color everywhere in the image. For example, you could paste the image in Image 8 back into ThemePark.
Image 8: A valid image with differently colored separating lines.
To recap, the basic rules of pasting multiple images into ThemePark are these:
Grid lines and grid dots must be present.
Grid lines and grid dots must be the same color throughout the pasted image.
The selection in the pxm# editor should have the same number of elements as the image you are trying to paste.
Editing transparent images in Photoshop is not as much fun as it could be. Mainly because creating an image with a transparency mask isn't much fun. Let's walk through what's involved. We'll copy a single image from ThemePark into Photoshop, modify it, and then paste it back into ThemePark
Step 1: Select the Opaque image in ThemePark. Choose Copy from the Edit menu. See Image 9 for an example.
Image 9: The selected opaque image
Step 2: Now, we'll create a new document in Photoshop with the same size as the copied image. Switch to Photoshop and choose New from the File menu. All of the sizes will already be set properly. For the background, choose Transparent. See Image 10. Paste the image into your new Photoshop document.
Image 10: Creating the Photoshop document
Step 3: Switch back to ThemePark and select the corresponding Transparent image. Copy it, and switch to your new document in Photoshop. From the Tools palette, switch to Quick Mask mode (see Image 11). Choose Paste from the Edit menu. Switch back out of Quick Mask mode by pressing the button on the Tools palette to the left of the one you used to enter Quick Mask mode. You should have a selection that resembles the transparent image.
Image 11: Selecting Quick Mask mode
Step 4: Create a transparency mask by choosing Add Layer Mask -> Reveal Selection from the Layer menu. Then, choose Layers from the Window menu so that the menu entry is checked and the Layers palette is visible. It should look like Image 12.
Image 12: Your Layers palette
Step 5: At this point, you can edit the image as you please. To edit the Transparent portion, choose Channels from the Windows menu, and make only the Layer 1 Mask channel visible (see Image 13). To edit the Opaque portion, make the RGB channel visible (which will also make the individual Red, Green and Blue channels visible). Image 14 shows the settings you would use to edit the Opaque image. In addition, to temporarily unmask the image, you can right-click (or control-click) the mask image in the Layers palette and choose Disable Layer Mask from the contextual menu. Choose Enable Layer Mask to redisplay it.
Image 13: Editing the Transparent image
Image 14: Editing the Opaque image
Step 6: At this point, let's move our modified image back into ThemePark. Image 15 shows the (lame) replacement image.
These resources are used to save particular colors. As far as I can tell, the only resource that actually does anything is clr# 384. The following shows what this resource is used for. Please note that almost everything in this list is only effective for Carbon applications - Cocoa almost always uses hard-coded colors. If you know of any additions or mistakes, please don't hesitate to let me know!
Resource Type: clr# Resource ID: 384
Index 00: Dialog Active Text Color
Index 01: Dialog Inactive Text Color
Index 02: Alert Active Text Color
Index 03: Alert Inactive Text Color
Index 04: Modeless Dialog Active Text Color
Index 05: Modeless Dialog Inactive Text Color
Index 06: Window Header Active Text Color
Index 07: Window Header Inactive Text Color
Index 08: Placard Active Text Color
Index 09: Placard Inactive Text Color
Index 10: Placard Pressed Text Color
Index 11: Push Button Active Text Color
Index 12: Push Button Inactive Text Color
Index 13: Push Button Pressed Text Color
Index 14: Bevel Button Active Text Color
Index 15: Bevel Button Inactive Text Color
Index 16: Bevel Button Pressed Text Color
Index 17: Popup Button Active Text Color
Index 18: Popup Button Inactive Text Color
Index 19: Popup Button Pressed Text Color
Index 20: Icon Label Text Color
Index 21: List View Text Color (and Open/Save dialog list color)
Index 22: Document Window Title Active Text Color
Index 23: Document Window Title Inactive Text Color
Index 24: Movable Modal Window Title Active Text Color
Index 25: Movable Modal Window Title Inactive Text Color
Index 26: Utility Window Title Active Text Color
Index 27: Utility Window Title Inactive Text Color
Index 38: Popup Window Title Active Text Color
Index 29: Popup Window Title Inactive Text Color
Index 30: Active menu title text color
Index 31: Selected menu title text color
Index 32: Disabled menu title text color (OS uses a lighter variation)
Index 33: Active menu item text color
Index 34: Selected menu item text color
Index 35: Inactive menu item text color (OS uses a lighter variation)
Index 36: Popup Label Active Text Color
Index 37: Popup Label Inactive Text Color
Index 38: Tab Front Active Text Color
Index 39: Tab Non Front Active Text Color
Index 40: Tab Non Front Pressed Text Color
Index 41: Tab Front Inactive Text Color
Index 42: Tab Non Front Inactive Text Color
Index 43: Icon Label Selected Text Color
Index 44: Bevel Button Sticky Active Text Color
Index 45: Bevel Button Sticky Inactive Text Color
Index 47: Finder file-item subtext (activated with View -> Show View Options -> Show Item Info)