How to create your own

Photoshop Mockup
A Simple Steps Tutorial

www.mockupworld.co
It’s simple.
Really.

Creating your own PSD mockup is not as hard as it

seems. In fact: It’s something anyone with a digital
camera and some basic Photoshop knowledge can
master.

In order create you own mockup, you’ll need a few things:

A decent camera
(i.e. the one in your smartphone)

A motive
(i.e. a device with screen or a billboard)

Good lighting
(especially if shooting inside)

Adobe Photoshop
(CS5 or higher)

www.mockupworld.co
Step 1
Start with your Content

So you are ready to create you first mockup? Think about what you
want to showcase: Is it a website? An app? A poster or print ad? Each
content requires an adequate setting. For this tutorial let us assume
it’s an awesome Wordpress theme you’ve created.

Capture the best sections of

your page: An image that
shows the viewer at first
glance what to expect when
they buy it.

Choose a page or section that shows the best feature of your product, then take a
screenshot of your template in fullscreen mode. Remember to use a device that
has the same display ratio as the one you are going to use in your mockup.

Save the image in the highest resolution possible (i.e. *.PNG).

www.mockupworld.co
Step 2
Setting up the Scene

It’s all about the setting! Create an appealing environment for your
content that really accentuates your message.

Put your content right in the

middle of the environment
it will appear later on.

Imagine occasions where you template might show up later. In an office? A coffee
shop? In a train? Move your mockup device to the location that is the best fit!

Clean up the surroundings: Make sure that the device is in the center of the setting
and nothing distracts from the motive. Move items that belong to the scene (i.e. a
coffee mug, keyboard, book or plates) to the background.

www.mockupworld.co
Step 3
Let there be Light!

There are a lot of things Photoshop can do. And there are things that
just don’t work so well. Good, natural lighting is one of these things…

The most important rule

when setting up the correct
lighting: Avoid glares and
shadows.

Make sure there is enough light before shooting your photo. Artificial light is okay,
but the best spot is right next to windows, where sun light brightens the scene in
the most natural way. Make sure no shadows darken important spots of your
setting.

Now turn on the display of your device. It’ll be easier to edit a screen that is lit up
later on. You’ll see why.

www.mockupworld.co
Step 4
Smile, you’re on Camera!

Your camera’s digital storage has space for thousands of photos.

So why stop after taking the first shot?

Ten to twenty shots per

angle view? Why not. It’s free
of charge!

When taking the photo shot remember two things: Don’t stop hitting that button
and do change angles frequently! Take ten, twenty photos of each perspective.
When your camera is equipped with an optical zoom, don’t hesitate to make use
of it.

Pro tip: Use a tripod to minimize any blurs!

www.mockupworld.co
Step 5
Make it shine!

It’s time to switch back to your computer, start the editing and to get
rid of little flaws.

Is that a visible fingerprint?

And what about that
smudge? Photoshop is your
best friend when trying to
get rid of little impurities.

Transfer your image files to your computer and check the best shots. Satisfied?
Great! You may want to remove little spots and blur background items a little
more now. Also: Try to experiment with Photoshop effect filters. You’ll find plenty
of them online - free and paid - or create your own ones.

www.mockupworld.co
Step 6
Really smart!

Here’s the tricky part. Don’t be impatient, be exact. The more careful
you are, the better the result will look. And that’s what you want,
don’t you?

Don’t bother choosing a

nice color for your rectangle.
It won’t show up after we’re
done anyway.

In Photoshop create a new layer and add a rectangle form (“u“): Try to match the
dimensions of the rectangle with the size of the screen. Turn your form now into a
smart object by doing a right-click on its layer and choosing „Convert to Smart
Object“. Done? Great!

With the rectangle selected use Edit → Transform → Distortion to make it flexible.
Drag its corners to the corners of the screen, so that your once-was-rectangle
covers the display completely (now you know why it’s best to leave the display on
when shooting). Make sure to use the zoom function to achieve a really clean
result.

www.mockupworld.co
Step 7
A perfect fit!

Almost there! What you just did? By turning your rectangle into a smart
object, you’ve created a second image file (.PSB), affiliated with your main
image (.PSD). Sounds fun, huh?

By the way: .PSB stands for

“Photoshop Big“ and is the
Large Document Format.
You can save high dynamic
range, 32-bits-per-channel
images as .PSB files.

Double-click the smart object layer. You’ll notice that photoshop will open a new
window that shows the color of your rectangle. Now move your screenshot from
Step 1 into this window. Resize it, so it fits the canvas.

Hit “save“, close the file - and Bob’s your uncle! Photoshop automagically inserted
your content into the device’s display.

www.mockupworld.co
Step 8
Finishing Touches

Well, that went well, don’t you think? Now let’s add the last finishing touches
to make your screenshot seamlessly blend in.

Turn the angle wheel until

your gradient matches the
light settings in your image.

Select your Smart Object layer and click the “fx“ icon (right beside the layer
description) to open the layer style options. Click on “Gradient Overlay“ and set the
Blend Mode to “Multiply“. Make sure the defined gradient goes from black to
white. Now turn that angle wheel so that the gradient looks natural within your
device’s light surroundings. The transparency should be set in the range between 3
and 10 percent.

Any while you are at it: Play around with the style options! You could add a light
Inner Shadow to really imitate the device screen!

www.mockupworld.co
Voilà
You did an awesome Job!

© Mockup World 2015

facebook.com/mockupworld.co www.mockupworld.co