May 15
Creating Mac OS X looking desktops
2006 at 02.02 am posted by Veerle Pieters
On a regular basis I receive requests on how to create those Mac OS X backgrounds, so this weekend I played around in Illustrator trying to create a nice looking desktop using gradient mesh. This all goes well as long as I stick with 1 simple shape, some organic looking bow. As soon as I try to add other bows by adding gradient mesh points things fall apart. Using separate layers each using transparency seems to be the solution, but still this ain’t no walk in the park if you want to achieve the complexity as those real Mac OS X desktops. I congratulate and bow for the designer who made those. I gave up and resorted to Photoshop CS2 and hoped for a better result…
Start off with a gradient
I started off with a radial gradient. Then I drew a bow using the pen tool and filled it with the dark blue I used for my gradient background. I gave it a 10% filling.
Add Gradient Overlay
On top of that layer I drew another bow, using a 10% filling. Then I added a 50% transparent radial Gradient Overlay from the lighter grey-blue to transparent on both bows.
Draw bows
I added another 2 bows on top of each other using different colors of grey blue. This first one uses a darker blue with a 30% filling (no gradient Overlay applied). The other one uses a rather bright blue with a 10% filling.
Add a brush effect
Again I added another bow on top using dark grey-blue with 20% filling (no gradient Overlay applied). Than I selected the bow (command/control + click on the layer), I created a new layer, I selected a (rather big, dark and 20% transparent) brush tool and I colored a stroke following the selecting. This creates a softy feathered effect.
Final touch
Last but not least I did the same selecting another bow (and on a new layer) using a rather big, very light 20% transparent blue brush.
It's a matter of drawing the right bows on the right place, using the right colors and the right transparency to achieve the perfect result. You need to play around a lot with transparency, composition of the bows and the colors. Try using not too much different colors. Choose a light color and a dark color in the same range, like blue or grey and then use colors within that range.
Download the 2560 by 1600 jpeg
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.
40served
1
How pretty! I don’t like the original blue one so now I might try making one in green or purple instead.
Thanks, as ever :)
2
Great tutorial, thanks for it! I posted a link to this article in my Recommended Sites-section - that’s my way to thank ;)
3
Inspiration is the web best friend.
I say thank you! ;)
4
Wowa! Just what I’ve been trying to do this weekend.
Thanks
5
Nice tutorial. Thank you!
6
Here is another way of creating Mac OS X desktops ;)
7
Cool!
Just one small question… what’s the difference between Fill and Opacity? I don’t get it =P
8
Veerle, thank you for this! I’ve read other tutorials on this subject but they’ve all been for Illustrator. I was thinking about doing one up for Photoshop, but you’ve beat me to it! Great work!
9
Great tutorial. I would probably go at this with Illustrator and a lot of opacity masks, but then again, I’m far from a Photoshop guru :)
10
Cool Tutorial.. I believe the difference between fill and opacity is that opacity applies to whatever pixels are on a layer, as well as whatever styles are applied to the layer, while Fill applies to only the pixels and not the styles applied - does that sound right?
11
A lovely tutorial, Veerle, good job.
12
Nice one!
I remember seeing a similar tutorial on Bartelme’s weblog.
Good job! As usual :-)
13
Simple yet great tutorial. Thanks ;)
14
In response to Nando: William is right. Opacity controls the opacity of the layer & its applied layer effects; Fill controls the opacity of the layer & not of the layer effects.
15
ohhh that’s how they do it ... very interesting technique, will experiment with it ... gr8 site & gr8 work ... keep rocking .
16
Isn’t it amazing how they create the actual desktops, and nobody has been able to accurately mimic the technique?
Competing computer companies (Dell, etc.) have long been trying, but they can’t come close either.
There’s just something really special about the OS X backgrounds :-)
17
Great post Veerle !
Thanks
18
Hey, thanks for tutorial. Just add info about it on my site. Good work.
19
Veerle,
This is a lovely tutorial and I can’t help to try it out in Photoshop immediately. Unfortunately, the result (the one that I made) was very very terrible.
20
I like the tutorial, I’m working with gradients atm for some client work so this will come very usefull ;)
21
Nice tutorial. Thanks, Veerle. :)
22
... or, if you are happy with the pattern, you could just open the original file and change the hue/ saturation.
23
Nice tutorial, i like the mac style.
24
My word… I’m so impressed!
25
Hi,
I was in quest for some nice css-menu, but not only I found that but some greatly designed web site.
I am a web developer myself (and a weaker designer) but your site is breathtaking. Sorry for off-topic but I had to write, one of the cutest design I found.
amazing, beautiful, speechless. Maybe it really needs a woman heart to do something like this(and it looks twice as good with clear-type turned on).
once again, great work on all over your site, from colors to layout! now it is maybe time to actually read somehing from you!
bye
26
Wow… I thought they were made in some 3D programm but now… Great stuff. Thanks.
27
This tutorial shows you how to make hi-tech style abstract background with Illustrator Blend Tool. Very cool and simple!
28
Thanks all for the nice comments. Glad you like it.
@Ekid, RoT has already mentioned this link, but to be honest I find them not as refined as I want. They don’t have that Apple feeling IMHO. Though it’s nice that they explained this technique.
29
great work!
30
Veerle, it appears it is all about parabole:
http://www.mathcurve.com/courbes2d/parabole/parabole.shtml
Not something one can do in Illustrator or Photoshop. One needs fancy mathematical calculations to create these shapes. We knew Steve Jobs wouldn’t do the obvious, would we?
31
Very useful technique! Thanks! The use of transparency can often generate unexpected good results.
32
Hey Veerle, your blog is worth over $400,000. See you at @media!
33
Hi there!
Already seen this?
http://www.bartelme.at/articles/38/
Greetings, Benni.
34
Lovely! Seems like gradients and transparencies are the primary tools to use. There’s a pretty good tutorial involving Illustrator, but I’m sure you already know how to do that.
35
Interesting!
36
Nice done!
37
Nice Nice, it´s very good tutorial.
best regards Nadim.LB
38
thanks for sharing this really great tutorial !
39
Really nice blog, even better tutorials. Probably the best blog/homepage I have visited in a very long time. Keep it up! :)
40
wow! great tutorial!!
Commenting is not available on this article.