These days, touchscreen tablets are coming out in all shapes and sizes. The variety of tablets is increasing rapidly, and designers need to show their work off on an ever-growing array of screen sizes and dimensions. Rather than relying on stock photographs of tablets, most of which will fall out of date with every new hardware release, it’s best to build a layered touchscreen tablet in Photoshop that you can edit as needed.
Today, I’ll walk you through the process of creating a glossy, realistic touchscreen tablet in Photoshop. Along the way, you will learn to use different shape tools, pen tools, layer masking, and different blending options to achieve the final result through an easy step-by-step approach. So, let’s get started!
Final Layered Photoshop File: Touchscreen Tablets.psd
Create a new document in Photoshop with a 1200px width and a 1400px height.
Fill the background layer with color #eaeaea using the paint bucket tool.
I’ll show you how to create both the portrait and landscape views of the tablet. Let’s begin with the portrait view. First of all, set #f5f5f5 as your foreground color, and select the rounded rectangle tool with a 20px radius to draw a rectangle of the size you want your tablet to be. I’ve used 390px by 492px, as you can see below.
Double-click on this base rectangle layer to open the layer style window and apply the following settings.
Set #1e1e1e as your foreground color and draw a rectangle inside the frame of previous rectangle using the rounded rectangle tool.
Now press “D” to set the default colors and draw another rounded rectangle around 4px smaller than the previous rectangle.
Drag it a bit upward so that previous rectangle becomes visible just at the bottom.
Draw a rectangle using the rectangle tool on top of the rest of the layers and label it as “screen.”
Let’s bring something onto the canvas to display on our tablet screen. I’m going to use my Design Agency Layout for this purpose. Load the file that you want to display in this tablet, and copy/paste it on top of rest of the layers in your document. You can resize it roughly according to the size of the tablet’s screen using the free transform tool (Ctrl+ “T”). To set it perfectly onto the screen, click on the file layer, then press Ctrl+ <thumbnail of the screen layer> to make a selection around it. After that, click on the icon of “Add layer mask,” which is present at the bottom of the layers panel.
Next, we’ll make the home button. Draw an ellipse in pure black color.
Press Ctrl + <click on the ellipse layer> to make selection around it. Now, select the soft round brush tool and apply it as shown below inside the selection. Make sure to apply the brush on a new layer. Reduce the opacity of this layer to 20%.
Apply the following settings for inner shadow on this new layer.
Make a rounded rectangle inside of the home button. Set the fill to “none” and the stroke to around 1pt in color #c4c4c4 in the properties bar at the top.
Next, we’ll make the camera. Draw three circles over each other. The base circle is of #212121 color, the next bluish circle employs color #261963, and the top circle is pure black.
Apply the following layer style settings on the blue circle layer to finish the camera.
Next, we’ll create the highlight over the tablet. Select the pen tool (Tool mode: Shape) and draw a triangle as shown below.
Now confine this triangle to the tablet by adding a layer mask.
Make the fill of highlight layer to 0% and apply the following gradient overlay settings on this triangle layer.
Make a few buttons using the rectangle tool and the pen tool in color #303030. Make all these buttons just above the background layer.
To make a shadow for the tablet, draw a rectangle using the rounded rectangle tool. Right-click on the shadow layer and select “Rasterize Layer.”
Now, go to “Filter” > “Blur” > “Gaussian Blur” and use a value of 4px here. After that, reduce the opacity of the shadow layer to 40%.
We’ll make a reflection of the tablet now. Collect all the layers forming the tablet into a single group, duplicate this layer group, merge it, and flip it vertically by going to “Edit” > “Transform” > “Flip Vertical.” Now, position it just below the original tablet.
The portrait view of our tablet is ready. Now, collect all of these layers into a group and label it as tablet portrait. Hide or delete four layers in this group: highlight layer, layout display, shadow, and reflection layers. After that, go to “Edit” > “Transform” > “Rotate 90⁰ CCW” to get the landscape view of tablet.
Now recreate the highlight, shadow, and reflection for the landscape tablet using the same techniques used for the portrait view. Display your artwork in the horizontal screen to finish it off.
That’s it guys. Hope you enjoyed the tutorial and learned something useful. Click here to download the layered PSD file.
Five Ways to Remove Backgrounds in Photoshop in 2021
By Amber Leigh Turner,
Need to remove an image background? Learn five ways to remove backgrounds in Photoshop, depending on the kind of image you're working with.
Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups
By Daniel Schwarz,
Take your wireframes and mockups to the next level by creating interactive FIgma prototypes that are navigable and animated. Here's how!
5 Web Design Trends for 2021
By SitePoint Sponsors,
Web design trends come and go. 2020 was no exception. Web designers will see some familiar trends replaced by safer and more dependable design choices.
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.