CreativeStable

So I get a lot of questions on how I make my banners. Each one is a little different, but Im going to go over some of the techniques I use practically every time.

This is what my final product is going to look like. It will vary depending on what colors and pictures you choose to use, but ultimately the style should come out similarily.

Open photoshop and create a new document (File > New). Make it 600px wide by 200px high. 
Handy Hint: Make this a default size for the future to speed up your workflow. Simply put in the dimensions and hit "Save Preset". Give it a name and hit OK. Now you will have this in your dropdown of presets so you dont have to fill in the thing every time.

Find a picture that you want to use for the banner. For this example I will be using this image: http://www.flickr.com/photos/genewolf/382632838/sizes/o/
Copy the image and paste it onto your photoshop document. Resize (hit ctrl + T and then drag in the corners while holding shift) it so that the subject of the image is shown as much as you want as shown in the next picture. Hit enter to apply the changes.

Grab the smudge tool and crank the strength to 100%.

Smudge the sides of the image so that we are left with no plain background visible. I usually click and then drag to the edge while holding shift. Do not worry what it looks like at this point, although do not smudge the subject (in this case, the horse).
Handy Tip: To quickly make your brush bigger or smaller, use the square bracket keys ( [ and ] )

Next, select the blur tool (hold down your mouse on the smudge tool and it will fly out).|

Set the strength to 100% (just as we did the smudge tool before). Blur everything except the subject. If need be, take the smudge tool again and smudge the outermost areas. The smudge tool is more powerful than the blur tool so you have to be careful with it. I DID use the smudge tool on the edges of this piece.
 

Find a texture to lay over the picture. I am going to use this one: http://www.flickr.com/photos/31124107@N00/541823976/sizes/l/
Copy the picture and paste in your photoshop document. Make sure it is on the top of all of the other layers.
Handy Hint: Right click the grunge layer and select "convert to smart object". This is not necessary, but it makes it so that you can fiddle with the size as much as you want (you can make it smaller, then bigger again and it wont pixelate).

Resize the grunge layer so that it fits on the canvas (like we did with the horse picture in the beginning, but this time make sure it covers the entire canvas). Remember to hold down shift to keep the proportions correct.

Change the blend mode to Linear Dodge (I use all different blend modes depending on the banner. Play around with these to achieve different effects!)

Now, lets add some colors. Make a new gradient layer on top of everything else:

Choose a color gradient or make your own.
Handy Hint: To make your own gradient, select one from the drop down. Then click the gradient itself (not the dropdown beside it). This will bring up the gradient editing box. The sliders on the top are for transparency and the bottom ones are for color.

Hit Ok when you've got a gradient you like. For this tutorial I would suggest darker colors and you will see why next.
Handy hint: The benefit of using gradient layers as opposed to creating a normal layer and painting a gradient on it... is that you can edit it by clicking on the gradient layers thumbnail. Makes it super easy to change things if you need to!

Change the Blend mode to Lighten (this is changed where we selected "linear dodge" before). Again you can try different blend modes to find something you like.

Now, we need to add some text! I use www.dafont.com a lot. I am going to use the font "Windsong" which you can find here: http://www.dafont.com/windsong.font

Select the type tool (the big T) and click on the canvas. Type some text. Change the color to black and then set the blend mode to overlay.

Right click the text layer and select blending options. Click outer glow from the side menu (click the word, not just the checkbox). Change the color to black and the blend mode to overlay. Reduce opacity to 50%. See dialog box below:

Hit ok! Alright, so Im pretty happy with everything... we just need a funky shape!. Select the rounded rectangle tool.

Make sure the settings at the top of the window are as follows (you will have more options, these are just the most important):

Create a rectangle shape around your subject so you have something like this:

Move the shape layer to the very bottom. Delete the plain background layer if there is one. Hold down alt and click between the shape layer and the layer above it. This is what is called a clipping mask. Do this to all the layers above, starting from the bottom. You should have moved all of your layers "into" the shape.

Now, the banner is looking quite good... but we need a border. Right click the shape layer and click "blending options". Click "stroke" on the left hand menu and enter the settings as follows:

Hit ok... voila! but not done yet! We need to save this for web. Go file > save for web & devices. Select png 24 from the 2nd dropdown. Make sure transparency is checked and hit save.

Give it a name and a location and you're done! Dont forget to save your original file as a .psd incase you want to edit it or use it again.