Basics Of Photoshop: Designing A Website

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.

Using Guides

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.

Creating Shapes

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).

Organisation

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

Whether you’re the developer or not, someone’s going to need to create web-friendly versions of the images used in your design. Nowadays a lot of effects and styles can be created with CSS and JavaScript, so you don’t need to worry about too many things. If you have a persistent logo, for example, you’ll need to save that for web. While there are a lot of ways you can go about this, the easiest thing to do is just copy the layer that holds the graphic, paste it into a new document, and then initiate the save for web process. You can find “Save for Web & Devices…” in the File menu. When you bring that up, you’ll get a big new window that previous what your graphic will look like after it has been compressed using the settings you provide. Generally “JPEG – High” or “PNG 24” are good choices, depending on the graphic. If the graphic is very simple in colour and tone, or if you need a transparent background, 24-bit PNG files are the format you want. If you have a more complex graphic, “JPEG – High” is generally the best setting. You can fool around with the compression amount and other settings until you get what you want, but you’ll be served well enough by sticking to that preset. Once you click Save you’ll be able to name the file. You don’t have to worry about naming it safely for the web. One nice thing that Photoshop does for you is add hyphens in place of spaces so you have a web-safe file name when you’re done.

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.