Design a Retro-Grungy website in Photoshop (In-Depth)

In this tutorial we will be making a website with a grungy and retro feel. The concept is based on retro elements, grungy textures and a mix of brown and other dark colors that compliments well to the concept.

HERES THE FLAME-IDEA RETRO-GRUNGY CONCEPT

Our aim is to create a mock up for a web design to showcase both grungy and retro style, news and articles. The overall design both combines retro and grungy elements with retro fonts. The background will be a large vintage style wallpaper background image, and a header with retro elements.

OOPS!DOWNLOAD ALL THE RESOURCES FIRST

Because this is my first tutorial I will let you download all the resources I have used in zip format

Download it here

LET'S START

Create a canvas size at a typical large  resolution. Our mock up features a large background image we want to accommodate even the larger resolutions used by 24-27 inch screens. Fill it with black and place the grid for our guide,be sure to align the grid at center. As it will also represent the contents.Show rulers and drag guides that matches the css grid's width. Our main content will be contained here.You can also lower the grids opacity.

Next: 

Import the vintage style wallpaper, add a layer mask and use the gradient tool which is from black to transparent and start making gradients to fade out the backgrounds border.

Import the "Retro_Texture_by_WingsOfAHero.jpg" and place it on top of the our vintage style wallpaper. Set the layer mode to vivid light 34% opacity.

We are finished with the background select all the layers and group it(ctrl+g) and name it BG

Next 

Import the texture2.jpg and align it at the center of our canvass,then duplicate it, be sure  to leave about 200 pixels on the top for our header. This will contain our page's content. Erase its edges with default brush number 44 or any brush that can make the edges look torn.

*I have also shorten its width,you can also do this as long as both its left and right sides have equal spaces.

Choose the original texture2 layer and burn its edges and also make the edges look torn as we did in the previous step.

You can also make more copies and nudge them further to the right or left. Choose all the texture layer that you have duplicated and group them, name the group "content" and merge all the layers inside it.

*this is what it will look like

CREATING THE CONTENTS

Import the "news_texture.jpg" inside the content group, resize it at about 320x220 pixels and duplicate. Place it in the right side of our content page.We want  it to be white so press ctrl+u for hue and saturation. Set the lightness to +48 or according to your preference. Also erase parts of its edges for the torn effect.

Then with the layer selected press ctrl + t  right click and choose warp. Then add a drop shadow.

NEXT 

Import "feature.jpg". You can also choose your own stock photos for this. Add a stroke on the picture. Double click the layer in layers window and on the stroke tab set the size to 1px ,position to outside and fill color to black.

ctrl click the layer to make a selection of the feature photo,then go to select   > modify > expand and make it expand by 10 pixels. Then create a blank layer under the feature layer, select that layer and fill it with white.

Merge the feature photo with the white background. Duplicate  it and slightly tilt the original, also add a drop shadow to the feature photo copy.

Then import the badge.png and place it on the lower right corner of the feature photo.

Adding the Navigation Bar

Import the nav.png and place it below our news section

ADDING LINK TEXT and CONTENT

Start filling the page with sample content. I made it 3 columns. I used a retro style font (romantisque)for the heading and navigation, and for the content I used verdana.

*dont worry it is included in the zip download

Its a bit too grungy at the moment so lets balance it by adding a heavily retro styled header.

Make a new layer above our BG group.We shall place the retro elements here, all the brushes I have used are included in the zip file. I'll let you work on your own on this one. Let your creativity work here.

*Here's what I have made,I also placed some brushes in other layers so that they overlap. You can also check deviantart for other cool retro brushes.

Heres the finished design.  I hope you learned some few tricks with this,I have also organized our workflow by grouping certain elements according to category for better use, this is actually my first tutorial. So please comment because I need your feedback and follow if you like it. 

More tutorials to come~flame