Creating a Grungy Distressed Banner - Photoshop Tutorial

Hey

Its been a while since I've done a Photoshop tutorial so I thought I would do this quick one just for a bit for fun. Anyway there are a lot of banner ads out there in the wild and you may want yours to stand out and be prominent on yours any ones site. The look and feel I have gone for is a distressed and grungy feel. You don't need anything in particular but a couple of option extras may help. Anyway, if you want to see the full size super duper detailed version just click any of the images to enlarge. You can get the source pack here.

Ok first off you need to create your canvas. I've picked for 160 x 600 pixels, this is a "standard" size for banner, you can go for any one you want.

Creating a Grungy Distressed Banner
What I have done here is added a grunge look and feel image for the background. It is availble in the source pack located here. Basically what this image is a grunge effect applied with brushes with some added text effects. If you want to have some grunge effect brushes you can get some of the best here or here. They are done by Graphic Xtras and are some of the best ones around. They are priced at $10 and you cannot go wrong. There is about 200 included in each pack. If you want to see the brushes click the "product page" at the bottom.

Creating a Grungy Distressed Banner
This is where the distressed looks comes into play. Also included in the pack are some vector images that my mate found for me. I think they are from Arsenal, after a bit of research. The plan is to remove some of the colour so they appear faint and eerie. If you get the source pack they are included in there. To input the image into the page go File > Place or you can copy and paste if you have the file open.

Creating a Grungy Distressed Banner
To remove the black if you press the Screen button it removes the darkest part of the image. Play around with the other options, get an effect you want and like.

Creating a Grungy Distressed BannerIf you notice the middle 2nd image (my favourite) has had all the black removed. I've placed the images on haphazardly, but any effect can work for you.

Creating a Grungy Distressed Banner
One tip, if you want them even fainter so they are just viewable change the opacity, this again makes the image lighter.

Creating a Grungy Distressed Banner
As you can see when diverting your eyes away from the text and towards the image below the added images blend in. Varying the different opacities can make all the difference.

Creating a Grungy Distressed Banner
Of course no banner would be correct if there wasn't some text to guide your visitors on there way. I've chosen a stencil font Google free fonts and pick ones you like. I personally think the stencil fonts matched.

Creating a Grungy Distressed Banner
Since the text is white it does sort of blend in and get a bit lost. I've used the drop shadow to add a shadow to just make the text stand out a little bit more.

Creating a Grungy Distressed Banner
Apart from adding more text and/or images the banner is done. Personally it looks different and think it adds a different effect. Of course this style only matches a certain criteria. There is no need advertising Barbie using this style.

Creating a Grungy Distressed Banner
Hopefully this has helped give you some ideas. You can download the source files here and if you ever get short of brushes check out this. 10,000 for $30. I think if you bought this Photoshop may take a while to load. But with 10,000 brushes you would never need to make your own. For $30 I think its a steal. Thats 0.003 dollars a brush.

Anyway happy Photoshopping.


1 comments:

Tim said...

Very nice tutorial. Thanks