Wordpress theme web design

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

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.

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

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

Create a clean wordpress theme in Photoshop CS3

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

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

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

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

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

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

Create a clean wordpress theme in Photoshop CS3

the inscriptions on the button:

Create a clean wordpress theme in Photoshop CS3

the inscription in the search window:

Create a clean wordpress theme in Photoshop CS3

Give a title for posts section:

Create a clean wordpress theme in Photoshop CS3

Create a clean wordpress theme in Photoshop CS3

Insert below the date and whom the news belongs to:

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.