Design grunge wordpress theme

In this tutorial we’ll be learning how to make a nice, clean, eye catching web layout that anyone could make. Really, it’s quite easy, and I hope you learn new things from it. Enjoy.

Final Image Preview

Design grunge wordpress theme in Adobe Photoshop CS4

Let’s create a new file (File>New) of 1200x1300px/72dpi. Select after that the Paint Bucket Tool (G) to give black color to the new background layer.

Design grunge wordpress theme in Adobe Photoshop CS4

Using the Rectangular Marquee Tool (M) on a new layer, it’s possible to mark the corresponding zone for the site’s header. Using the Paint Bucket Tool (G), give it the color #2F8E8D

Design grunge wordpress theme in Adobe Photoshop CS4

Next we’ll download a set of ready to use brushes for Adobe Photoshop: grunge procedural.
Make a click on the recently made layer containing the panel for the site’s header on the bottom part of the layers’ panel on Add a Mask selection and apply the brushes here, named grunge procedural. The black color should be used for cleaning out the green background.

Design grunge wordpress theme in Adobe Photoshop CS4

Design grunge wordpress theme in Adobe Photoshop CS4

Let’s create a new layer and apply here the brushes of the grunge procedural set. In this case we need to represent several spots.

Design grunge wordpress theme in Adobe Photoshop CS4

Press Alt button while clicking between the brushes’ layers and the layer containing the panel:

Design grunge wordpress theme in Adobe Photoshop CS4

Design grunge wordpress theme in Adobe Photoshop CS4

Create a new layer and use here the Rectangular Marquee Tool (M) to mark out the square zone and after that choose the Paint Bucket Tool (G) to give the color #A8AFB2

Design grunge wordpress theme in Adobe Photoshop CS4

Next we’ll use the same Rectangular Marquee Tool (M) to insert a thin marking stripe.

Design grunge wordpress theme in Adobe Photoshop CS4

Make a right mouse’s click on it on Transform Selection and incline it a little. This stripe needs to be situated above the grey square on the left side.

Design grunge wordpress theme in Adobe Photoshop CS4

Apply the made changes and press DELETE button. This way we’ll cut out several openings in the grey square.

Design grunge wordpress theme in Adobe Photoshop CS4

Using the Custom Shape Tool (U), try to make two small stars of black and white colors. They should be placed on the right side of the panel containing the site’s header.

Design grunge wordpress theme in Adobe Photoshop CS4

Design grunge wordpress theme in Adobe Photoshop CS4

Design grunge wordpress theme in Adobe Photoshop CS4

Make a copy of the layer containing the black star. Mark out its inside tops and choose Convert Point Tool (hold on the SHIFT button), press CTRL+T and then press Maintain aspect ratio to compress it uniformly. Choose this color for the copy’s layer – #3E9D49

Design grunge wordpress theme in Adobe Photoshop CS4

Make a copy of the layer with the green star and apply Free Transform option to change the copy’s sizes and place the copy exactly the same way demonstrated below. Change the color of the layer with the black one.

Design grunge wordpress theme in Adobe Photoshop CS4

Page: 1 2 3 4

Comments