Blog.SpoonGraphics

How To Create a Detailed Apple iPad Icon in Photoshop

The Internet world exploded with the news of the Apple tablet launch last week. Named the iPad, it’s set to bring yet another revolution to the way people access and browse the web. An iPad icon would be a sensible addition to any web designer’s resources toolbox, so let’s fire up Photoshop and create our very own detailed iPad icon graphic.

The icon we’ll be creating features the typical front view of the iPad. Using the Apple website for reference, let’s get started.

Create a new document, and use the Rounded Rectangle Tool to draw a portrait shape onto a new layer. Set the corner radius to 20px and the fill to white.

CMD-click on the layer thumbnail to load the selection, then go to Select > Modify > Contract and enter 3px. Create a new layer and fill this new selection with black.

Double click the first layer, with the white rectangle to open up the Layer Style options. Add a grey Inner Glow just 3px in size, with the blend mode of Normal.

Next, double click the black rectangle’s layer. This time add an Outer Glow using a lighter grey, also set to 3px in size and a blend mode of normal.

Use the Rectangular Marquee Tool to draw a thin 1px buttons on the top edge and side of the body to represent the lock and mute switches. Fill these with a subtle grey gradient.

To create the volume button, draw a thicker rectangle to begin with, then use the Elliptical Marquee Tool to delete out a central portion.

The main screen of the iPad often features a vibrant background wallpaper graphic. An amazing Creative Commons photo from Flickr user Arnar Valdimarsson fits pefectly. Use the marquee tool to crop down the photograph to the screen dimensions.

Drag a guide to identify the centre of the iPad body, then draw a circle with the Elliptical Marquee Tool. Fill this circle with a black to grey gradient to simulate the depth of the button.

On a new layer, use the Pencil tool in 1px size to draw a square, then delete out the four corners using the Eraser. Lower the opacity to around 25% to blend in the icon.

No Apple product would be complete without it’s reflections and light casts. CMD-click on the thumbnail of the main body to load the selection, then fill this with a white gradient spanning from the top right. Reduce the opacity of this layer to suit and move it to the top of the layer stack so that any underlying elements are affected by the light cast.

Onto the main iPad interface. Draw a thin selection across the top of the screen and fill with black to recreate the status bar. Lower the opacity to allow the background to show through.

Use the pencil tool to draw a simple battery icon, then add a simple selection of text elements.

Fill a rectangular selection with grey at the bottom of the screen, then press CMD-T to transform. Right click and select the Perspective option, then move the top corners inwards to create the basic shape of the iPad dock.

Double click the dock layer to add new Layer Styles. Add a gradient spanning from dark grey to light grey, then back to the dark grey. Set this to run horizontally across the dock.

Add an Inner Shadow to represent the tiny edge of the dock. Set the options to a light grey with the blend mode of normal. Use a -90 degree angle, a distance of 1px, a choke of around 27% and a size of 2px.

Use the Pen Tool to draw a smooth flowing shape across the dock. Complete the shape with rough points back to the start. Fill this with white and drop the opacity to around 13%.

CMD-click the dock layer to load the selection. Press CMD-Shift-I to inverse the selection, then delete out the excess from the dock reflection layer.

All the iPad interface now needs is a collection of icons. I found this fantastic set of Apple style icons from Deviant Art designer Ikon. Download a selection and begin laying out the icon grid on the iPad screen.

Add a Drop Shadow to one of the icons, using settings of around 50% opacity, 2px distance and 9px size. Right click the layer and Copy Layer Style, then Paste this style on the following icon layers.

Select the four dock icons and duplicate the layers. Press CMD-E to merge these layers together, then press CMD-T to transform. Right click and selection the option to flip vertically, then position into place as reflections. Add a layer mask and fade out the reflections with a soft brush or a gradient, then reduce the opacity to suit.

That’s the iPad icon complete. Don’t forget to add the obligatory surface reflection by copying the whole selection, then flip and position on the underside of the iPad body.

Download the source file

Does all that sound like too much hard work? Well you could always download my ready-made iPad icon set that I’ve posted for free download on Line25.com: Free Apple iPad Icon Set for Your Website Designs