Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Clean and Colorful Web Layout in Photoshop

Create a Clean and Colorful Web Layout in Photoshop


As usual we will need to create a new document. To create a new document you need to press on CTRL+N and then you can set the size for this document. I will use as always the
same size 960 x900 pixels.
With Rectangle Tool I will create a big shape on top of the layout. Here I will place the navigation bar and the logo. The color used to create this shape is: #716f1a

Img

I will make a selection around this shape, and then I will create a new layer (press on CTRL+SHIFT+ALT+N). On this layer I will draw a white point with Brush too, and a big smooth round brush.

Img

I will change the blending mode for this layer to overlay, and in the same time I will change the opacity value to 50 %. If you want to get rid of the selection press on CTRL+D

Img

In the next step I will use Pen Tool to create a nice shape where I will place some unusual buttons. Before I will use Pen Tool it is recommended to make the grid visible.

Img

With Pen Tool you can create a shape similar with mine

Img

For this shape I will use the following layer styles

Img

Img

Img

This is my result so far.

Img

With Pen Tool create another shape and place it like this. Do not forget to enable the grid. It will help you to create a perfect button.

Img

I will add a simple black gradient for this button. This gradient is from our biggest pack with Gradients. 27.000 Photoshop gradients. In the same time I will add also some text.

Img

Right under this black button you can create another button (a little bigger) the easy way is to duplicate the black button, and then you can change the size. To change the size of the shape press on CTRL+T and then with mouse pointer drag from a control point while you hold down the ALT key. I will change the color for this shape to white and I will reduce the opacity until I like the result.

Img

At the bottom of the green shape I will add another orange shape

Img

I will add the following layer styles

Img

Img

Img

Img

This is my result

Img

I will select Rounded Rectangle Tool, and I will create a big shape with the following color: #d4d4d4

Img

I will add the following layer style. Please save this layer style, because we will use it later.

Img

Img

This is how my shape will look like

Img

With the same tool: Rounded Rectangle Tool I will create another shape. I will use the following color: #eae7e5

Img

Over this shape I will create another one with a white color. I will add the layer style I have used for the big shape

Img

With Pen Tool I will create a shape like our button. Turn on the grid (CTRL+H) if you want a perfect shape.

Img

On top I will create another one (a smaller shape)

Img

With the same technique I will create another one like in the following image

Img

On the other side of the shape I will create a similar shape

Img

With Rounded Rectangle Tool I will create three shapes

Img

I will select all three shapes and I will drag to the "Create a new layer "button from the bottom of your layer palette. This action will duplicate the shapes, and in the same time Photoshop will merge all three shapes into a single one. You will notice also a new layer. Be sure you select this layer, and delete the bottom part of the shape until you have a similar result with mine.

Img

Here is the layer style I have used for these content boxes.

Img

Img

Img

One of my final steps is to add some text with Horizontal Type Tool. I will use the following font: Myriad Pro. In the same way I will add also some images and some icons. Here you can download the Icons

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: