Design grunge wordpress theme

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.

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

Design grunge wordpress theme

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

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
Design grunge wordpress theme

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

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

Design grunge wordpress theme
Design grunge wordpress theme

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

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

Design grunge wordpress theme

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

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

Design grunge wordpress theme

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
Design grunge wordpress theme
Design grunge wordpress theme

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

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

Let’s represent after that a ring of the color #7AC255 situated on the right side of the green star. Choose in this case the Custom Shape Tool (U).

Design grunge wordpress theme
Design grunge wordpress theme

Using the Rectangle Tool (U), we’ll represent the layer reserved for the site’s body. The layer is of the white color.

Design grunge wordpress theme

Next we must combine in a group all the layers composing the top panel in the site’s header (press Ctrl button to mark out the necessary layers and then hold on the left mouse’s button to take the marked layers on Create a new group selection). Using the Free Transform option, put the group’s copy on the bottom part of the site reserved for the blog footer.

Design grunge wordpress theme

Next we need to represent a panel reserved for the menu’s buttons on the site’s header, using the Rectangle Tool (U). The color is #FBFDE8

Design grunge wordpress theme

Using the Rounded Rectangle Tool (U) (radius 15 px), try to make a panel for the logo, colored with #E10811

Design grunge wordpress theme

Set the next indicated styles by making a click on this layer on the layers’ panel: Blending Options>Inner Glow

Design grunge wordpress theme
Design grunge wordpress theme

Insert now the site’s name:

Design grunge wordpress theme
Design grunge wordpress theme

The layer’s styles: Blending Options>Drop Shadow

Design grunge wordpress theme
Design grunge wordpress theme

Insert the titles for the buttons on the menu’s panel:

Design grunge wordpress theme
Design grunge wordpress theme
Design grunge wordpress theme

Under the menu’s panel containing the buttons, we’ll insert the section “About me”:

Design grunge wordpress theme

About me

Design grunge wordpress theme

the basic section’s text

Design grunge wordpress theme

Insert a button now under the text, applying the Rectangle Tool (U) with the color #D40610

Design grunge wordpress theme

The layer’s styles: Blending Options>Drop Shadow

Design grunge wordpress theme

Blending Options>Inner Glow

Design grunge wordpress theme


Design grunge wordpress theme


Insert the title on the button:

Design grunge wordpress theme
Design grunge wordpress theme

Choose the next demonstrated styles for the layer containing the button’s title: Blending Options>Drop Shadow

Design grunge wordpress theme
Design grunge wordpress theme

Now we need to select the Line Tool (U) to insert the markings for the borders of the site’s sections. Each line should be on its layer. The color is #B4B4B4

Design grunge wordpress theme


Make a mouse click on each layer containing the lines on the bottom part of the layers’ panel on Add a Mask selection and choose the brushes out of the set grunge procedural to clean out with black color the lines of the markings (Opacity 20%).

Design grunge wordpress theme

Insert in the section its title and the appropriate text:

Design grunge wordpress theme

the section’s title

Design grunge wordpress theme

the basic section’s text

Design grunge wordpress theme

Make two copies of the layer containing the title and the text. Using the Free Transform option, place the copy’s layers the same way demonstrated below:

Design grunge wordpress theme

Under the section’s text, on its left side we’ll represent a button with the Rectangle Tool (U). The layer’s color in this case is #262626

Design grunge wordpress theme

The layer’s styles: Blending Options>Inner Glow

Design grunge wordpress theme
Design grunge wordpress theme

Make two copies of the layer containing the last made button. Choose then Free Transform option and place the copies as it is demonstrated below. One copy should be left without any changes (place it under the lowest section), but the second copy should be placed on the central part, changing its color on #D40610.
Blending Options>Inner Glow

Design grunge wordpress theme
Design grunge wordpress theme

Insert the title on the made button:

Design grunge wordpress theme

The layer’s styles: Blending Options>Drop Shadow

Design grunge wordpress theme
Design grunge wordpress theme

Make two copies of the layer containing the button’s title and apply Free Transform selection to place the copy’s layers the same way as it is on the picture:

Design grunge wordpress theme

Insert the comment you want on the button’s right side:

Design grunge wordpress theme

12 Comments

Design grunge wordpress theme

Posted by

Design grunge wordpress theme

admin

Design grunge wordpress theme

Make two copies of the layer containing the comment’s text and choose again the Free Transform option to place them the same way indicated below:

Design grunge wordpress theme

Insert one more section on the right top part of the panel containing the sections:

Design grunge wordpress theme

the title for the section:

Design grunge wordpress theme

the section’s text:

Design grunge wordpress theme

Next we have to insert the categories’ section under the recently made section:

Design grunge wordpress theme

the title for the section:

Design grunge wordpress theme

the titles for the categories:

Design grunge wordpress theme

Next we have to set the Brush Tool (B) in the menu of the Brushes tools’ panel:

Design grunge wordpress theme

Create a new layer and apply the set brush and the color #AFB57B. Apply the brush between the categories’ titles, then change the brush’s color with #E7E9D7 and paint the category’s title on the left and right sides.

Design grunge wordpress theme

Make four copies of the layer with the dividing line and choose again the Free Transform option to place the copies the same way demonstrated below:

Design grunge wordpress theme
Design grunge wordpress theme

The final result!
View full size here.