Quick Tip: Setting up a Photoshop document for a web site mockup

Published by | Saturday, April 14th, 2012
The first step in creating a web site mockup in Photoshop

Click image for a larger view.

Designing for the web is a bit different than designing for print, so it’s important that you set up your Photoshop document correctly before you begin designing your web mockup.

First, in Photoshop, go to File > New. This opens up the New Document dialog box, where you can choose everything you need. Start with the Preset pull-down and choose Web. From there, you can choose the size of your document. If you want your site to appeal to the largest possible audience, don’t choose dimensions that are too wide or too narrow. A good starting place is 960 pixels wide and 690 pixels high. You can always adjust as you go, but this is a good starting size.

Leave the Color Mode set to RGB Color and 8 bit. Background Contents refers to the background color for your document. Leave it set to White. Click OK.

To help in your design layout, turn on your rulers by going to View > Rulers (or keyboard shortcut Ctrl+R in Windows, Cmd+R on a Mac). Since you’re in a web document, the rulers should display in pixels. Right-click on your ruler and select Pixels.

You can also select View > Show > Grid if you want a grid to help you with your design layout, and you can drag out some guides to assist you in the placement of your design. To create a guide, click and drag from a ruler into your document. Turn on the Info panel (Window > Info) to give you the precise location of your guide. You can reposition your guide at any time with the Move tool, and if you want to remove a guide, simply drag it off the art board.

Now that you’ve set the dimensions, color space, and resolution for your working file, you can easily move ahead with the creation of your web-design mockup.

If you’re interested in more tips for converting Photoshop files into Dreamweaver projects, check out Designing Web Sites from Photoshop to Dreamweaver.

 

Interested in more?
• All lynda.com Photoshop courses

Suggested courses to watch next:
Designing Web Sites from Photoshop to Dreamweaver
Web Site Strategy and Planning
 Creating a First Web Site with Dreamweaver CS5
Photoshop CS5 Essential Training

Share this:Share on Facebook2Tweet about this on Twitter2Share on Google+0Pin on Pinterest0Share on LinkedIn1

lynda.com - start learning today

Tags: , ,


One Response to “Quick Tip: Setting up a Photoshop document for a web site mockup”

  1. Rebecca says:

    Thank you, very clear and simple to follow………at last!

Leave a Reply