In this tutorial you will learn how to create a cool iPad icon by putting together simple shapes and then applying layer effects on them in Photoshop.

We’ll be using various different tools, such as shape tools, gradient tools, different blending mode tools and loads of great techniques. Moreover, you can easily customize this tutorial with your own icons or wallpapers. At the end of the tutorial I've gather some useful iPad design related stuff. Hopefully it will help you in future projects.

Tutorial Details

  • Program: Adobe Photoshop
  • Difficulty: Intermediate
  • Estimated Completion Time: 1 hour

Below is the final image we will be working towards.

Step1

Open a new document with a White Background 624×921 at 72dpi. Add a background picture. Draw a rounded rectangle with the Rounded Rectangle Tool. Use the Fill Pixels option with a Radius of 22 pix. The color is #434040. Name the Layer “Border”.

Cut a hole in the “Border” layer. Select the Border layer by Ctrl Clicking it. Modify the selection by clicking, Select > Modify>Contract, Contract the selection by 6 pixels. Delete the pixels from the “Border Layer”.

Make a selection of the hole in the “Border”, then make a new layer above it and fill it with Black. Name the layer “Black Glass”. Draw a rectangular layer and name that layer “Screen”. You should now have three layers.

  1. Border
  2. Black Glass
  3. Screen

Step 2

Now we will go back and add some depth to the layers. Select the “Border” and add some Layer Styles. Bevel and Emboss, Color Overlay and Stroke.

Select the “Black Glass” Layer and add a Inner Shadow and a Radial Gradient.

Radial Gradient Hex Colors #5b5c60 # 000000. Your image should now look like the one below.

Step 3

Now we will add some life to the interface. First add a wallpaper, I've used this picture:

Drag the wallpaper above the “Screen” Layer, then point your mouse right between the layers of the “Screen Layer” and the Wallpaper and Alt-Click when you see the pathfinder symbol appear. Resize the wallpaper to fit the screen.

Step 4

Add the Dock by drawing a rectangle, then Press Edit > Transform > Skew to bring the top edges inwards to create depth. Name the Layer “Dock”.

Add a Gradient Overlay with colors from #454647 to #fafbfc

Then lower the transparency of the Dock to 58%.

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.

Step 5

We will now add some icons to the Dock and the Desktop. Download this iPad Icon Pack. (You can get the traditional icons by doing a search on Google). Open the Safari icon and place it above the “Dock” layer and resize it.

Create a reflection for the Safari Icon. Duplicate the icon, then flip it vertically, Edit > Transform > Flip Vertical.

Lower the opacity to 21% and add a Transparent Gradient Overlay (Black to Transparent).

Select and cut the area of the the icon that is hanging over and your reflection is done.

Repeat the steps for the other icons on the Dock.

Add the other icons to the desktop and finish them off with names beneath each icon.

Step 6

Now we will add all the little buttons that make the iPad function. Lets start by drawing a small circle for the start button, then draw a small rounded rectangle with a radius of 2 pixels.

Apply a Gradient Overlay to the small circle. Hex Colors: #4c4d51 #060606. Then add a Gradient and a White thin Stoke to the Small Rounded Circle and lower the Opacity of the layer to 19%.

Step 7

Button A and B were created by drawing a Rounded Rectangle with a radius of 2 pixels.

Create Button C by drawing a Rounded Rectangle with the Shape Layers option selected with a radius of 2 pixels.

Add an Anchor Point, with the Add Anchor Point tool (looks like the pen tool with a plus sign). move the point 3 pixels to the left to create a nice curve. Place all the buttons behind the “Border” layer.

Final Image

We now have all of the objects and effects that we need to complete our design. Lets take a look at the final result.

You can customize it by adding other icons or different wallpapers. I download from Shutterstock a really beautiful iPad wallpaper-like, see the result below:

Design iPad Resources

iPad GUI PSD Design Template

The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768 x 1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

Fully Editable Apple iPad PSD

Fully editable Apple iPad in PSD format. Every element you see is editable via vector masks. Everything is scaleable.

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.

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.

iPixelPad

So, what to do when everyone seem to release iPad icons but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.

Conclusion

As you can see it doesn’t take much to re-create a product using Photoshop. All you need is a reference photo, a basic knowledge of the great tools in Photoshop and a little time to experiment. This technique can be used to draw other Apple awesome products.

Comments

  • kailash
    Excellent tut! The result looks brilliant! thanks for sharing
  • Mohit
    Good tutorial, I love ^^
  • Forbs
    Every time i learn new things fro here. thanks for making designing so easy for me, Alex!
  • Heatherina
    Great tutorial, thanks a lot!
  • CSSReX
    Nice tut man! Thanks :)
  • Rebecca
    You do a good job of explaining and showing the steps clearly. Very nice.
  • Nevis
    I love the way you explain thanks so much for sharing :)
  • Jurnet M.
    This tutorial is simply amazing. Thankyou for sharing it with us, I’ll definately be using it in the future.
  • Mike
    As always, Great tutorials.I am always eager to receive email updates and on my Google reader.Keep up
  • Nicha
    Fun tutorial and very helpful. Thanks
  • Ivan
    I try it, but my icons have a black background. Can anyone help me?
  • Cgbaran
    Great tutorial thanks
  • 36+ Apple Inspired Photoshop Tutorials - Design Bump
    […] How To Design An iPad Icon In Photoshop Tutorial […]
  • 33 iPhone App Design Photoshop Tutorials
    […] How To Design An iPad Icon In Photoshop Tutorial […]