Bring your designs to life: create professional mockups

As a designer, it’s important to bring your final design to life by showing your client what it will look when printed. Don’t hurry the process at this point… you took time to create an awesome design so spend a little more time showing it off.

Here are a few program tools and steps that can help you create professional mockups:

 

 

First, understand that your presentation doesn’t have to be fancy or elaborate — a simple mockup that emphasizes your design is just as effective.

A nice mockup represents your design, your client AND you, so don’t promote yourself in a mockup that makes you look childish. The Contest Holder will decide what the best design for them is:

 

 

I see this countless of times in contests and I think everybody can agree that this isn’t a professional mockup… so let’s stop doing it.

Let’s Start the Fun Part!

How you present your work is really the fun part… there are no rules! You need to come up with something simple that doesn’t dominate, but instead compliments your work.

Create a new Photoshop document in the size that you want to present your mockup. We will use RGB as our color mode since this will be viewed on-screen.

Copy the front and back of your design onto a white background.

 

 

Right click the Photoshop layer that incorporates the Front layer and select “Blending Options.” Or you can simply click the “fx” button at the bottom of the layer panel and select “Drop Shadow.”

 

 

 

Once you click on “Drop Shadow,” type in the following settings or create your own:

  • Opacity: 70 %
  • Distance: 1 px
  • Spread: 0 %
  • Size: 5 px

 

For the Back layer, you can create a shadow following the above steps OR you can simply copy the settings by pressing the Alt-Key and dragging the Adjustment Settings from the Front layer to the Back.

You will see a soft Drop Shadow on both cards.

Creating Duplicate Layers

Now we are going to create duplicate layers of the Front and Back by selecting each individual layer and pressing CMD+J (CTRL+J). You should see copies of the original layers.

Make the ORIGINAL layers invisible (click on the Eye-icon to the left of the layer) so we can reference back to these designs after we create our background.

Creating a Patterned Background

Make sure you’re on the Front-copied layer, then place your mouse over the actual Front-copied card design and hold the ALT-Key — click and drag your mouse. You will see that your design, and it’s layer, have been duplicated.

Continue duplicating the Front design making sure to rotate each copy in a different direction. After you have filled the background with the Front design, complete the same steps for the Back design so that you have a nice mix of both:

 

 

Flattening Images

Once you have an assortment that you like, it’s time to flatten and merge all of the copies together. Select and highlight all of the copied layers and press CMD+E (CTRL+E). Or, right click on all of the highlighted layers and select “Merge Layers.” After you merge, you will see ONE layer.

NOTE: Make sure you do not merge the ORIGINAL (invisible) Card layers with the copies!

Using the Blur Filter

Select the newly, merged Background layer and choose Filter > Blur > Gaussian Blur from the menu bar. Use a Radius around 0,8 pixels for the Gaussian Blur Filter.

 

 

By adding the blur, our background is still visible without distracting the eye of the viewer from the original Card design. The Blur gives a DOF (depth of field) to our background.

You should have 4 layers right now:

  1. White Background layer — this is found at the bottom of the layers palette which we don’t need anymore since the whole background should be filled with the Flattened Background layer
  2. Flattened Background layer — incorporates the flattened business card copies
  3. Original Front layer — incorporates the original Front design
  4. Original Back layer — incorporates the original Back design

Creating a New Layer

Now create a 5th layer by clicking on the Paper-icon at the bottom of the layers palette (next to the Trashcan-icon) — move the new layer below your Original Front and Back layers.

Fill the new layer with black by pressing ALT+Delete to fill it with the default foreground color. If your layer doesn’t turn black, check your color platte at the bottom of the tool bar to make sure you have black selected.

Creating a Layer Mask

On the 5th layer, create a Layer Mask by clicking on the Rectangle&Circle-icon at the bottom of the layer platte. You will see a white rectangle added to the layer.

There are different ways you can create the Layer Mask below but, in this example, we are going to use the eraser tool:

 

 

Select the eraser tool and change the opacity to 30%. Make sure your color platte (found at the bottom of the tool bar) is on the white and black default colors and the white is selected.

Begin erasing some of the black from the middle of the layer. If you erase too much, you can switch the color platte to black and use the eraser tool to draw in the areas you’d like to re-show. This really helps if you mess up and don’t want to start over.

Using Blend Modes

Now that your image is similar to the one above, set the Blend Mode to Multiply and leave the opacity at 100%. The Blend Mode drop-down menu can be found at the top of the Layer platte.

Take a look at your mockup and get excited… we are on the right track!

 

 

Remember the original Card layers you hid? Click on the Eye-icon again to turn the layers back on!

Rotate the Front and Back card designs until you are happy with their position. Technically, we are done at this stage and you can be proud to show this to your client:

 

 

BUT if you want to give your already-awesome design a little more OOMPH… add a few details.

For example, I gave my mockup a simple border and integrated the client’s logo:

 

 

The goal of presenting your work is to represent each client’s branding in a distinctive way. Make sure to create a unique mockup that really demonstrates why your design fits their company’s style.

Also, try to be different from others! If you do the same thing as everyone else then your design and presentation will be overlooked.

Examples and Inspiration

The following examples demonstrate ways you can present designs that incorporate unique materials and effects like UV Spot, Foil, etc.

Enjoy!

 

 

 

 

 

Feel free to share your own mockups in the comments below!

Jurgen
View all posts by Jurgen
Jürgen's website

28 Comments

  1. rotred

    AMAZING AS ALWAYS JURGEN !!!!
    great job ;)

    Reply January 19, 2012 at 11:33 am
    • Jurgen

      Thanks my dear Najla :))))

      Reply January 19, 2012 at 11:34 am
  2. eldars

    Very useful and valuable information! Thanks a lot for this post, I was just looking for something like this lately.

    Reply January 19, 2012 at 11:54 am
  3. Designoo

    Awesome! write next tut on how to make an animated mockup as you have posted here :)

    Reply January 19, 2012 at 11:56 am
    • Jurgen

      Thanks, let’s wait and see what the next tutorial will be :)

      Reply January 19, 2012 at 12:03 pm
  4. exemplar chick

    wow, a great one! thank you, J!

    Reply January 19, 2012 at 1:03 pm
  5. GiaKenza

    Hi Jurgen,
    thank you very much for the tutorial.

    Reply January 19, 2012 at 3:21 pm
  6. TwinkleBee

    Good one Jurgen,I will use it for sure :)

    Reply January 19, 2012 at 3:30 pm
    • Jurgen

      haha Elena, you know this tutorial from long time :) Also your mockups skills are perfect there is nothing to change for you. :)

      Reply January 19, 2012 at 11:28 pm
  7. vijay

    Jurgen, you are awesome in tut

    Reply January 19, 2012 at 11:22 pm
  8. Jurgen

    Thanks happy that you like and that its useful

    Reply January 19, 2012 at 11:29 pm
  9. Naomi

    This is amazing and very useful. Thank you for the information!

    Reply January 22, 2012 at 5:41 pm
    • Jurgen

      My pleasure Naomi, great that you learned something from this tutorial.

      Reply January 23, 2012 at 1:09 pm
  10. Sarah

    Thank you for this tutorial!! Always looking for simple ways to make my design stand out!

    Reply January 22, 2012 at 7:12 pm
    • Jurgen

      Keep checking the blog, there will follow more tutorials soon :)

      Reply January 23, 2012 at 1:10 pm
  11. omini

    i can be learn more from you Jurgen
    thanks for share

    Reply January 23, 2012 at 2:17 pm
  12. Alexandro Arana Ontiveros

    Primero se llamaron “bocetos”. Después “dummies”, ahora son “mockups”. El chiste es presentar algo gráfico (impreso o, digital, en estos tiempos) que pueda dar una idea profesional a nuestro cliente acerca de cómo va a ser el resultado final de nuestro trabajo.
    Felicidades, excelente artículo.

    Reply January 24, 2012 at 7:01 am
  13. Jurgen

    Gracias :)

    Reply January 24, 2012 at 7:49 am
  14. crocchetta

    thanks very much. I was looking for something similar a few days ago, and now I find it

    Reply January 24, 2012 at 9:53 am
    • Jurgen

      Happy you found it crocchetta :)

      Reply January 24, 2012 at 11:34 am
  15. potrax

    when it comes from great designer,,it’s always amazing stuffs…thank you for the tutorial jurgen :)

    Reply January 25, 2012 at 10:23 pm
  16. Jurgen

    Thanks potrax, great to know that you like it :)

    Reply January 26, 2012 at 1:55 am
  17. gabroeldc

    okey,i’ll try it.thanks

    Reply January 31, 2012 at 12:28 am
  18. tobiasgood

    Totally Useful for a newbie like me , thanks for share the knowledge Jurgen :)
    Sincerely Regards, cheeeers. . . . .

    Reply January 31, 2012 at 10:26 am
  19. Jurgen

    Happy that its useful for you

    Reply January 31, 2012 at 11:17 am
  20. SPKW

    WOW great.. really valuable stuff about presentation…

    Reply February 9, 2012 at 1:50 am
    • Jurgen

      Happy that its valueable for you

      Reply February 12, 2012 at 11:13 pm
  21. raych

    Awesome! thanks for sharing- looking forward to more:)

    Reply February 14, 2012 at 4:22 pm

Leave a comment