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.
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.
Digital Art
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 design a band website layout in Photoshop
Step by step on how to make a band website, using a handful of freebies as well.
Grungy, translucent web portfolio design
Make this design using several popular design styles.
Wooden grunge portfolio web layout
A beginner-level tutorial that shows you how to make a portfolio with a fixed wooden background.
Grunge personal portfolio
Personal portfolio design that with some modifications easily can be used for other purposes as well.
Making a grungy business card
Setting up a vertical grungy business card design.
Realistic grunge peeling sticker
Learn to create this cool sticker and learn some new basic to intermediate techniques.
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.
Making a worn vintage beach ad
Learn to make your own vintage ad with techniques that everyone can learn from.
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.
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.
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!
