Download Source Files
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.
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.
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.
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.
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.
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.
Final Image
Now place the ‘X’ where you see fit, and you’re done!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Kyle Pero
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I love grundge – web 2.o is thing of the past
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
I believe Refine Edge is only in CS3, if I’m not mistaken.
Use photoshop ‘actions’ it’ll save a lot of time, otherwise great tut
great work keep it coming. this kinda stuff inspires us nwebies
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.
cool logo tutorial :-)
Nice idea for a logo, I like the Grunge background.
It definitely seems the new standard for web design in 2008 :P
and you have time to hit 25 times!? thats why i prefer illustrator , work there and copy paste…
nice tuturial i nlove everything grudgey – the grudge effect has really taken off and is in full effect
I found this tut frustrating and annoying becuase it was catered for people with CS3 and for people working with a Mac.
Always good to see real life examples.
For more of this why not look at the original at http://www.pitchforkmedia.com
abit too simple for PSDtuts but ok nonetheless
it’s a simple one, but thanks anyway i like the background.
i need this logo in .psd file. please somebody to send the psd file
Veryyyyyyyyyyyyyyyy GoooD
Beautiful Design
GooD Luck My Friend
Nice logo :)
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.
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
Thanks for Posting.
Good Tut.
I saw the work.It is really nice.
Regards,
GRAPHICS@SBL
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
good web
felicidades muy buenos datos de diseño grafico
saludos desde America Latina Chile
Buenos datos para crear mi imagen corporativa
saludos
i can’t understeand :(
nice and easy does it!!
check out my grunge effect on http://thephotoshopper.blogspot.com
-the photoshopper
really nice one, i like the background.
I’m using windows Vista, photoshop CS3 and when i type the words I want it doesn’t let me “refine edge” . how do i refine edge after i type the word i want.
Why create a circle path and then use a Solid Color adjustment layer when using the Eclipse shape tool will do the same thing in one step?
Great logo
pitchforkmedia.com wont be very happy about this. nor will SomeOddPilot.com who designed the logo.
Nice tuts guys!
Truly good Logo, I like the setting of color in background but make FOR PSDTUTS a little better
Stolen from Pitchfork.com
Keep ur good tutz. :) I believe it can be done by fewer steps! but this one is really readable and anyone can do it..
cheers
Fuad Ahasan Chowdhury
Design Consultant
Great tutorial but I’m stuck on step 8. I can’t seem to add a curves layer. When I select ‘create new fill or adjustment layer’, both the Brightness/Contrast and Curves selections are greyed out.
Anyone know why this is happening. I’m using CS4 with Win XP 32bit.
Thanks
Just figured it out…
Anyone that’s having the same problem – it’s because yout cannot create curve layers when using 32 bit RGB. Go to Image > Mode > 16 Bits/Channel and you should then be able to select it.
its really gud that creative our minds.
great tutorial!!!!!!
Nice tut, onyl.. @ step 2 i cant select Refine Edge… by clicking on the thumb of the text layer, en select>Refine Edge.. i cant do it…
When i create the clouds in the alpha layer they show up as red…. And the grey “adjustment layer” doesnt seem to make any diference to the picture since the cloud layer isnt transparent…. What am i doing wrong… Also i didnt create the elypse shapes or the lines using paths cus i dont seem to know how to move and edit them, they just show up as outlines that i cant move, evan if i try to fill them it fill the whole layer
This is a great tutorial. Love the grunge effect within the logo. Nice work.
Very nice one
Nice tuts guys!
This is really a cool way for logo creation.Thanks for sharing.
Hello all,
I have used to Create a Cool Music Logo on a Grunge Background. some time i feel it is not so easy for all.
Great job. Really thanks for step by step process.
Regards,
Al Kamal Md. Razib
Excellent tutorial….very inspiring and true skill using Photoshop.
yes
Wow thats so nice
this tutorial is pretty hard to do because it not that simple to understand and i was wondering if there a video or a simple step by step with every pictures about this tutorial that they can send me the link or video or even the .psd file