Create a Cool Music Logo on a Grunge Background

Apr 6th in Designing by Kyle Pero

I really like the artwork that is used in Pitchfork's Web site, so I decided to recreate something similar in Photoshop and make a tutorial on how I did it. These techniques can be used to make a logo and background for a cool grunge-style Web site.

Author: Kyle Pero

Kyle Pero has worked in the creative fields for many years now. With a background in photography and graphic design he naturally became a Photoshop whiz. Now he works in advertising doing photographic retouching, but also does freelance design and illustration work.

Step 1

Make a new document that is 1500px wide x 1000px high. I decided to make the document extra large for ease to work with so we can see the effects really well. With the Text Tool, set your text in a font that looks similar to the image below. I used the font Blackoak STD. Kern and scale the font as you desire.

Step 2

Load the transparency of the text layer by clicking on the layer's thumbnail while holding Command. Go to Select>Refine Edge. We want to expand the selection and keep it sharp at the same time. To do this, use the settings below. Make a Solid Color Adjustment Layer below the text layer and fill it with a dark gray.

Step 3

While holding Option/Alt, drag the gray layer in the Layer Palette down slightly until you see a thick black line below it. This will duplicate the layer below the original. Grab the Move Tool (V), then hit the down arrow once and the left arrow once. Repeat this step 25 times.

Select all the gray layers and hit Command+E to merge them. Duplicate the merged layer once. Then manually drag the new one down and to the left until it lines up correctly. Merge the two gray layers into one.

image

Step 4

Use the Ellipse Tool whole holding Shift to create a perfect circle. Make sure the Create Paths button is checked on the property bar. Make a Solid Color adjustment layer below the Gray layer and fill it with the same gray. Duplicate the circle layer and change the fill to white. Hit Command+T to use Free Transform. While holding Shift+Option/Alt, scale it down to about 75%. Place it where you see fit.

image

Step 5

Select the Line Tool. Again, make sure that Create Paths is checked on the Property Bar. Set the weight to 60px. While holding Shift, make a line that is angled 45 degrees. With the path you made selected, make a Solid Color Adjustment Layer and fill it with a burnt orange color.

Duplicate that layer and hit (Command+T) and then Right Click and select Flip Horizontal.

image

Step 6

Select the orange line layers and go Layer>Group Layers. With the group selected, hit the Add Layer Mask button and create a mask. Hit it another time to make a vector mask. Select the vector mask from the white circle layer. Hit Command+C to copy. Select the vector mask on the "lines" group then hit Command+V to paste. Hit Command+T and scale down the path slightly so there is a little space between the path and the edge of the gray circle.

Select the transparency of the gray lettering. Go to Select>Transform Selection. Move the selection up and to the right slightly so the distance between the "e" and the selection is the same as the white gap we just created. Select the mask of the orange lines group. Fill the selection with black to mask it out.

Step 7

Create a new Alpha Channel in the Channels Palette. Go to Filter>Render>Clouds. Hit Command+T and scale the clouds up to about 180%. Load the selection of the Channel by holding Command and clicking on its thumbnail. In the Layers Palette, create a new Solid Color adjustment layer just above the background. Make the fill 50% gray (#808080). Blur the cloud mask with a 30px Gaussian Blur.

Just above that layer, create a Gradient Adjustment Layer and set up the gradient to go from transparent from the top-left to white at the bottom-right.

image

Step 8

Just above the clouds layer, make a Curves adjustment layer that looks like the image below. Invert the mask so that the curve is not visible.

Step 9

Now we are going to load some grungy-looking brushes that we can paint the curve back in with. I used the spray paint texture brushes from Spoon Graphics: Free Hi-Res Spraypaint Photoshop Brushes Set Two.

Load the brushes and select the one you want. Click on the Curves Layer Mask, make sure your foreground color is white, and set the Opacity of the brush to 50%. Setup your brush with the following Shape Dynamics in the image below. The Size Jitter and the Angle Jitter are the things that you want at 100 percent.

Step 10

Now just click around a few times until you get an effect that you like.

Step 11

Finally, lets put the color into this thing. Make a Solid Color adjustment layer above the clouds, the curve, and the white gradient. Make the Fill a cyan/blue color. Set the layer's Blending Mode to Color.

Step 12

I know we have added a lot of layers, so below is what my Layer Palette looks like for comparison.

Step 13

Select the gray lettering layer's transparency by holding Command and clicking on its thumbnail. Go to Select>Transform Selection and scale it up 250-350%. You can also offset its position if you want to. Make a Curves adjustment layer just above the color layer and bring up the brightness a little, like the image below.

Step 14

Do the same thing with the orange line layers. On the Curve layer that you made for the orange lines, we are going to fade the edges out. While holding Option/Alt click on the layer's mask. Grab the Gradient Tool (G). Have the Gradient go from a Black to White fade, set the mode to Multiply on the property bar, and make it a Radial Gradient. Drag from the center of the 'X' to the edge. This will make it fade out.

image

Final Image

Now place the 'X' where you see fit, and you're done!


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. xb00t April 6th

    Interesting effects but not a very impressive result.


  2. Ike April 6th

    … I like the background :-)


  3. Aloke Pillai April 6th

    Great Tutorial!

    Thanks


  4. Tim April 6th

    Nice tutorial :) Might have a go!!


  5. jaunzim April 6th

    nice ideas…
    thanks for sharing!


  6. Constantin Potorac April 6th

    Hmmm… Pretty interesting I might say. :D

    Great one. Keep them coming.


  7. Bhargav April 6th

    I cant find “Refine Edge” In CS2.


  8. Terry April 6th

    nice


  9. Wouter April 6th

    Holy sh*t this is so nice tutorial !
    PSDTUTS i love you !


  10. Jakub Švehla April 6th

    There’s the better way to do the gray border around the text. Select the layer with the text and hold down Ctr+Alt+T and then move it 1 px left and down (hit the Down and Left Arrow). Then hit Ctr+Alt+Shift+T for 25 times.
    P.S.: Excuse my bad english, I’m from Czech :)


  11. Jakub Švehla April 6th

    I have forgotten: Between holding Ctr+Alt+T and Ctr+Alt+Shift+T you have to hold down enter :)


  12. Arnaud April 6th

    Nice typo style :)


  13. Enes Kaya April 6th

    Cool, try it out lateron, thanks


  14. Germansn April 6th

    en verdad un muy buen resultado….. lo tendre q probar…. :D


  15. Swany April 6th

    sweet.. the basketball game was getting boring…

    Swany


  16. Nick April 6th

    This is great! I’m bookmarking this!


  17. Andrew D April 6th

    Awesome, great logo


  18. LOSWL April 6th

    Photoshop never fails to surprise me, Great Tut!! :o)


  19. Athens April 6th

    Lumedia? Sounds like a disease XD

    Great tutorial.


  20. 火星蜥蜴 April 6th

    thanx a lot

    it is terrific~


  21. goldenthunder April 6th

    Cool tutorial. Thank you.


  22. Andrew J April 6th

    Nice tut though wouldn’t this be much easier in illustrator?


  23. jiromaiya April 6th

    i like the way u put the cross behind the logo… great work!!


  24. jiromaiya April 6th

    For Step 3, alternatively:-

    I. you could load the text selection by clicking on the thumbnail of the text layer using (OPT/ALT).

    II. Then, create a new layer, and use the Selection Tool (U), and ensure that it is under the ‘New Selection’ mode, so that you can actually nudge the empty selection of the text in the new layer.

    III. Then, nudge it by moving 1 px to the right, and 1 down. After which, fill the selection with the color of your choice (ALT+DEL would fill the selection with the current background color).

    IV. Repeat step (III) as many times as needed to create the same effect as that stated in Step 3 of this tutorial.

    Hope this info is useful to all… =)


  25. Tom April 6th

    I would say, make the logo in illustrator and then bring it to photoshop.
    Where you make your background


  26. Alen April 6th

    Some nice techniques here.


  27. Ali April 6th

    Fireworks would have made it much easier to do this logo. But great I idea on the background and very inspirational, thanks!


  28. binocle April 6th

    cool… except the “copy 25x the layers”… it can be done much more easier, cleaner, faster in illustrator with the 3d tool.


  29. Ben Griffiths April 6th

    Another great tutorial, thanks :D


  30. BogDinamita April 6th

    well, have to say, nothing new


  31. Marian April 6th

    So we probably need AITUTS.com, what? ;)

    Great tutorial


  32. .::... April 6th

    hmm not the best tu on this homepage !

    Its a tut for noobs ! more creativity !!!


  33. Daniel April 6th

    very nice one! congrats!


  34. Mr Kuzio April 6th

    Ma non credi che ci siano troppi livelli?

    There are so many levels…


  35. capowned! April 6th

    I don’t really like thisone. the grunge and the logo style aren’t compatible and the logo itself is too simple. sorry!


  36. Shane April 6th

    Nice tutorial - thanks for posting.


  37. jerry April 6th

    nothing new, sorry :-)


  38. Isaac April 7th

    Hmmm. Like the look - lots of techniques, but they aren’t all in a similar style. Nice tutorial, but the logo would be better in Illustrator and the O with an X in it would look better if it was in the same style as the text (with the retro-shadow).

    I’m sire there is an easier way to do the retro-shadow look in PS with layer styles.

    I will experiment and report back!

    Isaac


  39. Isaac April 7th

    Hmm, you can use a Drop Shadow with an 100% range, then addo on a mask, but that’s just as difficult. Still much easier with Illustrator - why use Photoshop for this unless you don’t have Illustrator?

    Isaac


  40. Lamin Barrow April 7th

    Good tutorial. I think i might be using a grungy style somewhat similar to this in an on-going project of mine.


  41. Nick April 7th

    awesome tut. Too bad pitchfork is full of the most elitest, self-indulgent music snobs on the web.


  42. Kajuah April 7th

    This is a good tutorial, though reading through the comments I kept thinking: This is not a fireworks/illustrator tutorial site. Hence “PS” (Photoshop). Thus; Photoshop Tutorials ! Granted I can probably do this a lot faster if i hired someone to do it …. you see what I mean? There’s always better, faster and more accesiable ways to do things..but for those who want to do it themselves and in —-photoshop—- then this is what these tutorials are for.

    :)


  43. Jared April 7th

    I would agree with above comments about how this tutorial should not really be all Photoshop and how the techniques really aren’t all that interesting. Only thing good about this tutorial was the masking of a curves layer using grunge brushes, rather than painting with the grunge brushes and setting to multiply.

    As for techniques, the duplicating the layer 25 times is ridiculously stupid. Obviously Illustrator and it’s Extrude effect would do this in about a second. If you insist on doing it in Photoshop, the easy way is the following…

    1) Create a single gray layer as instructed. Then hit Ctrl+Alt+T or Cmd+Opt+T to do Free Transform. However, throwing in that Alt/Opt key instructs PS that we want a copy.
    2) With Free Transform open, simply move the shape down one and left one. Then hit enter to accept the transformation.
    3) You’ll see that this layer has been duplicated and move. Now, simply press Ctrl+Shift+Alt+T or Cmd+Shift+Opt+T, 23 more times. Each time you do so, you reapply the last transformation, which in our case was duplicating the layer and moving it.


  44. b00m April 7th

    I love only text and object. The text effect is good.


  45. Joefrey Mahusay April 7th

    Too simple.


  46. Grant Friedman April 7th

    This might have also been done using the extrude filter if Photoshop. It would give you some more options as well as giving you a smoother transition between the text.


  47. george April 7th

    not a great result but i learned many thing from it :)


  48. Juntje April 7th

    I cant find the refine edge tool…. :/ maybe cause i’m a complete noob with fotoshop xD


  49. web design cheltenham April 8th

    decent tutorial I love the grundge effect it is defo back in full effect.


  50. Daniel April 8th

    Hi Juntje,

    Press “Strg+Alt+R” to find the Refine Edge Tool ;-)

    Daniel


  51. internet blog April 8th

    I love grundge - web 2.o is thing of the past


  52. Steffy April 8th

    I’m no noob at photoshop, but just cant find the Color Adjustment Layer you talk about in step 7. I never used this before, and i’m not sure what it does, so i can replace it with a diffrent technique that i know, and has the same effect :P

    Can anyone help me?

    Steffy


  53. Chris April 8th

    I believe Refine Edge is only in CS3, if I’m not mistaken.


  54. connor April 8th

    Use photoshop ‘actions’ it’ll save a lot of time, otherwise great tut


  55. kwahmi April 9th

    great work keep it coming. this kinda stuff inspires us nwebies


  56. betty April 9th

    Not everyone has Illustrator. Some people may only own Photoshop … a creative way to create an extrude effect, when you don’t have another tool to create it for you. A creative way to not let an application hinder the creative process.

    If you don’t like all the layers then merge them afterward.


  57. Mchilly April 9th

    cool logo tutorial :-)


  58. Tom April 9th

    Nice idea for a logo, I like the Grunge background.
    It definitely seems the new standard for web design in 2008 :P


  59. 180Degree April 10th

    and you have time to hit 25 times!? thats why i prefer illustrator , work there and copy paste…


  60. ps3 blog April 12th

    nice tuturial i nlove everything grudgey - the grudge effect has really taken off and is in full effect


  61. Baz April 16th

    I found this tut frustrating and annoying becuase it was catered for people with CS3 and for people working with a Mac.


  62. avangelist April 18th

    Always good to see real life examples.

    For more of this why not look at the original at http://www.pitchforkmedia.com


  63. Qbrushes April 24th

    abit too simple for PSDtuts but ok nonetheless


  64. afg89 April 29th

    it’s a simple one, but thanks anyway i like the background.


  65. mihael April 30th

    i need this logo in .psd file. please somebody to send the psd file


  66. Jimi_xxl May 10th

    Veryyyyyyyyyyyyyyyy GoooD

    Beautiful Design

    GooD Luck My Friend


  67. TH May 14th

    Nice logo :)


  68. CJ May 24th

    Is there a reason you chose in Step #2 to use refine edge as opposed to Expanding the path? To me it seems like the result come out cleaner when you exapand rather than refine.


  69. jameslh June 10th

    Surprisingly pitchfork media have had this logo now for at least 4 years, It shows the good design can outstay most of the online fads and trends in design


  70. Mansoor July 24th

    Thanks for Posting.
    Good Tut.


  71. GRAPHICS@SBL-Image clipping service August 15th

    I saw the work.It is really nice.

    Regards,
    GRAPHICS@SBL


  72. someoddpilot August 23rd

    Funny to come across this. I designed the Pitchfork site in 2004, as well as the logo. A lot of what is described in your tutorial is certainly the PS only route, and also the long route I would have to say. We developed the Pfork logo in Illustrator as a wholly separate exercise (designing a logo in PS is never a good idea). We created the spray paint background for the site with some spray paint and paper, scanned that in and turned the scans into 1-color bitmaps and from there you can change the color any way you like. We also made a stencil of the logo and spray painted that as well. Cheers-
    Chris

    http://www.someoddpilot.com


  73. DEDUCCION Diseño August 23rd

    good web
    felicidades muy buenos datos de diseño grafico

    saludos desde America Latina Chile


  74. Camilo Azar August 23rd

    Buenos datos para crear mi imagen corporativa

    saludos


  75. anonim September 5th

    i can’t understeand :(


  76. ThePhotoshopper October 1st

    nice and easy does it!!

    check out my grunge effect on http://thephotoshopper.blogspot.com

    -the photoshopper


  77. Amulyaranjan November 3rd

    really nice one, i like the background.


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 20th

Arrow