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]
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.
Learn how to create a great looking grunge web design from this really detailed and well written tutorial.
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.
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.
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.
This tutorial will show you how to create a grunge layout for a photographer. This layout can be used also for a portfolio 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.
Learn how to add a worn look that works well with cartoon-style graphics.
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.
This tutorial will show you one more time how powerful are stock images and textures.
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.
This tutorial will show you how to create a complete grunge home page design.
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.
How to make a unique desktop style layer, using common work desk objects.
If you want to start working as a freelancer i suggest you to create an eye catching layout to start properly in your business.
Great looking portfolio style design with a rough look.
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.
A simple and professional design studio layout.
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.
In this tutorial, you’ll learn how to create a textured “worn paper” web design theme using some basic Photoshop techniques.
This tutorial will show you how to create an amazing layout using a simple texture, and some layer styles.
In this tutorial, I will you show you my own technique for creating this type of background.
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.
This tutorial covers the key areas to focus on when creating a Web site design.
A tutorial on artistic web design depicting a “Magic Night” concept.
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.
This is a great article by spyrestudios covering grunge in design and it is filled with inspiration.
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.
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.
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.
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.
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 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.