I will use the grid system from 960.gs
I will download the psd files for Photoshop an I will open the 12 column grid PSD file.
Once I have the psd file opened, I will make sure my Guides are visible:
I will set my foreground color to #d1d1d1 and with Paint Bucket Tool I will fill the background layer.
Available for download you will find
Wordpress Theme
PSD Layout
Help file
When you transform the PSD layout in a wordpress theme if is very
good if you remember the color codes. In this way you can save a lot of
time with the coding part.
In this tutorial I will turn off the Guides, because I want you to see
better the layout. For your own good I will keep the guides active. You
will align the layout very good if you keep your guides.
On top of the layout I will create 3 shapes. and I will apply some simple layer styles.
You can use one gradient from the following 27.000 Photoshop gradients
This is my result so far after I will add some simple gradients to the top and the bottom shape
I will create a new shape with Pen Tool. I will place the shape on top of the document. I will add the same layer style I have used for the other shape.
In the middle of the layout I will create a shape with Rounded Rectangle Tool
The layer style I have used for this shape are:
On top I will create another selection like in the following image. The easy way is to load the selection for the whole shape, and then you can subtract from selection.
I will create a new layer ( press on CTRL+SHIFT+ALT+N ) and then add a
gradient. The color I have used for the gradient are: #c1c1c1 on top
and #dadada in the bottom
I will deselect ( press on CTRL+D ) and then I will create another shape
with a white color. You can notice how easy is to align the layout if
you have the Guides active.
For this layer I have used a simple layer style
You can notice a light shadow at the top of the shape. I have used the same technique as above.
On the bottom of the layout I will create another shapes with Rectangle Tool. Please click on the following image to see the full size wordpress theme.
On the sidebar I will add some icons
With Line Tool I will create two lines with different colors
I will add under this social bookmarking area a few spots for banners, and under the spots I will add some text.
Now we will create the elements for our posts. For start I will use Rectangle Tool to create a shape where we will place the post image
Then I will add some text
Under first post I will add some lines
I will create another 2 posts using the same techniques as above.
With Rounded Rectangle Tool I will create a button and I will place it above the social bookmarking icons
For this shape I will add the following layer styles
This is my result so far
Make sure you have this layer selected, and then press on CTRL+J ( duplicate layer )
Select both layers in your layer palette and press on CTRL+E ( merge )
With Rectangular Marquee Tool I will care a selection like in the following image
I will hit the delete key on my keyboard, and then I will press on CTRL+D to deselect. This is my result so far
On top of the layout I will add another button , and inside it I will create some text buttons
I will add a text logo , and some text on the bottom of the layout and my wordpress theme is ready. Please click on the following image to see the full size layout
