Photoshop CC offers a comprehensive toolset for mocking up websites quickly and easily. Antony Kitson explains how to use the key features to get an idea across to a client or developer.
Photoshop has always been a great tool for site prototyping. With every new revision it has added more functionality for web designers wanting to quickly mock up an idea to share with a client or build a design ready for a developer.
New 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. This useful 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
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
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
Now add in navigation elements. To duplicate your type, select the layer, hold the Opt/Alt key and drag. Holding Shiftconstrains 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
Here we’re adding in a sign-up form to the homepage layout, using the Rounded Rectangle tool. Photoshop CC has a new 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
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
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
This is another new feature in CC, and it’s brilliant 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
Adobe Generator is a new feature in Photoshop CC 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
A great feature of Photoshop CC when creating an HTML prototype is the ability to copy a layer’s CSS. To do thisCtrl+right-click on the required layer, and hit Copy CSS Style to add the code to the clipboard. Open a new document in Dreamweaver or Edge Code CC, and paste in your CSS code.
