News Blog Web Header

We will create News Blog header in this detailed tutorial.

Create a new file (File>New) having 766×148 px and 72 dpi. Next select the Rectangle Tool (U) and represent the background of the site’s header to be:

News Blog Web Header

The layer’s parameters:
Blending Options>Gradient Overlay

News Blog Web Header

Gradient’s parameters:

News Blog Web Header
News Blog Web Header

The Rounded Rectangle Tool (U) should be used for making the menu’s button situated on the site’s header that would have the color #2B363E

News Blog Web Header
News Blog Web Header

The layer’s parameters:
Blending Options>Stroke

News Blog Web Header
News Blog Web Header

Make four copies of the recently made button’s layer, but apply the Free Transform option to place the new buttons the way it is demonstrated below:

News Blog Web Header

Create a new layer now of 20×20 px and 72 dpi. Select then the Rectangle Tool (U) inclined by Free Transform option and try to represent the first elements of the texture we may see below, having white color. The texture’s shapes corrections may be done with the usual Convert Point Tool.

News Blog Web Header
News Blog Web Header

Save the new Pattern!

News Blog Web Header

Create a new layer again and apply the Rectangle Tool (U) for representing the layer reserved for putting the texture over the menu’s button.

News Blog Web Header

The layer’s parameters:
Fill 0% on the layers:
Blending Options>Pattern Overlay

News Blog Web Header
News Blog Web Header

Using the last instrument, try to create one more layer above the buttons.

News Blog Web Header

The layer’s parameters:
Fill 0% on the layers.
Opacity 10%
Blending Options>Gradient Overlay

News Blog Web Header

Gradient’s parameters:

News Blog Web Header
News Blog Web Header

Select the Rectangle Tool (U) to draw between the buttons a kind of opening colored in #45CCF6

News Blog Web Header
News Blog Web Header

Make three copies of the new made layer and select the Free Transform option to place the copies exactly the way it is shown on the picture we may see next:

News Blog Web Header

Try to draw now a stripe of black color, applying the same Rectangle Tool (U), a stripe that would be situated on the bottom of menu’s buttons.

News Blog Web Header

Using the previous instrument, we have to represent next two thin stripes of white color, placed on the right and left sides on the header’s bottom.

News Blog Web Header

Select the same instrument we’ve represented the stripes earlier to draw one more stripe of the next shown color #578EB5 that would be situated on the site’s header top.
The layer’s parameters:
Fill 50% on the layers:

News Blog Web Header

Write now the titles reserved for the menu’s buttons:

News Blog Web Header
News Blog Web Header

Insert also the site’s tiles keeping the demands form the next demonstrated tables:

News Blog Web Header

(News)

News Blog Web Header

(Blog |)

News Blog Web Header

(the best blog)

News Blog Web Header

Make a copy of the new made layer and choose again the Free Transform selection to turn over the copy, selecting the next parameters for it:

News Blog Web Header

The layer’s parameters:
Fill 0% on the layers:
Opacity 40%
Blending Options>Gradient Overlay

News Blog Web Header

Gradient’s parameters:

News Blog Web Header
News Blog Web Header

Crate a new layer and select the Pencil Tool (B) to draw a pointer of white color situated on the left side from the button’s title:

News Blog Web Header
News Blog Web Header

Make four copies of the new made layer and apply again the Free Transform selection to place the copies the same way it is indicated below:

News Blog Web Header

The site’s header is finished!