You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

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.

Creating the chrome bar in Photoshop

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

Creating the inset text in Photoshop

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º.

Creating the chrome bar in Illustrator

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

Creating the inset text in Illustrator

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?

the Leopard folder

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.

How I see the Leopard folder

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

Want to learn more?

VECTORTUTS+ Vector Tutorials and 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

gravatar

1

permalink this comment Joshua Bryant Wed Oct 10, 2007 at 10.20 am

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.


gravatar

2

permalink this comment Pawel Nowak Wed Oct 10, 2007 at 11.06 am

Joshua Bryant said:

Another easy way to create the text effect in any image editing program is to simply duplicate the text layer…

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.


gravatar

3

permalink this comment Brian Wed Oct 10, 2007 at 11.55 am

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?


gravatar

4

permalink this comment DeaPeaJay Wed Oct 10, 2007 at 12.02 pm

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.


gravatar

5

permalink this comment Antoine Wed Oct 10, 2007 at 12.15 pm

I love this tutorial !!

Just printed it for further use on my new website for the menu ;-)


gravatar

6

permalink this comment Nick Wed Oct 10, 2007 at 12.55 pm

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.


gravatar

7

permalink this comment Kordump Wed Oct 10, 2007 at 02.49 pm

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?


gravatar

8

permalink this comment Tobias Roediger Wed Oct 10, 2007 at 02.52 pm

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


gravatar

9

permalink this comment CrazyLeaf Wed Oct 10, 2007 at 05.34 pm

Excellent tutorial. Great result. Congrats.


gravatar

10

permalink this comment reece Wed Oct 10, 2007 at 06.09 pm

Tobias Roediger said:

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

lol, I’m glad I’m not the only one that was doing that constantly.

Veerle, thanks for the great tutorial.


gravatar

11

permalink this comment Ben Spaulding Wed Oct 10, 2007 at 08.36 pm

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!


gravatar

12

permalink this comment romain Wed Oct 10, 2007 at 09.42 pm

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


gravatar

13

permalink this comment Ace Wed Oct 10, 2007 at 10.19 pm

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?


gravatar

14

permalink this comment Ronald Poi Thu Oct 11, 2007 at 05.54 am

Veerle, please talk about the new Leopard dock… i would like to know “exactly” what you think about it…


gravatar

15

permalink this comment Veerle Thu Oct 11, 2007 at 09.27 am

Thanks for the nice comments.

Kordump said:

I have a question regarding the mac interface: is it customizable? I mean, can you apply skins to it like one can in windows?

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 like the tutorial, but isn’t it easier to use a color overlay effect for the text layer like you did with the shape?

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:

Veerle, please talk about the new Leopard dock… I would like to know “exactly” what you think about it…

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


gravatar

16

permalink this comment Julian Schrader Thu Oct 11, 2007 at 02.58 pm

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…


gravatar

17

permalink this comment revy Fri Oct 12, 2007 at 03.14 pm

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


gravatar

18

permalink this comment Martin Tue Oct 16, 2007 at 01.29 pm

Nice, I’m going to try it :) Very good tutorial, thanks Veerle for your time.


gravatar

19

permalink this comment snowdog Mon Oct 22, 2007 at 08.14 am

Useful, as always. Thanks.


gravatar

20

permalink this comment Steph Thu Oct 25, 2007 at 10.43 am

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.


gravatar

21

permalink this comment Diego Thu Oct 25, 2007 at 12.59 pm

Nice! I like it.

To get zoom at 100%, the correct shortcut is cmd/ctrl+1.

not 0 (zero), but 1 (one).

Diego


gravatar

22

permalink this comment Veerle Thu Oct 25, 2007 at 01.12 pm

Diego said:

To get zoom at 100%, the correct shortcut is cmd/ctrl+1.

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.


gravatar

23

permalink this comment Lisa Sun Oct 28, 2007 at 02.00 pm

one more great tutorial. thank you for this!


gravatar

24

permalink this comment Mary Purslow Mon Oct 29, 2007 at 11.21 pm

I just came across your site, but I wanted to tell you that I love your work. These tutorials are excellent.

Thank you!


gravatar

25

permalink this comment Seine Tue Oct 30, 2007 at 06.43 am

Thanks, really good tutorial!


gravatar

26

permalink this comment kik Tue Oct 30, 2007 at 12.49 pm

very nice video I like your video a lot


gravatar

27

permalink this comment fanboy Tue Oct 30, 2007 at 01.18 pm

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.


gravatar

28

permalink this comment adrian Mon Nov 5, 2007 at 04.18 am

Great tutorial. bookmarked for when 10.5.1 comes out and leopard gets put on my machine :)


gravatar

29

permalink this comment jq Mon Nov 5, 2007 at 04.56 am

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.


gravatar

30

permalink this comment Mark Wales Mon Nov 5, 2007 at 09.41 am

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.


gravatar

31

permalink this comment Paul Walker Mon Nov 5, 2007 at 10.22 am

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.


gravatar

32

permalink this comment Kris Hunt Mon Nov 5, 2007 at 02.01 pm

It’s gray text with a bevel on a gradient background, people. Calm down.


gravatar

33

permalink this comment Veerle Mon Nov 5, 2007 at 02.40 pm

Kris Hunt said:

It’s gray text with a bevel on a gradient background, people. Calm down.

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.


gravatar

34

permalink this comment Jopicar Tue Nov 6, 2007 at 09.29 pm

Excellent !! great job Veerle ! thanks a lot.

You can be sure i visit your web more often :)

Regards.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist