Wordpress theme web design

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

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.

Create a clean wordpress theme in Photoshop CS3

Set the next indicated parameters by making a mouse click on the layer we work with on the layers’ panel. 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 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)

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

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.

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

The layer’s parameters: Opacity 50%, 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

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.

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

The layer’s parameters: Blending Options>Inner Shadow

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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.

Create a clean wordpress theme in Photoshop CS3

The layer’s 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

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.