Responsive Tablet Mockup Instructions

Smart layers are used to replace screenshots within the tablet mock-ups. Replacing just one file instantly updates all the devices with your screenshot! The pack contains 6 Surface Tablet device views: Left, Let + Keyboard, Right, Right + Keyboard, Center, and Center + Keyboard. The pack also includes 6 showcase backgrounds. The keyboard comes in 5 colours: Black, White, Red, Pink, and Blue.

Responsive Tablet Mockup Instructions+psd file


Thanks for purchasing the “Responsive Tablet Mockups” pack. This document covers how to place
your own image[s] into the smart object layer. This allows for all the device screens to populate with
your image.

Step 1: Open the .psd file with Photoshop

When you first open the photoshop file, there are a few things to note. In the main view, you will see a

device with a placeholder graphic. In your layers panel (Window > Layers) you will see that you can

choose from 5 other device graphics, as well as 5 other backgrounds. Most importantly, the top layer

(in red) is called “Place File Here”. That is the smart object layer, where you will be placing your

image.

Step 2: Select the Smart Object Layer

The smart object layer is called “Place File Here”. It is marked in red. This layer is hidden, so it does

not show up in the main view. If you click the layer hide/show button ( ), you will see a full screen

view of the placeholder graphic. Ensure that the “Place File Here” layer remains hidden.

Double click the layer content (the part of the layer that is not a text label) to open the smart object.

You will see a pop-up that looks like this:

Click “Okay” and you will be directed to the smart object layer.

Step 3: Adjust the Smart Object Layer

The smart object layer will have opened as a seemingly separate file. It should look like this:

There are currently two layers in this smart object. Layer 2 is my GraphicRiver profile, and Layer 3 is

my personal website. To replace these images with your own, you will drop a file in a layer above the

ones that are currently there. You can also delete the placeholder layers, as they are only there as an

example.

To place your image into the smart object layer, create a new layer (Layer > New > Layer) and copy

and paste your image. Or, drag and drop your image from another Photoshop file. Ensure that your

image's layer in at the top of the layer list.

The following example displays a new layer, called “Layer 4”, that is populated with an image of my

“Avatar Creator Kit”.

Save (File > Save) and Close to go back to your master document. All devices will now be populated

with your image. The following is what my devices now look like:

Step 4: Arrange Your Composition

Now that you know how to populate the devices with your image, you will want to choose which

device to display, along with which background you prefer. Click the show/hide layer button (

) to

show and hide devices and backgrounds. All devices and backgrounds are labeled. The following is the

composition I chose:

Enjoy the “Responsive Tablet Mockups” pack, and feel free to rate and comment. If you

DOWNLOAD IT NOW

HERE