In this tutorial we will be creating a Grunge web design in photoshop! First a sneak peek at what we are going to create!
Final Preview
.
STEP1
Power up your photoshop and create a new document of size 950 px by 800 px at 72 dpi. Hit CTRL + R to show up your rulers and pull in four guides to create a document boundary, now this will be our design area!
.
STEP2
Now increase the canvas size to 1200 px by 1000 px! This is for our wider screen resolutions. Then we will pull in guides for (Header, Navigation bar, Sidebar and Footer)
.
STEP3
Now we will get our wood texture for our background, I have initially made some adjustments on it here are the adjustments. The adjustments are Hue/Saturation and levels. Once you get these settings right then pull it on our web design document.
.
STEP4
Now we will add the page name, I have decided to use this font. However you can use any font and text you like. Once you have added this scribble font change the layer blending mode to Overlay!
.
STEP 5
I have used two images Feather pen and compass so lets extract these images (you can extract using Select > Color Range) place the images like I have done below and add drop shadow layer style to both!
.
STEP6
Add some ink splatters at the tip of our feather pen. Get splatter brushes from here.
.
STEP7
Now we will design the content area, for this I have used grunge paper textures from here. Pull in the Grunge paper and transform it to fit, now we will use paper edge brushes and add a tear effect to the corners of our content area. To do this we will add a quick mask pick up the brush and select the paper edge brushes and paint on the edges.
After using the paper edge brushes add a drop shadow to the paper. Check the blending style options below.
.
STEP8
Now we will make the buttons, quickly grab the pen tool and make a selection on the paper and copy the selection keeping the paper layer checked. Refer the images shown below.
.
STEP9
Now we will position the button on the top of this page then add some paper cut effect to this button. Refer the images shown below.
.
We will have to get the button behind the page so we will pull layer8 below layer7 like this.
.
STEP10
Now lets add some paper cut effect to the button as we did for the paper, mask the button and using the brush paint with the paper cut brushes. Repeat step 8, 9 and 10 to create all the buttons. Refer the image below.
I have adjusted the Hue / Saturation for each button to get different color.
.
.
STEP 12
I have downloaded a grunge Rss Icon from here and will place as shown below. Add the text and set its blend mode to overlay, font type is Georgia.
.
STEP13
Time to add some lorem Ipsum text and images. I have used this font. I have used this ship image for thumbnail along with the Polaroid image which i got from here. Then final touch ups, add search text and footer notes and set all the text blending mode to overlay and use Georgia fonts on footer, search and subscriber count.Here is our final preview!
.
I will provide the Psd file for this after 300 comments.
In the next tutorial I will convert this Psd file to Html / CSS and then to a WORDPRESS THEME!
Looking for rental properties try real estate San Francisco.
Very nice work! Thanks for the great instructions on how to do them.
Dr Edison
Nice, strong layout. I especially like the smiley. Good job!
Good work . keep it going
[...] Ants Magazine. Crea un peculiar theme estilo Grunge en Photoshop siguiendo este tutorial. [...]
Love the layout ideas, if I had photoshop I’d be all over this.
Excelente, me encantó, no sabía que con photoshop se pueden hacer cosas así.
Voy a poner en practica para mi web y blog ideas inspiradas en este modelo.
gracias… felicitaciones !!!!
Very awesome tutorial! I’m especially excited to see the conversion to HTML.CSS and WordPress, as these are skills I’m working on learning!
Very very interesting post..I like this one. gotta bookmark this one.
Cheers,
gadgettechblog.com
Very very interesting post..I like this one. gotta bookmark this one.
Cheers,
gadgettechblog.com
Create a Grunge Style Theme In Photoshop…
In this tutorial we will be creating a Grunge web design in photoshop! First a sneak peek at what we are going to create!
…
[...] 13. Create a Grunge Style Theme In Photoshop [...]
I don’t get where the wood pattern appears. I followed the tutorial, but all I get is a gray background…
awesome tutorial
would love to see the psd file though..
Sweet! Can’t wait for the PSD. 286 to go!
Oh, and the link to the paper edges brushes isn’t working (404 Forbidden). Any way you could fix that? Thanks!
[...] Click here to read this Photoshop tutorial [...]
Really cool art work. Thanks
thank you by moderator no delete sites perfect blog
perfect photoshop dersleri good post thank you
perfect photoshop dersleri good post thank you
Thank you admin wordpress for themes.Very beatiful photoshop dersleri için thanks
I was looking for the method to get the free .edu and .gov links and thanks God i found its unique and easy method from the post of this blog and now i am very glad to find it from here and i refer this blog to my friends also.
[...] Click here to read this Photoshop tutorial [...]