Basics Of Photoshop: Designing A Website

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


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.

Log in to comment on this story!