Veerle's blog

One thing I’m impressed with about Apple’s new system GUI in Leopard is the “inset effect” on the text in combination with the new window chrome. Several people asked me about my opinion on Leopards GUI and I thought I combine this with another question I received on how to create this “inset effect” on text.
So I’ve decided to investigate this subtle effect further via Photoshop layer effects as well as Illustrator’s effects.

In Photoshop

Creating the chrome bar

As shown in the image below, I've started by drawing a rectangle using the Rectangle Tool. I've filled it with a mid grey (but  actually, it doesn't matter which fill you give it, since we'll add a gradient fill Style over the top of this box). In the Layers palette, double-click on the right side of this layer to activate the Styles on this layer (or click on the dark circle-ƒ at the bottom of the panel). Select the Gradient Overlay options. Set the Angle to 90º and click once in the gradient that is shown as Gradient option to change its values. Click the left slider swatch once and click in the color swatch below to change this value. Enter #949494. Do the same for the right swatch and change it to #d1d1d1. Click OK to accept the Gradient Overlay setting. With the Effect options still open, click the Drop Shadow option. Enter black (or #000000) as color, 20% Opacity, 90º as Angle, 1 for Distance and 0 for Spread and Size. Click OK to accept the Style options.

Now as you can see on the 2nd picture, I've zoomed in on the rectangle box. To achieve the exact effect you need to make sure that the path of the bottom of the rectangle is right in between a pixel so you have this 1 pixel blurry effect and the exact same drop shadow effect (as the main navigation bar on Apple's website).

Creating the inset text

Select the Type tool and type the text that you want. Select Left align in the Toolbar, Myriad Pro Regular as typeface and #383838 as color. Now double-click to the right of this text layer in the Layers palette to activate the Styles on this layer and click the Drop Shadow option. Select 'Normal' from the Blend Mode dropdown and choose white as color. Enter 50% opacity, set the Angle to 90º, 1 for Distance and 0 for Spread and Size. Click OK to accept the Style options. That's it :)

In Illustrator

Creating the chrome bar

If you're a vector designer, this method is just as simple. Select the Rectangle tool and draw a rectangle. Objects have a white fill and a black border by default. Click the border color at the bottom of the Toolbox and select the 'None' swatch below (white square with red diagonal line). Now select the Fill swatch and go to the Gradient palette. If the palette is not on your screen go to the Window menu and choose Gradient (or hit command/control + F9). Double click the left color swatch, the Color palette will show up with white as color and Grayscale as color mode. Enter 20% as grayscale value. Now click the swatch on the right of the gradient and enter 55% as grayscale value. Go back to the Gradient palette and change the angle of the gradient to 270º.

With the rectangle selected go to the Effects menu and choose Drop Shadow from the Stylize submenu. Enter 20% as Opacity, 0 pt for X Offset, 2 pt for Y Offset and 1 pt for Blur. Leave the black color and 'Multiply' option unchanged and click OK. If you go to the Appearance palette you'll see that there is an Effect added. Double clicking this effect will open the Drop Shadow options again where you can change these settings. So it's very flexible. Effects are modifiable and therefore very flexible. Filters on the other hand are not. If you've ever wondered what the difference was between Filters and Effects in Illustrator when trying to achieve the same result, then you'll realize that this is a big difference. Once Filters are applied they can't be changed. So keep this in mind.

Creating the inset text

Select the Type tool from the toolbox, click on the canvas in the bar you've just created and type your text. Choose Left align text from the Paragraph palette and Myriad Pro Regular from the Character palette (go to the Window menu if the palettes are not visible). Now go to the Effects menu and choose Drop Shadow from the Stylize submenu. Choose 'Normal' from the Mode dropdown menu, enter 50% as Opacity, 0 pt for X Offset, 1 pt for Y Offset and 0 pt for Blur. Change the black color to white and click OK. Deselect your text, double click the Zoom Tool in the toolbox to go back to 100% (or hit command/control+alt/option+0 for CS3). There you have it.

What I think of the GUI of Leopard

In general I do like what I've seen so far of the Leopard GUI. I do like the new chrome bar and the fact that there will be far less Aqua. Though, I would get rid of the Aqua scrollbars. I wonder if these will be dropped in the shipping version of Leopard, especially since the latest version of iTunes doesn't have them and I prefer those. I've had it with the Aqua scrollbars... In fact, let's get rid of Aqua entirely. I think a new interface style is overdue. No? Isn't it been 7 years already since Aqua debuted?

I like the updated Finder windows, but I'm not sure about the folder icons. Their front-facing position is fine. I do like that. Perhaps it's just the shape of the tab that bothers me a bit and maybe the fact that I miss a bit more color on the special folders icons.  I understand the reason why the icons only have this inset effect, but I  know how my brain works. When I scan with my eyes, it reacts to color first, but perhaps that's just some error in my brain :) That's why I didn't object to Adobe's recent application icons and their idea to work with colors in such a prominent way. Since the new CS3 set was released, I've never made a mistake by selecting the wrong application.

How I see the Leopard folder

I didn't take the time to apply the paper structure in my version. I wouldn't change that. It's just the shape of the tab that I would adjust a bit.

In a next article I'll explain in detail how I created this folder. Stay tuned ;)