Design a Grungy Newspaper Web Layout in Photoshop

Learn how to design a Grunge Newspaper Website Layout in Photoshop!

Final Result

1. Create a new document that's 900×1050 pixels. Double click the background layer to unlock it and fill the layer with a dark grey colour.

2. Using the rectangle tool draw the main page in white. Double click the layer to go into Blending Options and put in an outer glow. Next download & install these Paper Texture Photoshop Brushes.

3. While holding down the CLTR key click on the layer thumbnail (circled below) to highlight the shape. Then go into Select > Modify > Contract and contract the shape by 20px.

4. Next with the shape still active create a new layer, grab a Paper Texture Brush and create a paper texture with a light grey colour.

5. Complete step 3 again, create a new layer and fill the active shape a dark grey. Next go to Filter > Noise > Add Noise and put in 16%. Set the opacity to the layer to 17%.

6. Next type in the name of your website in a dark grey. I'm using the font Old London.

7. Next grab the Ellipse Tool and draw a circle while holding down the shift key (to keep the shape perfect). Next using the font Optimus Princeps write out something. To rotate the text press ctrl+t on the layer and rotate an edge.

8. Next draw 2 (2px) dark grey lines while holding down the shift key like below. Write out the slogan of your website.

9. Next write out the menu names.

10. Next download these Mono Icons. Press ctrl+r to bring up the ruler around the canvas and drag out 2 horizontal lines like below. Drag what icon you want above each name, drag a corner down while holding down the shift key to make it the right size. After you have added all the icons, to remove the ruler lines drag them off the canvas using the Move Tool.

11. Next get the rectangle tool and draw a while shape for the slider like below. Double click the layer to go into Blending Options and put in the following:

12. Next press ctrl+' to bring up the grid. Using the pen tool draw on half of the shape below using the grid as a guide in a dark grey. Duplicate the shape, press ctrl+t and flip it over. Press ctrl+' again to remove the grid.

 

13. Get grab the Ellipse tool and draw a small circle while holding down the shift key. Double click into Blending Options and put in the following settings below. Duplicate the circle 4 times by dragging it to the new layer icon. Draw a smaller circle (dark grey) and place it one of the larger circles.

14. Next write out a Heading example & Author details. Draw a 1px line in between the 2.

15. Next write out some post content.

16. On the side of the post draw a white example box for the image, double click into Blending Options and put in the following.

17. Next write out the sentence below using the font Optimus Princeps. Using the line tool (2px) draw out 2 lines above and below the words. Next get these Black Ink Grunge Stamp Texture Social Media Icons and place what icons you want there.

18. Now for the images, get a example image you want for the slider. I've chosen a black and white image to match the mood of the layout. Place the image right above the slider rectangle, right click the image layer and Create Clipping Mask. This will crop the image down to the size of the rectangle you created earlier.

19. Do the previous step to the post image. Lastly write out some copyright details.

Final Result

Comments
  1. santhosh

    hi i am santhosh
    thanku for helping
    give good tutorials

  2. JK

    nice idea !!
    thank for this tutorial

  3. Arkar

    Really Good !!!
    I Like it !!!

  4. Stefano

    Nice tutorial! Thanks for share!!

  5. maui girl

    hi, i’m new to photoshop and so confused about how to… “Using the rectangle tool draw the main page in white.”

    I simply cannot select or fill the rectangle I draw without filing the entire layer. If I draw it on a second layer, photoshop doesn’t acknowledge the separate layer. I can only fill the entire canvas. There is no obvious way to select the shape i draw and “fill” it with white using the foreground/background fill commands(which i understand). thanks tons for any help.

    • Ainsley

      Hi, You draw the shape using the Rectangle Tool (U). Select the foreground color first, then select the Rectangle Tool & draw the shape. If you need anymore help you can email me at bloomwebdesign@hotmail.com

      Hope that helps!

      • maui girl

        thanks. i figured out that my computer was making shapes as paths by default, even after resets. great tutorial!