Flag Product

Creating WebSite Header // Adobe Photoshop Tutorial

Add to my list

Send to friend

Compare prices

Shop for it: (added from 1 site)

Buy itdeslice.com

See more products from this brand »

Added by

ferrulli14 added to Web Design

Rate it!

0 Hearts

Description:

Step 1 First of all create a new document - for the purpose of this tutorial I have created a document 650 by 200 pixels although choose a size that you want :) We are going to be starting with creating a background so set your... See more » Step 1 First of all create a new document - for the purpose of this tutorial I have created a document 650 by 200 pixels although choose a size that you want :) We are going to be starting with creating a background so set your foreground colour to #525253 and your background colour to #2e2e2e. Select the gradient tool and set it to radial. Add a gradient to Layer 1 by left clicking somewhere in the middle and dragging to one of the sides and releasing. Step 2 Secondly we are going to be adding a banner background. Create a new layer by going Layer > New > Layer. Select the rounded rectangle tool from the tools window and set the radius to 10 pixels. Make a fixed size selection of 600 by 170 pixels in the middle of your document. Set your foreground colour to #f9f8e4 and your background colour to #eae6c3 and using the techniques that we learnt in the first step with the gradient tool, add a gradient in the selection. Step 3 Thirdly we are going to finish the backgrounds off by adding a background for the navigation. So create a new layer (Layer > New > Layer) and make another rounded selection of 600 by 50 pixels using the rounded rectangle tool. Now we are going to be adding another radial gradient to our selection, this time our foreground colour is #8ac43f and the background colour is #7ba642. Step 4 Now we are going to be adding some layer styles to our navigation background. We are going to do this by going Layer > Layer Style > Gradient Overlay for our first layer style. For our second layer style go Layer > Layer Style > Pattern Overlay - that is a 3 by 3 pattern with a diagonal line if you want to make it. Your site header should now be looking something like this. Step 5 Next up we are going to be adding in something to sit beside our soon-to-be-added text. This can either be your site's logo or just a custom shape which I've added below. I've done this by selecting the custom shape tool and selecting an arrow and then filling it with the colour #7aa641. Step 6 We are now going to be adding a couple of layer styles to this arrow layer. Firstly go Layer > Layer Style > Outer Glow and enter these settings. Secondly go Layer > Layer Style > Stroke. The 0% opacity of the stroke is intentional - it gives a 1 pixel transparent part around of the arrow (between the outer glow and arrow). Now your arrow should be looking like this. Step 7 Next up is the title text for the site header. Select the text tool and add your website's name (the colours I have used are #292929 and #7aa641). Step 8 Now we want to have the text to have the same layer styles as the arrow does. So instead of just repeating step 6 for the text, we can right click the arrow layer and go Copy Layer Style and then on the text layer right click and go Paste Layer Style. Step 9 Lastly we are going to be adding some text links to our navigation bar. So using the text tool chuck in some text links. The font styles that I have used are: Arial, Bold, 14pt, Smooth, #ffffff. See less »

Comments (0)

Add a Comment:

Not a Kaboodler? Join Now, It's Free!

Email:

Screen Name:

Password:

Birthday:

Security Check
(Reload)

Enter Both Words

I have read and agree to the Terms of Service

Remember me on this computer.

Kaboodle will send you a newsletter and updates from your friends. You can unsubscribe at any time. Kaboodle does not sell or share your email address or personal information with anyone.

Cancel Already a Kaboodler? Sign in

Creating WebSite Header // Adobe Photoshop Tutorial

Comments (0)

Add a Comment:

Thanks for Hearting!

Not a Kaboodler? Join Now, It's Free!

Sign in to Kaboodle