Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Dark Red Header

Dark Red Header


1. Create a new image 800x110 with white background.

2. Fill the background with dark red color #4b0d0d

image 1

3. Create a new layer, rename this layer as "header", make a rectangle selection and fill it with any color.

I used #ac1415

image 2

4. Right click the header layer and choose Blending Options, use these settings:

Outer glow:

image 3

Gradient overlay: use these colors # ac1415 -> # 800d0d

image 4

image 5

Stroke with this color #6d1415:

image 6

The result is:

image 7

5. Create a new layer, rename this layer as "light".

6. Select the Rectangular Marquee Tool and draw a rectangle inside the "header" layer and fill the selection with any color, similar to this:

image 8

8. Right click the "light" layer and choose Blending Options, use these settings:

Gradient overlay: use these colors # a31416-> # ab292a

image 9

image 10

The result is:

image 11

9. Select the "header" layer and select the Rectangular Marquee Tool and make a selection 2 pixels wide:

image 12

10. Press DEL to delete that part of the header and get a hole.

image 13

11. Make more holes that will be used to separate the menu elements. Add the menu elements with simple white text. I have used KaratMedium font 24 px.

The result is:

image 14

12. Add a title with white text. I have used RedFive font 30 px:

image 15

13. Right click the title layer and choose Blending Options, use these settings:

Drop Shadow:

image 16

Gradient overlay: use these colors # ffffff-> # a7a8aa->#ffffff

image 17

image 18

The result is:

image 19

14. Finally add a picture or logo.

Also I have added a yellow color font for the rollover #ffd909

The final result is:

Dark Red Header Tutorial: Final Result

image 21



Author's URL: Digital Street
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Dark Red Header"

Only registered users can write comment

No comments yet...