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

Create Beach Header


Step 1:

Let's start out by creating a new file. I used a 1000x300 pixels canvas set at 72dpi, and I filled my background with #FFF2B4 color shade. Now create a new layer then draw a large rectangle with #71B4FF color shade and 1000 x 160 px dimensions.

Create Beach Header image 1

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your large rectangle layer.

Create Beach Header image 2

Create Beach Header image 3

Create Beach Header image 4

Step 3:

In a new layer draw a black rectangle across your canvas between the large blue rectangle design and the background.

Create Beach Header image 5

Step 4:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the black rectangle layer. Then set the layer's blending mode to Lighten.

Create Beach Header image 6

Create Beach Header image 7

Create Beach Header image 8

Create Beach Header image 9

Step 5:

Duplicate the black rectangle design layer twice and move them on the sand colored background, modify the layer's opacity level to 12-20%.

Create Beach Header image 10

Step 6:

Create a new layer, using your Ellipse Tool draw a bunch of random white clouds on the blue header.

Create Beach Header image 11

Step 7:

Now add small blurred clouds on the header design. Do this by making white clouds and apply Gaussian blur through Filter > Blur.

Create Beach Header image 12

Step 8:

In a new layer draw a brown rounded rectangle with #563B1A color shade and 473 x 23 px dimensions.

Create Beach Header image 13

Step 9:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Glow,Gradient Overlay and Stroke blending options to the brown rounded rectangle layer.

Create Beach Header image 14

Create Beach Header image 15

Create Beach Header image 16

Create Beach Header image 17

Step 10:

Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, none and #FFAD37 color shade. In a new text layer type out your navigation links with spaces on the rounded rectangle design. Use #84D3FF color shade for alternate link color.

Create Beach Header image 18

Step 11:

Now add a search box on the right side of the header.

Create Beach Header image 19

Step 12:

Add a Plant design on the center of the beach header, grab the file here.

Create Beach Header image 20

Step 13:

Select the Horizontal Type Tool then set the font family to Arial, bold, 40 pt, smooth and white color shade. In a new text layer type your website name on the header design. Then rotate the name by a little through Edit > Transform > Rotate.

Create Beach Header image 21

Step 14:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Outer Glow and Gradient Overlay blending options to your website name text layer.

Create Beach Header image 22

Create Beach Header image 23

Create Beach Header image 24

Create Beach Header image 25

Result:

Create Beach Header Tutorial: Final Result



Author's URL: PsDeluxe
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 "Create Beach Header"

Only registered users can write comment

No comments yet...