Академический Документы
Профессиональный Документы
Культура Документы
Photoshop Mockup
A Simple Steps Tutorial
www.mockupworld.co
It’s simple.
Really.
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.
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.
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.
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…
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!
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.
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.
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?
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?
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.
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!
facebook.com/mockupworld.co www.mockupworld.co