Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout How to Design a WordPress Theme in Photoshop

How to Design a WordPress Theme in Photoshop Web Layout Feb 11, 2011

I will start with a new document with the following settings

image 1

I will select Rectangle Tool, and I will create some simple shapes. Click on the image to see the full size image

image 2

On the big bottom shape I will add the following gradient. To add a gradient to a shape you need to go to Layer - Layer Style - Gradient Overlay

image 3

I will use the following settings for my gradient

image 4

image 5

This is my result

image 6

On the right side I will create 2 shapes

image 7

My shapes are made with black. You will see better where I will place the shapes in this way. You can use white colors for these 2 shapes. I will add the following layer styles for both shapes

image 8

This is my result

image 9

In this area I will create another shape with Rounded Rectangle Tool

image 10

Again with Rounded Rectangle Tool (with a radius of 30 pixels) I will create above a new shape

image 11

With Pen Tool I will create a small triangle

image 12

I will select both layers in my layer palette and I will press on CTRL+E

image 13

You will see that you have a single layer right now. For this layer I will add the following layer styles

image 14

image 15

This is my result

image 16

I've made this chat bubble because I want to place here some social bookmarking icons. After I will add there the icons, and some text this is my result

image 17

On the header of this layout I will add some globe brushes
I will add also a nice vector background. You can visit the tutorial here to learn how these wonderful lines were made: Lines in Illustrator
This is my result so far. You can see that I placed also some text

image 18

In the middle of this layout I will add some images, and some text

image 19

On the sidebar I will add also some text

image 20

I will create a new layer above all layers (press CTRL+SHIFT+ALT+N), and I will load the following set of pixel arrows and dingbats
I will choose one brush from this set of 325 pixel arrows, and I will place them near each category

image 21

This is my final result. If you want to download this layout you can apply for a VIP subscription, and you will be able to play with this layered PSD file. Please note that you will be able to download all our resources for a small fee.

image 22

subscribe to newsletter