For our last lesson, we’re going to take a look at how to use Photoshop to layout and mock up a web design from scratch.
If there ever was a Photoshop lesson that required the video component, it’s this one. In this lesson we look at using the Shape and Text tools to create a website design from scratch. None of these concepts can really be written out, so there is very little accompanying text with this lesson. You’ve already learned most of the tools in previous lessons and so this one just shows you how to put them to use to create a site. There are a few new things to discuss, however, and they’re addressed below.
If you’d like to follow along in the video or see what the final product looks like in Photoshop, you can download the site design file and assets here. This is a good way to explore and see how things work. The files were created in Photoshop CS5 so you’ll need that to view them.
Guides are little blue horizontal and vertical lines in Photoshop that help you align things on the canvas. You can make them by turning on rulers (Command + R on a Mac or Control + R on Windows), clicking on the ruler, and then dragging the line down on to your page. To later adjust any guides you create, use the Move tool (V on your keyboard) at the top of the toolbar.
We’ve looked at creating shapes before, but you’ll find here that shapes are especially vital to your layout. Because they’re vector images (rather than raster), they can be resized without getting pixelated. This can be really helpful when you’re laying things out but you might want to make changes later. You’re almost always better off keeping everything in your mockups vector-based, unless it’s something that can’t be vector-based (like a photo).
Organising your website mockups is very, very important. You’ll find yourself creating tons and tons of layers, so you want to keep naming those layers and grouping them together as frequently as possible. The more effort you put into organising your layers, the easier it will be to navigate through your design later. This is especially helpful to developers who may be getting your designs later on. If they have to go through and search for elements, you’ll be making their lives much more difficult. Angry developers are unpleasant (I’ve been one and worked with several). Start off that relationship on a good note by providing a nicely organised document. It’s for your own benefit, too, so everybody wins.
Saving for Web
That wraps up our Basics of Photoshop series. Tomorrow we’ll do a little recap and then provide some additional resources, but you’re all done with your lessons—congratulations! Hopefully now you can start using Photoshop to make your photos better, draw some cool pictures, and make a web site to show off your work.