7 Photoshop Tips and Techniques for a Polished Web Page

by in Graphics on 11th May 2009 · Comments

Different web designers make use of simple techniques to allow their web page to stand out. Here are 7 tips that I have made use of for one of the mock ups I’m working on.

7 Photoshop Tips and Techniques for a Polished Web Page

It’s the little, subtle things that really make the biggest difference. Just a note, this article is not for advanced users, but it is good to have a re-read about it.

1. Use Anti-Alias for fonts

Anti-Alias Text

Anti-aliasing improves reading speed and accuracy. The letterforms look fuzzy when enlarged but appear sharp when viewed under normal reading conditions. However if you intend to use HTML headings in your mockup and in the website, set Anti Aliased to none.

2. Adding textures

Gradient Texture

Blend modes give us different ways for a layer to interact with, or "blend" with, the layer or layers below it. Blending gradients, textures and patterns is a great way to add visual interst to plain headers or banners.  Without blend modes, the only way is by reducing the opacity (or fill) of a layer, which usually doesn't give us very interesting results. But with blend modes, not only do they unlock a world of creative possibilities, especially when we combine them with layer masks. Play around with the blend modes available in Photoshop today!

3. Don't look down on the 1 Pixel Stroke

Stroke Separation

By adding 1 pixel of stroke to your layout, makes a whole lot of difference by making your site stand out. It gives a sense of separation to the different visual elements by defining the different regions of the page.

4. Adding Subtle Shadows

Border Shadow

Another great way for your page to stand out is by adding a subtle shadow along the edges of your page. This is a simple technique to add richness to your site's appearance. They add depth and real aesthetic to the design unlike print design.

5. Sharpen it. Blur it.

Using Blur Tool

Whenever you have a box with transparency on top an image, try blurring only the portion of the image below the box. It helps to give more emphasis on the words without having the background as a distraction.

6. Adjustment Levels

Adjustment Levels

You may not have noticed that images and icons lose their clarity when you resize or rotate them. To keep them to its optimum state, remember to to convert the layer to Smart Object, or you could sharpen it by going to the Unsharp Mask filter.

Increase the vibrancy and the richness of colour of your images by adjusting Levels (Ctrl+L), curves (Ctrl+M) or Saturation (Ctrl+U).

7. Use Rulers

Using Rulers

Photoshops rulers and guides is a MUST NEED for spatial organisation. Alignment and spacing in web site design creates visual hierarchy, organises the page and groups parts of the web page that can engage users. It is one of the most vital feature that supports you to produce web page that align professionally and look perfect! To turn the ruler tool on, press Ctrl+R. press Ctrl+; to hide/unhide the guides. You may also use the template guide provided by http://960.gs.

Hope these tips help you to create a more polished site. These are not the only methods to achieve the polished look, so if you have more tips to share, please comment!

Charlotte’s interest is in web interface and design as well as motion graphics. Her absorption with her work is mostly due to her attention to detail and passion for the world of design. Winding down after work, which consumes much of her time; she enjoys traveling, exploring new places, gastronomy, and fashion.