Jump to content
xisto Community
Sign in to follow this  
web_designer

How To Make A Simple Website Header In Adobe Photoshop Cs3

Recommended Posts

1- Open adobe photoshop cs3> create a new photoshop document from file> new> and add these values

 

Width: 700 px

 

Height: 200 px

 

Resolution: 72 px

 

Color mode: RGB color 8bit

 

Background content: transparent

 

 

 

2- add a new layer from layer> new> layer>name it background> from (set foreground color) in toolbox and set the color code to (#403e3e)> from (paint bucket tool) add the color to the document, now you should have something like this:

 

 

 

 

Posted Image

 

 

 

 

3- download this brush (smoke_brush), you can download it from here and install it

 

https://myphotoshopbrushes.com/brushes/id/220/

 

 

 

add a new layer from layer> new> layer>name it smoke> pick a color (pure

 

cyan) from switchers using (eyedropper tool) in toolbox> use (brush tool)

 

from toolbox> choose smoke brush 800 and draw the shape that you want, you

 

can use your imagination and draw whatever you want and not do same as

 

mine, if you want to have the same shape I did just one click on the document

 

and you will get the same design, you will have something like this:

 

 

 

 

Posted Image

 

 

 

 

 

 

 

4- use (horizontal type tool) in toolbox to write your website header> use these values (here we don't need to add a new layer, using the horizontal type tool will create a new layer by default):

 

font family: ghostwriter

 

font size: 48 pt

 

font color: #ffffff

 

 

 

for font family you can use whatever you want, or you can download this font.

 

Now, let's add some shadow to our website name, layer> layer style> drop shadow> set these values

 

Distance 6

 

Spread 12

 

Size 6

 

Now you should have something like this.

 

 

 

 

 

 

Posted Image

 

 

 

 

5- download this brush (retro240) from the same site before, install it> add a new layer from layer> new> layer>name it symbol> pick a color (white) from switchers using (eyedropper tool) in toolbox> use (brush tool) from toolbox> pick retro brush 162> also use your imagination to draw a random symbol, usually I don't concentrate on the area around my website name to keep it clear and showy, this how the header suppose to look like.

 

 

 

 

Posted Image

 

 

 

 

 

 

 

6- add a new layer from layer> new> layer>name it marquee> use (rectangular marquee too)> draw a marquee inside the document ( like border)> right click inside the marquee and choose feather> set it to 5 px> right click again and choose stroke> set these values

 

 

 

width: 3px

 

color: #403e3e

 

location: inside

 

blending mode: hue

 

opacity: 100%

 

 

 

that's it, your new website header is complete. The result will be like this:

 

 

 

 

Posted Image

 

 

 

 

to see it in full size, this is the link

 

http://forums.xisto.com/no_longer_exists/404.png

Share this post


Link to post
Share on other sites

Wow, that's really nice! Thanks for posting this, I was completely unaware that there were new brushes that you could download.

Share this post


Link to post
Share on other sites

there are always new brushes you can download. in fact, every time, i want to make a new design i do a long and boring search to find a new brush that i could use. i do like using brushes it gives a special touch to your design. glade you like it.

Share this post


Link to post
Share on other sites

Good work webdesigner , you did a good simple header.I do like the title , you choosethe good color *White* because it's the perfect color wich sweet all dark colors , and a simple free font *ghostwriter* .

Share this post


Link to post
Share on other sites

Quick question, is it really that necessary to space everything like that? I mean, all I see (besides the content) is too many page breaks. ;)

Share this post


Link to post
Share on other sites

Quick question, is it really that necessary to space everything like that? I mean, all I see (besides the content) is too many page breaks.

yeah, that's right sky. it looks weird with the spaces. that's because i wrote it first in word document. also, it is one of my habit, leaving wide spaces between lines either in writing or in codes so i can separate information and making them more clear.

Share this post


Link to post
Share on other sites

Brushes and filters are the most needed presets to create any graphics. I never use a specific website for downloading them , i use Google to find something.Cool tutorial , and the effect of smoke brush is very cool :lol: Also you could find some good font... But i don't recommend making header image which has the logo in it. I prefer adding a background as a header and a image for logo :lol:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.