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 PSD Layout with a 3D Look

Create a Clean PSD Layout with a 3D Look


Open a new document with the following size: 960 x 900 pixels. With Paint Bucket Tool, add the following color on your document #04283b, then with a big smooth brush I will create a white point in the middle

image 1

I will change the blending mode to Soft light.

image 2

I will select Rectangle Tool, and I will create a few shapes like in the following image. Please click on the image to see how I will place the shapes. I will use the following color: #41738e

image 3

On the left side of the layout I will create another one with the following color #28607d

image 4

I will go to Edit > Transform > Skew, and I with Move Tool I will modify the shape until I get the following look

image 5

I will do the same trick on all 4 corners

image 6

Now I will create the same shapes with another color right under these ones

image 7

Under this top bar I will create another shape with Ellipse Tool

image 8

I will go To Filter > Blur > Gaussian Blur, and I will use the following settings

image 9

I will lower the opacity to 40 % for this shape. This is my result

image 10

I will create a copy of this shadow and I will place it on the bottom bar

image 11

I will create a new layer on top of all layers (press CTRL+SHIFT+ALT+N), and with Pencil Tool I will draw a thin line. Please note you have to set your brush size to 1 pixel

image 12

I will create the line like in the following image. Hold down the Shift Key when you draw the line. In this way you will make a horizontal line

image 13

I will grab Eraser Tool, and I will set my brush to a smooth brush

image 14

I will delete some parts of the line.

image 15

The next step is to add some text with Horizontal Type Tool

image 16

On the right side of the layout I will create a black shape

image 17

I will go one more time to Filter > Blur > Gaussian blur and I will use the same value like in the previous step. This is my result

image 18

With Rectangular Marquee Tool, I will make a selection right in the middle of this shape

image 19

Be sure you have the selection active, now press on CTRL+I, then on CTRL+D

image 20

I will lower the opacity value to 6 %. This is my result

image 21

With Rounded Rectangle Tool I will create a simple shape

image 22

I will press on CTRL+T, and then I will rotate the shape like in the following image

image 23

Be sure you will hit the enter key, then right click on the layer in your layer palette, and choose rasterize layer

image 24

One more time we will use Rectangular Marquee Tool, to draw a selection right in the previous spot as before

image 25

Now hit the Delete key from your keyboard or go to Edit > Clear. Hide the selection by pressing on CTRL+D. This is my result so far.

image 26

With the same steps as above I will add another shape with a darker color, and I will place it with another angle

image 27

I will download a nice set of icons from Wefunction.com
And I will place a small twitter bird on the top of the layout

image 28

This is my final result.

Create a clean PSD layout with a 3D look



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: