TutsArena

Quickly Create a Colorful Header in Photoshop

by TutsArena - Tutorials

I’m a pretty big fan of this kind of colorful style of design. In this tutorial, I’m going to show you how to make an eye catching header design in Photoshop. If you like the outcome, you can always design a website around the header to match its style!

We’re going to show you how to quickly create a colorful website header design in Photoshop in this step by step tutorial.  As always, there’s a free PSD download at the end so if you mess up, you can always check it out to see how we did it.

Final Product:

Step One: Creating the Background

Create a new Photoshop document, 1200×225 (or smaller if you wish) and fill the background with #070d12.  Now, we’re going to add some noise to the background just so it’s not so boring.  Navigate to Filter > Noise > Add Noise and use the following settings:

Looking good… now to make it look even less boring, we’re going to add a Gradient Overlay to the background.  Apply these Layer Styles to the background:

We’re finished with the background now, before we move on let’s name our background layer “background”, obviously enough.

Step Two:  Brushing the Background

Here’s the fun part.  This part is completely up to you and your idea of what looks good.  We’re going to add some brushing to the background.  Create a new layer and select one of the default Photoshop brush, Soft Round 200px.  Start randomly brushing where you think it will look good.  For our first brushing layer, this is what we did:

For the pink color, use #f83e93, for the blue color, use #73aef7 and for the purple color, use #5f2d66.  Set this layer’s Blending Mode to Saturation.  After you’ve done the first layer, create a second layer and do the same thing.  Make it different for each layer so you don’t have a plain straight line.  Here’s what we did with the second layer:

(Saturation, 100%)

Create a new Layer each time you do more brushing and do the same thing, keep playing around with the Blending Modes and the way you brush, as well as the colors you use.

Third Brushing Layer (Color, 100%):

Fourth Brushing Layer (Soft Light, 100%):

Fifth Brushing Layer (Screen, 50%):

Outcome:

Step Three: Creating the “Button”

In this step, we’re going to show you how to create a background for your text to sit on.  We call it a “button” so it won’t get confused with the main background.  To start off, select your Rounded Rectangle Tool (U) and create a new shape, about 285×65 px.  Create a new layer and then make a selection from the Shape (Right Click > Make Selection).  Fill the new shape layer with #ffffff (white).  Apply the following layer styles to the new shape.

Custom Style                          Drop Shadow                   Bevel & Emboss

We’re finished with the button now.  Let’s tackle the final part of the header… the text.

Step Four: Adding the Text

We used the font “Days” which can be downloaded here for free.

Then we applied the following Layer Styles to the text:

Outcome:

And voila!  We’re done!  This tutorial was short and sweet, we hope you enjoyed reading and following along.  Leave us a comment if you like the outcome!  Also, don’t forget to download the free PSD below!

Check out these other tutorials we’ve written:

• Design a Sleek and Modern Hosting Layout
• Classy Glassy Navigation Buttons in Photoshop
• Design a Dark, Contrasted Layout in Photoshop
• Design a Clean and Colorful Portfolio in Photoshop
• Design a Dark, Contemporary Minifolio in Photoshop

(visionheader.psd)