7 Photoshop Tips and Techniques for a Polished Web Page

7 Photoshop Tips and Techniques for a Polished Web Page

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.

Comments

    • Marc,
    • May 12, 2009
    / Reply

    Thanks, great tips!

  1. / Reply

    Fantastic tutorial blog on extra pixel with good informative graphics.
    If only my Photoshop software wasn’t in Spanish.
    I did a Photoshop course in Spanish, years ago. Then I had no PC and then the software.
    But, unfortunately I can’t decipher what I scribbled while hardly able to follow up on the lecture of the teacher from Colombia.
    I wish I could just learn with all this information in this blog but, to try figure out what the heck it translates to in Spanish Photoshop language is nerve breaking. I remember, there was much done with keystrokes. too. The extra pixel makes much sense. .

      • Charlotte,
      • May 17, 2009
      / Reply

      Hi Gabriele, thanks for visiting.
      We will be updating with more techniques, tips and other sources that will be helpful. So you should try getting a copy of Photoshop in english and try it, it’ll be fun :)

      1. / Reply

        Hi Charlotte

        this is easier said than done.
        I have been looking out for it for years by now.

        thanks

  2. / Reply

    awesome tips you have in this tutorial too, i really want ti twitter my friends too :)

  3. / Reply

    Very good article.

    • Mark,
    • December 3, 2009
    / Reply

    When your learning web design, the finer details such as those mentioned in this article are what makes a design stand out and look truly professional.

    Great article.

  4. / Reply

    You are giving away great tips. Really.

    I noticed those tricks applied on websites. They have alluring effects.

    Especially nice for anything to do with beauty and cosmetics.
    Subtle is the answer to best success there.

    Anti aliased is a technical expression I would never figure out by its Spanish translation in Photoshop. Just figure the frustration…
    Just wondering.
    That’s why Google translations couldn’t do it either.
    Anyway, thanks a lot…
    When I win the lottery I will by an English version of your photo tools.

  5. / Reply

    i use google when i want to do some spanish translation, it is good for general spanish translation .-;

  6. / Reply

    Wow, you guys are amazing! This was such a helpful tutorial. It is so hard to go into photoshop and just wing it. When you have great tutorials like this, it makes the process much more smooth. I created some pretty sick looking pages for some clients thanks to you guys. Keep shooting out the excellent material!

  7. / Reply

    Great tips, thanks a lot!!!

  8. / Reply

    Great Site, your plugins are very useful and save me a tonne of time.utdtt

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.