Photoshop  Home Photoshop Web Layout News Blog Web Header
rss

News Blog Web Header

Author: Adobetutorialz.com More by this author


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

image 1

The layer's parameters:

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

image 4

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

image 5

image 6

The layer's parameters:

Blending Options>Stroke

image 7

image 8

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:

image 9

Create a new layer now of 20x20 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.

image 10

image 11

Save the new Pattern!

image 12

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.

image 13

The layer's parameters:

Fill 0% on the layers:

Blending Options>Pattern Overlay

image 14

image 15

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

image 16

The layer's parameters:

Fill 0% on the layers.

Opacity 10%

Blending Options>Gradient Overlay

image 17

Gradient's parameters:

image 18

image 19

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

image 20

image 21

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:

image 22

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.

image 23

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.

image 24

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:

image 25

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

image 26

image 27

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

image 28

(News)

image 29

(Blog |)

image 30

(the best blog)

image 31

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:

image 32

The layer's parameters:

Fill 0% on the layers:

Opacity 40%

Blending Options>Gradient Overlay

image 33

Gradient's parameters:

image 34

image 35

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:

image 36

image 37

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 Tutorial: Final Result (Click to enlarge)
Click to enlarge

The site's header is finished!




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 "News Blog Web Header"