Photoshop Mock-ups

Now that you have created a mood board for how you want your website to look and sketches for layout, typography and hex codes, you can now design the pages on Photoshop. This will allow you to see how it will look and to use the exact colours, layout templates, etc.

It is important that you pay particular attention to detail when creating your mock-ups as you will be collecting feedback from peers and your tutor.

You do not need to take or add pictures (except a new logo if you have designed one) and you do not need to type out page text (use lorem ipsom). Eventually, you will be putting these designs into a PowerPoint so that we can hyperlink elements.

Step by step guide

Step 1.

First of all you need to ensure the size of your paper is the same as your PowerPoint slide. To do this, open both programs and in PowerPoint, go to Design> Slide Size> Custom Slide Size and in Photoshop, go to File> New> and type in the widescreen dimensions for the PowerPoint slide.

Step 2.

Open Chrome and go to Design Shack (10 web layouts) and then copy and paste the template you have chosen for your designs in Photoshop.

Step 3.

Use the Magic Wand tool to highlight the black boxes, you will need to hold shift to click on multiple objects. Once you have all of the black boxes highlighted, right click on the mouse and select Layer Via Cut, then delete the old background. Alternatively you can go to Select and then Inverse, which will allow you to get rid of the background.

Step 4.

Select the background layer and delete it, this will allow you to save the template as a PNG so you do not have a visible background.

Step 5.

File> Save As> PNG (and name it something sensible! e.g., home page layout)

Step 6.

Start creating your home page using the shape tools, etc., on Photoshop using the template. You must ensure that your assets and page elements line up and look professional.

It is easier to create all assets individually as it makes it easier to hyperlink later.