Grunge Web Design

January 4th, 2009 in Tutorials, Web Layout by

This is a tutorial I wrote for psdtuts some times ago. According to their terms, author can only publish their tutorial on personal site after 9 months. I decided to post it again here in LoonDesign. As a collection of my tutorials. Many of you may already read this over PSDTUTS but just in case some of you miss it? Let’s start…

Step 1

CRTL+N and create a 1024px X 768px file. Fill the background with the color showing in the image below. Grab the Rectangle Tool and draw a rectangle with take about half of the page with the color given below and rasterize it, rename this as top layer. Using Lasso Tool, draw the shape and press delete.

Grunge Web Layout

Step 2

Create new layer belor the top layer. Grab the Brush Tool and with the soft mechanical 100px, #484536 color. brush out the shape of the shadow for the top layer. You may need to zoom in and smudge it to get the better result. Apply 1px outside whtie stroke to the top layer. Then, Apply Pattern Overlay with Soft Light Blend Mode, Rust Flakes.

Grunge Web Layout

Tips: try to make the shadow “no fixed as it may make it look not natural. You need some times for this part to make it looks natural.

Step 3

Create a layer above the top layer, ALT and click between the layers to create mask. With the same brush set, #d8ce9d color, brush a long the edge of the top layer.

Grunge Web Layout

Step 4

Create a rectangle and CTRL + T then rotate to the angle shown below. CTRL + T again and this time select Wrap and drag the bottom right corner as shown below.

Grunge Web Layout

Step 5

Using the Pen Tool, draw out the shadow below the rectangle shape. Apply Gaussion Blur 5px and set the layer blend mode to Multiply.

Grunge Web Layout

Tips: Brush out the little shadow at the top to enhance the effect.

Step 6

CTRL + Click on the rectanlge to bring out the selection. Goto select > Modify > Contract > 10px. Create a new layer above it and fill it with white color. Now, place any photo you like and simply create a mask with the new layer we created just now. Then, using the Polygonal lasso Tool to draw the tab and create a new layer above then fill with white color and set the Fill to 47%. Apply 1px inside stroke #e4dec3 and set the opacity to 66%.

Grunge Web Layout

Step 7

Brush the shadow for the tab.

Grunge Web Layout

Step 8

Type out the Site title. I am using Bernard MT Condensed with #7a745e 72px. Type out the rest of the title. Rasterize the type. Grab the Erase Tool and with the TB_Grunge Brush. Randomly erase the font to make the effect.

Grunge Web Layout

Step 9

using the Pencil Tool, zoom in and draw out the arrow shape and then erase it like what we do with the title we made.

Grunge Web Layout

Step 10

Using the same technique, Create the Search input field and also the RSS icon.

Grunge Web Layout

Step 11

For the footer, use the same technique to create the top layer in Step 1 & 2. Apply Inner shadow, Blend Mode Multiply, 20% opacity, 90 °, Distance 5px, Choke 0, Size 10px. Color Overlay 100% #302e26. 1px outside white stroke with 18% opacity. Well, we are done now, Simply add in 3 rectangle and apply Drop Shaow Effect.

Grunge Web Layout
add RSS

Comments

New to Old.

Reply

Write your comment here...




XHTML::
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Nucleo, Customizable Vector Icons

Dribbble

Some of my recent works from dribbble, do check it out and leave me some feedbacks! Or follow me on dribbble and get updated.