Wordpress theme web design

Wordpress theme web design
Wordpress theme web design
Learn how to create a clean and simple wordpress design that can attract anyone’s eyes!

Start working by creating a new file (File>New), having 1200×1000 px and 72 dpi.
Next we’ll select the Rectangle Tool (U) to represent the basis for the site’s header.

Wordpress theme web design

Set the next indicated parameters by making a mouse click on the layer we work with on the layers’ panel. Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Create a new layer and select the Rectangular Marquee Tool (M) to mark out the demonstrated below zone which must be painted after that with white color, choosing for this operation the Paint Bucket Tool (G)

Wordpress theme web design

Apply for this layer the selection from here - Filter>Noise>Add Noise

Wordpress theme web design
Wordpress theme web design

The layer’s parameters: Opacity 50%, Fill 3%
Blending mode-Dissolve

Wordpress theme web design

Create a new layer above the last made one and put them both together. Press Ctrl button to mark out the corresponding layers and then press Ctrl+E. Make a mouse click on the same layer on the bottom part of the layers’ panel on Add a Mask solution. Then choose the Brush Tool (B) (Opacity 20%) of black color to erase a little the background of the header.

Wordpress theme web design
Wordpress theme web design

Now it’s time to insert several rays on the site’s header, applying the Custom Shape Tool (U) and the color #000E11

Wordpress theme web design
Wordpress theme web design

The layer’s parameters: Opacity 50%, Fill 0%
Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Make a mouse click on the same layer on the bottom part of the layers’ panel on Add a Mask solution. Select the standard brush of black color to erase the rays on their middle part.

Wordpress theme web design

Create a new layer where we’ll mark out the indicated zone under the site’s header. The marked zone may be filled with the color #000E11, applying the Paint Bucket Tool (G).

Wordpress theme web design

Using the Rectangle Tool (U), try to put some limits on the bottom part. The layer’s color is #001118

Wordpress theme web design

The layer’s parameters: Blending Options>Inner Shadow

Wordpress theme web design
Wordpress theme web design

Using the Rectangle Tool (U), try to draw the panel reserved for the menu’s buttons, situated on the top part of the site’s header.

Wordpress theme web design

The layer’s parameters: Fill 0%
Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Using the Line Tool (U), try to represent several vertical dividing lines, marking the borders of the menu’s buttons. The lines’ color is black.

Wordpress theme web design
Wordpress theme web design

Write the buttons’ titles on the site’s header, keeping the next demonstrated demands:

Wordpress theme web design
Wordpress theme web design
Wordpress theme web design

Next we have to insert the border between the header and the rest of the site’s page. In this case we’ll select the Line Tool (U) (Weight 2 px) and the color is #121F25

Wordpress theme web design

Insert the site’s title on the middle part of the page:

Wordpress theme web design
Wordpress theme web design

The layer’s parameters: Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design


Wordpress theme web design

Next we must represent the section reserved for the search, situated on the left part of the site’s title. In this case we’ll select the Rounded Rectangle Tool (U) (radius of 5 px).

Wordpress theme web design

The layer’s parameters: Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Next step includes introducing a button on the right part of the search window, applying the previous tool Rounded Rectangle Tool (U) (radius of 5 px).

Wordpress theme web design

The layer’s parameters: Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Insert the inscriptions on the button and on the search window, keeping the next demonstrated demands:

Wordpress theme web design

the inscriptions on the button:

Wordpress theme web design

the inscription in the search window:

Wordpress theme web design

Give a title for posts section:

Wordpress theme web design
Wordpress theme web design

Insert below the date and whom the news belongs to:

Wordpress theme web design

Thersday, 12 September 2008

Wordpress theme web design

Written by Administrator

Wordpress theme web design

Now we’ll insert the body text in the section:

Wordpress theme web design
Wordpress theme web design

Below the body text, we’ll represent one more button, applying the Rounded Rectangle Tool (U) (radius of 5 px)

Wordpress theme web design

The layer’s parameters: Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Let’s introduce the title for this button too:

Wordpress theme web design
Wordpress theme web design

Applying the Rectangle Tool (U), make the panel on the right side, reserved for the Categories menu, Login form etc. The color is #06151C

Wordpress theme web design

Insert the title of the lateral menu:

Wordpress theme web design
Wordpress theme web design

Represent a small dot on the bottom part of the title, choosing the Pencil Tool (B) (brush of 1 px).

Wordpress theme web design
Wordpress theme web design

Make seven copies of the layer containing the dot and then select the Free Transform option to place the copies the same way indicated below:

Wordpress theme web design

Insert the categories’ titles on the right part of the dots:

Wordpress theme web design
Wordpress theme web design

On the last stage we’ll represent a kind of radiance on the logotype. Create a new layer in this case and select the Rectangular Marquee Tool (M) (the circle option) to draw a white ray. Incline a little the marking, making a right click on Transform Selection. The marked zone should be painted with the Paint Bucket Tool (G).

Wordpress theme web design

Make a copy of the layer containing the ray and select the Free Transform option to turn the copy around its axe.

Wordpress theme web design

Try to represent the same way two more rays of smaller size:

Wordpress theme web design

Merge down all the layers containing the rays into a single one. Press Ctrl button to mark out the necessary layers and then press Ctrl+E. The new layer that we’ve got must have the next indicated parameters: Fill 0%
Blending Options>Gradient Overlay


Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design
Wordpress theme web design

Create a new layer and use a standard brush of white color to give some brightness to the rays:

Wordpress theme web design
Wordpress theme web design
Wordpress theme web design

The final result!

View full size here.