10 Tips For Creating Website Mockups In Photoshop

10 Tips For Creating Website Mockups In Photoshop

Here are some things I’ve discovered while creating website mockups in Photoshop. They’re not gospel, just things that you may find helpful:
1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes.

2. Blending options are your friend. Double click a shape layer and you can do all sorts of effects: gradients, shadows, color overlay. They’re much easier to make changes to later on when a client says: “Can I see that gradient in blue?”

3. Use Crisp antialiasing on your font layers. It’s much closer to browser rendering. Keep in mind that most modern operating systems don’t smooth fonts below 11 or 12 pixels, so for smaller fonts, you’re probably better off setting it to None.

4. Use web safe fonts on any parts of the site with live text. You might be able to wow the client by using Verlag for the body text of your mockup, but you’ll have a rough time turning that into CSS/XHTML. While logos and other static text can be replaced with images fairly easily, you should use those web safe fonts as often as possible. Search engines index browser text, screen readers can read browser text for visually impaired folks and browser text is much easier to translate. (And if you’ve “just gotta have that font”, take a look at sIFR. Use sparingly.)
5. Use nested layers to duplicate the DOM. If that went over your head, let me rephrase: use your layer folders to recreate the general structure of your site. Put all of the images for the header in a header folder. Inside that, make a folder for the logo, a folder for the main navigation, a folder for search field, etc. Not only does this make moving stuff around easy, it helps things stay organized and think in terms of content. (Keep in mind, Photoshop CS3 only allows layers to be nested 5 deep.)

6. Use different layers for multiple versions of the same page. If you do multiple page comps, usually just the main content changes while the header, footer and sidebar often stay the same. So using the folder structure in Photoshop, you could create folders like:

• content - front page
• content - contact form
• content - entry

And then just toggle their visibility when saving multiple drafts.
7. Save the finished product as a JPEG at 100% quality. You can usually get away with 80%, but why skimp when sending a screenshot to a client for approval?
8. Get your width right. If your target screen resolution is 800px, your mockup shouldn’t be any wider than 760px. If your targeting 1024px, your mockup should probably not exceed 960px. A very large number of people these days are using 1024px or higher. Nathan Smith’s 960 Grid System has a good Photoshop template to start with.
9. When it comes to mocking up forms, don’t reinvent the wheel. The Designer’s Toolbox has a huge collection of form elements from different browsers and operating systems you can use, free of charge.

10. Use all of the resources you can find. Here are some I’ve found useful:

1. ColourLovers: Colors, Palettes and Patterns
2. Smashing Magazine’s Freebie Icons, Buttons and Templates
3. Deziner Folio: 131 Beautiful Photoshop Styles
4. Deziner Folio: 130 Beautiful Photoshop Gradients
5. Stylegala’s Bullet Madness
6. Vitaly Friedman’s 25 Best Free Quality Fonts
7. FamFamFam’s Silk Icons
8. Feed Icons (in every imaginable format)

Sometimes you just have to see it to get it, so I’ve put together a sample site mockup in PSD format for reference purposes. Hopefully you’ll find it beneficial:


The mockup took me some time to put together. If you do get some use of it, maybe you could drop a few coins in the old hat?
Also, if you found this article useful, check out my article, and  Part two includes a sample invoice you can download that may come in handy if you’re just learning the ropes.