First of all you need a few files – if you have your own textures that's great. I am using a couple of concrete textures. We also need some sort of object to add the texture to. I'm just going to use an RSS icon, but feel free to try other things, like text.

The Background

Open a new file. I made mine 800px X 600px. The size doesn't matter that much.

Fill the Background layer with a color. I think darker colors look better with the concrete textures we will be using. My color #2c2721.

Create a new layer and name it light spot.

Grab the Gradient Tool. Make it a Radial Gradient and pick a very light gray and a medium gray as your background and foreground colors. Foreground #e1e1e1 Background #898989
Drag from the center of the image almost to the top.

Set the Blending Mode for the layer to Overlay
This gives us a spotlight look.

Texture the Background

Now, we will add a texture to the Background layer. I will be using the second concrete texture from above.

Go to File->Place… and browse to where you saved the second concrete texture from above. Select it and click Place.

The image will come in ready to be resized or moved around. Resize it to cover the whole image/background and hit Enter.

Rename the layer that was created to bg texture.

Right-click the bg texture layer and select Rasterize Layer.

I have found that changing the Layer Blending mode to Multiply works best for texturing. Feel free to experiment with other Blending Modes. Like Overlay, Soft Light, and Hard Light.

Change the bg texture's Layer Blending mode to Multiply and adjust the opacity to about 50%.

What we've got so far.

The Icon

Next, we will bring in our next item to texturize. I'll be using the RSS icon from above. If you are using text, you don't need to bring anything in – just type out your text.

Go to File->Place… and navigate to where you saved your RSS icon. Select it and click Place.

Resize the image if you need to and hit Enter. Rename the layer icon and right-click the layer and select Rasterize Layer.

Double-click the icon layer to change its Layer Styles. Add a Drop Shadow and change the Angle to 90.

Next, right-click the icon layer and go to Duplicate Layer… rename it reflection and hit OK.

Drag that layer below the icon layer. Double-click the reflection layer to change its Layer Styles and remove the check by Drop Shadow.

With the reflection layer selected. Go to Edit->Transform->Flip Vertically.

Select the Move tool (keyboard shortcut 'v'), hold down the shift key, and drag the reflection down below the other icon.

Now we will add a Layer Mask to make the reflection fade out.

Still on the reflection layer, click the Add Layer Mask icon at the bottom of the layers pallet.

Grab the Gradient tool – Foreground color #626262 Background color #000000.
Start your drag at the top to the reflected icon and drag to the bottom of it.

Create a new layer and name it shadow.

Grab the brush tool(keyboard shortcut 'b') and set the color to black, size to about 65, and Hardness to 0%.

Brush just underneath the main icon. Set the shadow layer's Opacity to about 35%.

Finally – Texture the Icon

Now, we can add a texture to the icon. I will be using the first concrete texture from above.

With the icon layer selected, go to File->Place… and browse to where you saved the first concrete texture, select it and click Place.

Resize the texture if you need to, I just left it the size it came in at – we will get rid of the extra later – hit enter.

Rename the layer icon texture and right-click the layer and select Rasterize Layer.

Change the icon texture layer's Blending Mode to Multiply and set the Opacity to about 50%.

With the icon texture layer selected, hold down the ctrl key and left-click on the icon layer's thumbnail to make it our selection.

Now, hit ctrl+shift+i to invert the selection or go to Select->Inverse.

Make sure the icon texture layer is still selected and hit the delete key on your keyboard. This will get rid of the extra texture image we just brought in.

And there you go – the finished product.

Click to Enlarge

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

High-res Floral Photoshop Brushes

from bittbox

Japanese Foliage Photoshop Brushes

from Designfruit

Nature Photoshop Brushes

from Anodyne at getbrushes.com

Jenn B's Typographic Grunge Photoshop Brushes

from getbrushes.com

VPDesigns Omega Photoshop Brushes

from getbrushes.com

Tatto Photoshop Brushes

from Designfruit

Tech Photoshop Brushes

from Obsidian Dawn

Stars Photoshop Brushes

by hawksmont at Brusheezy

Vector Brush Set V2

by The-Rapture at Brusheezy

Vector Circle Photoshop Brushes

by solenero73 at Brusheezy

A Quick Pattern For Later

Open a new document – 5px X 5px

Zoom all the way in.

Make a new layer.

Grab the Pencil Tool and make it 1px in size and color to black.

Go diagonal from the upper left corner to the lower right corner – you should have five brush marks.

Click the eye next to the Background layer to turn it off.

Go to Edit->Define Pattern… Name it lines and click OK.

Getting Started

First off, open a new document in Photoshop. I made mine 768px X 150px.

Once it opens go ahead and make a new layer and name it bg.

The Background

First, we will setup our colors. For the Foreground color use light red and for the Background color use dark red.

Grab the Rounded Rectangle Tool (it might be under the Rectangle Tool) and draw out a rounded rectangle that fits inside our document. Make it come pretty close to each edge – if you don't get it exact we can adjust it in a minute.

Now, right-click and pick Make Selection… make sure Feather Radius is 0 and click OK.

If you need to adjust your selection go to Select->Transform Selection and you will be able to move and resize it. Once you have it where you need it press enter.

Grab the Gradient Tool (shortcut 'g') and with our rounded rectangle still selected start at the top of our document and click and pull to the bottom of our document. The lighter red should be at the top of our rectangle.

Now, double-click on the bg layer to add a Layer Style.

Add a Stroke – change the color to black and the size to 2.

Add The Lines Pattern

Duplicate the bg layer and name the new layer lines.

Double click on the lines layer and turn off the stroke by unchecking it.

Left-click on the little image beside the lines layer to make it our selection.

Go to Edit->Fill… change Use: to Pattern and for Custom Pattern: pick our lines pattern we made earlier. Click OK.

Set the Opacity to 30%.

Now, we are going to add a layer mask. Click on the Layer Mask icon at the bottom of the Layers Pallet.

Grab the Gradient tool – set the Foreground Color to black and the Background Color to 35% gray. Start in the bottom left corner and drag up to the upper right corner. And we are done with that part.

Note: If you still have the rounded rectangle area selected you can ctrl+d to deselect it.

Let's Add Some Text

Grab the Text Tool (shortcut 't') – Change the Options to Monotype Corsiva at 48pt (or whatever text style you want)

Type out Happy and exit the Text Tool.

Then type out Valentine's Day below it.

I tilted mine up a little ctrl+t to transform the text.

Add a stroke to each layer by double-clicking on it and selecting stroke – change the color to black and the size to 1.

Duplicate the Happy and Valentine's Day text layers.

Select both of the layers by holding down the shift key and clicking on the one that is not highlighted.

Right-click on either layer and select Rasterize Type.

Right-click again and select Merge Layers – rename the merged layer to reflection.

Now, we need to flip the reflection layer over. Go to Edit->Transform->Flip Vertically.

With the Move Tool (shortcut 'v') hold down shift and move the reflection text down.

Ctrl+t and move and rotate the text to line up correctly.

Add a Layer Mask to the reflection layer. Use the Gradient Tool (the colors should be the same as the last layer mask we made) and use the image as a guide to make the gradient.

A Heart

Create a new layer and name it heart.

Use the Custom Shape Tool (under the rounded rectangle we used earlier).

Change Shape: to one of the Hearts.

Drag out a heart shape to your liking.

Click on the Paths tab in the Layers Pallet.

Right-click on Work Path and select Make Selection… click OK.

Fill it with a red color or a gradient – it's up to you.

Double-click on the heart layer and add a stroke - color black size 1.

While we are in the Layer Style options. Give the heart a Bevel and Emboss – change the Style: to Inner Bevel the Technique: to Smooth and change Soften: to 10 now click OK.

There you have a nice header for Valentine's Day.

Extra

Add a ribbon look to the header.

Make a new layer above the lines layer – name it ribbonLong.

Take the Rectangle Marque (shortcut 'm') and drag out a rectangle the width of the image in the center make it about 50px or so tall.

Fill it with a dark red and give it a stroke color black size 2.

Make a new layer name it ribbonTall. Do the same thing only make this rectangle go up and down at the center of the image. Give it a fill of dark red and the same stroke.

Now, ctrl+click on the little image beside the bg layer.

ctrl+shift+i to invert the selection.

Click on the ribbonLong and hit the delete key then click on ribbonTall and do the same.

Grab the Burn Tool – make the brush size about 50px and the Exposure: 35%.

Burn along all the edges of each rectangle – a little extra at the ends.

Open up a new document in Photoshop and make it a decent size – I just made mine 800px X 600px so I had plenty of room (more than enough).

The Post

We are going to start with the post the sign will be on.

First, make a new layer and name it sign.

Now,Grab the Rectangle Marque tool (shortcut 'm') and draw out your post. I started mine at the bottom of the document and went up about 300px and 15px wide.

Note: You can turn on the rulers by going to View->Rulers or ctrl+R.

Select a gray color to fill your selection with. Then goto Edit->Fill and under Use: select Foreground Color and click OK. Or the quick way is to use the shortcut which is alt + backspace this will fill with the foreground color – ctrl + backspace will fill the the background color.

Next, go to Filter->Noise->Add Noise…. We just want to add a little bit of noise to make it a little more realistic. For the Amount use 2 click the Gaussian option and Monochromatic option. Click OK.

Zoom in a bit to make this next step a little easier. Grab the Burn Tool. Change the brush size to a soft 17px brush. We are going to run the brush up each side of the post. Start at the bottom and with half the brush on the post and half off hold down the shift key and click and drag the brush all the way to the top of the post. Do the same to the other side of the post.

Take the Dodge Tool (under the burn tool) set the brush size to a soft 10px brush and the Exposure to 50% and run the brush up the center of the post.

Post Holes

OK, let's add some holes to our post.

First, add a new layer and name it holes.

Zoom in pretty close to the top of the post.

Grab the Circle Marquee tool and draw a small circle in center of the post about 5px – 10px down from the top.

Add a Layer Style by double-clicking on the holes layer (NOT on the word 'hole'). Check Bevel and Emboss and use the settings in the image.

Now with the hole still selected, grab the Move tool (shortcut 'v'). Move over the hole and hold down the alt key to copy the hole and the shift key to keep it inline. Move it down 15px or so. Copy the holes all the way down the post.

Quicker way – ctrl + click on the little image by the hole layer – this will select all the holes you have made. Then you can copy two holes at once and then four holes at once instead of one at a time.

Before we start the sign, Double-click on the post layer and add a stroke – change the color to black and the size to 1.

The Sign

You can make any sign you want, but I'm going to do a stop sign.

Make a new layer and name it sign.

Grab the Polygon tool (it will be under the Square tool). Change the Sides: to 8. Draw out your sign.

Right-click and select Make Selection… fill the shape with a red color.

Fix the crooked sign – ctrl + t rotate the sign and move it into place. Hit enter to exit free transform.

Next, we will add a stroke around the sign. Double-click on the sign layer select Stroke and change the Size to 1 and the Color to Black

Grab the Burn tool change the brush to a 65px soft brush and do a little burning around the edges of the sign.

Create a new layer. The sign should still be selected – if not ctrl + click on the little image beside the sign layer – fill the layer new layer with white.

Go to Select->Modify->Contract… put in 5 and click OK and then hit the delete key.

STOP

Finally, the text.

Grab the Text tool (shortcut 't') – change the options to Arial Black at 48pt and use a white color. Type out the word STOP.

Add a stroke layer style to the text – use a black color and a size of 1

We are done – you can do a little burning to the top of the post if you want.
Not bad for only a few minutes of work…

You'll need a good texture to use for this. Here is the image I will be using – go ahead and save it to your computer if you want I own the image so feel free to you use it for anything you want. It's a pretty simple image. Just a picture of a wooden fence in my backyard. I find that worn wood works pretty well as a texture for creating distressed type. Anyway, grab the image or use one of your own – once we get started you'll realize what type of texture image you need to make this work well.

Edit the Texture Image

We will start off by opening up the texture image in Photoshop and hit ctrl + shift + u to Desaturate the image. OK, that's it for the moment, but we will be coming back to this image in a few.

Setup

Let's open a new file in Photoshop. File->New… The size doesn't really matter for this tutorial – I'll make mine 512px X 512px Resolution: 72.

Next, get the Text tool (shortcut 't') set the text size to something big like 62 and type something out..
Now, go ahead and rasterize the type by right-clicking on your text layer and selecting Rasterize Type. Let's bring in the texture.

Distress the Text

Switch back to the texture image we opened in Photoshop earlier.

Grab the Magic Wand Tool (shortcut 'w') so we can select part of the texture image.
This can take a couple of tries to get a good selection. The idea is to get plenty selected but we want to keep some empty(or unselected) spaces as well. Example image:

With the Move Tool drag the selection we just created into our file with the text.

Next, ctrl + left-click on the little image in the Layer 1 layer. This should select our texture.

Now, hit ctrl + shift + i to inverse the selection.

Click on the layer with our text to make it active and hit delete on your keyboard.

ctrl + d to deselect everything.

Finally, click the little eye next to Layer 1 to turn it off, and you'll see your finished product.

Note: you made need to move the texture around before hitting the delete key. Make sure that none of the letters in your text show through the texture image too much. The white area is what will get deleted from the text itself.

results:

Not the conventional use but it looks good:

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