create clean psd layout 3d

8/3/2019 Create Clean Psd Layout 3d

1/32

Grafpedia

Premium graphics for smart webmasters

Home News

Tutorials VIP Downloads

RSS Feed

About Us Advertise

Grafpedia Tutorials Create a clean PSD layout with a 3D look

Create a clean PSD layout with a 3D look

Search


2/32


3/32

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

I will change the blending mode to Soft light.


4/32

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. Iwill use the following color: #41738e


5/32

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


6/32

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

I will do the same trick on all 4 corners


7/32

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


8/32

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

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


9/32

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

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


10/32

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 setyour brush size to 1 pixel

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


11/32

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

I will delete some parts of the line.

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


12/32

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


13/32

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

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


14/32

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

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


15/32

With Rounded Rectangle Tool I will create a simple shape

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


16/32


17/32

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.

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


18/32

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

This is my final result.


19/32

If you want to download this layout and all our premium resources please apply for a VIP account.

Login/Register to Download

Digg Del.icio.us StumbleUpon Technorati Reddit


20/32

Responses to Create a clean PSD layout with a 3D look

1.Ivan 20.05.2009 um 10:02 am

Simply Amazing

2.joyologo design shop 2.0 20.05.2009 um 12:39 pm

looks really nice, thanks for tut..

3.AREA 1 20.05.2009 um 1:35 pm

Great job! The template looks just great!


21/32

4.Chon 20.05.2009 um 3:52 pm

I am starting to see the 3D design all over now. It really grabs my attention when visiting a site.

5.MB 20.05.2009 um 11:27 pm

Thanx for the tut!

6.Matthew Heidenreich 21.05.2009 um 9:21 am

looks good, keep it up

7.alex 21.05.2009 um 9:25 am

cool idea, but bad perspective and a very bad design

8.tim 21.05.2009 um 11:17 am


22/32

Thats awesome. Looks much easier than I realised (as always). Great explanation, thanks.

9.str8 edge 21.05.2009 um 7:25 pm

its really simple but awesome!

10.huwaw69 22.05.2009 um 8:33 am

what the hell! this layout is really amazing! specially the border like from the top and bottom great tutorial and guide! thanks for sharing

this im gonna use this later on

11.WebTurist 23.05.2009 um 11:02 am

Awesome tut / Ill try it

12.Hezi 23.05.2009 um 11:40 am

rocknroll!


23/32

13.Deea 25.05.2009 um 8:00 am

Another great tutorial. Very easy to follow. I am reading tutorials on another blogs but yours are very easy to follow. I learn more interesting

stuff from one of your tutorials, than i learn on another blog following 5 tutorials. I love you admin

14.Mar 26.05.2009 um 12:56 am

In a word: SLICK!

15.CgBaran Tuts 26.05.2009 um 11:16 am

Excellent tutorial thanks i love colors

16.taushif.patilla 27.05.2009 um 12:41 am

I Liked the way u made it easy to understand loved ur work

17.

A.D.K. 29.05.2009 um 8:02 am


24/32

Looks like a nice layout

18.Aneslin 30.05.2009 um 12:51 pm

thansk a lot broreally usefull.

19.LAI ENG KOCH 31.05.2009 um 9:41 pm

hello i am laiengi want to study how to create web sitecan to tell me?

20.LAI ENG KOCH 31.05.2009 um 9:43 pm

your design is very goodi wnat to do like thisgood luck

21.dipali 1.06.2009 um 6:20 am

realy nice work.. i want to do like that


25/32

22.Wholesale Printing 12.06.2009 um 12:36 am

Another nice tutorial! I would like to try this out soon. Thanks for sharing!

23.oppeneer 13.06.2009 um 6:18 pm

Hi,

Looks nice how would you code the background? I dont see the same possibilities that you did in your layout without using slice tool tutorial.

Could you please explain how to code the background with this layout.

Thanks

24.admin 14.06.2009 um 3:07 am

It is very easy. Hide all the layers except the background layer. Save the document as bg.gif file

Then use the following css code :

body {background-image: #04283b url(bg.gif) no-repeat;position: relative;margin: 0 auto;width: 960px;}

If you look more carefully on the tutorial you will see that my document size is 960px.


26/32

and the color of the background is #04283b

With my technique all works very good. I am not the one who code the layouts but my friend does not have any problem at all.Thank you

Trackbacks

1. Create a clean PSD layout with a 3D look | CgBaran Tuts2. 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com

Leave a reply

Name (required)

Mail (will not be displayed) (required)

Website

Learn More | Sign up

submit comment


27/32

Advertise Here


28/32


29/32

Login

Username

Password

Remember me

Register Recover password

Grafplus lates downloads

Vector missile launcher Vector bug - Vector grasshopper

vector bombs - vector torpede Vector bilboard Old style retro car in vector file format Vector army tank ACrobatic vector plane Vector military tank Vector acrobatic plane Vector speed boat

Subscribe to Grafpedia

Subscribe to our RSS feed and you can download unique premium downloads

Login

gfedcb

Enter your emailaddress:


30/32

Categories

Actions Brushes Contests Designing Drawing Gradients Icons Illustrator Layer Styles News Patterns Photo Effects Stock Images Swatches

Textures Tutorials Vectors VIP Downloads Web layouts

Advertise here

Advertise Here

Subscribe


31/32

Recent Comments

admin on Draw Fairy Tale Characters in Photoshop klavins21 on Draw Fairy Tale Characters in Photoshop George on Design a realistic website layout in photoshop

Nick on Design a two color website layout in Photoshop StriderGax on Design a two color website layout in Photoshop

Pages

About Advertise Contact us Vip Membership

Most downloaded resources


32/32

27.000 Photoshop Gradients

Last Posts

Draw Fairy Tale Characters in Photoshop Hi-Res Square pattern brushes Design a two color website layout in Photoshop 35 Seal Brushes - Badge Brushes

Vector ink drawings

2008 | Grafpedia is proudly powered by Wordpress

create clean psd layout 3d

Documents