Adobe Photoshop Guide

How to create a wireframe

A wireframe is a visual guide representing the basic elements of a website. Wireframes are used to describe the
conceptual structure or information architecture of a website or application. A well-designed wireframe includes
three key elements: interface design, navigation system, and main content areas (Figure 1). The functional
relationships between these elements are highlighted, while detailed graphics, typographic style, and colors are
typically not emphasized.
Photoshop is an ideal tool to mock up wireframes. Use the following guidelines to help you create a wireframe of
your website.

Figure 1 Wireframe proposal

Wireframing workflow
This workflow outlines the general steps for developing a wireframe from scratch. The result is to a fully functional
interactive prototype.

1. Create pen-and-ink draft

Using pen and paper, sketch a home page or home screen. Include all major layout design elements you want to share
across multiple pages or screens, such as navigation, content areas, titles, and logos. Consider these questions:
• Graphics What graphics will you include? Where will you place the graphics on the page or screen?
• Text What text will you include? Where will you place text on the page or screen?
• Navigation According to your flowchart, the home page or screen directly links to what pages or screens
(what are the menu items)? Where will you place these links on your home page or screen?

2. Scan and import your draft

Use a scanner to make a digital copy of your draft wireframe and then import it into Photoshop.

3. Lay out common design elements

With the sketched draft for reference, use basic drawing tools and guides in Photoshop to block out the main design
elements in the wireframe.

© 2013 Adobe Systems Incorporated How to create a wireframe 1

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
 Guide Adobe Photoshop

4. Create multiple wireframe pages or screens

In the Layers panel, create the desired number of pages or screens for your initial design. As the design evolves, you
can add or subtract pages or screens as needed.

5. Add unique elements to individual pages or screens

On each page, add unique design, navigation, or form elements. In the Common Library panel, you can find many
buttons, text boxes, and pop-up menus that speed up the design process.

6. Simulate user navigation with links

Use web objects such as slices and navigation buttons to link the various pages or screens of your prototype.

7. Export the finished, interactive wireframe

Photoshop offers HTML output for your wireframe, which retains hypertext links for navigation within the prototype.

Creating a wireframe with Adobe Photoshop

Use Photoshop to create a basic two-page interactive wireframe document.

Workflow steps 1 to 3
In this section, you sketch out your wireframe, scan and import it into Photoshop, and lay out common design
elements.

To create a wireframe from a sketch:

1. Using pen and paper, sketch your wireframe. Include all
major components, such as navigation, content areas,
titles, and logos.
2. Scan the sketch into your computer.
3. Start Photoshop and create a new document 1024 pixels
wide and 768 pixels high. Lock

Note: These are the dimensions of a typical web page.

4. Open the Layers panel, click Create A New Group button
twice, and rename the two folder groups:
• Wireframe
• Wireframe Sketch
Make sure the Wireframe Sketch layer is below the
Wireframe layer (Figure 2). Create a new group
5. With the Wireframe Sketch layer selected, choose File >
Place. Figure 2 Wireframe and Wireframe Sketch layers
The Import dialog box opens. added to the Layers panel
6. Navigate to the file you scanned in step 2, and click
Import (Windows) or Open (Mac OS).

2 How to create a wireframe © 2013 Adobe Systems Incorporated

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
Adobe Photoshop Guide

7. Click in the canvas to place the imported sketch.

You need to scale the sketch to fit the canvas. Click the
Selection tool from the Tools panel and select the
imported sketch.
8. Drag the image into the upper-left corner, and scale the
image to fit the canvas area width (Figure 3).
Holding down the Shift key while scaling constrains
proportions of the image. The sketch may extend beyond
the edges or not fully fit inside the canvas.
9. Press the Enter key (Windows) or Return key (Mac OS)
Figure 3 Scale to fit canvas
to commit the changes.
10. In the Layers panel, with the Wireframe Sketch layer
selected, click the lock icon.
This sketch layer will be the background reference to lay
out the wireframe elements.
11. Select the Wireframe layer.
12. Make sure rulers and guides are visible. If not, select
View > Rulers.
13. To create a horizontal or vertical guide, click-drag from
the corresponding ruler to the edges of the logo area, the
main content area, and the first navigation button
(Figure 4). Figure 4 Imported sketch with guides added

Note: Guide color can be changed to be more visible

against different backgrounds. To change the guide color,
select Edit > Preferences (Windows) or Photoshop >
Preferences (Mac OS) and select the Guides, Grid &
Slices category.
14. Select View > Guides > Lock Guides.
Locking the guides prevents you from moving them
unintentionally.
15. Select View > Snap To > Guides.
Figure 5 Rectangle Properties panel
The snapping feature enables you to align objects
precisely with the guides as long as you get close.
16. Select the Rectangle tool from the Tools panel.
17. In the Control panel, make the following changes
(Figure 5):
a. Select None from the Fill pop-up menu.
b. Set Stroke color to dark gray.
c. Set Stroke width to 10 pixels.
18. Using the guides, draw a rectangle around the main
content area and logo area of the sketch (Figure 6).
As you draw, the rectangles snap to the guides.
Figure 6 Rectangles drawn around page elements

© 2013 Adobe Systems Incorporated How to create a wireframe 3

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
 Guide Adobe Photoshop

19. Select the Rounded Rectangle tool from the Tools panel.
20. Draw a rounded rectangle around the first navigation
button of your wireframe (Figure 7).
21. Use the Move tool to select the rounded rectangle. Alt-
drag (Windows) or Option-drag (Mac OS) to the right to
create a copy of the rectangle, and place it over the
second navigation button in your wireframe.
22. Continue repeating duplicates until you have created and
Figure 7 Rounded rectangle drawn around
roughly placed as many navigation buttons as needed for
navigation button
your wireframe sketch (Figure 8).
23. Shift-select all the rounded rectangle shapes in the Layers
panel.
24. Use the Control Panel alignment options to align the
vertical centers and distribute the horizontal centers Figure 8 Placing rounded rectangles
(Figure 9).
Now it's time to add the text labels. Align vertical centers

25. From the Tools panel, select the Text tool.

26. In the Control panel, click the Fill Color box and choose
a dark color. Set the justification to Center Alignment and
the Text Size to 30.
Distribute horizontal centers
27. Click once in the logo rectangle and enter the text Logo.
Figure 9 Control panel alignment options
28. Make sure Smart Guides are visible and active. If not,
select View > Show, and then select Smart Guides.
29. Drag the text block to center it in the rectangle, and
continue adding text labels for the navigation buttons and
main content area.
Eye icon
The Smart Guides will help you to create, align, edit, and
transform objects relative to other objects.
30. Move and stack the text labels over their respective
shapes in the Layers panel (Figure 10).
31. Choose View > Show > Guides to hide guides.
Figure 10 Layers panel
32. Once you are satisfied with the position of the text and
rectangle elements, click the eye icon next to the
Wireframe Sketch layer to turn off visibility of the
background layer.
With the sketch layer turned off, your image should look
similar to Figure 11.
33. Select File > Save As and save the file as a PSD.

Figure 11 Completed wireframe sketch

4 How to create a wireframe © 2013 Adobe Systems Incorporated

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
Adobe Photoshop Guide

Workflow steps 4 and 5

Now that you have created the very basic wireframe of the page or screen layout, the next step is to create a few pages
or screens showing various content. By sharing content across layers and duplicating layers, you can create as many
pages or screens as needed, with shared and unique items on each page.

To create multiple wireframe pages or screens:

1. Open the Layers panel (Window > Layers) if it isn't
already displayed on the right side of the workspace. Panel menu

2. Click the Create New Group Item button in the Layers

panel.
3. Shift-select all objects in the Wireframe group that
comprise the navigation items at the top of the layout.
4. Move the items into the new Group folder.
Disclosure
5. Drag the new Group folder out of the Wireframe group triangle
and place it at the top of the list in the Layers panel.
6. Click the disclosure triangle to close the Wireframe Figure 12 Layers panel
group, if open (Figure 12).
7. With the Wireframe group selected, choose duplicate
Group from the Layers panel menu.
The Duplicate Group dialog box opens.
8. Click OK to close the dialog box.
9. In the Layers panel, double-click the Group, Wireframe,
and Wireframe copy layers to rename them, respectively,
as Navigation, Home, and Shop (or the name you are
using for a second screen of the wireframe) (Figure 13).
10. Deselect the eye icon beside the Shop layer to hide it. Figure 13 Renaming in the Layers panel
11. Open the Home page group by clicking the disclosure
triangle in the Layers panel.
12. Use the Move tool and Text tool to modify page elements
and add a page title at the top of the main content area.
You need to select an item in the Layers panel to move it.
13. Hide the contents of the Home page group, and show the
contents of the Shop page group by toggling the eye icon
in the Layers panel.
14. Use the Move tool and the Text tool to add a page title at
the top of the main content area in the same way as on the
Home page.
Figure 14 Adding page-level placeholder content
15. Select the Rectangle tool from the Tools panel.
16. In the Properties panel, select neutral colors for Fill and
Stroke.
17. Draw a rectangle in the main content area of the second
page, beside the page title. This rectangle stands in as a
placeholder for a Shop page image or text page content
(Figure 14).

© 2013 Adobe Systems Incorporated How to create a wireframe 5

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
 Guide Adobe Photoshop

18. Select File > Save.

Workflow step 6
In this section, you use the Slice and Slice Select tools to create navigation links between the two pages of your
wireframe. Slices divide an image into smaller images that are reassembled on a web page by using CSS. By dividing
the image, you can assign different URL links to create page navigation, or optimize each part of an by image using
its own optimization settings.

To add navigation to a wireframe:

1. Select the Navigation group in the Layers panel and
ensure its visibility is toggled on.
2. Select the Slice Tool. The Slice Tool may be hidden by
the Crop tool (Figure 15).
3. Draw a slice over the Logo rectangle area.
Figure 15 Tools panel
Smart Guides appear to help guide the slicing
(Figure 16).
4. Drag to create a slice over the first rounded rectangle
area.
5. Choose the Slice Select tool and double-click the first
slice.
The Slice Options dialog box opens (Figure 17).
6. In the Slice Options dialog box, enter a URL in the URL
text box. For example, the home logo area would always Figure 16 Drawing slices
point to home.html.
7. Double-click the second slice and add the URL
shop.html.
8. Select File > Save.

Figure 17 Slice Options dialog box

6 How to create a wireframe © 2013 Adobe Systems Incorporated

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
Adobe Photoshop Guide

Workflow step 7
Export an interactive prototype of your wireframe to functional HTML (Figure 18).
Photoshop generates pure HTML that can be read by most web browsers and HTML editors. You can then preview
your wireframe interactivity and edit these files in Adobe Dreamweaver.

Figure 18 Export wireframe from Photoshop

To export to HTML and images:

1. In the Layers panel, set the layers for a particular page
that you want to be visible in the HTML output by
clicking the eye icon. For example, the eye icon will be
toggled on for the Navigation group and the Home group
for the Home page of the wireframe (Figure 19).
2. Choose File > Save For Web.
Figure 19 Layers panel with Home and Navigation
The Save For Web dialog box opens (Figure 20). visible
3. Click the Optimized tab at the top of the Save For Web
dialog box.
4. Click Save.
The Save Optimized As dialog box opens (Figure 21)
5. Navigate to a folder on your hard drive in which to
export.
6. From the Format pop-up menu, choose HTML And
Images.
7. Specify a filename in the File Name text field.
Be sure to name the file with the same names you created
in the previous section. For example, the Home page will
Figure 20 Save For Web dialog box
be named home.html.
8. Click Save (Windows) or Export (Mac OS).
After export, you'll see the files Photoshop exported on
your hard drive. Images and an HTML file are generated
in the location you specified in the Save Optimized
dialog box.
9. Repeat steps 1–8 for the second page of your wireframe.

Figure 21 Save Optimized As dialog box

© 2013 Adobe Systems Incorporated How to create a wireframe 7

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.
 Guide Adobe Photoshop

10. Navigate to the location of the saved file, open

Home.html in a browser, and test whether the wireframe
links work as expected (Figure 22).

Figure 22 Testing HTML in a browser

8 How to create a wireframe © 2013 Adobe Systems Incorporated

This document requires Adobe Photoshop CC, June 2013. Technical instructions may differ depending on your version.