Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Creative Unusual Layout

Design a Creative Unusual Layout


Start by creating a new document (CTRL+N) with the following size: 960 x 900 pixels, and with the background color #5c7a02.

Select Rounded Rectangle Tool, and set your corner radius to 50 Pixels
image 1

With this tool I will create a shape in the middle of my layout, then I will press on CTRL+T and while I am holding the Shift key down, I will rotate the shape

image 2

Right now it doesn't matter what color you will choose. I will use different colors for each shape I make, because I want to show you where I will place the shapes

image 3

Now I will change the color for all this shapes to #3c3427

image 4

On the top of my layout I will add another shape, but this time I will use the Rectangle Tool

image 5

I will change the color for this shape to # 3c3427, and on the bottom right of this layout I will add another shape

image 6

With Rounded Rectangle Tool, I will create another 2 shapes

image 7

Be sure you have selected both layers in your layer palette, then press on CTRL+T, and with your mouse pointer rotate the shape to the left. I will place my shapes like in the following image. Over this green shape I will have my text button.

image 8

I will create a new layer above all layers, and with my Brush Tool, I will add some points with a big smooth round brush.

image 9

Then I will change the blending mode for this layer to overlay

image 10

This is my result so far

image 11

Now with Horizontal Type Tool I will write some text. The font I will choose is Bookman Old Style. Italic.

image 12

Now I will add some images from my last tutorials in the middle part of my layout. I will cut some round images from my previous tutorials.

image 13

On the top of the website I will add another rounded shape.

image 14

I will select Line Tool, and with a thin line (1 pixel) I will create two lines between my text buttons.

image 15

I will select both line layers in my layer palette, and then I will press on CTRL+E (to merge the layers into a single one). I will select Eraser Tool, and I will use a Soft Mechanical brush with a size between 200 and 300 pixels. Then I will delete the right part of the line.

image 16

I will delete also the left part, and I will make some duplicates after this layer. With Move Tool or with your arrow key I will move the duplicated layers to the bottom.

image 17

With the same technique as above I will add some lines also on other parts of the layout. You can change the blending mode for this layer to overlay.

image 18

I will create a new layer right under my round images. I will select Brush Tool, and with a round soft brush, I will make a point over my layout in the following spot. Please set your foreground color to black.

image 19

Select Rectangular Marquee Tool, and create a selection like mine.

image 20

Your selection should be right between the horizontal lines you have placed a few steps ago. Now be sure you have the right layer selected (with the black brush drawing), and now press on CTRL+I, or go to Image > Adjustments > Invert. Your layout will look like this one.

image 21

Press on CTRL+D if you have the selection still active, and now change the blending mode for this layer to Overlay, and you can also lower the opacity value to 40 %.

image 22

This is how my simple slideshow will look like

image 23

Now I will add some round buttons

image 24

In the middle of my layout I will add also a round shape

image 25

This is my final layout

Design a creative unusual layout



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: