5 Free Grunge Webdesign Textures

In recent weeks, I started designing my portfolio website at alex.manarpies.com. For this site, I aimed for a neutral, yet “designy” feel and ended up with a grungy blue and brown theme featuring custom typefaces and letter-pressed headings.

I’d like to share the excellent free background textures I used for alex.manarpies.com. It was created by DeviantArt user ‘Princess-of-Shadows and was compiled from scans of actual materials.

Find the original page here.

Vintage Grunge Textures Preview

The image pack features 5 distinct textures with varying degrees of grunginess. You can use them as-is, or bestow some Photoshop wizardry upon them to cook up some custom coloring and effects. I went for the latter approach:

My version of the grunge texture

Here’s how I achieved this effect:

  1. Set the texture layer to black and white.
  2. Set the texture layer’s blend mode to Overlay.
  3. Set the texture layer’s opacity to 70%.
  4. Create a new layer under the texture layer and fill it with a color, perhaps a shade of pale blue.

It may have come to your attention that the textures won’t repeat especially well when used as a background. However, as they are pretty hi-res, you could give the backgrounds a fixed background position. For instance (CSS):

background-color: #d2e0dd;
background-image: url(bg_site_blue.jpg);
background-attachment: fixed;

Grungy background patterns seem to be in vogue lately, and there’s a lot to be had of them on the net – too.
But, please, don’t kill the effect by mere overzealousness. Moderation in everything, my friend.

Have fun with them and report back with your creation :-).


2 thoughts on “5 Free Grunge Webdesign Textures

  1. Two Blue TilesBlue tiles is a texture that was photographed by my and uploaded for your exclusive use. the original images are blue but with the adding of a Hue and Saturation layer in photoshop you can turn it into whatever color you will need. very high quality photographed as a raw file and converted to jpg.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s