Draw a tablet in Photoshop

For a designer, the ability to professionally demonstrate their mobile application or web design layout is a very important skill. This tutorial will show you all the steps for creating an iPad template. Below you can see the final image.

Final result

Lesson details

  • Program: Adobe Photoshop CS6 (older versions of CS3 also work well)
  • Estimated time to complete: 60 minutes
  • Complexity: Average

Step 1

Open a new Photoshop document wide 4000px and tall 3072px. Choose a tool Rectangle with rounded edges(Rounded Rectangle tool) and create a shape with proportions as in the image below.

This will be the basis of our tablet.

Step 2

Now we need to add a thin stroke around the base. This will soften the hard corners of the figure and add more realism.

The stroke is almost invisible, but it is still useful later.

Step 3

Our next step is to create a silver rim around the base of the iPad. Simply duplicate the base layer, then change its color to # b4b8bb, which is silver-gray. Using the tool Free transform (Free Transform), stretch the gray shape a few pixels on each side. See the result in the figure below.

This silver layer will be the frame of our iPad layout.

Step 4

Now we need to edit Layer style (Layer Style). The first style will be Stamping (Bevel Emboss).

Followed by Stroke (Stroke).

And the final touch is External glow (Outer Glow).

For best results, set the style values ​​exactly.

Step 5

The next thing we do is a flash on the tablet screen. We will draw a white rectangle and rotate it on its side using the tool. Free transform (Free Transform). Make sure the figure covers the iPad from edge to edge.

Step 6

Now we need to apply a layer mask to the glare, so that it is located only on the tablet. Hold down the Ctrl key and click the shape of the base on the layers panel. If it is not clear, look at the image below. After the pixels are selected, apply a layer mask to the highlight.

Cut down Opacity (Opacity) layer with a flare up eight%, that’s what should happen.

Step 7

Now we will add a screenshot of the site. We will post this image as Smart object (Smart Object), which will allow us to go back and edit the iPad screen whenever we want. If you want to know more about smart objects, read this article.

Resize Smart object (Smart Object) to fit the size of the tablet screen.

Step 8

Now we need to add some effects to our Smart object (Smart Object).

First add Stamping (Bevel Emboss).

Next, add Stroke (Stroke).

Step 9

We are almost done with our tablet, it remains only to add a camera and a “Home” button. Let’s start with the camera. First of all, draw a small circle with the tool Ellipse (Ellipse tool). Fill it with color # 000000 and add Shadow (Drop Shadow).

Step 10

Next, draw a small blue color circle. # 30a7c4. Add light Stroke (Stroke) in the menu Layer style (Layer Style).

The last step is a tiny light flare over the blue circle.

Step 11

Now create the “Home” button. Draw a small circle and fill it with color. # 000000.

Step 12

Next, add a little shine to our button using the tool. Ellipse (Ellipse tool).

Cut down Fill (Fill) to four%.
(Note of translator: when casting at 4%, the highlight is not visible on a black background. I would recommend setting the fill value to 7-8%)

Step 13

Add a little Rectangle with rounded edges (Rounded Rectangle shape) and reduce the fill to give it a transparent look.


Our iPad is now finished!

Add some shadows and a background to get something like this.

Like this post? Please share to your friends: