How to create Santa’s letter Mockup in Sketch

Santa's Letter Cover

It’s that time of the year again – a time when we forget about all the bad things that are happening in our lives and a time when we try to create the best memories with our loved ones.

I remember as a kid, writing long letters addressed to Santa Claus. I couldn’t sleep from all the excitement. Good times, right? I’d like you to return to that moment in time and think about how small the world was back then. The world without any worries. It seemed like everything was possible!

Today I’ll show you how you can create your own Sketch app mockup by writing a letter to Santa Claus. I’m going to use the image below which you can download here.

Blank Christmas Letter

First, make sure to download and install the Magic Mirror Sketch plugin if you haven’t already. This plugin will enable you to create smart objects and perform nondestructive editing to the layer.

Next, open the image by dragging it onto Sketch app’s dock icon or open it in the Sketch app’s menu. If you’re wondering a keyboard shortcut for that is Command + O. Once you’ve opened an image, select it and hit A on your keyboard then create an artboard around the selection. Name this artboard to Christmas Mockup. We’re going to export this artboard at the end so you can name it to whatever you like.

Artboard Around Selection

Now to the dynamic mockup artwork. Because we’ll create a mockup of A4 paper, we’ll need to create an artboard with the same dimensions. If you’re creating a different kind of mockup, make sure the artboard is the same dimension as the template you’re making.

For example, if you’re creating an iPhone 7 mockup, the Artboard dimension has to be the same as iPhone 7’s screen size.

A4 Paper Artboard Size

Since we created an artboard, we should give it a name. Let’s call it Santa’s Letter. Design or paste the artwork onto the artboard.

Magic Mirror doesn’t sample the artboard’s size. This just means if artwork’s width or height is smaller than an artboard’s, Magic Mirror will stretch it to match the width or height of an artboard. And because this is something we don’t want we’re going to create a white background with the same dimensions as the artboard. Change the opacity of the white background to 1% and change the blending mode to Screen. Put this background below the artwork layer.

Screen Blending Mode

Now select Christmas Mockup artboard, grab the Vector Tool (V) and trace the paper by drawing four points onto the paper’s corners. In our case, the paper is cut at the bottom, so we’ll have to guess the bottom corners.

This step is important: you need to name this layer the same as the artboard you’re trying to replace. If you’re following my example, this would be Santa’s Letter.

Drawing Vector Points Onto Mockup

All we have to do now is to let Magic Mirror do its magic! Select the layer (in our case Santa’s Letter layer) you want to replace with an artwork and hit Control + Shift + M on your keyboard. Magic Mirror plugin will now replace the layer with the artwork on the artboard. Below you can see my final mockup.

Christmas Mockup Final

I’d love to see what you’ve created as well! If you’d like to share your creations with me share it on Twitter and tag @SketchTricks to your post.

Merry Christmas! I hope you’re having a great time!