Wordpress theme web design

December 12th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout

Thersday, 12 September 2008

Create a clean wordpress theme in Photoshop CS3

Written by Administrator

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create a clean wordpress theme in Photoshop CS3

Gradient’s parameters:

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

Let’s introduce the title for this button too:

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Insert the title of the lateral menu:

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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:

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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).

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Gradient’s parameters:

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

The final result!

View full size here.

Post Pages: 1 2 3

  • Carike

    12.12.08

    Great photoshop post.I have been a Graphic Designer for a long time, and am quite competent in Photoshop, but an absolute newbie to Wordpress. My question is: Is there some basic structure to keep in mind when designing for Wordpress, ie there must be a header, footer, sidebar, main content area, etc. Would it be possible to develop a tutorial that is structural rather than creative? And show where these areas must be, max sizes, use of photographs etc.