In this tutorial we’ll make an elegant header for a website.
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:
4. Fill selection with #171717.
5. Grab Text Tool and write something (Color: #d8d8d8), maybe main links in this black area. For example:
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
8. You can group some layers to “Upper Menu” “Logo” etc.
9. Make a new layer, and select something like this:
10. Fill it with any color, it’ll change when we apply gradient on it.
11. Go to blending options and use these settings:
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:
17. Duplicate this layer, and hide duplicated one.
18. Go to blending options of visible RSS Icon and use these settings:
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%:
21. Grap your favourite font and write under icon “rss feed” :)
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:
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