AntsMagazine.Com » themes

Create a Grunge Style Theme In Photoshop

nahid — Mon, 02 Mar 2009 14:26:41 +0000

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!

35 Best Wordpress Themes For Free

nahid — Tue, 17 Feb 2009 12:45:22 +0000

In this article we present free high-quality WordPress themes. We have listed many examples of magazine style themes and a demo link has been provided with each theme.

Artistic Themes

1] Outdoorsy