HTML EXAMPLE

Download Files

Download Stripes Pattern

Thanks

Download Stripes Pattern

This is how I would go about installing the pattern(for windows). Just navigate to where your Adobe Photoshop files are installed and inside the Presets folder there is a Patterns folder – for example: C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Patterns – place the stripes.pat into this folder and you should be ready to use it in Photoshop.

We will be using a stripe pattern in the background of the button, so if you didn't complete the pattern in the web 2.0 header tutorial you can download it here.

Download Stripes Pattern

Let's get started.

File Setup

Open up Photoshop and create a new file. Like I said, the size is up to you – I will be making mine 200px X 50px.

Create a new layer and name it bg.

Rounded Corners or Not

First, grab the gradient tool.

Set the Foreground color to black.

Set the Background color to 50% gray.

Using the gradient tool click and drag from the bottom to the top – so that the black is at the bottom of the button.

If you want the button to be rectangular then skip to adding a stroke.

If you want the button to have rounded corners follow these steps.

Grab the Rounded Rectangle Tool

At the top set the Radius: to 10px and make sure Paths is selected.

Start in the upper left corner and pull out the shape to the lower right corner.

Right click and select Make selection… Feather Radius: 0 and click OK

Next hit ctrl+shift+i to invert the selection and hit delete on your keyboard and now the corners are rounded.

Add A Stroke

Whether you rounded your corners or not, let's add a stroke to the bg layer.

Double click on the bg layer to open the Layer Style window.

Click on stroke and set size to 1px, Postion: to Inside, and the Color: to black.

Add the Stripes

Create a new layer and name it stripes.

ctrl+left-click on the bg layer's Layer Thumbnail to create our selection.

Go to Edit->Fill… make sure Use: is set to Pattern

Now to load the stripes pattern you downloaded. Follow the directions on the image below then browse to the place you saved the stripes pattern and load it in – it will show up at the end of the list of patterns. Click it and hit OK.

Set the Opacity of the stripes layer to about 20%.

Add the Text

Grab the Text Tool (keyboard shortcut 't').

Set the options to Myriad Pro for the font Bold and 24pt – I used a light gray for the color.

Select the text and change the Vertical and Horizontal scale to match the image below.

Add the Highlight

Create a new layer and name it highlight.

Using the Pen Tool create a path similar to the image below.
Then right-click and pick Make Selection…
Click OK and fill it with white.

Once again ctrl+click on the bg layer's Layer Thumbnail to make it our selection.

With the highlight layer still active hit ctrl+shift+i to invert the selection and hit delete on your keyboard.

Change the opacity of the layer to about 15%.

Text Reflection

shew… text reflection anyone.
Right-click on the text layer Home and select Duplicate Layer… and click OK.

Go to Edit->Transform->Flip Vertically

Hold down shift and drag the reflection down below the text.

Adjust the Opacityof the reflection to 40% or so or add a layer mask which ever you like. And there you have it – were are done with our Web 2.0 style button.

Download the psd file for this Web 2.0 style button and get an extra stripes layer so you can have to colored stripes. To change the color just ctrl+click on the Layer Thumbnail to create the selection and fill it with the color you want.

Grab the Photoshop file and the image file

Download Files

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