Photoshop has a large following of devoted users, thanks to its deep wealth of features, options, and user-created content. This list of the 250 best Photoshop resources (opens in new tab) speaks volumes about the tool's popularity. And many pixel-perfect die-hards still feel more comfortable designing their mockups in Photoshop over its direct competitors and more specialized mockup tools.
Win clients & work smarter with our FREE ebook: get it now! (opens in new tab)
Photoshop can be used to make phenomenal mockups, as long as you know the relevant features — some of its features can seem like overkill for web design unless you're editing images heavily.
Let's take a look at some tips for creating mockups in Photoshop (based on advice from PlasticMinds (opens in new tab) and our own experiences), and how to make the experience more collaborative.
01. Take advantage of Shapes & Shape Layers
Much in the same way a wireframe provides the basic outline for a mockup, shapes and shape layers are a good starting point for your PS mockup. (As a bonus, all layers are also preserved if you import your Photoshop file into our app, UXPin (opens in new tab)).
Photoshop gives you a variety of options for creating these basic shapes, and they can be easily resized for edits later. Jake Rocheleau agrees (opens in new tab), and points out that if you look closely at most published websites, you can still find the original shapes used for headers, navigation bars, buttons, and sidebar widgets.
This tutorial (opens in new tab) explains the essentials to Shapes & Shape Layers.
02. Use crisp antialiasing for fonts (when possible)
This prepares your mockup for browser rendering. But it may not work for all fonts, so when in doubt, check with your developer.
To learn more about font anti-aliasing, check out this tutorial (opens in new tab). If you'd like to learn more about typography in the specific context of web design, check out the free e-book Web UI Design Best Practices (opens in new tab).
03. Choose web-safe fonts as a backup
It won't matter how great your font looks if it's not compatible with CSS/HTML. Browser text, on the other hand, can be indexed by search engines, used by screen readers (for the visually impaired), and make for easier translations. It's best to start out using them (aside Comic Sans or Papyrus, obviously).
Google Fonts (opens in new tab)is the largest source of free web-safe fonts (check out awwwards’ selection of the 20 best (opens in new tab)). On the other hand, Adobe Typekit (opens in new tab) is well worth the money: our company has an annual subscription and the 4200+ fonts are more than enough.
04. If there's several versions of the page, use different groups
If you're doing multiple versions of a mockup, usually you'll just be modifying the main content. The header, footer, and sidebar probably won’t be touched. To speed things up and help you stay organized, you can create folders like:
- content - homepage
- content - feature photo
- content - call to action
In each version, you can just turn on or off the visibility. Whenever we work in Photoshop, this tends to improve our mockup efficiency.
Next page: 3 more best practises for creating mockups in Photoshop