Rapid prototyping using Photoshop CC

Antony Kitson explains how to use Photoshop CC's comprehensive toolset for mocking up websites quickly and easily.

Rapid prototyping using Photoshop CC

You may not realise it, but Adobe's Photoshop is a great tool for rapid prototyping. With every revision it has added more functionality for web designers wanting to quickly create website mockups to share with a client or build a design ready for a developer.

The useful rapid prototyping features in Photoshop CC include the ability to isolate layers, tweak corners with the live rounded rectangle feature, and the ability to copy CSS attributes from individual layers – and the Creative Cloud provides useful collaboration elements, too.

This guide looks at common prototyping methods, using the breadth of Photoshop's tools to create a developer- and client-friendly page mockup.

01. Use GuideGuide

Rapid prototyping step 1

Set up a document with the dimensions of the screen you're designing for (smartphone, tablet and so on). Next, create a grid that will form the base structure – free extension GuideGuide is useful for this. Open the extension up, input your margin widths, number of columns and gutter width. Hit the GG button and you have your grid.

02. Defining areas

Rapid prototyping step 2

At this point it's helpful to block out key areas of your page layout. Create a folder for header, footer, content and anything else you need. It's a good idea to define any main areas of the site design – starting with a light grey box to outline them. Here, I've used the Rectangle tool to draw the site's header area (1200x240px), and added the title.

03. Navigation time

Rapid prototyping step 3

Now add in navigation elements. To duplicate your type, select the layer, hold the Opt/Alt key and drag. Holding Shift constrains the alignment. Align text layers precisely by selecting all the navigation text, then hitting the Distribute Vertical Centres button in the Tool Options bar. This vertically aligns and evenly spaces your layers, ideal for menu items as shown.

04. Rounded rectangles

Rapid prototyping step 4

Here we're adding in a sign-up form to the homepage layout, using the Rounded Rectangle tool. Photoshop CC has a live rounded rectangles feature, which enables you to tweak the corner radius of your shape. This means you can go back and change your corners at a later time if your design calls for it – it may sound like a minor feature, but it's very handy.

05. Adding images

Rapid prototyping step 5

It's worth converting images into Smart Objects as this makes it easier to update or replace them. You can use your placeholder rectangles as vector masks to hold images. Either bring in an image as a new layer, duplicate the rectangle mask and link it to that layer, or make a selection from your rectangle and use Paste Special>Paste Into.

06. Layer Styles and drop shadows

Rapid prototyping step 6

Layer Styles are a decent way to add effects. To apply a currently used Layer Style to another layer in your stack, Opt/Alt and drag the FX icon to your new layer. To create a 'Hover Over' layer that can be turned on or off, simply duplicate your background rectangle and group this layer and your text layer into a layer group.

07. Isolate layers

Rapid prototyping step 7

This is another useful feature in CC if you want to edit only some of your layers. Select the layers you wish to edit and then go to Select>Isolate Layers. This is enables you to focus on the specific areas that need work, without the confusion of other layers cluttering things up.

08. Adobe Generator

Rapid prototyping step 8

Adobe Generator is one of Photoshop CC's features that enables you to create image assets on the fly. Go to File>Generate>Image Assets. Now, in the Layers panel add a file suffix such as .png or .jpeg to automatically export that layer to a specified folder. We've done it here with an icon file.

09. Copy CSS Attributes

Rapid prototyping step 9

A great feature of Photoshop CC when creating an HTML prototype is the ability to copy a layer's CSS. To do this Ctrl+right-click on the required layer, and hit Copy CSS Style to add the code to the clipboard. Open a new document in Dreamweaver, Muse or Edge Code CC, and paste in your CSS code.

Words: Antony Kitson

Antony Kitson is a multidisciplinary designer and founder of OneTenEleven Media, a studio that specialises in design for web, print and motion. This article originally appeared in Computer Arts issue 226.

Like this? Read these!