Create a grungy background using patterns: Part 2

I’ve been asked to do a tutorial on how to do my end result for the previous tutorial, so the end of the week article will be a continuation of the pattern tutorial. There is a lot of different ways you can play with this to make it grungy and dirty, this tutorial shows you what I did.

If you haven’t done the first half of this tutorial, check it out!

pattern2_01

Step 1

Color is key to creating a mood. So this is the first thing we are going to add. The original tutorial was a basic gray, so there was no color to warm or cool the image.

For my image, decided to give it more of a warm feel. To do this create a new layer and make it your very top layer. Grab a yellow color and fill the entire document. Now we are going to change the blending mode, you can play around with them. There are a lot that work well, but for mine I used multiply with an opacity of 9%.

Create a grungy background using patterns

Step 2

The next thing I did was to make my logo pop. This can change a lot depending on what you used for a logo/text/image. I think it’s probably good to give it a shadow, if you want it to have some kind of a 3D look to it. What I did was split up my logo into 3 different layers for each color. Then I gave layer styles to each color, as you can see below.

Dark Gray:

Create a grungy background using patterns

Light Gray:

Create a grungy background using patterns

Red:

Create a grungy background using patterns

And this is what it comes out as:

Create a grungy background using patterns

Step 3

I then used one of the negative textures from Zen Textures (The one I used is on the far right of that page).

Since these are negatives, I usually do an inverse (control + I), then fit it into your document (control + t to transform and rotate the texture). Change the layer mode to multiply and move the layer so it is just above the pattern layer.

Create a grungy background using patterns

Step 4

Now that looks good, but we can go a step further by adding some texture to the logo.

I am going to pull in that texture into the document again, so that it is the original size. Then get the inverse with control + I and change the blend mode to multiply. Now move it around the texture until you find an interesting texture over logo/text/image. If you don’t like anything in the texture, you can go and grab another one with a more interesting texture.

Create a grungy background using patterns

Step 5

We want to get rid of the excess texture, so go to your square layer and control + click to load the square. Then do control + shift + I to get the inverse selection, then delete.

Create a grungy background using patterns

Step 6

Create a new layer just below the logo texture, and load the square layer again, and then click on the gradient tool, make sure black is your foreground color. Click on the black to 0% opacity option. Click and drag a gradient from the bottom right corner to the top left, togive the logo a shadow. Play around until you get something you like.

Create a grungy background using patterns

Final

Here is the final outcome for both the patterns. The carbon fiber effect uses the same steps, but with its the carbon fiber pattern.

With the carbon fiber pattern:

Create a grungy background using patterns

With the metal pattern:

Create a grungy background using patterns




You might also like these articles...



Only comments in English will be approved!

42 Comments

  1. Zac
    01/04/2009

    This was very helpful. Learning how to use the texture will be huge. Thank you.

  2. 02/04/2009

    Awesome, thanks for following up the last tutorial. Thanks for the tips.

  3. Smoq
    02/04/2009

    great tutorial, thanks!

  4. 03/04/2009
  5. 04/04/2009

    Great site this http://www.denisdesigns.com and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

  6. […] Create a grungy background using patterns: Part 2 […]

  7. Player69
    08/04/2009

    Thanks for the Tut!!
    I’ve made one for myself with a few adjustments!
    http://alignwebdesign.nl/images/Playerz69.jpg

  8. 10/04/2009

    nice site this http://www.denisdesigns.com excellent to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

  9. 10/04/2009

    Great! I’m glad you like it

  10. […] Want to know how I got that grunge effect? Check out part two of the tutorial. […]

  11. 13/04/2009

    Love the metal pattern. It looks really cool. The overall effect is really cool, sleek and grungy. Awesome tutorial, thanks for posting this!

  12. 16/04/2009

    brill site this http://www.denisdesigns.com terrific to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

  13. […] Want to know how I got that grunge effect? Check out part two of the tutorial. […]

  14. 21/04/2009

    Simply great outcome
    Thanks

  15. Thanks Denis, Great tutorial

  16. Arve
    25/04/2009

    Hi, this one is indeed nice tut :)

    Btw,
    I made it to the step one but totally lost on step two.

    Can this tutorial be applied to object or text? Because I made it on square and it looks like a mess :D

    When you say ‘split up my logo into 3 different layers for each color’
    Does it mean duplicate the layer and apply the style or make a new blank layer and apply the style? What do you do after that? Merge it?

    How is the layer arranged (Dark>Light>Red? or merged?)

    What is the layer type, opacity or fill? Is it default?

    Sorry for the long question, thanks before & after!

  17. 25/04/2009

    @Arve

    You can apply this to text but I would still add the gray box around it.

    When I said that I split up the logo, I used the magic wand and clicked on each color and did control + J to duplicate it to a new layer. Then I added the layer styles shown above to each one. After I put them into a folder, I didn’t merge them.

    The layer type on the logo parts is set at normal, 100% opacity.

  18. Mike
    26/04/2009
  19. Del
    27/04/2009

    waste of my time

  20. Thanks for this, Featured in Tutorial King

  21. 05/05/2009

    A good tutorial, although I think sometimes you missed to explain everything and went on to fast.

    My final result was okeyy :p

  22. 11/05/2009

    Nice tutorial with a beautiful example – thanks!

  23. 30/05/2009

    very nice tutorials, going……..

  24. 01/06/2009

    Very nice tutorial and logo =)

  25. Gyurka
    05/06/2009

    Nice effect

  26. 22/06/2009

    bravooooo

  27. Saigee
    26/06/2009

    excellnt keep up the good work!!

  28. Wulf
    10/07/2009

    Great stuff! Really easy to follow, and it taught me a lot about how to achieve some really nice-looking effects. Thanks very much for posting this tutorial!

  29. 09/11/2009

    Thanks, Great tutorial

  30. Will
    29/12/2009

    when I press ctrl + I to inverse, it turns into a darker blue color. And when I do the multiply,it changes to even darker blue with the metal pattern. Please help me. Also give me the exact link for your zen texture.

  31. 30/12/2009

    Will:
    Make sure you have selected the texture layer first and then do Ctrl+I. It should still be black and white, just opposite. Here is the link to the right texture: http://www.unsigneddesign.com/film/3.jpg

  32. Will
    13/01/2010

    Thank you Tyler =)

  33. 05/12/2010

    exelente tutorial muchas gracias x el aporte…

  34. 29/08/2011

    Muy bueno el tutorial, gracias, éste fue mi resultado :)

    “Very good tutorial, thanks, this was my result:)”

    http://pruebajoomladh.net63.net/dinhouse.jpg

  35. 24/10/2011

    Super tutorial! The result is really great.

  36. 26/10/2011

    It’s arduous to search out knowledgeable people on this topic, however you sound like you realize what you’re talking about! Thanks! I’ll surely come back and check for updates! Tschau

  37. Useful information. Lucky me I found your website unintentionally, and I am surprised why this twist of fate didn’t took place earlier! I bookmarked it.

  38. Excellent Tutorial. Thank you for this one! :-)

  39. Generally I do not learn article on blogs, however I would like to say that this write-up very compelled me to check out and do it! Your writing taste has been amazed me. Thanks, quite great article.

  40. 18/12/2011

    Definitely worth the 3 hours I spent trying to figure it out… final product was a sick background for my website.
    http://www.lazersaur.com
    Writing could have been a lot better… there was a lot missing from the instructions. Thank you for sharing!!