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
Loading ...
Trackbacks /
Pingbacks