[bbxstudio]

For what it's worth, I'm slowly working out a designer's overview on OSX theme development (big words for a guy who has yet to actually release one, but hey). Once BBXstudio is in full swing this stuff will be posted on my website, along with a resource-specific breakdown for beginners and general reference as well assuming all goes well. So here's a 'starting point' tips and tricks/initial setup article some might find useful... God knows I've been in perpetual design mode for long enough - I guess this is the process of the effort I'm most familiar with in any case. Enjoy (or ignore and/or dislike as may well be the case)!

--------------------------

Tips in setup and developing a master plan in Photoshop

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:

o text colors are alterable but will only take in Carbon applications, so get used to that black type and forget about designing dark interfaces...

o 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)...

o etc...

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 the 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:

o 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)...

o try setting up lighting and material models in a 3D program... the possibilities are limitless and you'll have a really good idea as to how your final material should look. Work with simple geometry like 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: 2 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 2 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.

--------------------------

That's it for now - probably a little longwinded as I've yet to go through and edit properly (and I generally have too much to say in the first place)...

[smeger]

This is very nice. I'd like to add this to the tutorial, with your permission, and crediting you, of course.

It would be cool to see someone post a Photoshop template that newbies could adapt.

[bbxstudio]

Originally posted by smeger:
This is very nice. I'd like to add this to the tutorial, with your permission, and crediting you, of course.

It would be cool to see someone post a Photoshop template that newbies could adapt.

Sure - go ahead I'll try and dig up my layer effect set for the built-in stroka and shadows as well...

[bOOzo]

smeger - are you going to update the tutorial? I link to it from my support page and I think what William wrote is good stuff and it would be a shame if people missed out on it.

[smeger]

Originally posted by bOOzo:
smeger - are you going to update the tutorial? I link to it from my support page and I think what William wrote is good stuff and it would be a shame if people missed out on it.

Yeah, I am. I just haven't done it yet.

I'll try to get on it today.

[smeger]

Okay, I've added the above stuff to the tutorial. William, lemme know if you don't like how I credited you and I'll change it.

I've also added an all-important Table of Contents, whoo!