Thursday, 26 September 2013

Posted by Muhammad Naeem On Thursday, September 26, 2013


3D-portfolio-website-design-tutorial
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 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.



How to Create a 3D Portfolio Layout Design – Tutorial part 1

How to Create a 3D Portfolio Layout Design – Tutorial part 1 How to Create a 3D Portfolio Layout Design – Tutorial part 1 How to Create a 3D Portfolio Layout Design – Tutorial part 1 How to Create a 3D Portfolio Layout Design – Tutorial part 1

you are reading : How to Create a 3D Portfolio Layout Design – Tutorial part 1

Amazing content i did not see before thanks..
Naeem Sagar
Date published: 10/13/2015
4.8 / 5 stars
How this Post..

0 comments :

Post a Comment

Write some thing Good for us...........

Note: only a member of this blog may post a comment.