Elegant Header

In this tutorial we’ll make an elegant header for a website.

Header

1. Make a new file, 770×400px.
2. Fill background layer with #232323 (SHIFT+Backspace opens fill menu).
3. Make a new layer and select something like this:

Selection

4. Fill selection with #171717.

5. Grab Text Tool and write something (Color: #d8d8d8), maybe main links in this black area. For example:

Upper Menu

6. I recommend not to use strange fonts with many styles because this way is better for Search Engines. Everyone have for example Verdana so you can code it in HTML instead of making a JPG file. But it’s different topic (;
7. I want Board link to be more visible so I changed font color to #f27d00

Board Link

8. You can group some layers to “Upper Menu” “Logo” etc.
9. Make a new layer, and select something like this:

Selection

10. Fill it with any color, it’ll change when we apply gradient on it.
11. Go to blending options and use these settings:

Gradient

Gradient

12. We have nice “Web 2.0″ gradient top.
13. Write some text. Look at my previous tutorial, it can be useful: Simple but elegant text
14. OK, we’ll make a nice RSS icon.

15. Look at: RSS Icons and download RSS Icon pack. Open orange one and paste it on our work.
16. You should have something like this:

RSS

17. Duplicate this layer, and hide duplicated one.
18. Go to blending options of visible RSS Icon and use these settings:

Inner Shadow

19. Set layer’s blending mode to Multiply and reduce Opacity to 35%.
20. Unhide duplicated RSS icon. Press CTRL+T and reduce it’s size to 80%:

Transforming

21. Grap your favourite font and write under icon “rss feed” :)

Transforming

22. Add a logo if you have or use my Quick Method To Receive a Nice Background (QMTRANB). How it work? Get a nice image, for example clouds -> HDR Clouds, resize it, paste and erase unnecessary parts to have something like this:

QMTRANB

23. Now set this layer’s blending mode to Hard Light and reduce Opacity to 40%.
24. You can add some blur or something… or use another image ;) It’s sometimes very useful.


Source: http://pshop.pl/2007/11/14/elegant-header/

0 comments:

Post a Comment