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.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’); echo $filestr;[/exec]

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.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.