Photoshop Tutorial – Web 2.0 Header with Stripes

New – download the Photoshop Files for this header at the bottom of the post.

The trendy/popular thing right now seems to be this 'web 2.0 style' of graphics. You'll see that a lot of the web 2.0 style images have things like highlights, gradients, reflections, shadows, and even stripes – along with just an over all clean yet almost bubbly style. So, let's see what we can come up.

Let's get started…

The Stripes

First, we are going to make the stripes that we will use in making the header. We will save the stripes as a pattern so that we will be able to use them when ever we want.

1. Open a new document

- Go to 'File->New' to start a new document. For the most part, the width of our stripes will depend on the size we pick for our document. We are going to make our stripes 8 pixels wide with 9 pixels in between the stripes. So, for our document size let's pick 17px by 17px (you should keep it square and an odd number). Also, for our 'Background Contents:' pick Transparent.
Once the document is open zoom in all the way and select the pencil tool – make the brush size 1px and set the colors to default by pressing 'd'

2. Draw the stripes

This can get a little confusing, so reference the picture if you get lost…
- Start in the lower left corner of the image and use the pencil tool to draw an 8 pixel long line to the right. (each box drawn with the pencil tool will be 1px – use the rulers as a guide go to 'View->Rulers').
- Go to the upper right corner and draw an 8px line down.
- Still using the pencil tool, click once in the upper right corner hold down the shift key and click in the lower left corner (this makes a line at a 45 degree angle).
- Do the same thing at the other end of the lines.
- Now, color everything in between those lines black.
- Use the pencil and start in the upper left corner and draw out a 7px line.
- Draw another line under the previous line leaving a 1px margin on the right – keep doing this until you can only draw a 1px mark with the pencil. So, we have 9px in between the stripes and 9 pixels after the big stripe in the middle. We only did a 7px wide line in order to maintain the 9px spacing. We are almost done with the stripes.
- Finally, go to 'Edit->Define Pattern' give your pattern a name like stripes and click OK. We are done with making the stripes and now we can start on the header itself.

The Header

A nice shiny header with our fancy new stripes…

1. A new document

- Start off with a brand new document, the size is up to you, but I will be making mine 760px wide by 100px high.
- Fill the first layer with the color of your choice, I picked a nice orangish color.

2. Add some stripes

- Create a new layer – in good Photoshop practice we will name this layer 'stripes'.
Now, let's put our stripes in this new layer…
- Go to 'Edit->Fill…'
- select Pattern from the drop down box next to 'Use:'
- click the down arrow next to 'Custom Pattern:'
- select our stripes pattern we made earlier
Wow! A little hard on the eyes…
- With the stripes layer selected change the Opacity to about 20% or whatever you think looks good.

3. Add some text

- Grab the 'Text' tool (the big 'T' in the tools pallet)
- select a nice font and the color you want (I picked Lithos Pro Bold at 36pt in White)
- type out your site name (or whatever you want here)
- I suggest positioning it off the the left a bit

4. The reflection

Well, we've gotta have a reflection…
- Right click on your Text layer
- select 'Duplicate Layer…' name it reflection and click OK.
- Get your move tool ready (shortcut 'v' on the keyboard)
- With the reflection layer selected go to 'Edit->Transform->Flip Vertical'
- Now with the move tool, hold down the shift key and drag the flipped text down under the normal text.
Let's add a Layer Mask to make the text fade out a bit…
- With the reflection layer selected – At the bottom of the Layers Pallet select the 'Add layer mask' button.
- Grab the gradient tool (shortcut 'g' on the keyboard)
- make sure your colors are set to default black and white (press 'd')
- zoom in a little bit
- start a little above the bottom of the reflected text and drag up until you get a little past the top of the reflected text.
- If you don't like it 'ctrl+alt+z' and adjust the positions of the gradient (redo with new start and end points)

5. The highlight

- Create a new layer name it highlight.
- Grab the 'Elliptical Marquee' tool (might be hidden behind the 'Rectangular Marquee' tool).
- Start somewhere off to the left of the image and drag a selection across the image past the right side.
- try to make it curve down towards the middle
– if you don't like your selection you can go to 'Select->Transform Selection' and adjust it
- Fill the selection with White and bring it's Opacity down to around 10%

So, we have our basic web 2.0 style header with some stripes, but let's add a little more flare to it…

6. Flare it up

- Create a new layer name it border.
- Go to 'Select->Modify->Border…' and pick about 4px
note: there are other ways to do borders with selections but this was quick and easy
- Now, select the stripes layer and create a new layer named burn.
- just make sure the layer is above stripes layer and below the highlight layer
- Select the Burn tool (might be hidden behind the Dodge tool)
- Brush size about 65
- Change Exposure down to about 90%
- Start in the lower left corner and with the brush outline half on the image and half off the bottom drag from one end to the other
- Do the same to the top
- For the sides leave the brush only about 1/4 on the image and the rest outside the image
- One last thing we can do is grab the Dodge tool (same place as the Burn tool)
– With the brush size at about 65, Range: Highlights, Exposure: 100% run the brush across the middle of the image to give it a nice highlight.
shew… there you have it – a nice trendy web 2.0 style header.
click to enlarge
Play around with the colors, opacity, stripes, etc. and see what you can come up with. One of the best ways to learn is by experimenting!

Download the psd Photoshop file for this Web 2.0 Header with Stripes

Download Files

Popularity: 43% [?]