Photoshop CS6 Unlocked—Making Wireframes in Photoshop

SitePoint has just released Photoshop CS6 Unlocked, 101 Tips, Tricks and Techniques – the second edition of their best-selling book, The Photoshop Anthology.

Let’s have a look at an excerpt from the book, which shows you how to make website wireframes using Photoshop CS6 ….

Apart from pencil and paper, there are many digital tools for creating wireframes — the “lo-fi” layout of a web page that helps you to determine its basic structure before adding in visual design. One benefit of using Photoshop as your wireframing tool is that you may use the wireframe as a base for your detailed mockup, rather than having to start from scratch.

Solution

Figure 8.6 reveals the “napkin sketch” that my fictitious client has provided me, which is one way of providing a wireframe.

Figure 8.6. Napkin sketch

After talking more with my client, I’ve gathered additional requirements for the home page:

  • The client wants a “learn more” button after the headline and intro text.
  • He will have no more than two quotes in the “what people are saying” area.
  • The client likes the idea of having a background color or image with a boxed content area that
    is white.

Time to fire up Photoshop and create a wireframe that takes actual dimensions into account and provides a slightly more polished look.

Start by creating a document based on the 960 grid system (which you can learn about in the section called “Setting up a Grid in Photoshop” found in the free sample chapters) that is 1100 pixels wide by 750 pixels high. If you want, use the Paint Bucket Tool (G) and fill the background with a light gray color to represent that there will be a background color or image.

Choose the Rectangle Tool and draw a box to represent the content area. Since I’m using the 960 grid system, my box is 940 pixels wide. I’ve made the foreground color white so that it shows up against the gray background.

To make the process faster, type D to set the foreground to black and the background to white. We’ll draw black boxes to represent the content areas, then change the opacity to make them appear gray, as shown in Figure 8.7.

Figure 8.7. Adding rectangles to represent logo and navigation

Following the grid, add a rectangle to represent the logo. Lower the opacity of the rectangle by immediately typing in an opacity value (“30”) after you draw the rectangle. If you wish, add text using the Type Tool to add the text “LOGO” over the box. Add another rectangle to represent the navigation area, and again, lower the opacity value to make it gray.

You may want to add rectangles to help indicate the content column areas. Figure 8.8 shows I’ve decided on a two-column layout with a slightly larger main content column and a smaller column for the home page image. I set the opacity to 10% for the columns, and also added another rectangle to represent the footer at the bottom of the page.

Figure 8.8. Determining column sizes

Draw rectangles to represent the content areas within the columns. You may also wish to add dummy text using Photoshop’s Type > Paste Lorem Ipsum command. My completed wireframe can be seen in Figure 8.9.

Figure 8.9. Completed wireframe

Making a rough wireframe like this gives the client a sense of where content goes on the page, but allows for quick and easy editing if you need to move items around.

A BIG thanks to Corrie Haffly and the SitePoint crew for letting us have a look inside! For more how-to’s, examples and time-saving suggestions, check out the full 400+ page copy of the book, which covers:

  • Getting Started with CS6: Learn all the basic skills and steps
  • Designing Backgrounds: Produce seamless tiling and backgrounds
  • Creating Buttons: Design a range of great looking icons
  • Working with Text: Manipulate and make your text stand out
  • Optimizing Images: Enhance, combine, and adjust web images
  • Designing a Website: Design a full website layout in Photoshop
  • Working Smart : Save time with shortcuts and batch commands

PLUS … all the exciting NEW CS6 tools, including: Content-Aware, Blur gallery, Perspective crop tool, and more.

photoshop-cs6-unlocked-features

Make sure to grab yourself a copy – while SitePoint’s super launch pricing is on:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.