How to

How we made that mock-up in the header

Werner Bastianen
25 January 2018

To get you started with Hamok, here is a simple step-by-step guide in how we created the mock-up that you’ve seen in the header on our homepage.

Start a project

The first step is simple: Add a project and open the new unnamed project.

Enter the URL

Simply copy and paste the desired URL from your browser in the URL bar, or navigate to the URL by clicking through the website.

Pick your template

Browse the template panel for a template that you like. In my case, I want to show the website on a MacBook.

Add the background color

To add the background color, simply navigate to the background color tab in the Adjust panel.

Select the color picker and pick any color in the mockup by clicking on it. By selecting a warm color from the design, the mockup blends nicely with the background.

Add the background image

In the Background tab, we can also add an image as a background. Select any image on your desktop and it will fill the background automatically.

Blend the background image and color

Below the image you can add some effects to the image to blend it with the background color.

First, I blurred the image and lowered its opacity a little, to make it more abstract. Secondly, I used the Multiply Blend mode (our favourite) to blend the background color with the image.


Click Export in the top bar and select your desired resolution and presto!