New!

Resources

Tutorials

Designer search

Find a designer by country:

Related Tutorials

Color

Categories


Web Companies


San Diego Web Design Company
web design
Web Directory

Web Tutorials

Submit your tutorial and earn $25 >
Photoshop tutorials Simple header design in Photoshop

Author: Ivana Milosevic

I’m a web designer from Belgrade, Serbia, working on my designs at Greenfish Web Design Studio.Amateur photography has been my hobby since 1998, I’m also a proud owner of a beautiful french lop bunny BiBi and in my spare time I like to play World of Warcraft.

Share

Hello, in this tutorial I will show you a simple way to make a nice header for your web site or blog, without using any photos. We will use basic Photoshop knowledge, which means that it will be quick and easy to make.

Step 1

Open a new document File/New and set the size.

Step 2

Now open a new layer

Step 3

By double clicking on the first square in the Tools menu (to set foreground color) you will open the Color Picker window. Choose a color and click OK.

Step 4

Edit/Fill to fill the new layer whit the color you picked.

Step 5

Make a second new layer the same way you made the first. Find a Brush tool in Tools menu and select a brush ( there is a lot free brushes on the internet, you may choose the type that you need ) I have chosen a light-feather kind of brush.

Step 6

Apply the brush in the corner of the image and be careful that you have the last new layer selected ( you can also rename the layers to know which one is which, without selecting them )

Step 7

If you don't like the color you have chosen don't make a new brush stroke just to change the color - instead you can go to Layer / Layer style/ Color overlay and choose a different color.

Step 8

To soften up the edges I used the soft Eraser tool with 61% Opacity.

Step 9

Delete as much brush as to need to get the results you wish, if needed the Opacity of the Eraser tool can be changed in the process to get the gradient fade effect.

Step 10

Now choose a shape that you want, I got mine from the net for free.

Step 11

Place it the on the image the way it suits you. I used Edit/Transform/Rotate to position my shape.

Step 12

To see the changes you are making on the shape, by using filters and such, click on the Vector mask thumbnail to toggle the outline on / off.

Step 13

Layer/Layer style/Gradient Overlay to add some nice effects of reflection. Set the settings as on the image below.

Step 14

Now to add some glow.

Step 15

Click OK. Now the brush is a bit pale now, you can add glow to it, too.

Result

And we're done.

Just put your logo on the clear space of the image and you got yourself a simple, yet good looking header.



Comments

Nikola Mitic

9 sites

Thanks Ivana, I hope that you will post URL to that website when it is up :)


Danijel Obradovic

Thank you Ivana.. Nice tutorial, and very simple and nice header.. Good job!:)


Cool tutrial defently gonna use for my site :D


nice tutorial 33 wats the brush used for the ones on the right?


Add Your Comment

gravatar


Processing, please wait ...
Your name:

Your email:

Your URL:

Comment:

Follow us
on Twitter

4915 Sites

96 Countries

1575 Designers

add your profile

31 users online

CSS Gallery

Top Rated Web Designers

Share this tutorial on:

  • ADD TO DEL.ICIO.US
  • ADD TO REDDIT
  • ADD TO GOOGLE

ccc