Her

Home Photoshop Tutorials Web Layout Dark Red Header

Dark Red Header

Author: Digital Street Author's URL: www.digital-street.com More by this author

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:

image 20

Dark Red Header