Tips for Photoshop in Web Design

Photoshop can be a useful tool in web design.

Following are some design tips for use in the web:

1. Use your canvas.

A great practice is to place all your elements on your Photoshop canvas before you begin your design. This helps you consider the rest of the page and the weight of your design.

2. Don’t use default fonts.

Open the character palette to choose the perfect font, weight, spacing and color.

3. Use Text Wrap.

Photoshop can apply Text Wrap functions similar to InDesign’s. Select the Rectangle tool (U). In the Options bar set the fill to Paths, set the shape to Rectangle tool and select ‘Add to path area’ (or press +).On your canvas, draw a large rectangle over the content area. Back in the Options bar, change the ‘Add to path area’ to ‘Subtract from path area’ (or press -). On your canvas with the outline of the original rectangle showing, draw an intersecting rectangle where the text will wrap.Select the Type tool (T), and click inside the large rectangle to convert the shape to a Type Work Path to fill with type. You can further refine the Type Work Path dimensions with the Rectangle tool (U) and the Direct Selection tool (A).

4.The key to Photoshop is efficiency.

It’s not just knowing how to do something, but how to do something quickly so that you’re using valuable time executing a function. Here are some shortcuts to know: start with Save for Web [cmd+opt+shift+S], Image Size [cmd+opt+I], Canvas Size [cmd+opt+C]. Also, Levels [cmd+L] and Hue/Saturation [cmd+U].

5. Sharpen Photos.

If you have a low-res photos, and it’s just too blurry to use: duplicate the layer, then go to Filter > Other > High Pass. Choose something low (around 2.0) and then set that layer’s Blending Mode to Overlay. If it’s too crisp, decrease the opacity. Results may vary.

6. Don’t use default settings.

Use the Effects panel effectively. The default settings are generally harsh in order to show their appearance. Soften the amounts and change the angles.

7. Be consistent.

Don’t use 5 different shades of green. Check the design guide and consistently check your colors.

8. Details.

Make your design “pixel perfect”. Go back through your PSD, looking for blurry edges on rounded rectangles or inconsistent line weights. It pays to take the time in Photoshop perfecting your layout (rather than in HTML/CSS).