1. Start a new document in your Adobe Photoshop, make a new layer called “background” and fill it with a grey color: #171717. Now, go to filters and add some noise like in following screenshot:

2. Go to filters again, and from Texture / Grain choose “Film Grain” like in next image:

3. Make a new layer (light) and on top for background and apply a big soft brush with a light grey shade.You need to do that on a new layer because later, on html integration, will be a more easy job to set a background noise-grain pattern for body and the light like png to a div, instead to save a big image like background. This will not overload the size of graphics used and also, on any resolution the background will look good. In case you are just web designer, do not forget to develop and a programmer thinking.

4. Put your logo over the light layer. In my case i used one done with basic shapes. Doesn’t matter now the color or effects. In case you are doing it in Illustrator, let it simple, with no effects, gradients etc.

5. For slogan, i used the blending options like following:

6. For logo:

The logo should look now like:

7. Make a bar menu (centered to layout) using “Rounded Rectangle Tool” with 25px radius. Width: 940px and height: 42px. Apply same blending options like on logo, except the stroke will have a more less opacity (the stroke should have a more contrast)

8. For menu items background, use again the “Rounded Rectangle Tool” with 25px radius. Width: 200px and height: 30px. Using “Rectangular Marquee Tool” copy a part of noise-grain background and mask it with the new created shape.

Use same way to make the “hover” effect for any menu item.

9. Let’s make a slider. Make a shape using “Rounded Rectangle Tool” with 25px radius. Width: 940px and height: 305px. Apply same blending options like on menu bar. In fact, that engraved effect will be used for most of other shapes.

10. For slider buttons, use “Ellipse Tool” to make a circle 80×80px and center it along slider border. But, to make the circle to be part of slider shape, before that, is need to click on “vector mask” of slider shape layer, select the “add to shape area” option. Do the same to the right side.

11. Make an arrow. You can use the “Custom shape tool”. Apply same blending slider options. Increase the opacity for stroke and put a small shadow.

12. In bottom area will be 3 columns. Each heading will have an icon. The icons i use are standard symbols in Adobe Illustrator CS3 and in case you need to change them in same style, but with different shapes, go to your Illustrator and open the “web symbols” group of icons. By default, those symbols are hidden from symbols windows. Drag the icon needed to your artboard and expand appearance, copy the icon and paste it like smart object in Photoshop.

13. Under each icon layer, make a new shape using “Rounded Rectangle Tool” with 25px radius. 60 x 45px size. Same blending option like the menu and slider shapes.

14. For icons, apply blending settings like in following screens:

15. For text separation, in columns, use two 1px lines with two contrast grey shades. One lighter one darker.

16. We have to deal now with footer area. Using 25px radius “Rounded Rectangle Tool”, make a shape 380 x 100px. Select the “vector mask” and with “Rectangle Tool” subtract the bottom of shape area. Course, same blending style like on menu, slider and icon holder.

17. Using brushes, 1px lines, shapes with gaussian blur filter applied, make the following effect (i am not detailed here because exist a lot of “web 2.0″ brushes available for download or tutorials about that kind of effect)

You are done. See more screenshots of template. If you like the design, you can buy a xhtml/css template version with just 10$. It comes with 4 layouts in 7 pages and with predefined classes for common elements needed in website, from lists to tables.The package contain layered psd files, logo sources, detalied instructions for customizations, thematic animation / slider and working contact form

Published on: January 4th in Tutorials .
Post tags: background, black, buy, css, dark, Design, film grain, graphic, grey, layout, noise, pattern, photoshop, psd, slider, template, theme, tutorial, web design, website, xhtml