Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center

By Greg Chow | Saturday, April 14, 2012

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

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 DreamweaverWeb Site Strategy and PlanningCreating a First Web Site with Dreamweaver CS5Photoshop CS5 Essential Training

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.