You’ve landed a nice web design project and now it’s crunch time. It’s time to work long, time to work hard, and time to deliver the goods. But before you hand over the finished product, make sure you avoid these 7 mistakes in Photoshop.
Anti-aliasing makes your pixels smooth and crisp. Not using this basic Photoshop feature for your text layers is pure heresy, and it makes your design look like it was made in 2002 due to all the jagged pixels. To solve this issue simply access the Character panel from ‘Window’, then choose an option depending on your needs. I find “Smooth” works best in most situations.
Tip: Make sure all your text layers are set to the same anti-aliasing style. For example, don’t set some on crisp, some on sharp and a few on strong — consistency is key.
If you break this fundamental rule, you’re going to start hating everyone… included yourself. First of all, think of the developer who needs to sort through your layers to find the ones he needs. Then, consider how you might want to reuse some elements (header, footer, etc.) in another design. You’re going to have a major headache finding them, so save yourself the trouble and organize everything in properly-labeled folders.
Tip: Things like hover states and hidden drop-down menus can be color-coded so you don’t delete them by accident. It also helps the developer find them. To do that, simply right-click above the eye symbol next to your folder in the layers panel and choose one of the colors.
Hover/down states is one of the most overlooked things in web design. Since this isn’t something clients actively request, most web designers simply forget to include them. It’s not time-consuming or very demanding, yet people simply overlook them because they’re trying to get the project completed as soon as possible. Please take a few extra minutes and include these additional states in your final .psd. Attention to detail can set you apart from the competition.
Tip: You can quickly create hover/down states by using a Brightness/Contrast adjustment layer.
Smart objects are absolutely amazing, but they also eat up quite a lot of space. Don’t be surprised to see web design .psd files that are well over 200 mb because they’re jam packed with smart objects. While they may be useful in the design stage, they aren’t particularly helpful to anyone once the client signs off. Of course there are exceptions, yet in most cases it’s far better to rasterize your smart objects. You can easily reduce the .psd file size up to 90%!
Tip: Easily identify your smart objects by using “filter for smart object” tool in the top part of the layers panel (feature available in Photoshop CC).
Arial has its place in web design and nobody is suggesting you should take it off your list. But with many great choices like Google Webfonts, Adobe Typekit, FontSquirrel and more, you’d be a fool not to spice up your typography game. Plus, most of these are lightweight, free, and can be implemented by using only a few lines of code, so it’s a shame not to use them.
Tip: Make sure to explore all the weights a font family has to offer — using them wisely will surely enhance your design.
The reason I love designing websites in Photoshop is that I have full control over everything — like how much whitespace and breathing room I’d like to keep between elements. Even if your client has odd requests, like fitting 90% of the site above the oh-so-dead fold, you still have complete control over the outcome. So, use adequate space between your elements and it will make your design look much better.
Tip: If the end design looks amazing, the client won’t have much to say about the fold or anything else. But make sure you’re prepared to back up your choices with sound explanations.
Forms aren’t all that exciting if you’re not into UI design, but for clients a great-looking field can mean the difference between a lead and a missed opportunity. Take the time to properly design your forms, from top to bottom, and include hints, error and success messages. This will surely score you high points with your clients.
Tip: Make sure to use Shift while arranging your fields so you keep spacing consistent. This sets your distances in increments of 10px, so you end up with a great looking forms.