Grunge In Design: Examples, Tutorials and Resources

Grunge In Design: Examples, Tutorials and Resources

In this article we’re going to have a closer look at the use of grunge style in design by showing you some examples. We’re also going to share links with you to some resources and tutorials that you can use when you want to make a grungy design of your own.

Grunge In Design: Examples, Tutorials and Resources


So what is grunge? This look and style has been quite popular for some years now and it doesn’t seem to be disappearing anytime soon. A grungy design is easily recognizable. Grungy means “dirty”. When you have a grunge style design you often have a worn or stained look that also can look worn out, old or rusty.

Grunge can be a stained paper that looks like you’ve left your coffee cup on it, or a texture that looks like an old rusted type of metal. Cut paper is also popular along with scratches and torn edges. This is a style that is popular amongst younger generations of bold creatives and it stands out as the opposite of the highly polished web 2.0 look. Grungy often means irregular shapes and many times it can be seen as dirty and not necessarily good looking if you see the elements alone. Textures in some form are usually present – from wood to metallic surfaces, fabric and paper.

It’s often a great style to let your creativity flow without a set of rules that need to be followed. But don’t be fooled into thinking that grungy always means dirty, busy or “in-your-face”. This can also be used in a very subtle way as well, making the style very versatile.

Let’s have a closer look at some grungy designs in use!

Web Design Examples

Grunge in Web Design can mean a lot of different things. It can be subtle or very visual. Here are some examples of websites using a grunge style design.

Notorious Design
Notorious Design

Web-gab
Web-gab

Matt Brett
Matt Brett

Interlink Conference
Interlink Conference

Peter Granfors
Peter Granfors

Fijo Jose
Fijo Jose

Bristol Archive Records
Bristol Archive Records

Helmy Bern
Helmy Bern

Shawn Johnston
Shawn Johnston

Nemesis Design
Nemesis Design

Digital Art

Grunge portrait
Grunge portrait

Grunge pin-up
Grunge pin-up

Grunge Faced
Grunge Faced

Jake Sully
Jake Sully

Twice closed
Twice closed

Grunge Wallpaper
Grunge Wallpaper

Big Ben attacked by grunge
Big Ben attacked by grunge

Words of rain II
Words of rain II

Tutorials

Want to try out grunge style designs on your own? Here are some tutorials that will help you get the practice you need. Good luck!

How to create a grunge web design using Photoshop
Learn how to create this eye-grabbing grunge themed layout in Photoshop. There’s also a part two for those that would like to learn how to code it.

How to create a grunge web design using Photoshop

How to design a band website layout in Photoshop
Step by step on how to make a band website, using a handful of freebies as well.

How to design a band website layout in Photoshop

Grungy, translucent web portfolio design
Make this design using several popular design styles.

Grungy, translucent web portfolio design

Wooden grunge portfolio web layout
A beginner-level tutorial that shows you how to make a portfolio with a fixed wooden background.

Wooden grunge portfolio web layout

Grunge personal portfolio
Personal portfolio design that with some modifications easily can be used for other purposes as well.

Grunge personal portfolio

Making a grungy business card
Setting up a vertical grungy business card design.

Making a grungy business card

Realistic grunge peeling sticker
Learn to create this cool sticker and learn some new basic to intermediate techniques.

Realistic grunge peeling sticker

Grunge style illustration with stains
Learn to create this eye-catching result through applying several filters, using stain brushes and textures. Video tutorial also available.

Grunge style illustration with stains

Making a worn vintage beach ad
Learn to make your own vintage ad with techniques that everyone can learn from.

Making a worn vintage beach ad

Resources

If you want to make your own grunge-style designs, you’ll quickly see that it’s crucial to have access to proper fonts, textures and brushes. It’s not hard to quickly find many of each out there, but we’ve decided to help you out a bit by collecting some of each to get you started.

Textures

Depending on what type of design you want, you may be looking for anything from metal to wood or fabric textures. Here are a few picks from deviantart. Have a look at more here. Remember that you can make your own textures as well, either from scratch using some fantasy and skills in Photoshop, – or by taking pictures of what you find around you.

Texture 13
Texture 13

Concrete basement wall
Concrete basement wall

Texture 8
Texture 8

White crumbled paper
White crumbled paper

Merlin
Merlin

Texture 006
Texture006

Metal texture 4
Metal texture 4

Unwanted texture
Unwanted

Murder scene IV
Murder scene IV

Canvas 01
Canvas 01

Canvas Texture 03
Canvas Texture 03

Texture 69
Texture 69

Polaroid scratches
Polaroid scratches

Texture stock 160
Texture stock 160

Wood texture stock
Wood texture stock

Dirty paper
Dirty paper

Ancient wall
Ancient wall

T3
T3

Old wooden planks
Old wooden planks

Worn Wood
Worn Wood

Fonts

We’ve also put together some fonts that we’ve found. Remember to always check copyright/usage terms before using them in any public projects.

The Maple Origins
The Maple Origins

Bleeding cowboys
Bleeding cowboys

28 days later
28 days later

Loserboi
Loserboi

Faith collapsing
Faith collapsing

NeoPrint M319
NeoPrint M319

Turbo ripped
Turbo ripped

Trashed
Trashed

Sidewalk
Sidewalk

Seriffic grunge
Seriffic grunge

Acid label
Acid label

We hope you’ll find all of these resources useful. If you want to have a look at some brushes as well, check out the grunge brushes over at deviantart here.

Let us know what you think!

Finally we’d love to hear your opinions on the grunge style. Do you have any of your own work to share or have you seen a cool website with resources? Let us know!

Hilde is a Norwegian girl with a great passion for everything related to design, freelancing, PhotoShop, photography, Illustrator and more. Running her own website and work with mainly Graphic Design and Business Consulting besides article writing.

Comments

  1. Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we’re unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs. The reality is different, and Web is definitely not an exception here.

  2. / Reply

    Awesome collection. Grunge style still looks awesome, even if designers say that it is outdated nowadays. Thank’s for sharing.

  3. / Reply

    What a wonderful list, thanks for sharing..

  4. / Reply

    I’ve always loved grunge inspired websites and illustrations, and agree with Paginas, the days of the gradients and glossy buttons are outdated, and there are new styles and techniques to keep your websites looking current. The grunge technique can be applied to many different styles of website, and I think some people mistakenly see the grunge style as unprofessional and messy. If used in the right way it can add great depth to your design. I do sometimes struggle with getting a good balance when using grunge effects and they can sometimes look slightly over the top, but the tutorials and example websites provide great inspiration.

  5. / Reply

    There are some absolutely brilliant designs for a really interesting selection of communities. I especially love the ‘Grunge pin-up’ it gave me a giggle at the amount of people out there who love design! The design is pretty cool too! More of these smaller interesting examples would be great, we have all already seen ‘Dribble’ and ‘Last FM’ and a few others before now and already appreciate their designs.

  6. / Reply

    Nice post. I have used a conversation (interview) kinda style for my blog. Please tell how is the idea, how is it and what improvements does in need.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals