Smashing Magazine - we smash you with the information that will make your life easier. really.

40 Beautiful Grunge Photoshop Tutorials

Advertisement

By Jacob Gube

Grunge is a popular trend that gives designs a more organic and realistic look. It also provides a stark contrast to the simplistic, polished and rigid Web 2.0 trend, opting instead for a less uniform and more elaborate form of design.

We’ve discussed grunge style in modern Web design before, as well as tips and tricks to achieve the grunge look. Now, it’s time to put theory into practice by finding ways to infuse grunge themes into your artwork using Photoshop. In this collection, we present to you 40 excellent, high-quality grunge Photoshop tutorials. So fire up Photoshop and get ready to get your hands… dirty!

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

Beautiful Grunge Photoshop Tutorials

Antique Ace of Spades
This tutorial shows you how to create an old, stained playing card by using Blending modes.

19 Old Card in 40 Beautiful Grunge Photoshop Tutorials

Creating an Old-Collage-Effect Poster
Create a textured, old-school collage poster by following this excellent Photoshop tutorial.

10 Old-school Collage Poster in 40 Beautiful Grunge Photoshop Tutorials

Quick Grungy Poster
Learn how to create a grungy poster by using smart filters and a few image adjustments.

11 Quick Grunge Poster in 40 Beautiful Grunge Photoshop Tutorials

Creating a Stunning Old-World Look in Photoshop
In this Photoshop tutorial, you’ll learn how to create an old-world look using stock vectors imported into Photoshop.

13 Old World Map in 40 Beautiful Grunge Photoshop Tutorials

Design a Unique Grungy Website Layout Tutorial
This tutorial will teach you how to design a cool grungy website layout. As well as walking you through the various Photoshop techniques it outlines general design principles and provides pointers for your own grunge designs.

Fand in 40 Beautiful Grunge Photoshop Tutorials

Dark Grunge Photo Effect
In this Photoshop tutorial, you’ll see how to “grunge up” a photo using a variety of filters and photo adjustments.

01 Dark Grunge Photo Effect in 40 Beautiful Grunge Photoshop Tutorials

Creating Grunge Brushes
In this step-by-step tutorial, you’ll learn how to create your own custom Photoshop brush that you can use to add grunge accents to your images.

27 Create Grunge Brushes in 40 Beautiful Grunge Photoshop Tutorials

Crazy Movie Poster
Recreate the “Pirates of the Caribbean” movie poster using your own images in this tutorial.

38 Grungy Pirates in 40 Beautiful Grunge Photoshop Tutorials

Creating “Smokey Dancer”
This tutorial involves isolating the subject using the Lasso tool, some image adjustments and texturing effects.

02 Smoky Dancer in 40 Beautiful Grunge Photoshop Tutorials

Design a Grungy Floating Island
This tutorial by PSDFAN creates a grungy floating island by using a few Blending modes.

12 Grungy Floating Islans in 40 Beautiful Grunge Photoshop Tutorials

Distressed Effects in Photoshop
Explore different techniques in Photoshop that give your artwork some wear and tear.

03 Distressed Effects In Photoshop in 40 Beautiful Grunge Photoshop Tutorials

Grunge Vector Layout
Combine grunge with another popular design trend (vector illustration) to create this stunning layout.

04 Grunge Vector in 40 Beautiful Grunge Photoshop Tutorials

Photoshop Expertise
This tutorial shares a method for giving your artwork some texture and depth.

05 Photoshop Expertise in 40 Beautiful Grunge Photoshop Tutorials

Filter-Free Art in Photoshop
Create a beautiful, grungy photo montage using only the Layer palette in Photoshop.

06 Filter Free Art in 40 Beautiful Grunge Photoshop Tutorials

Photo Transfer Edge Effect
Apply a distressed border onto existing images by following this brilliant Photoshop tutorial.

07 Photo Edge Transfer Effect in 40 Beautiful Grunge Photoshop Tutorials

Creating an Urban-Style Piece of Artwork
Create this organic and edgy artwork by using some stock photos and some crafty filters.

08 Urban Style Artwork in 40 Beautiful Grunge Photoshop Tutorials

Artistic One-Eyed TV Man in a Grunge Vector Design
In this Photoshop tutorial, you’ll learn how to create a grunge-style wallpaper using stock textures and a couple of custom shapes to add some accents to the artwork.

09 One Eye Man in 40 Beautiful Grunge Photoshop Tutorials

Urban City Scene on Grunge Background
Create an urban city scene set on a grungy, distressed background.

15 Urban Grungy Background in 40 Beautiful Grunge Photoshop Tutorials

Design an Old-Style Safari Map
This tutorial uses some basic Photoshop techniques to create a textured, old-style safari map.

16 Old World Map in 40 Beautiful Grunge Photoshop Tutorials

Dramatic Gritty Effect
Add some grit to an image by following this excellent grunge Photoshop tutorial.

17 Gritty Effect in 40 Beautiful Grunge Photoshop Tutorials

Create an Impressive Mock-up of a Grunge Box
Learn how to build a realistic worn-and-torn crate using the Vantage Point Photoshop filter as well as a few other Photoshop techniques.

18 Grungy Box in 40 Beautiful Grunge Photoshop Tutorials

Creating Old Paper with Custom Brushes
Learn how to create a custom brush using folded paper to give your artwork distressed accents.

20 Old Paper in 40 Beautiful Grunge Photoshop Tutorials

Add Stock Textures to Images
Learn how to add a bit of grunge to your artwork by using stock textures.

14 Stock Textures in 40 Beautiful Grunge Photoshop Tutorials

Burnt Parchment in Photoshop
Give your borders a scorched, uneven look by following this Photoshop tutorial.

21 Burnt Parchment in 40 Beautiful Grunge Photoshop Tutorials

Easy Photo Grunge Effect
Give photos a simple grunge effect by adjusting Layer styles and using some filters.

22 Easy Photo Grunge in 40 Beautiful Grunge Photoshop Tutorials

Grunge Portrait
This Photoshop tutorial uses some basic Photoshop techniques to create a grungy portrait.

23 Grunge Portrait in 40 Beautiful Grunge Photoshop Tutorials

Daguerre Effect
Learn how to achieve the Daguerreotype look using this Photoshop tutorial.

24 Daguerre Photo Effect in 40 Beautiful Grunge Photoshop Tutorials

Designing a Typographic Concept Poster
In this Photoshop tutorial, you’ll learn how to create a grungy, aged poster design.

25 Typographic Poster in 40 Beautiful Grunge Photoshop Tutorials

Pencil It In
This tutorial shows you how to create a hand-drawn look that uses scanned images.

26 Pencil It In in 40 Beautiful Grunge Photoshop Tutorials

Grunge-style layer tutorial
This tutorial uses Layer styles to achieve a gritty grunge look.

28 Grunge Layer Style in 40 Beautiful Grunge Photoshop Tutorials

Grunge and Textured Art Tutorial
Use this Photoshop tutorial to add a grunge effect to your photographs.

29 Post Process in 40 Beautiful Grunge Photoshop Tutorials

Create an Awesome Illustration Using Custom Brushes
In this tutorial, you’ll find out how to use custom brushes to create a textured black and white illustration.

30 Illustration Custom Brush in 40 Beautiful Grunge Photoshop Tutorials

Hero Header Part II
Learn how to create a grunge element using Photoshop filters and a stock image.

31 Hero Header Part 2 in 40 Beautiful Grunge Photoshop Tutorials

Create a Fantastic Decaying Metal Sign
Using a variety of filters (five of them to be exact), you can create a rusting metal sign.

32 Decaying Metal Sign in 40 Beautiful Grunge Photoshop Tutorials

Create a Cool Music Logo on a Grunge Background
Add a bit of grunge to your brand by using a variety of Photoshop techniques and using a free high-resolution brush set.

33 Grunge Logo in 40 Beautiful Grunge Photoshop Tutorials

Design a Cartoon Grunge Website Layout
Mix cartoons with the grunge design trend to create a unique website layout.

34 Cartoon Grunge Layout in 40 Beautiful Grunge Photoshop Tutorials

The Dark Knight Grunge Wallpaper
This step-by-step Photoshop tutorial walks you through the creation of a Dark Knight-inspired wallpaper.

35 Dark Knight in 40 Beautiful Grunge Photoshop Tutorials

Building Textures from Scanned Art
This tutorial uses stock photos and a watercolor-washed scanned image to achieve an abstract, paint-splattered design.

36 Scanned Art in 40 Beautiful Grunge Photoshop Tutorials

Making a Grungy Business Card
Make your business card stand out by giving it some texture with the help of this Photoshop tutorial.

37 Grungy Business Card in 40 Beautiful Grunge Photoshop Tutorials

Ultimate Grunge Design Tutorial
This tutorial walks you through the creation of a grunge website layout that has rough edges and a distressed background texture.

40 Ultimate Grunge Website in 40 Beautiful Grunge Photoshop Tutorials

How to Create a Grunge Web Design in Photoshop
Witness the steps involved in creating a beautiful grunge-themed website design in this brilliant Photoshop tutorial by PSDTUTS.

41 Grunge Web Design in 40 Beautiful Grunge Photoshop Tutorials

Want to find more Photoshop tutorials?

This is the fourth part of the “Beautiful Photoshop Tutorials” series by Jacob Gube. If you enjoyed this article, you may also want to consider:

  1. Part 1: 30 Beautiful Photoshop Text Effect Tutorials (on Six Revisions)
  2. Part 2: 30 Beautiful Photoshop Illustration Tutorials (on Six Revisions)
  3. Part 3: 35 Beautiful Vintage and Retro Photoshop Tutorials

(al)

Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    edsonworks
    October 28th, 2008 4:39 pm

    brilliant concept and designs, congrats to all designer who made all of this cool Grunge Style design. I’m inspired in your designs. keep it up and thank you I learn a lot. :)

  2. 2
    Steven Snell
    October 28th, 2008 4:42 pm

    Nice collection Jacob.

  3. 3
    archknight79
    October 28th, 2008 4:49 pm

    Cool! Keep it going! Nice one dude :D

  4. 4
    theglue
    October 28th, 2008 4:53 pm

    This is great! Really awesome! :)

  5. 5
    Arthur Brown
    October 28th, 2008 4:59 pm

    This is truly a great collection of grunge tutorials and examples. Way t go as always.

  6. 6
    ellidrew
    October 28th, 2008 5:14 pm

    I get so much from your tutorials!
    Thanks for collecting them and making them readily available.

  7. 7
    adam foster
    October 28th, 2008 5:31 pm

    awesome used the PSDTuts before. Another cool post guys =]

    Adam

  8. 8
    Tom Ross
    October 28th, 2008 6:20 pm

    Wow, I’m honestly stunned that 6 of the 40 are mine! Thanks so much for the feature, and the other tutorials in the list will make great reading for me this week :).

  9. 9
    Paulo
    October 28th, 2008 7:21 pm

    Again the same? Come on

  10. 10
    Curt Simon Harlinghausen
    October 28th, 2008 7:43 pm

    I like it. Especially the moke ups and the
    Quick Grungy Poster. Simple, but great.

    Stay tuned for more happy days.

  11. 11
    Nirvana
    October 28th, 2008 8:09 pm

    check out .. for another Grunge-Vintage variation .

    Try not to Copy :)

  12. 12
    Alvaro
    October 28th, 2008 9:29 pm

    Great to see two of my tuts in the list! thanks… :D

  13. 13
    Tschai
    October 28th, 2008 9:52 pm

    Great tuts indeed….

    PS: It’s getting annoying to see so many lazy people with a FaceYourManga-avatar ;)

  14. 14
    Muhammad Ahmad
    October 28th, 2008 9:54 pm

    awesome job

  15. 15
    Celina Gomes
    October 28th, 2008 10:47 pm

    Amazing! It will really help to improve the photoshop knowledge as each tutorial has a detail study of working. Thanks for sharing

  16. 16
    Naldz Graphics
    October 28th, 2008 10:48 pm

    Nice post.thanks for the include:)

    Ronald

  17. 17
    FBrushes.com
    October 28th, 2008 11:42 pm

    I love grunge design. Nice post though. Love them all!

  18. 18
    laurence from france
    October 29th, 2008 12:08 am

    superbe ! merci

  19. 19
    gNcWebmaster
    October 29th, 2008 3:14 am

    Wayy it’s awesome collection. Thanks

  20. 20
    Jim Fitzsimmons
    October 29th, 2008 4:38 am

    Wow. These are fantastic!!

  21. 21
    Justine
    October 29th, 2008 7:19 am

    I’ve got enough this grungy or retro stuff, web is full of this! Does anyone design something else?

  22. 22
    HERO
    October 29th, 2008 8:06 am

    Great roundup! You guys always do such a fantastic job. Thanks so much for including pshero.com in your list! I’m flattered to be counted in such distinguished company!

  23. 23
    Simon Day
    October 29th, 2008 8:48 am

    Grunge has a place in design no matter how much people may hate it. I would never expect to see the BBC homepage in grunge but for a designers homepage I say why not?

    I beleive there is a lot of skill involved in creating a truly creative grunge look and while there are a number of poorly designed sites where you cannot find the naviagtion for all the tea in china there are some true masterpieces out there. Grunge is one of the few designs left that can still make me go “wow” when I see a masterpiece.

  24. 24
    crypta
    October 29th, 2008 9:53 am

    beautiful!!!

  25. 25
    ashvin
    October 29th, 2008 9:56 am

    wonderful tuts collection! Thanx

  26. 26
    Shawn
    October 29th, 2008 11:21 am

    Flipping brilliant ;-) Keep it up guys!

  27. 27
    bangbouh stock
    October 29th, 2008 11:55 am

    good resource. thanks!

  28. 28
    Tyler Bramer
    October 29th, 2008 1:17 pm

    Thanks for featuring my Realistic Burnt Parchment tutorial! A lot of these tutorials and works look great, I’ve read a large amount of them before this and they are simply wonderful.

  29. 29
    Fabryz
    October 29th, 2008 2:42 pm

    Tagging for future inspirations =D

  30. 30
    jbcarey
    October 29th, 2008 3:00 pm

    stop it…. I can’t keep up as it is!

  31. 31
    jg
    October 29th, 2008 10:21 pm

    Awesome collection. Can’t wait to try some of these out. Thanks again Smashing. :)

  32. 32
    Alex
    October 30th, 2008 4:12 am

    Oh boy, can’t believe that this trend is surging again. Grunge in webdesign is really soooo hardrockin’ 2002. Let dead dogs lie.

  33. 33
    dMullins
    October 30th, 2008 10:08 am

    Lol, grunge.

  34. 34
    irka
    October 31st, 2008 5:25 am

    i love you, smashing mag!

  35. 35
    tsauri28
    November 2nd, 2008 2:16 am

    waw… thank’s. the article is very useable for me..

  36. 36
    anton
    December 23rd, 2008 1:40 pm

    wow

  37. 37
    kamlesh khatri
    March 25th, 2009 9:24 pm

    great collection, thanks for sharing it.

  38. 38
    Tom
    March 26th, 2009 8:00 am

    I noticed that the link for ” Artistic One-Eyed TV Man in a Grunge Vector” is incorrect. It’s at naldzgraphics.net not naldzgraphics.com. Thanks for the great collection!

  39. 39
    Erick Werther
    June 18th, 2009 8:15 pm

    WOW!!!!!!!! THIS SITE IS AWESOME!!!!!!!

    Thanks a lot for the tutos and designs!!!! =D

  40. 40
    carlos gutierrez
    August 3rd, 2009 10:01 pm

    this link is not working, please fix it!!!
    http://naldzgraphics.com/tutorials/create-an-artistic-one-eye-tv-man-in-a-grunge-vector-design/

  41. 41
    sivakumar
    November 2nd, 2009 1:53 am

    The photo edge effect is very pretty

  42. 42
    H.Aldiva.f
    December 29th, 2009 6:12 am

    it;s so amazing we can now about what potoshop is….??? by :Avatarna Istie

  43. 43
    KC
    January 25th, 2010 12:18 am

    Dramatic Gritty Effect is too much nice

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job