Sponsors (Advertise on Circlebox Blog)

With the release of the Apple iPad, we all knew it wouldn’t take long for the first tutorial on how to recreate it would appear on the net. In this tutorial, you’ll be learning how to design the Apple iPad in Adobe Photoshop.

We’ll be using various different tools, such as shape tools, gradient tools, different blending mode tools and loads of great techniques. Let’s get started!

Tutorial Outcome

At the end of this tutorial, you should have something that looks like the image at the top of this post.

Step 1

As in any tutorial, we firstly need to create a new document. Open up Photoshop and create a new document by going to File > New. I’m using a Web preset, set to 1280×1024 pixels.

Step 2

Change your Background Layers background color to a dark grey – as we’ll be working with a light grey color to begin with, this just makes it easier. Create a New Layer in your Layers Palette, rename it to ‘iPad Bevel’.

Grab the Rounded Rectangle Tool and change the corner radius to 25px.

Drag a new rectangle out about the same size as the iPad, if you’re going for a realistic look I’d recommend grabbing an image of the iPad from the Apple iPad page, pasting it into the document and drawing the rectangle over it. In fact, you’ll probably find this tutorial a whole lot easier if you have a reference photo of the iPad whilst following each step. Make sure you use either white or a light grey for your rectangle. Hit Cmd+E on your Shape Layer so it merges down into your iPad Bevel layer.

Make another New Layer and call it ‘iPad Screen Border’. Repeat this same step again, this time making the the rectangle a little smaller, be sure to use a dark grey colour (I used #2E3035) so you can see what you’re doing. Place the new rectangle in the middle of the first rectangle you made, making sure each side has an equal gap. Once again, hit Cmd+E to merge the new shape layer down to our iPad Screen Border layer.

Make yet another New Layer and call it ‘iPad Screen’. Repeat the last step again, this time using the regular Rectangle Tool – you can use any colour you wish for this, we’ll be placing it with an image later on. Again, make sure the gaps around the edges are equal. Once done, hit the Cmd+E combination shortcut to merge the shape layer down to our iPad Screen layer.

Step 3

So far we have a very simple shape of the Apple iPad. It’s time to start adding some shadows and realistic effects. Select your iPad Bevel layer, right-click and select Blending Options. Add a Gradient Overlay and an Inner Shadow. The settings I used can be seen below in the screenshots.

Open up the Blending Options for your iPad Screen Border layer. Apply a Gradient Overlay and an Inner Shadow – my settings can be seen below.

Head back to the Apple iPad page and crop the main screen of one of the iPad screenshots out. Paste it into your document and place it in the exact same place as our blue screen.

Right click on the iPad Screen layer and open up the Blending Options menu. Add an Inner Shadow, use the settings in the screenshot below. This doesn’t make too much difference, but all adds to the realistic-ness of the final piece.

Step 4

Our iPad is now starting to look like an actual iPad! It’s time to add some more highlights and shadows. With your bevel layer selected, zoom right into a certain area – I’m starting with the top.

Make a new layer (it should automatically go above your bevel layer) and call it Bevel Highlights. With the new layer selected, select the Brush Tool. Use a small, soft white brush and start brushing around the inner part of the bevel.

Carry on using the white brush all round the iPad’s bevel. This is what I ended up with…

You might be thinking it looks a little, uh.. white? Well, it does! It’s time to add some shadows. Make another new layer above our highlights layer, and call it Bevel Shadows. Select a medium grey (I used #8E8F93) before doing anything else. Whilst holding the Cmd key, click on the thumbnail image of the iPad Bevel layer – this should make a selection of the main shape of our iPad. Start brushing around the outside of the iPad, making sure it is a VERY fine line. You might find this easier using a graphics tablet if you have one!

When you get to the corners of your iPad, make sure you brush over a few times – if you refer to a source photo of the iPad, you’ll see that the corners tend to be darker than the rest of the bevel.

Because we did this using our bare hands, some areas might be a little off. Try neating up any areas that can be, and then apply a very light Guassian Blur – go to Filter > Blur > Gaussian Blur and blur your layer by a radius of 1 pixel. This is my outcome…

Step 5

We’re almost there! It’s time to add the buttons to our iPad. This includes: the center home button, a stand-by button (on top), a lock button (on the right side) and the volume buttons (on the right side).

Create a new layer below our iPad Bevel layer and call it ‘Side Buttons’. Select the Rectangular Marquee Tool and make a small rectangular selection. Line it up with the edge of your iPads screen, and fill it with black. Feather down the top corners of the button using a very small, soft eraser.

Use the same techniques to create the other side buttons (the lock and volume buttons).

Create another new layer above our iPad Screen Border layer and call it ‘Home Button’. Select the Elleptical Marquee Tool – whilst holding the Shift Key, drag out a small circle. Fill it with white and position it in the correct place – you can line the circle up using guides or by placing it directly in between the two bottom icons of our screen and then shifting it down using the cursor keys – because the border is quite small, it’s relatively easy to go by eye.

Right click on your new layer and select Blending Options – add a Gradient Overlay using the settings in the screenshot below.

Select the Rounded Rectangle tool (the one we used at the beginning of the tutorial) and change the radius to 2px. Drag out a small rectangle in the middle of our circle button.

Right click on our new shape layer and click Rasterize Layer. With the Cmd Key held, click on the thumbnail of the new layer – this should, once again, select our new shape. Hit the delete key, and then go to Edit > Stroke. Change the size of your stroke to 1px, and select ‘inside’. Click OK. You should be left with something looking like this…

Step 6

We’ve finished our iPad, but we still have a little more to do. First of all, change the background of your image to white.

Select all of your layers but the background, and place them into a new folder in your layers palette – call the folder ‘iPad’. Duplicate the (full) folder, and rename it to ‘Reflection’. Go to Edit > Transform > Flip Vertical. Move the iPad down to underneath our original.

Unselect all of your layers and folders apart from our reflection folder – right click and select Merge Visible. Check all of our other layers back on. Select the Rectangular Marquee tool and make a selection over the bottom of our reflection iPad. Right-Click and select Feather – insert the value of 30 and hit OK. Hit delete three to five times, and lower the opacity of the layer to 35%.

Make another new layer beneath your iPad folder, and select the Elleptical Marquee tool. Fill it with black.

Go to Filter > Blue > Gaussian Blur and insert the value 4. Hit OK. You should be left with something like this after lowering the opacity to 10%.

Last step..! Make one more layer, and call it ‘White Reflection’. Select the Polygonal Lasso tool and make a triangle shape over one corner of your iPad, fill the selection with white and lower the opacity to 10%. Use the eraser to remove some of the reflection; you should end up with something like this…

Conclusion

All done! Easy, huh? You can use these techniques to make almost any Apple product, so get going! If you liked this tutorial, please leave a comment and help promote it by stumbling, digging and retweeting it.. Thanks!

 

Like this tutorial? You may also like…

• Design a Modern and Sleek Web Design Mock-Up in Photoshop
• How to Design a Vintage Horror Movie Poster in Photoshop
• How to Create a Retro Hippy Van Poster in Photoshop
• How to Create a Hippy Van Vector in Illustrator
• Free Apple iPod Vector Pack (Shuffle, Nano, Classic and Touch)