­

iMac G3 iOS icon

I often thought that the round design of the iOS icons reminds the front view of the old (but still beautiful) iMac G3 (reference here).

Also icons like the old YouTube app have inspired me to make this retro iMac iOS icon version (reference image by The Verge).

DSC-7395-hero-large-verge-medium-landscape.jpg

In this post I'll show more about the process. I made everything in Photoshop, with vector shapes and layer styles. Here's how the first shape looks like:

step01b.jpg

After this first simple shape (with gradients and inner shadow via layer style) I started to add details and elements:

step02b.jpg

As you can see, the bottom part is a plastic matte material, while the main top plastic is glossy, and with its particular vertical lines detail.

step03b.jpg

Once the base is made (with more inner shadow to enhance the view), I started adding and drawing single elements:

step04b.jpg

The speakers are made with several layers, here's a close-up:

step05b.jpg

And then the earphone, the cd-tray and the power button:

step06b.jpg

Then, the screen:

step07b.jpg

At this point, I draw every element of this great Mac.

It's time to add some lights to make material and 3D view look better. The plastic of the top are more glossy now, while the bottom plastic is matte.

One more thing...

Adding the name "iMac", of course using the great Apple Garamond Font.

step08b.jpg

Here the final version:

imac.jpg

Thank you!

P.S. you can download this and other stuff as freebie here.

Categories: Blog