40 Grunge Web Design Tutorials, Resources and Inspiration

September 18, 2016 · 37 comments

by Lars

40 Grunge Web Design Tutorials, Resources and Inspiration

Grunge in design is not new and have been a popular reaction to the clean and harmonic web 2.0 and apple style designs. In particular the grunge style has been used a lot by designers setting up portfolios online to showcase their skills as most people will know that grunge isn’t easy and require creativity and skills with tools like Photoshop. Grunge design is characterized by worn out textured backgrounds, aged and faded graphic elements, broken and uneven edges, inspired by urban and industrial architecture and decay. Photoshop effects makes this easy. To create grunge designs you need to learn the basic skills and have some good materials like textures, images and fonts or pick a ready to use grunge website template. Of course you can also start with a simple and minimalistic theme and add the grunge style yourself. This article gives you both and you have no excuse for not getting started right away.



Create a Wooden Grunge Portfolio Web Layout in Photoshop

In this beginner-level web design tutorial, I’ll show you how to construct a portfolio web layout that has a fixed wooden background with Photoshop. We’ll also use some brushes to accent the design.


How to create an amazing grunge layout

Learn how to create a great looking grunge web design from this really detailed and well written tutorial.


Create a Grungy, Translucent Web Portfolio Design

Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what I call, translucence). The new Envato design has received a lot of kudos for using this effect, and this tutorial will show you how to create a similar effect, while combining it with other popular web trends.

How to Design a Band Website Layout in Photoshop

In this tutorial, you’ll learn step-by-step how to design an awesome band website that any rock and roller would be proud to call their own. The theme is grungy and worn-and-torn and we’ll use a handful of freebies along the way.


Create a grunge wordpress theme with Photoshop


How to Code a Grunge Web Design from Scratch

In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.


Music Band Website


Design A Grungy Website Design In Photoshop


Grunge Photographer Layout

This tutorial will show you how to create a grunge layout for a photographer. This layout can be used also for a portfolio layout.


Grunge-Themed Web Layout

In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop.


Cartoon Grunge Web Site Layout

Learn how to add a worn look that works well with cartoon-style graphics.


Clean Grunge Blog Design

This tutorial will cover the steps of designing the Clean Grunge blog design from scratch. It also discusses the techniques and styles of this kind of web design.


Realistic Website Layout

This tutorial will show you one more time how powerful are stock images and textures.


Sleek and Textured Web Layout

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.


Grunge Web Design

This tutorial will show you how to create a complete grunge home page design.


The Ultimate Grunge Design Tutorial

This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before.


Funky Web Design Layout

Unique Desktop Layout

How to make a unique desktop style layer, using common work desk objects.


Nature Portfolio Layout

If you want to start working as a freelancer i suggest you to create an eye catching layout to start properly in your business.


RocknRolla Blog Design

Great looking portfolio style design with a rough look.


Paper Texture and Grungy Web Design

Tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.


Grunge Vector Layout

This tutorial will show you how to create a vector style layout with a nice grunge effect.


Graphic Design Studio Web Layout

A simple and professional design studio layout.


The Design Lab: PSD Conversion

First they provide you with an excellent tutorial on creating a design lab layout. Then they take it to the next step and give you a step by step directions on how to convert your newly created PSD into a fully functional web design.


Worn Paper Web Layout

In this tutorial, you’ll learn how to create a textured “worn paper” web design theme using some basic Photoshop techniques.


Amazing Textured Layout

This tutorial will show you how to create an amazing layout using a simple texture, and some layer styles.


Create a Nature Inspired Painted Background in Photoshop

In this tutorial, I will you show you my own technique for creating this type of background.


Build a Sleek Portfolio Site from Scratch

With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.


Dark Themed Web Design

This tutorial covers the key areas to focus on when creating a Web site design.


Magic Night Themed Web Design

A tutorial on artistic web design depicting a “Magic Night” concept.


Rock Band Music Layout

This will show you how to create a rock band layout ( music layout )


Inspiration and resources

To get started using the techniques and ideas you have picked from the tuts you will need good materials and further inspiration. This section will help you get started creating your own unique designs.

Grunge In Web Design: Samples And Best Practices

This is a great article by spyrestudios covering grunge in design and it is filled with inspiration.

35+ Really Awesome Free Grunge Fonts with inspirational Showcases

Besides providing a list of some of the best Grunge Fonts available for free this article also showcase some of the fonts and gives examples of how they can be used. This is pure inspiration ans a source of ideas if you’re looking for that as well. As allways check the license carefully for any free font you’re planning to use. Lets get started.

Showcase Of Beautiful Textured Web Designs

Numerous examples of beautiful textured Web designs to inspire you, followed by a small collection of links to help you get started in using textures in your own designs.

20+ Stunning Textures of Decay from stock.xchng

extures are essential building blocks for some types of design and having the right textures at hand may speed up the design process, inspire you and improve the final result. Images of decay can be used in many ways and it is only the creativity and imagination that sets the limits. They are obviously useful for grunge style designs but can also be used to give an authentic and realistic look to other types of creative work. This post showcase more than 20 great looking textures of decay for inspiration and use in your designs.

70+ Awesome Free Textures and Texture Sets

In this article I have selected 40+ great textures on Flickr, all with Creative Commons license. I have also included a stunning list of texture resources that you can’t afford to miss.

30 Beautiful Examples of Grunge in Web Design

In this collection, you’ll find 30 excellent examples of grunge in web design for your inspiration. From portfolios and fashion websites to online stores and church sites – you’ll find a variety of websites that choose to “dirty up” their web design.


Want to keep on surfing? Have look at these Drupal 7 Themes maybe this is what you’re looking for. Also take your time to browse these interesting HTC evo cases that will protect and personalize your cell phone.

{ 18 comments… read them below or add one }

Brett Widmann December 16, 2010 at 6:47 am

These are great tutorials! Thanks for sharing.


Max November 5, 2010 at 11:53 am

Thanx!! I’m created my site in grunge style too :)


MJWEBCREATOR August 11, 2010 at 8:03 am

hi tripwiremagazine! nice collections! i always look for inspiration design like your’s! i will add this site to my website also! thanks!


Lukas - Sydney Web Service July 24, 2010 at 1:12 pm

I was looking for an idea to design a grunge themed website for one of my client. Found this one and bookmarked it! I’m so happy for this collection. So a big thank you from Sydney!!


Yan Ludy May 21, 2010 at 4:12 am

Gives Thanks for this article, I will add together this site to my bookmarks, my roomie just made mention to me about this last week. gracias again


Shane Mayweather April 28, 2010 at 5:58 pm

Wow, your design are all stunning. How did you manage to create those templates, which specific software do you use?


Minisite Design April 16, 2010 at 8:16 pm

thanks for resouce list, also thanks for useful posting, keep writing. btw your blog theme very cool… I like the color 😉


Asim Craft April 10, 2010 at 2:25 am

i really love this article, i had to bookmark this ! as u know my website vectornpixel.com focuses on mostly edgy design styles. im going to add tripwire to my blogroll, love it man, good showcase


tripwire team April 10, 2010 at 10:05 am

@Asim, Thanks for the great feedback – i’ll check your site out soon


Matthew Heidenreich April 5, 2010 at 4:22 am

thanks for adding my tutorials from Six Revisions. You should check out some of my grunge tutorials on my site as well.


Nievo Jan March 30, 2010 at 10:57 am

How do you create design like these? I may just ask.


dilruk March 30, 2010 at 8:46 am

Grunge style! Wow really amazing work!


Albert March 30, 2010 at 8:00 am

The templates are looking really attractive.2nd one is the best among them.Looking very user friendly.


Web Design March 30, 2010 at 7:35 am

It helps to finish our work easily.Excellent tutorial.Keep on posting such a informative posts.


Web Design India March 30, 2010 at 7:34 am

Excellent tutorial.It helps to finish our work easily.Keep on posting such a informative posts.


Chris (web designer in Fredericton) March 29, 2010 at 1:28 pm

Great collection, thanks! I’m always looking for inspiration sides and tripwiremagazine never disappoints.


tripwire team March 29, 2010 at 3:35 pm

@Chris, great feedback. I’m really glad that you find our articles useful.


Robert March 29, 2010 at 1:22 pm

Thks, Make my live more simple, that will help me finish a few projects 😉 …
All the best!


Leave a Reply

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

{ 19 trackbacks }

Previous post:

Next post:

Web Analytics