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. 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-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
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
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
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.
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
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
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!
Thanks, great tips!
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. .
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 :)
Hi Charlotte
this is easier said than done.
I have been looking out for it for years by now.
thanks
awesome tips you have in this tutorial too, i really want ti twitter my friends too :)
Very good article.
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.
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.
i use google when i want to do some spanish translation, it is good for general spanish translation .-;
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!
Great tips, thanks a lot!!!
Great Site, your plugins are very useful and save me a tonne of time.utdtt