How to Design the Apple iPad in Photoshop

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! :D

Like this tutorial? You may also like…

Pass your 646-363 exam fast with help of latest 642-524 dumps and 642-373 sample questions prepared by testking.

51 thoughts on “How to Design the Apple iPad in Photoshop

  1. Mike Smith

    I’m not even ashamed to say that this is the first time I’ve actually seen the iPad. I didn’t get caught up in the hype, but I have to admit, you did an awesome job on the tutorial and did an awesome job capitalizing on the hotness of the topic. Well done :)

    Reply
  2. Andrea Austoni

    This was nice but damn Apple makes some dull tutorial material, don’t you think?
    I mean once you’ve put down a rounded rectangle and a black screen…you’re done!
    Still, great job.

    Reply
  3. Callum Chapman Post author

    @Mike: I wasn’t all up in the hype either, in fact I’m a little disappointed, although it looks like a superb product (if you have the use for it), it would have had so much more potential if you could run a full version of Mac OS X on it (obviously it’d have to be much more powerful) and it came with a pen that worked as a graphic tablet, it’d be much more worth the money. Although I’m sure if they did that it would have a price tag of.. something around $2,500!

    @Andrea: I know exactly where you’re coming from, all though it does teach people a few new tricks they might not have known. Glad you liked it, though :)

    Reply
  4. Shubhojit

    it was gr8, however, the brushes part was a little overwhelming for me. but on the whole another tutorial I was able to crack.
    muchas gracias señior

    Reply
  5. Callum Chapman Post author

    @Antoine: Thanks! :)

    @Shubhojit: How comes you thought it was a little overwhelming? Please let me know so I can improve on future tutorials :)

    @Sneh: Thanks, and thank you for stumbling :)

    @Zulsdesign: Glad you like it. No answer to that question really, guess it’s just a personal preference. :)

    Reply
  6. costumefly

    I am going to print this on a paper and stick it on a card board and pretend I have an Ipad…lol ipad.. that cracks me up. Looks like apple didn’t have any women in their name selection committee.

    Reply
  7. Pingback: Six Steps to a Super Happy Client | Circlebox Blog

    1. Callum Chapman Post author

      Haha. That was a complete coincidence me and Chris did that! I published the day before Chris I think, was good to compare each others styles and techniques. Glad you liked the tutorial.

      Reply
  8. Pingback: Design a Grungy Minimalistic Poster in Photoshop | Circlebox Blog

  9. Pingback: iGeoPix, the iPhone/iPad visual browser for geolocated photos, is now the first free Top App (Photography for iPad)

  10. Pingback: Tutorial Time » Cool Tutorial For Mac images

  11. Pingback: 50 Free iPad, Iphone Icons, Tutorials and PSDs | webdesign14.com

  12. Gucci Scarpe

    That is the correct weblog for anyone who needs to seek out out about this topic. You notice a lot its nearly onerous to argue with you (not that I actually would needhaHa). You undoubtedly put a new spin on a subject thats been written about for years. Nice stuff, just great!

    Reply
  13. Pingback: 45 Realistic Gadgets Designs Photoshop Tutorials | CS5 Design

  14. Pingback: Tutorials: Photoshop and Illustrator Tutorials « facedesign

  15. Pingback: 45 Realistic Gadgets Designs Photoshop Tutorials – Web Tutorials, Resources, Web Trends, Code Snippets, Php scripts, Opensource, Ecommerce, Cms, Html, Xhtml scripts, Themes, Templates, Css, Psd tuts, Photoshop,tuts,web,website,tutorial,web tutorial

  16. Pingback: The Ultimate Roundup of iPad Icons, Tutorials and PSDs | HowDoDesign

  17. Pingback: Design for iPad | Oli Blanton

  18. Pingback: The Ultimate Roundup of iPad Icons, Tutorials and PSDs

  19. Pingback: 35+ Amazing & Creative Photoshop Tutorials For Designers | Blog

  20. Pingback: A Breakthrough in iPad3 Tools- iPadUSB.com

  21. Pingback: Mac, iPhone, iPad, Gadgets and Cell Phones Photoshop Tutorials « CSS Tips

  22. Pingback: 20 Superb Photoshop Tutorials Created in 2010 | Web Design Core

Leave a Reply