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!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.