Grafpedia

Premium graphics for smart webmasters

Home News Tutorials VIP Downloads

RSS Feed

About Us Advertise
Search

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

Create a clean PSD layout with a 3D look

in Tutorials, Web layouts by admin on May 20th, 200926 Comments

Webfetti.com

Ads by Goooooogle

75
tweets

retweet

Today I will show you how to create a clean layout with a 3D look. It seems this is the last trend lately, and I want to show you exactly how easy you can to create such a layout. You can use this layout for your design portfolio, or you can create also a nice looking wordpress portfolio theme Preview full size layout Apply for VIP to download this layout

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

I will change the blending mode to Soft light.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

This is my final result.

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

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!

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

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!

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

Looks like a nice layout

18. Aneslin 30.05.2009 um 12:51 pm thansk a lot bro really usefull.

19. LAI ENG KOCH 31.05.2009 um 9:41 pm hello i am laieng i want to study how to create web site can to tell me?

20. LAI ENG KOCH 31.05.2009 um 9:43 pm your design is very good i wnat to do like this good luck

21. dipali 1.06.2009 um 6:20 am realy nice work.. i want to do like that

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.

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 Tuts 2. 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com

Leave a reply
Name (required) Mail (will not be displayed) (required) Website

submit comment

Learn More | Sign up

Advertise Here

Login
Username Password
Login
b c d e f g

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

Enter your email address:

Subscribe

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

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

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