Overview

In this tutorial I will show you how to create a grungy looking webpage layout using some textures. I will also show you how to use textures from images and to create your own texture using dark grey and red colors. This just so happens to be my very first tutorial I hope you enjoy.

Resources

You will need the following items for this tutorial.

• Grunge textures by Princess of shadows (download here)
• Photoshop CS3 or higher

Difficulty and Knowledge

Difficulty: Easy
Very basic knowledge of photoshop

Learning Outcomes

• How to use Layer masks and when and why to use them
• How to give layers effects
• The difference between fill and opacity
• How to use textures to increase detail
• How to save layer effects

Here is the final design that we will be aiming for

so lets start

Step 1)

Open up photoshop and open a new document file > new and give it the following specs.

Step 2)

Create a new layer ( Layer > New > Layer… ) and give it a background color of #090909. Just an off black color. Your entire page should be filled with this dark color. Also name this layer “bg”. It’s always good to name layers for clarity to avoid confusion. Even if the layer name is long just make sure you can identify what it is at first glance.

Step 3)

Create a new layer above the “bg” layer. Grab the gradient tool and select the black and white gradient. Also make sure the linear gradient is checked.

Now draw a gradient from top to bottom only about half way down the page and change the layers blending mode to screen from the layers panel and change its opacity to 20%. Name this layer “bg gradient”.

By changing its blending mode to screen all black pixels have a 0% opacity and white has 100% opacity. Its hard to notice cause of the dark background.

Step 4)

Next we are going to open up the texture file named texture 2.jpg from the vintage grunge textures by Shadow Princess that we downloaded. If you missed this step, its in the (Resources) section near the top of this article.

Drag the image onto the canvas and go to Image > Adjustments > Black & White. Now set the images blending mode to multiply. You should get the following result.

Step 5)

Add a new layer and with the marquee tool create a rectangle across the top of the page and fill it with black. Give the layer a 20% opacity. Call this layer “menu bg”.

Step 6)

Create a new layer and fill a 1px line horizontally across the screen with white and give it a 22% opacity. Move it just below the “menu bg” layer.

Step 7)

On a new layer, create a rectangle with the marquee tool and give at fill color of #ad1212 and add these filters to it.

Go to Filter > Noise > Add Noise. Give it 3% amount, Select Gaussian and check Monochromatic

Go to Filter > Blur > Gaussian Blur. Set the blur radius at 0.5 pixels.

Step 8)

Now we will add some effects to the layer here is what I have.

Step 9)

Add some text for the company name and menu.

Step 10)

Next we will create a hover effect for our menu items. On a new layer using the rounded rectangle tool. Set the radius of the corners to be at 8px and draw a red rectangle with the color #ad1212. Now give it these settings.

You should end up with something like this so far

Step 11)

Next we will create a rectangle with a black fill to it and apply the following layer effects to it.

because we will be using these same styles again, we will save the settings for later use. To do this we will go into the layers blending options window and click on “New Style”. Give your style a name. I gave mine the name “transparent box”.

Now you have saved your layer effects settings. You can load this anytime to give your layer similar effects.

You should now have something similar to what I’ve got.

Step 12)

Next I took 3 screenshots of some of my favorite websites and made 3 images stacked behind eachother.

Step 13)

Now I’m going to add some reflections to the images. To do this select a layer containing one of the images right click on it and select duplicate layer. Name this layer as ‘reflection’. Select the new “reflection” layer go to Edit > Transform > Flip Vertical. Now move the layer below the original image and give it a 30% opacity. You should have the following look so far.

Next we are going to give the transparent image a layer mask. To do that make sure your “reflection” layer is selected and go to Layer > Layer Mask > Reveal All. Now make a selection of the layer by Command Clicking (if on mac) or CTRL + Clicking (if on Windows) the layer thumbnail image. Get the gradient tool and set it to linear. Make sure you have the layer mask selected on the layer before doing the following. We want to make sure we are drawing a gradient on the layer mask and not the layer itself. From the top to half way down the marquee selection, draw a gradient straight down. You will notice that the black areas hide the layer. Like so.

Repeat these steps for each of the images and delete any unnecessary overlapping of the reflections to give it a natural look.

Step 14)

I will add some text and a “View Portfolio” button. To create the button, draw a rectangle and follow the same steps we did in steps 7 and 8. Here is what you should have so far.

Step 15)

Create a rectangle with a black fill. Instead of adding the styles to it, we are going to load the style that we saved from step 11. Mine is named “transparent box”, so I will load that particular style from the list.

You should by now have the following image.

Step 16)

I’m going to fill the area with some text and I’m also going to add a testimonial i between the 2 sections.

Step 17)

For the footer I am just going to add the links from our main navigation and a copyright segment below it.

Here is the final result.

That concludes my first tutorial.