Photoshop  Home Photoshop Web Layout Elegant Header
rss

Elegant Header

Author: Phoenix More by this author


1. Make a new file, 770x400px.

2. Fill background layer with #232323 (Shift+Backspace opens fill menu).

3. Make a new layer and select something like this:

image 1

4. Fill selection with #171717.

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

image 2

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.

image 3

8. You can group some layers to "Upper Menu" "Logo" etc.

9. Make a new layer, and select something like this:

image 4

10. Fill it with any color, it'll change when we apply gradient on it.

11. Go to blending options and use these settings:

image 5

image 6

12. We have nice "Web 2.0″ gradient top.

13. Write some 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:

image 7

17. Duplicate this layer, and hide duplicated one.

18. Go to blending options of visible RSS Icon and use these settings:

image 8

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%:

image 9

21. Grab your favorite font and write under icon "rss feed" :)

image 10

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:

image 11

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.

Elegant Header Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: pshop.pl

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Elegant Header"