Create a clean PSD layout with a 3D look
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
Apply for a VIP membership to download all PSD layouts for each tutorial and our entire collection of premium resources for designers.
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.
Easy to learn tutorials available for mcdba certifications. Our tutorials will help you learn each and every thing about 70-680 exam topics. Microsoft exam students can also get a free copy of new mcsa 2008 tutorial.
Responses to “Create a clean PSD layout with a 3D look”
Trackbacks
- Create a clean PSD layout with a 3D look | CgBaran Tuts
- 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com
- The Most Popular Photoshop Tutorials of all Time
- 160+ Mega Web Design Tutorial Roundup | tripwire magazine
Leave a reply
-
Web design jobs- Nonpublic project #609030 by SeoWebLogix
- Blog writer by acerothstien
- Fading pictures and flash navigation by wiliss87
- Banners for musicshops by BasepointMedia11
- Video Views by marcuskw
- Private Project PTJ 13 - WebGallery Only by simonix
- Private Project PTJ 12 - WebGallery Only by simonix
- php guys needed by Pascal79
- Joomla template purchase and integrate by bnmagic
- W3C validated xhtml conversion with script integration by begwise
-
Simply Amazing
looks really nice, thanks for tut..
Great job! The template looks just great!
I am starting to see the 3D design all over now. It really grabs my attention when visiting a site.
Thanx for the tut!
looks good, keep it up
cool idea, but bad perspective and a very bad design
Thats awesome. Looks much easier than I realised (as always). Great explanation, thanks.
it’s really simple but awesome!
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
Awesome tut / I’ll try it
rocknroll!
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
In a word: SLICK!
Excellent tutorial thanks i love colors
I Liked the way u made it easy to understand loved ur work
Looks like a nice layout…
thansk a lot bro
really usefull.
hello i am laieng
i want to study how to create web site
can to tell me?
your design is very good
i wnat to do like this
good luck
realy nice work.. i want to do like that…
Another nice tutorial! I would like to try this out soon. Thanks for sharing!
Hi,
Looks nice how would you code the background? I don’t 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
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
Very nicely done.
nice tutorial, nice design, excelent for company homepage, have your this as wordpress theme?
Very nice and simple…good job!
pretty awesome effect. Clean and simple
Can you also make a tutorial about how to convert this mockup into Css html file.
Thank you
We have already a tutorial on how to code a website:
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
this tutorial is available for VIP users only
Great tutorial! Turned out pretty good.
Can i use it on one of my projects?
As long as you do not sell the layout you can use it.
thanks guy! nice tut! it’s helps me to improve my designs!
Awesome tutorial. I will post a link to your tutorial on my website.
look good!
nice tutorial.
thanks.
awesome. really great tutorial..
Thank you, I will definitely try this one.
Great tutorial. Thanks for breaking your process down.