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

Sleek Blog Header Design


Step 1: Let's start out by creating a new file. I used a 1000x200 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer then draw a light blue rectangle with #C2EBFF color shade and 1000 x 121 px dimensions.

image 1

Step 2: Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Satin and Gradient Overlay blending options to your large gray rectangle layer.

image 2

image 3

image 4

image 5

Step 3: Create a new layer. Then draw a 1 px line with #5B5B5B color shade across the edge of the top gray rectangle.

image 6

Step 4: In a new layer draw a long dark red rectangle with #930000 color shade and 540 x 23 px dimensions right at the bottom of your header design. Then under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options.

image 7

image 8

image 9

image 10

Step 5: Create another layer then draw a 1px line with #9F1C1C color shade on the top edge of your dark red rectangle design.

image 11

Step 6: Select the Horizontal Type Tool then set the font family to Arial, bold, 13 pt, none and white color shade. In a new text layer type out your navigation links on the dark red rectangle design. Make sure you leave spaces between each link and add a vertical bar with #272727 color shade.

image 12

Step 7: Create a new layer and draw a long black rectangle with 463 x 21 px dimensions.

image 13

Step 8: Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long black rectangle layer. Then set the layer's blending mode to Lighten at 58% opacity.

image 14

image 15

image 16

Step 9: Select the Horizontal Type Tool then set the font family to Arial, bold, 32 pt, strong and white color shade. In a new text layer type your website name on the empty header space then use a smaller font for your slogan.

Sleek Blog Header Design



Author's URL: PSDrockstar.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Sleek Blog Header Design"

Captcha