Hello Design Cutters!
Jo here. This week, we’ve got something a little different, but no less awesome for you :)
Mockup templates are an invaluable tool in any design work, helping to provide context and meaning people can spend more of their mental energy admiring your work rather than trying to imagine what it’d look life in “real life”.
By presenting a more tangible end product, your clients will get a much greater sense of value and be impressed by your extra presentation efforts. Plus, you’ve got to admit, it’s pretty cool being able to see your own designs come to life yourself!
To give you an idea of how versatile these mockups are, I’m going to show you 10 different ways you can use them.
The guys at Design Cuts have very kindly let me use some of my own design work, and I’ll talk you through how to put together the mockup, plus some context on how I would present this to a client. These are all real projects, and I kind of wish I had these templates when I originally worked on them!
Ok, let’s get started!
Follow along with this tutorial: Download the freebies
Today, we have another great freebie for you to enjoy. Made by Vadim have kindly offered two of their beautiful mockup templates for you to try out. This is the perfect way to give mockup templates a try if you haven’t used them before. You can see how truly simple they are to use, and how much fun it can be to show off your work in style!
Remember, this freebie is just a tiny sample taken from this huge bundle: The Ultimate Mockup Templates Bundle at just $29 (93% Off). This bundle is so packed with variety you may never need to buy another mockup template again!
Enter your email below to download the freebie, so you can follow along with this tutorial easily.
NOTE: I won’t break down the layer structure in these examples, as it is a very similar process for all of the templates in this bundle. If you want to better understand how to work with mockup templates and smart objects, please watch the quick video we put together on our main bundle page (you’ll need to scroll down a little to find it). This shows you just how easy it is to place your work into these pre-made templates.
1. iPad Website
This example showcases the gallery page from my illustation portfolio, rockportraits.com. Although this is a personal website project, creating a mock up is a great promotional tool – I could use the image on postcards or adverts to encourage people to visit the website, because they now have a ‘taste’ of how it would look.
I chose made-by-vadim-2 > 24 Devices Hip Mockups > 13.psd because it also includes headphones and leather – a suitably rock ‘n’ roll feel for a portfolio site with a rock music theme!
You can download this particular mockup in today’s freebie pack (available at the top of this page).
Open the made-by-vadim-2 > 24 Devices Hip Mockups > 13.psd file in Photoshop:
In the layers panel, open up the ‘REPLACE WITH YOUR DESIGN’ folder and double click on the ‘PLACE YOUR DESIGN HERE’ layer to open up a new window where we can…. wait for it…. place our design! ;)
The great things about these templates is that they are all really user-friendly, so you can quickly get a mockup together.
I’m going to check out the image size for this file:
This is so that I can get an idea of the aspect ratio. Then, when taking a screenshot of my site I have a better chance of selecting the right size to fit, or can input the dimensions and select the areas I want knowing I’ll get an exact fit:
(the above image uses Snap Pro X, for those curious)
Once you’ve got your screenshot, you can just paste it on to the canvas, making sure it’s all centered:
To see the completed image, save the file and go back to your mockup document:
That’s pretty sweet! However, this template has a rather distinctive vintage, faded feel to it. The mockup already includes a colour correction layer clipped to your image, but because this website has a lot of white, it still looks a little bright.
To fix this, I experimented a bit. By duplicating the clipped ‘Color Correct’ layer, changing the blend mode to Screen and Opacity to 25%, I got an effect that was much more in keeping with the overall feel:
As a finishing touch, if you’re using the mockups for branding purposes it’s always worth doing a bit of extra personalisation.
I’ve added my logo and web address to this template to complete the image and get people visiting the site!
Now I’ve got people interested in my site, as an illustrator I’d love to show them some of the process behind my work. Mockups are a great way of creating a ‘story’ to your brand or image, and I’d like to show people that all my illustrations start with detailed pencil drawings.
I’d be nice if I could show people my sketches on something a little more eye-catching than a picture taken on an iPhone, of a single sheet of paper!
To stay consistent with the mockup for the website, I’m using made-by-vadim-3 > 34 Hip Notebook Mock-ups > 24.psd for a beautifully composed shot of a plain sketchbook.
You can download this particular mockup in today’s freebie pack (available at the top of this page).
Start by opening up the Photoshop file made-by-vadim-3 > 34 Hip Notebook Mock-ups > 24.psd
As before, double click on the ‘REPLACE WITH YOUR DESIGN’ layer to open a new working canvas:
We can see that this mockup has a transparent background, so that the paper of the sketchbook will show through.
I want to display two separate images here rather than one spanning across both pages.
To help place the images, I’ve set up a guide at 50% (View > New Guide) width showing me where the fold is. From there, I can paste in my first image, scaling and positioning to fit:
I can now paste my second image on to a new layer, using the guide to help position and scale:
The background is no longer transparent, but I can fix this once back in the main template file.
As before, save the file and return to the man template to see it with your work:
Now, I can see the scale and positioning is all ok, but the white background is causing problems.
This can be easily fixed by changing the blend mode to Multiply, which will take out all the white from my images, and the opacity to 80% to keep the slightly faded feel of the mockup:
The mockups provide a great base for your promotional and presentation work, but don’t be afraid to do a little more with them once you’ve added your own images.
In this example, I’ve used a Photoshop action to add a vignette before adding a logo and ‘storyline’ which reflects the concept behind the image.
Here, using the mockup template has really helped my drawings stand out from just a regular scan, by letting the viewer see that that they are ‘real’ images that involved real tools and paper, helping to tell the story behind the process:
3. Framed Print
The mockups are also a hugely useful if you have products to sell. Most illustrators and designers produce prints of their work for sale, but may not have the time or resources to take good quality photos of all their prints.
By using a framed poster mockup, you help the potential customer visualise what your artwork is going to look like in their home, making it more real and purchasable.
For this final mockup using my illustration work, I’m going for the much cleaner styledsparkle-stock-4 > Real Photo Poster Mockups by SparkleStock > 07.psd to display one of my prints. I’ve selected one with a simple background, as I didn’t want too many distractions that may clash with the image.
As the purpose of this is to sell and give an idea of a product, rather than create an atmosphere around a brand, I’ve gone for something that looks bright, clean and clear. This way, the viewer feels they are getting a much more realistic representation of the product.
Start by opening up the Photoshop file sparkle-stock-4 > Real Photo Poster Mockups by SparkleStock > 07.psd
Double click on the ‘Edit This Layer’ layer to open a new working canvas:
Next, I’m going to paste in my image:
As you can see, the aspect ratio of the image doesn’t match that of the template, so we’ll need to fix this in the next step.
One option is to add a white layer behind the image and reduce the image size. This gives the picture a plain white border that would be similar to a real-life print:
Let’s save the image and see how it looks within the mockup:
This looks ok. The image has a nice double-mounted effect and the perspective has made the borders look close to equal in width.
However, it’d be nice to see how it looks filling up the full frame. Let’s try it for comparison.
Going back to my image file, I’m scaling the image so it fills the frame:
Once happy with the framing, I’ll save the image again and check how the updated version looks in the mockup:
Much happier with this!
Most of the mockup files will feature Adjustment Layers which you can tweak to suit your needs.
In this image, I felt that the ‘Paper Brightness’ curves adjustment layer was a little too bright, and losing some of the colour in the image.
I decided to play around with this until I got an effect I was happy with:
As this mockup is designed to promote a product, you could add some extra details as a final customisation, and make sure people know where they can purchase your work!
Something like this would be great to submit for a brochure or catalogue to encourage sales of your work.
Using three different mockups I’ve been able to showcase three different aspects of my illustration business in a completely unique way, strengthening my brand and added value – all by simply using some carefully chosen mockups!
We’ve covered personal projects, now let’s look at client presentations…
4. Hero Image and iPad Website
Hero Images are large banner images placed prominently on a website. They’re a great way of creating visual impact from the start, and giving an overview of the brand and/or website’s most important content and message.
The Royal Oak Tetbury is a regular design client. They’re a Pub/Hotel based in the Cotswolds, UK, and have an outdoorsy, fun, retro vibe mixing the traditional and contemporary.
Let’s say I wanted to create a presentation of some design work. The Hero/Header image would make a fantastic cover and set an impressive tone from the start.
The Hero/Header images from Made By Vadim have enough variety and broadness to cover most styles and contexts.
For this example, I’m going formade-by-vadim-1 > 16 Hero Header Images Vol 1 > 16.psd. It’s got a nice nice rustic, vintage feel and the accessories such as camera and sunglasses give it a ‘getaway weekend’ vibe – perfect for our hotel client!
Start by opening up the Photoshop file made-by-vadim-1 > 16 Hero Header Images Vol 1 > 16.psd:
Let’s hide the ‘Tag Line’ layer so we can see what space we have to work with:
That’s a nice big area to play with, but it’s important not to clutter up the image as there’s already a lot going on around the edges. Clear, simple and bold is the best strategy here!
I’ve started by simply typing the client/brand’s name using the logo typeface (Cala bold) and a simple tagline using another brand font (Veneer):
It’ll also be nice to add a logo above the text. I’m going to paste the design I have on file for them, and also add a vertical gridline at 50% to help me center the logo and text. This is particularly useful here as the iPad at the bottom is off-center, making it harder to judge accurately:
Now our tagline and logo are done, we need to add a screenshot of the website for the iPad.
As before, double click the ‘REPLACE WITH YOUR DESIGN’ layer to open a separate working window:
This time, I’ve zoomed out and grabbed a wide a screenshot as possible to allow for cropping on the template:
Place the screenshot in to the file and scale/adjust as necessary:
Once you’re happy with the placement, save the image and go back to the main mockup template:
Of course, iPads don’t just have to display websites. I’ve done an alternative version displaying a photo of one of the rooms. It’s a great way of showing off your client’s product or service on a more subtle level:
5. Logo bottles
Continuing using our Pub/Hotel client as an example, the mockups are also a great way to showcase the logo and branding you created in a way that you, or the client, may have not have originally envisaged. This is a great way to show the impact and versatility of a logo design, plus it makes you look super creative and imaginative :)
As the quirky, rustic look fits our client’s branding, it’d be great to show them more examples of their logo in that type of context.
The 25 Hip Logo Overlay Mock-ups from from Made By Vadim is a treasure trove of unique contexts to show off your logo. It’s hard to resist the temptation to want to see how your logo looks on *everything*!
In this instance though, I’m showing some restraint and sticking with made-by-vadim-4 > 25 Hip Logo Overlay Mockups > 25.psd, which has some nice decanters and a tealight candle holder – perfect for suggested table props in the laid-back pub/dining setting.
Start by opening up the Photoshop file made-by-vadim-4 > 25 Hip Logo Overlay Mockups > 25.psd
Next, we need to open up the ‘REPLACE WITH YOUR LOGO’ group folder and double click on the ‘REPLACE!! wooden brick’ layer to open up the new working window for our logo on the tealight holder:
Hide the original layer, and add paste in your own logo (Note: in the source file for this, the backgrounds are transparent):
The logo I designed is a slightly different proportion to the default example. Let’s save the file and switch back to see if this still fits with the template, or we need to go back and rescale:
If you look to the left, it’s clear to see that the logo is way too big. We now know the canvas size of the logo editing window is equivalent to the full surface of the object the logo appears on.
We can use this information to correctly scale and position our logo:
This looks much better and in proportion now.
We’ll do the same for the logo on the far right bottle, which is accessed via the ‘REPLACE!!! Right logo’ layer.
We can see that this logo is originally white, without any adjustment layers:
If you have a lighter coloured version of your logo, great! Just paste that in. If not, use your original logo and create a hue/saturation adjustment layer:
You can adjust the settings to suit. I’ve gone for a slightly off-white tone:
We can see for the bottles, the canvas size on the logo editing window can be filled without it looking out of scale on the main mockup. We can use this as a guideline for the remaining bottle, following the same steps as above:
6. Event Poster 1
Now that we’ve impressed our pub/hotel client with the cool branding mockups, they want to you to design some eye-catching posters for events to increase their publicity. Hurray!
Mockups can sometimes be overlooked for ‘flat’ designs like posters, since they’re going to be printed on something flat anyway, right?
Using the mockups for posters really can be great for making your work stand out as it allows the client to see them in a way they weren’t expecting – in (as close to) 3D as possible. Again, this helps make your design seem more real and build excitement and anticipation for when the real posters come back from the printers and will be out seen in the real world.
The first example we’ll use a poster for a recent Real Ale & Cider Festival that was run in conjunction with a local event. The design on the poster is quite rustic and rural, and the event has a strong sense of local community. Bearing that in mind, it’d be nice to use a design with a human element.
Cue Creative-Goodies > Photorealistic-PosterFlyer-Mock-ups > 05.psd which gives us a nice realistic, slightly worn poster effect. This also has some great customisation options built-in, which we’ll also be taking advantage of.
Start by opening up the Photoshop file Creative-Goodies > Photorealistic-PosterFlyer-Mock-ups > 05.psd
Double click on the artwork layer that says ‘Double Click’ to access the image editing window and repace with your artwork:
Save the file and let’s go back to our mockup template to see how this looks:
It’s already looking pretty good and makes the poster stand out. However, the setting looks a little grey and corporate compared to the event we’re promoting.
We can make some alterations easily straight from the template. First, let’s open up the ‘Torso’ folder and hide the white shirt (torso 3):
Obviously, we don’t want a headless model! But this shows us just how easily you can select specific elements to tailor the mockup and create lots of variations within the same template.
Let’s replace it with a more casual, rustic checked shirt by turning on the visibility for ‘torso 1’:
Finally, let’s do something about the background. We can use any image we want here, so I’m going to Unsplash to find a suitable, outdoors background:
We can use this by simply placing the image into the ‘Background’ folder at the bottom of the layer stack:
Remember, although the mockups are designed to look great by simply dropping your image in, you don’t have to leave it there. In this example, I’ve used a vintage effect Photoshop Action to make the overall feel more in-keeping with the style of the poster and event:
7. Event Poster 2
We’ll create another poster mockup, this time with a grungier, worn feel compared to the crisper example above.
This time the event is for ‘Oakstock’ – a mini-festival inspired by the very famous ‘Woodstock’. As this event poster design is channelling that of a vintage music festival, something a bit grungier and rough-around-the-edges would work perfectly.
For this, we’ll use vandelay-premier-3 > other mockups > poster-mockup > poster-large-27×40.psd which gives us the perfect worn-poster look.
Start by opening up the Photoshop file vandelay-premier-3 > other mockups > poster-mockup > poster-large-27×40.psd:
Double click on the ‘Poster Design’ layer to access our editing window:
Seeing how crisp the original image is, you can really appreciate the amount of work the mockups save you in creating an authentic, worn effect.
As with previous examples, paste in your poster design:
Save the file and return to the main mockup window to see the effect:
It makes quite a difference doesn’t it? :) This would be great to present to the client as a way of promoting their event online, using the image on social media to give a greater sense of atmosphere than just using a flat design.
Remember, you can customise things like the background just as easily as the poster design – simply paste in your chosen image:
8. Laptop Website
For this example, I’m going to be presenting a website I designed for a client. With websites, it’s always worth displaying them in a screen-based setting for extra authenticity of how they’re going to be see out in the real world.
The client, Jackie Walker, is a personal development coach for women, so it makes sense to present a mockup template with a female computer user. If you can use mockups that feature your client’s target audience, or would appeal to them, all the better.
Thanks to the sheer quantity and diversity available in this bundle, I was able to find just what I was looking for vis viktor-hanacek > 29 MacBook Pro and iPad Photo Mock-Ups > IMG_5561.psd which features a lady relaxing with her laptop. As a happy coincidence, the colour tones in this photo are similar to those used on the website, so the whole image should tie in together nicely and look very on-brand!
Start by opening up the Photoshop file viktor-hanacek > 29 MacBook Pro and iPad Photo Mock-Ups > IMG_5561.psd:
Double click on the ‘Insert your artwork here’ layer to access the image editing window, and follow the on-screen instructions ;)
Place your screenshot on to the canvas and save the file once you’re happy with your display:
Once you’ve saved the file you can switch back to the original mockup template to see the result:
Again, depending on your client/brand and their style you can go on to tweak the mockups with other Photoshop techniques. Here, I’ve added a retro action to soften the colours which were also used on the images within the site. The softer effect also ties in with the client’s gentle, friendly approach which is a key part of their brand. Adding the web address and logo is always a nice personal touch too:
9. Complete Branding
In this example, we’re going to take a logo that was designed for ATTIC tea. They’re a specialist tea company focussing on the health benefits of a few select teas, so a clean, simple, almost clinical style would work best for presenting their brand.
Logos really come to life when you see them in various contexts, emphasising the strength of the branding.
As we’re working with just one logo, we can create greater impact by displaying it across several items and show the full ‘branding’ package. The perfect mockup for this is provided by item-bridge-3 > Branding-Identity-Mockup > branding-mockup > 02.psd which includes a range of more traditional items like business cards, letterheads and an iPhone, to quirkier items such as pin badges and a mug – a nice addition to have for a tea company!
(Note: This package also includes a very useful video demo)
Start by opening up the Photoshop file item-bridge-3 > Branding-Identity-Mockup > branding-mockup > 02.psd:
First, we’ll change the background colour so that the items are a little easier to see. We can come back and tweak this later, but since I know blue is my client’s key brand colour I’m going to use a lighter version of that:
As there are a lot of individual elements, we’ll work from the bottom up to make sure we don’t get lost!
The first items are the Binder Clips and Paper Clips. These are fairly simple to edit – just open the group folders and double click the Colour Picker layer to select the colour you want for each item. I’ve gone for #1d71b8 which is the shade of blue used in the brand’s logo:
The next items are the iPhones. As with the other mockups, you can edit these by opening up the files and double clicking the image layers to access the editing window. I’ve pasted in a screenshot I uploaded from my own mobile to use:
For the black iPhone, I’m going to use a product shot for variety:
Save the file and go back to the main image to see how the brand is starting to build up:
Continue with the iPad, pen and badges:
Next, there’s the CD. In this instance, I’m going to hide the folder as it’s not so relevant to my client and the same with the 85×55 business cards, as we already have another set to work on:
We’ll continue through the stickers, business cards and envelopes as they’re all simple, flat designs that follow the same process:
For the Diary, you have a few options. The Spine and Inside cover can simply be solid covers. For the cover, I’m going to create the design in the editing window, rather than paste in a pre-designed one.
I’ve started by using the client’s logo and main brand colour:
Then, I’ve simply added a fabric texture effect to make the design a little more tactile, and an inner drop-shadow to the logo for an embossed look:
I’m going to whizz through the Letterhead, Folder and Mug as these all follow the same process. For the Letterhead, it’s good to include some text to provide a better example of how it would look, and stop it looking too empty!
For the bag, this mockup package includes some paper bag textures you can use directly in the template: item-bridge-3 > Branding-Identity-Mockup > branding-mockup > Additional bag textures.
To stick with the blue/white branding but add a little interest, I’m going to use the crumpled 01-white-bag.JPG background for the front of the bag:
Then, I’ll add the logo and use the Multiply blend mode so that the creases show through:
To finish off the bag, I’m going to use the less crumpled 02-white-bag.JPG on the sides and inside of the bag for texture continuity:
That’s one mockup that’s allowed us to present a logo design in several ways to a client.
10. Digital Advert
Finally, I’m going to show you a recent print design advert, reimagined on a digital, tablet platform.
The client was Asparagasm, a contemporary vegan and gluten free pop-up dining brand that had recently launched their own beer. The advert was for publication in the Saatchi Gallery magazine, so with both these brands combined, I wanted to create a fresh, minimal and contemporary design.
By taking the print advert and presenting it on an iPad, it opens up potential for further advertising opportunities. Viewing magazines and the adverts within them on mobile devices also reflects the lifestyle of the modern, trend-aware audience both these brands are targeting.
The mockup I’ll be using sparkle-stock-2 > iPad and iPad Mini Mockups by SparkleStock > 04.psd is a great, simple and modern template with a casual reading hand that’s ideal for this example.
Start by opening up the Photoshop file sparkle-stock-2 > iPad and iPad Mini Mockups by SparkleStock > 04.psd:
Double click on the ‘Edit This Layer’ object to open up the editing window:
Paste the design on to the canvas:
Save the file and go back to view the updated template:
As the image has a lot of white in it, the reflection effects are making the image look rather grey and flat. I’d like to brighten this up a bit before presenting it to the client.
To correct this and make the image a little more vibrant, I’m going to edit the duplicate image layer directly below the one we edited a moment ago.
All I’m going to do here is increase the Opacity to 70%, which brings back some of the colour and contrast:
And we’re done!
Phew! I hope that gives you some ideas on how you can use the mockups to showcase your work. As a designer, it’s really fun and rewarding to see your work in different contexts, so this was a really cool tutorial to put together! I hope you got as much out of it as I did :)
If you’ve got any comments or questions, do leave them below and I’ll keep an eye out. Also, if there are any Black Sabbath, Nirvana or PJ Harvey fans amongst you, do say hello @rockportraits ;)
We’d really love to see your designs showcased on the Facebook page using your favourite mockup templates. Don’t be shy – everyone is friendly, supportive and all love appreciating other creatives’ work!
Hopefully this tutorial showed you just some ideas for how you can use the huge range of mockups available in the current bundle. We really think it’s the best collection out there for quality, variety and just sheer volume! You can still get this bundle for a whopping 93% off this week – grab it below, while you still can: