Photoshop Tutorial – Create a Clean and Colorful Web Layout

Pen Tool can help you to create nice looking shapes for your web layouts.

Using strange shapes and buttons can change the overall look of you layout. This layout can be used also for a wordpress theme if you know how to code it.

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

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.

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

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.

With Pen Tool you can create a shape similar with mine

For this shape I will use the following layer styles

This is my result so far.

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.

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.

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.

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

I will add the following layer styles

This is my result

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

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

This is how my shape will look like

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

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

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

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

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

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

With Rounded Rectangle Tool I will create three shapes

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.

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

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

Source: grafpedia.com

you may also like:

• Photoshop Tutorial – Video Sharing Header
  This is what the final result will look like, a nice clean header. 1. First thing we want to do is create a new document with the dimensions of 1000×190. 2. Using your rectangle t...
• Photoshop Tutorial – Create a clean hosting layout
  In this tutorial I will show you how to create a simple and nice looking hosting layout in a few steps.  You can create this layout in almost one hour. It is very easy and the end result is quite good...
• Photoshop Tutorial – Modern Clean Style Layout
  Today i will show you how to create a clean style layout. You can see it in the following image Create a new document with a grey background: #464646 The size should be 760 x 770 px. Create...
• Photoshop Tutorial – Design an amazing 3d hosting layout
  Create a new document with any size you want. The width is more important than the height. It is recommended to use a value for the width between 920 and 1000 pixels. This width will fit well an all t...
• Photoshop Tutorial – Design a Furniture layout or a Manufacturer layout
  Things you need to complete this layout 1. 200 Pixel Patterns 2. 325 Pixel Brushes Create a new  document. I will use always for my tutorials the following size: 960×900 pixels. Change your foreg...

No Responses to “Photoshop Tutorial – Create a Clean and Colorful Web Layout”

1. 50+ Favorite Photoshop Tutorials —- November 21th 2009 - DoNotYet.com says:

   November 22, 2009 at 10:54

   [...] 36. [Photoshop Tutorial] Create a Clean and Colorful Web Layout [...]