Oct 10
Apple Leopard text effects
2007 at 09.20 am posted by Veerle Pieters
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 ;)
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.
34served
1
Another easy way to create the text effect in any image editing program is to simply duplicate the text layer. Move the background layer 1px down and 1px right. Change color to white and then adjust transparency of the layer accordingly.
2
Joshua Bryant said:
Then you have to deal with double text layers. If you have to make change in the sentence, you have double job to do.
Nice work with the text Veerle, I really like it. Thanks.
3
Veerle I think your folder looks much better, the Apple one just looks wrong. I actually liked the aqua effect, everybody copied it granted but it didn’t look washed out. It’s the edges of the new chrome bars I dislike as they contrast harshly with the white background.
Brainfuel discussed the new Vs. 2001 Apple website recently.
I have to say I prefer the old one. Am I the only one of this opinion?
4
I think I like that the leopard tab is slightly off from the left edge of the folder, which is more true to real life than having it flush with the edge.
5
I love this tutorial !!
Just printed it for further use on my new website for the menu ;-)
6
It seems like Apple is moving away from Aqua’s glowing blue glass to stylized versions of their new hardware design vocabulary. Looking at the iPhone, new iPods and iMac, that vocabulary seems to be white, black, aluminum, and glass.
7
thanks for yet another fine tut. kudos for making it a double. i personally don’t like designing with PS. but that’s because i’ve taught that way.
anyway, i has a question regarding the mac interface: is it customizable? i mean, can you aply skins to it like one can in windows?
8
Veerle, I don’t think your brain is broken. I too react to color information the same way. I was forever clicking on the wrong CS/CS2 icon (no… not the butterfly, I meant to click the flower thing…).
9
Excellent tutorial. Great result. Congrats.
10
Tobias Roediger said:
lol, I’m glad I’m not the only one that was doing that constantly.
Veerle, thanks for the great tutorial.
11
Using your tutorial, I’ve made an Apple Leopard Growl style. An example and a download link are over on Flickr. Thanks for all of your tutorials — they’re fantastic!
12
thanks Veerle for taking the time to write yet another great tutorial. I personnaly like the new folders at least better than the old ones :). That being said, I find the new design quite ugly. The shadows behind the windows look gigantic, when you click on a toolbar bottom from safari for instance, it looks like the button is going 10 feet under!. The new dock really has too much clutter with the shadows and reflection… It looks more and more like windows, and less like the professionnal-looking OS it used to be. And don’t get me started on the blue “bubble-thing” that replaces our nice black triangle :)
13
I like the tutorial, but isn’t it easier to use a color overlay effect for the text layer like you did with the shape?
14
Veerle, please talk about the new Leopard dock… i would like to know “exactly” what you think about it…
15
Thanks for the nice comments.
Kordump said:
It is, but only to a certain point. It’s not like on windows that you have several colors that you can choose etc. For me this isn’t really necessary because the GUI is just right out of the box. You have to use third party software if you want to give the GUI a complete overhaul. A popular one is Shapeshifter.
Ace said:
I’m afraid I can’t follow you here. Why would you use a color overlay effect? Using a color overlay will cover the entire text with 1 flat color, which is not what we want. Maybe you can show me a screenshot of what you mean?
Ronald Poi said:
First of all I’ve only seen a few screenshots which are compressed, smaller etc. Even people who have access to a developer build we have to take in concern that it’s not the final shipping version. I would rather wait to express my opinion until I have it on my Mac and used it for a week or 2. Generally speaking I would say the Dock has been improved in its design. I like the depth effect, because it suits with the whole depth idea you see in ‘Coverflow’, ‘Time Machine’ etc. I can follow people who argue about the shadow and light conflict on icons in the Dock. On certain icons it is really contradictory. Some icons are created as if they stand and others aren’t. I guess the requirements for the icons will have to be more strict. Not sure if this is all achievable of course… and I wonder if that same icon will look OK in a Finder window. On the other hand if we look back in time people never questioned the fact that icons were just floating in space with no actual physical structure holding them up. With Leopard everything is perceived more like in reality and so it gets more complex to keep it all harmonious. If you compare with previous versions, well for me the Leopard one looks still the best (apart from the shadow and light conflict, which I hope will get resolved in the end).
16
Great article as usual, Veerle!
This will perhaps help me with my website, where I wanted to use a Leopard-like style for the toolbar…
17
Coolio. I haven’t looked at a mac in a long while, so this leopard stuff is new to me.
I think the next computer purchase may be a Mac Book (or Pro), so I guess I’ll find out more then.
Cheers
18
Nice, I’m going to try it :) Very good tutorial, thanks Veerle for your time.
19
Useful, as always. Thanks.
20
I’m glad someone finally agrees that Aqua needs to be left behind. Although I think my problem is more to do with styles such as the Aqua effect being adopted so widespread. Everything looks the same! And everything looking the same = boring.
21
Nice! I like it.
To get zoom at 100%, the correct shortcut is cmd/ctrl+1.
not 0 (zero), but 1 (one).
Diego
22
Diego said:
I made mistake there indeed, but in CS3 it’s not cmd/ctrl+1, it’s cmd/ctrl+alt/option+0. Maybe it is for CS2? I’m a shortcuts user, but I actually never use this one :) I don’t remember anymore what it was in CS2.
23
one more great tutorial. thank you for this!
24
I just came across your site, but I wanted to tell you that I love your work. These tutorials are excellent.
Thank you!
25
Thanks, really good tutorial!
26
very nice video I like your video a lot
27
Why isn’t Apple knocking on your door and offering you a job. I agree with you about the tab on the folder looking weird. Your version is far superior. I also thought that Apple did use a drop shadow, not a split pixel thing, that is a good tip.
There is a bad review of Leopard’s GUI on the Creative Review blog at the moment.
28
Great tutorial. bookmarked for when 10.5.1 comes out and leopard gets put on my machine :)
29
I can’t believe you just did a tutorial on inset text. And that people are gushing over it.
Not jealous. Just confused what year this is. I mean, this is basic stuff, people.
No offense, I’m just surprised.
30
Arrrrgh! I hadn’t noticed how ugly the tab on the folder looked. Now I’m going to see that every time I look at a folder!
Bring on CandyBar 3.
31
great tutorial. it’s a relatively simple effect - but you’ve taken the time too get all the little details, like the colours, just right. : )
Though, I must say that i prefer the official folder icons to your version - though your writing about the adobe icons gave me a (simple) idea of adding in colour to the folders. Something like so.
32
It’s gray text with a bevel on a gradient background, people. Calm down.
33
Kris Hunt said:
Actually it isn’t a bevel smart ass :o) Also a bit respect please for people who aren’t as knowledgeable as you isn’t too much to ask.
34
Excellent !! great job Veerle ! thanks a lot.
You can be sure i visit your web more often :)
Regards.