By Greg Chow | Saturday, April 14, 2012
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
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.
Share this article:
Tags: Photoshop, Quick tips, Website Mockup
You can change your email preferences at any time. We will never sell your email. More info
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.