Web design is about details. Details that audience do not pay attention to tells how well or how bad your design is.  Today we are looking into some tutorials and techniques on the smallest elements in web layout design.

1. Separator Line

   Separator line is one of the smallest element in web design. Some times it can be achieved by one side border. Here is a tutorial on making an elegant separator with gradient.
   Taking this result one step further, apply appropriate blur on the separator area. You will get the effect like the header of wefunction.com With a text reflection, they easily achieved a simple 3D effect

2. 3D illusion in two dimension web design

   Here is a 3D footer tutorial Another good tutorial from PSD TUT The key of 3D is gradient and of course with some shadow. For example, how to create something like this?
   It depends on how sensitive your eyes are towards color changing. With enough focused attention, everyone can catch the tiniest changes:

   1. slightly dark to light
   2. to very dark
   3. to highlight
   4. to slightly dark again, but brighter because it is closer to us

   Thanks to the modern technology. This is a gradient I got from sampling the colors. Its easier for girls to learn I guess, just think how you apply eye shadows !!
   

3. Buttons Are Important

   How to Create a Slick and Clean Button in Photoshop is one of my favorite tutorial. There are also other good tutorials on different button styles:iPhone-like button in Photoshop TutorialDon’t think you can ignore web 2 style now. Some clients still asking for it! web2 style button tutorial

4. Menus

   Tabbed Horizontal MenuAgain, the effect is achieved by applying gradient
   Also Web 2 style menu:

5. Others

   Web 2 style highlight Also there is another good tutorial on using fake light source

Finally, there is a great tutorial I would like to share:

Five Looks, One Layout: How to Develop a Library of Web Design Styles at Your Fingertips

ADD TO

If this helps, why not tell your friends?

• 
• 
• 
• 
• 
• 
• 
• 
• 
•