In this tutorial I will show you how to create a portfolio website design with a 3D look. When I design websites I like to use frameworks. For this layout I will use the PSD framework from our Ultimate CSS Framework. This framework will help you convert your PSD layouts into valid CSS/xhtml websites.
Bellow you can see the ultimate portfolio website design with 3D look. If you’re a member, you can download the PSD Layout for this tutorial at the bottom of the page.
If you haven’t purchased a membership yet you can create a new document with the following size: 1100 pixels x 1200 pixels. You can use any background color you want for this background. In the next step we will add a layer style for this background layer. In case you can not add a layer style, then you can try to duplicate the layer ( press on CMD + J ), and after that you will be able to add the following layer styles.
Bellow you can see the layer style i have used for my website background.
The color codes i have used in the Gradient Editor window:
On top of the website i will create a shape. This shape will be transformed soon into our website header, where we will place the logo, and some buttons, later in this tutorial.
For the dark shape from above i will add the following layer styles.
Here is the result. You can use any other color combination you want. We recommend you to use our 25.000 Gradients to create your website backgrounds.
In the middle of the layout i will create a white shape with ellipse tool.
Make sure you have the layer selected, and then go to Filter > Blur > Gaussian Blur, and add a value between 50-60. In the same time you can lover the opacity for the white shape layer to something around 50 %, and you can change also the blending mode to Overlay.
In the middle of the layout i will create a big shape. Here we will create a slideshow.
Bellow are the layer styles used for the shape from above.
Under this shape i will add another shape. This shape will be used as a body of our layout.
Right above the slideshow area i will add a nice slogan. This will be very visible, and sometimes these types of slogans can turn your users into customers. I have used Horizontal Type tool to write the text there.
With Rectangle Tool i will create a dark shape like in the following image.
Then i will select pen tool to create a trapezoidal shape. As you can see i have used the same layer styles i have used for the header shape.
In the middle of the previous shape i will draw another one, but this time i will use a dark color. Later this shape will be replaced with a stock image.
On the left side of the slideshow i will create another shape with pen Tool.
Bellow are the layer styles used for this shape
The same layer styles will be used also for the right side of the slideshow. To create the same effect as mine you need to check the reverse checkbox in the stroke settings
With Ellipse tool i will create a black shape under the slideshow. This dark slideshow will be used to create a realistic shadow.
Make sure you have the dark shape selected, and then go to Filer > Blur > Gaussian Blur, and enter a value between 20-30 in the Gaussian Blur settings window
I will us line tool to create a a nice shiny line. First add a Line with Line Tool. make sure you create a white line in the same spot you see from the following image.
Right click on this line in the layer palette, and choose Rasterize Shape. Select Eraser tool, and with a smooth round brush erase the ending lines.
This is how my layout look so far, after i have used one of the most know wallpapers. The Mac OS X wallpaper with Aurora.
On the bottom, and on the top of the slide show i will add some transparent shapes with Pen Tool.
Then with line tool i will create the following lines and dividers.
Under this slide show i will create two shapes. here i will add later some vector icons.
As you can see the shapes from above have a nice pressed look. If you want to create the same effect, then you can add the following pressed layer styles.
On the top of the layout i will create a simple navigation bar, and in the same time i will use a round shape to create a pressed button.
on the middle of the layout i will add some text and some vector icons. You can find a few hundreds vector icons here: Download 512 vector icons
Over the slide show i will add some text.
Then you can add more text to the layout until you re happy with your result.
Want to download the source file ? You need to register with us in order to download this PSD layout.
[bar_info_box_2 buttontext="Download PSD!" buttonurl="http://www.ultimatedesignertoolkit.com/download/tutorial/1-portfolio-layout.psd.zip" text="Already a member?" /]