Amazing Blog Author’s note: This tutorial was supposed to have helpful images along with the instructions, however my uh, hard-drive blew up, and those images weren’t backed up. I’ll update this post soon with the aforementioned images. Moral of the story, always always work in dropbox.
As I so elaborately wrote about in my previous post, I’ve been teaching myself how to use the adobe creative suite. And by use I mean for something other than creating crappy posters. I have been learning how to use Photoshop and Dreamweaver to build websites.
I’ve been using an infiniteskills video course to guide me, but as I haven’t finished it yet I’m unable to write a review. Instead I’ll give a quick tutorial on how to draw a website wireframe in photoshop.
Uh… What’s a wireframe?
Before I completely dive in, I’m sure it would be useful to actually know what a wireframe is. Many people out there on the internet do know this, and if you’re one of those…. just skip this paragraph. Otherwise these words will just be a waste of your time.
If you don’t know what a wireframe is, worry not. A wireframe is just a fancy name for the 1st rough outline of the design. As I’m talking about web design it would refer to a document which shows roughly where the different areas of content will be on the webpage.
Okay, that makes sense. But why can’t you just sketch the damn thing on paper and be done with it?
You may not have asked this question, but it’s a pretty cool question. It’s useful to draw your wireframe in photoshop or in HTML as you’ll use this as the foundation block to draw our further designs. Rome wasn’t built in a day, and your website is sure as hell not going to be built in one pass.
Okay – To The Tutorial!!!
First it would be very useful to figure out what website you actually want to build. For no reason at all, I’m going to focus on a splash page for a web service.
The first step, sketch the various blocks on paper. No need for stuff to align or for the proportions to be right. It’s a sketch:
So this webpage is going to be a bit simple. For a splash page a Logo and a navigation menu will be on the top. Underneath will be the headline copy or image which will attract the visitor’s eyes and show off the key benefit of the service. Underneath in the 4 smaller boxes, will be further benefits and features which describe the service. Underneath will be a FAQ box, and to the right of that a section with miscellaneous information. Underneath all that will be a footer. There will also probably be a call to action box somewhere above the footer, but no need to worry about that now.
Next as we’re building a web page, we should make sure photoshop is set up to give measurements in pixels. Load up Photoshop on your favourite operating system. Then go to Edit → Preferences → General or press Ctrl + K (or Cmd + K if you’re on a mac).
Go to Units & Rulers
You then want to change Rulers to be in pixels.
Let’s now make a new image. There’s lots of talk about adaptive web design and what is actually the right width for a website. For now we’re gonna keep life simple, so that we can actually learn about this stuff.
Click on File → New and you should get this dialog:
Set an image size for a width of 960 pixels and a height of 2000 pixels.
You should then get this screen. Double click on the image you just created, or press f for “fullscreen”
Another day I’ll talk about what I feel is the most optimum workspace for web design, but for now the windows you’ll need for this exercise are the Tools and Layers panels.
We should create some guides for this wireframe. I’m going to keep it simple and just divide up the page into thirds. Show the ruler by going to View → Rulers or by pressing Ctrl + R (Cmd + R).
We’re then going to create guides. First make sure “show guides” is turned on by going to View → Show → Guides or pressing Ctrl + ; or Cmd + ; . Then we’ll make a guide by dragging from the ruler on the left hand edge of the workspace like so:
⅓ of 960 pixels is 320 pixels, and ⅔ of 960 is 640 pixels. Hence I’m going to drag the guide to 320 pixels, zooming in when necessary to get the exact value (Quick tip, zoom in by pressing Ctrl and + or Cmd and +. To zoom out Ctrl and – or Cmd and -), and then doing the same for 640 pixels.
Now before we do the easy but important task of making our wireframe we should work out what the exact measurements are. There are a few ways of going about this. You can go back to your sketch and make some educated guesses of what the pixel size of the blocks should be. Or you could just throw down some rectangles and resize them to get their rough size and position and resize them later.
My workflow involves making sure photoshop is at 100% zoom, so that I can actually intuitively see what the website will look like. I know that I want the second box, the largest box to be “above the fold”, i.e. users with 720p displays will be able to see that block when they initially come to the page. For arguments sake I’m going to call this at 600 px. I’ll then throw down the shapes and play around with resizing them to see what works and what doesn’t.
(Note by the way there’s alot of controversy over if the “above the fold” is actually useful and relevant in web design e.g. http://iampaddy.com/lifebelow600/)
To do this I’m going to use the rectangle tool
I’ll change the colour to a neutral gray, it’s just what I prefer, you can make it pink or gold if you want.
Use the rectangle tool to draw a rough rectangle. Then resize it using the move tool. Click on the shape with the move tool. Launch transformation controls by either clicking the checkbox “Show Transform Controls” at the top, or by pressing Ctrl + t or Cmd + t. Drag and play around with the corner boxes to get the size you want. Then press enter twice or click the tick button in the top bar.
Rinse and repeat with other rectangle shapes, play around with them to get the design you want.
Once you’ve finished this there are two things you need to do. First you need to rename the shapes in the layer panel so you don’t get lost. Do this by double clicking the name in the layer panel. If you have “Show Transform Controls” checked, the shape should become highlighted in the workspace. Rename the layer to something you’ll remember. Uh, you know… like “header” or “Dragon’s tail”… or whatever works for you. I’m gonna keep it simple and call mine things other people will understand though….
After you do this, you also should crop the canvas to get rid of the spare white space at the bottom. You’re not exactly going to use it are you? So crop and delete it.
Do this by pressing the crop tool. Then drag around the selection of stuff you want to keep.
BAM!! You got yourself a wireframe! You can now:
- Play with your cat/video games
- Think about the stuff you’re going to put on top of those wireframe boxes
If the job is for a client, you’ll probably want to send if off for review. If you’re going to do that some extra steps are necessary. You’ll want a label for each of the boxes so the client knows just what the hell they are. They can also offer any adjustments or corrections now. I say now, because you don’t want to start adding extra features after you’ve built half of the damn website via html & css.
Its very simple to label the wireframe boxes. Grab the type tool. And I’m sure you know how to place a cursor and type right? Well go and do that.
Pro tip, make one label. Play around with the font/stroke to make it as pretty as you want. Then copy that label to the others by using the move tool and holding alt while dragging it. (Uncheck “Show Transform Controls”). Rename the labels by double clicking on them with the type tool.
Afterwards also rename the labels in the layer panel. You may also want to group them by clicking Ctrl + g, so your label panel doesn’t become too clustered.
There you go, you’re actually finished! You can send the wireframe off to review as a pdf.
If you enjoyed this post, why not subscribe? There’ll be awesome follow ups every tuesday and friday.