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!

Begin by creating a new file (File>New) of 1262×1140 px and 72 dpi. Select the Paint Bucket Tool (G) to fill it with the color #F2E9E0

Wordpress theme web design

Select now the Rectangle Tool (U) to represent the primary layer of the web site to be. The color chosen in this case is #1565A2

Wordpress theme web design

Download out of Internet a pattern, like the one from below:

Wordpress theme web design

Edit>Define Pattern
Then we’ll represent a new layer where we shall apply Edit>Fill, choosing here the earlier saved pattern.

Wordpress theme web design

Set the next parameters for the made layer: Blending mode-Linear Dodge (Add)

Wordpress theme web design

On this layer we need to make a mouse click on the bottom part of the layers’ palette on Add a Mask option. Here choose the Brush Tool (B) of black color to clean out the lowest part of the site’s header.

Wordpress theme web design
Wordpress theme web design

Press Alt button on the same layer and then make a mouse click between the layers containing the site’s header and the pattern’s layer.

Wordpress theme web design
Wordpress theme web design

Next we need to represent a central panel, reserved for certain divisions under the site’s header, selecting in this case the Rounded Rectangle Tool (U) with a radius of 10 px, applying the white color.

Wordpress theme web design

Using the same tool, we need to represent the menu’s panel:

Wordpress theme web design

Use the next demonstrated parameters by making a mouse click on the layer we work with on the layers’ palette. Blending Options>Stroke

Wordpress theme web design
Wordpress theme web design

Applying the same tool with the same parameters, try to make a panel under the already made one:

Wordpress theme web design

Using the Elliptical Marquee Tool (M), try to make the primary layer of the site’s logotype. This layer needs to be placed on the central part of the header. The zone must be painted with the Paint Bucket Tool (G) and white color.

Wordpress theme web design
Wordpress theme web design

Set for this layer the next chosen option: Filter>Blur>Gaussian blur

Wordpress theme web design
Wordpress theme web design

Using the Free Transform, try to compress the made effect by its vertical direction: The layer’s parameters: Fill 57%, Blending mode-Pin Light

Wordpress theme web design

Insert the site’s title:

Wordpress theme web design

The layer’s parameters: Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design

Blending Options>Stroke

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

Download a set of ready to use brushes for Adobe Photoshop, named vector Pack-2.
Create a new layer and apply on it the downloaded brush out of the above mentioned set. The brush’s color is #86B5D7. This pattern should be turned over with Free Transform option.

Wordpress theme web design
Wordpress theme web design

The layer’s parameters: Opacity 70%, Blending mode-Overlay, Blending Options>Outer Glow

Wordpress theme web design
Wordpress theme web design

Insert on the site’s header the titles for the menu’s buttons:

Wordpress theme web design
Wordpress theme web design

Next we’ll mark out the active menu’s button, applying the rounded Rectangle Tool (U) with a radius of 10 px. Press Alt button, applying the Rectangle Tool (U) to cut out the unnecessary elements on the bottom part, choosing for this operation the white color.

Wordpress theme web design

The layer’s parameters: Fill 20%

Wordpress theme web design

Create a new layer and choose for it the standard brush, used for cleaning out the bottom part of the menu on the site’s header. The brush’s color is #F2E9E0

Wordpress theme web design
Wordpress theme web design

On the next new layer (Create new layer) we’ll use one more time the standard brush for representing the texture of scratches situated on the site’s header zone. The color chosen for this operation is white.

Wordpress theme web design
Wordpress theme web design

The layer’s parameters: Opacity 13%, Blending Options>Outer Glow

Wordpress theme web design
Wordpress theme web design

Insert the titles for the sections on the lateral menu:

Wordpress theme web design
Wordpress theme web design

Now we need to represent a pattern, creating a new file of 3×1 px and 72 dpi. In this case we need to apply the Pen Tool (P) and a brush of 1 px, #A0998F color.

Wordpress theme web design

Save it!
Edit>Define Pattern
Next we’ll represent the dividing lines on the lateral menu, selecting the Line Tool (U).

Wordpress theme web design

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

Wordpress theme web design
Wordpress theme web design

Make five copies of the last made layer and choose Free Transform option to place the copies the same way demonstrated below:

Wordpress theme web design

Fill the menu with the inscriptions of the basic options and links.

Wordpress theme web design
Wordpress theme web design

Applying the Ellipse Tool (U), we need to draw dots near each menu’s option, using the color #227CBB

Wordpress theme web design

Next we’ll create a window reserved for the login form, applying the Rectangle Tool (U) and white color.

Wordpress theme web design

The layer’s parameters: Blending Options>Stroke

Wordpress theme web design
Wordpress theme web design

Make a copy of the layer containing the window and then use the Free Transform option to place the copy as it is demonstrated below:

Wordpress theme web design

Create a new layer under the previous made one to represent a checkbox, choosing for this operation the Pencil Tool (B) and a brush of 1 px.

Wordpress theme web design
Wordpress theme web design

Under the checkbox’s space we’ll draw an element reserved for a button, using the Rounded Rectangle Tool (U) (radius of 3 px).

Wordpress theme web design

The layer’s parameters: Blending Options>Gradient Overlay

Wordpress theme web design

Gradient’s parameters:

Wordpress theme web design

Blending Options>Stroke

Wordpress theme web design
Wordpress theme web design

Insert next the appropriate text on the drawn element:

Wordpress theme web design
Wordpress theme web design

Write the button’s title:

Wordpress theme web design
Wordpress theme web design

Insert the section’s title on the central part of the panel, the same way you may see below:

Wordpress theme web design
Wordpress theme web design

Insert the earlier edited pictures we want to have on the site.

Wordpress theme web design

Fill the section with the appropriate text:

Wordpress theme web design
Wordpress theme web design

Let’s represent a link under everything we did till now:

Wordpress theme web design
Wordpress theme web design

Using the Custom Shape Tool (U), it’s possible to represent an indicator near the made link:

Wordpress theme web design
Wordpress theme web design

Next we’ll represent again a pattern, creating firstly a new file of 6×6 px and 72 dpi. The applied instrument in this case is the Pencil Tool (B) (brush of 1 px) and the color #CDC7BB.

Wordpress theme web design

Save it!
Edit>Define Pattern
Select on this stage the Rectangle Tool (U) to draw a dividing line:

Wordpress theme web design

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

Wordpress theme web design
Wordpress theme web design

Represent next the content of the second section under the dividing line, leaving a small space. The title of the section, the basic text and the link should be represented with the same writing type we did for the first section on the central panel:

Wordpress theme web design

Make a copy of the layer containing the dividing line and then apply the Free Transform option to situate the copy in a way as to divide the central panel on three smaller sections: Insert the title and the appropriate text on the third section:

Wordpress theme web design

Under the third section’s link we’ll place the page’s marking:

Wordpress theme web design
Wordpress theme web design

Represent an icon on the left side of the sections’ titles. Begin working by creating the primary layer and then select the Rounded Rectangle Tool (U) with a radius of 3 px and the color #2381BE

Wordpress theme web design

Using the Custom Shape Tool (U), we’ll represent several pointers, applying the color #F2E9E0

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

Getting the necessary result is possible if combine in a group all the layers composing the section’s indicator (press Ctrl button to mark out all the layers we need and then hold on the left mouse’s button while taking down the marked layers on Create a new group option). Make four copies of the group and select after that the Free Transform option to situate the copies as it is indicated below:

Wordpress theme web design

On the bottom part of the site’s page we’ll represent a site’s footer, choosing for this operation the Rounded Rectangle Tool (U) with a radius of 10 px and the color #2393D5.

Wordpress theme web design
Wordpress theme web design

Make a copy of that layer we’ve used it on the very beginning as a pattern for the site’s header. Select after that the Free Transform option to minimize the copy and place it above the layer on the bottom part of the site.

Wordpress theme web design

Press Alt button and make a mouse click between the texture’s layer and the layer on the bottom part of the site’s page. Select the next shown parameters for the layer: Blending mode-Difference

Wordpress theme web design

Finished!

View full size here.