| Design Layout Tutorial(Adobe Photoshop Tutorial) |
|
Hello World !
This is my first tutorial in Adobe Photoshop, and based on the feedback I will create more tutorials ! Here is my final result:
To make a similar web layout you will need the following:
If you have all of those, you’re ready to go! I will begin with the logo, I will continue with the navigation and the final step (and the easiest one) will be to add some dummy text for content. Let`s start!
First of all you will need to create a new document with the following:
![]() After that please create a new layer (Ctrl+Shift+N), pick Rectangle Tool ![]() In the next step we will need to rotate the shape a little bit. To do that first you will need to select the layer (where the shape was created) and then use this shortcut: Ctrl+T (free transform) or go to Edit>Free Transform from PhotoShop menu. Rotate it on the left side (as you wish) and after that, move the shape to the top, to cover the right corner of the shape: (to let visible only the left corner) ![]() Now we will need to add the following styles to the shape:
All you have to do now is to add your text and graphics (that red shape is a vector from here: http://www.coolvectors.com/Vector-Graphics/Abstract-Vectors.html )
If you want to have to have the same look for your logo I advise you to download the psd file (is located at the bottom of the page) We will move to the Navigation now. To build it we will need to add 3 guide lines. For that please, go to: View>New Guide.
![]() Here choose:
You result will be something like this one:
Now you will need to choose again rectangle tool and to add 2 rectangles between guides.
After that in the blending mode we will need to add the following styles for both of the partition that we have added with the rectangle tool. For the first one please use the following style: Gradient Overlay with the this colors: 9f0e23 and d80c0c
And for the second one : Gradient Overlay with the this colors: 631c1c and 940c1f
Here is my result:
Now we will need to create that background effect. Please start another layer Ctrl+Shift+N , I will name it Effect, choose Elliptical Marquee Tool
and draw a shape like this one :
with a white color (be sure that the layer is positioned above the background layer, other ways it will cover the navigation)
![]()
Deselect the layer (Ctrl+D) and go to: Filter>Blur>Gaussian Blur
Add a radius of 45.
Here is my result:
Next we will need to add a shadow. Please start another layer Ctrl+Shift+N , I will name it Shadow choose Elliptical Marquee Tool , draw a shape like this one and fill it with black color
![]() Deselect the layer (Ctrl+D) and go to: Filter>Blur>Gaussian Blur Add a radius of 8 Here is my result : Now you will need to create another layer, than pick the Rectangle Tool and create a shape like this one: Once you have created it, all you have to do is to set the opacity to 15% and to multiply it. ![]() Here is my result: Next we will continue with the content area: Add the folowing styles:
The next step and the final one is to add some vectors . I have done these using vectors from http://www.coolvectors.com (exactly this set:http://www.coolvectors.com/Vector-Graphics/Abstract-Vectors.html ) Here it is the result:
The tutorial is almost ready You will need to populate with some content like I did in this tutorial. To understand better how the thing are working here, I advise you to download the psd file (where everything is included) If you want to create a html file from this web layout(psd file) I advise you to watch this tutorial.
At the end I will have another great news.Soon this weblayout will be converted in a wordpress theme, drupal and maybe joomla and it will be posted on this website www.foxtheme.com
Comments (10)
![]() written by alexandr, May 24, 2008
Nice layout! You deserved my registration
! I found some ideas for my portal, the hardest work will be the conversion to joomla template and make it compatible with all browsers ( damn explorer)! Thanks! written by imran, May 06, 2008
HAI GOOD WORK KEEP GOING ......HOPE TO SEE MORE FROM YOU
THANK YOU KEEP IT UP written by Barut, April 23, 2008
hey i want to thank you it was a very good tutorial...
some looks good written by Muhammad Mirza, April 23, 2008
Welldone Boss .. I Like It Very Much .. Thanks for provide Such a good tutorials & Resources Site.
written by dew, April 22, 2008
Hi
I want to thank you for this tutorial.Is a great one(the entire website is) I have also downloaded some brushes and I will use them on my projects.Thanks again and keep up the good work Write comment
|
| Home |
| Photoshop Brushes |
| Free Fonts |
| Free Patterns |
| Tutorials |
Subscribe today and receive unique offers on photoshop style made available only to subscribers.