Normally a clean web 2.0 layout should not take you more than 30 - 40 minutes.
On the other hand web 2.0 layouts are very good for your user’s eyes. From my experience web 2.0 layouts will convert better your sales if you know how to outline the most important products or services you deliver.
You can use this layout also for a wordpress layout if you want. I will start to create this layout as usual by creating a new document. I will choose the width of my document: 960 pixels. The height is not important.
I will set the foreground color to: #5299ab. Then I will choose Paint Bucket Tool, and I will click one time inside my document. At the end of the tutorial you can change the color of the background, and you will have different results.
I will grab my Rounded Rectangle Tool, and I will make a button on top part of the layout. I will choose the following color for my button: #e6dfd0
I will add the following layer styles
This is how my button will look like
With Rectangle Tool I will create another 2 shapes
I will create a new layer (press on CTRL+SHIFT+ALT), and with Pencil Tool (set the brush size to 1 pixel) I will make drawing near my button
I will select Rounded Rectangle Tool, and I will create a new shape.
Here is the layer styles used to create this shape
Behind this shape I will create a similar shape with a black color. You can duplicate this layer (CTRL+J). Be sure you place this black shape behind the white one, and then go to Edit > Transform > Perspective, and drag from the top left corner of the shape to the left (hold down the shift key)
The black shape is used to create a realistic shadow. To achieve this effect you have to go to Filter > Blur > Gaussian Blur, and choose a value between 10 and 20 pixels
You can now lower the opacity value for the shadow to 20%.
Select both layers in your layer palette: the white shape and the shadow, and press on CTRL+E (this shortcut will merge the layers into a single one) this step is required if you want to go further with this tutorial.
After you merge the two layers please select Eraser Tool, and with a round smooth brush delete the bottom part of the shape. This is my result. You see how nice it blends with the white shape. This small effect will change the overall look of my clean wordpress theme, and in this area you can feature your best products or services.
The next step is also very important: the typography. When you create web 2.0 themes for wordpress, be sure you leave empty white spaces between your texts. Please click on the following image to see the full size layout with the text placed in place.
On the top part I will add some buttons. These buttons were made with Rounded Rectangle Tool, and with a simple gradient. Here you can download the biggest set of gradients you ever saw on internet: 27.000 different gradients
This is how my button will look like
On the right side I will place an image with one of the last set of vector icons, and I will create also some simple buttons for navigation
You can download the icons from the following link: Basic web icons
I am ready with the slide show. I will move forward to add some details to the body of this wordpress layout
I will add other icons, and in the same time I will use type tool to write down some minus signs
The last step is to add a web 2.0 look. Right now my clean wordpress theme is to plain. I will create a new layer right above the background layer, and with Brush Tool I will make some drawings under the logo, and on the footer of the website
I will change the blending mode for this layer to Soft Light. This is my final result. Please click on the following image to see better my web 2.0 layout.
If you want to download this layout please apply for a VIP account. For a small fee you can download all you can see on the following link: Grafpedia VIP Wall including this PSD Wordpress Layout
Please note: the payment is onetime fee and you will never be charged again at the end of the month.
0 comments:
Post a Comment