Web 2.0 photoshop layout tutorial
This tutorial will guide you through the process and ideas behind the designing a professional web 2.0 website. The layout can be used as a wordpress portfolio layout, or for a corporate layout. With a few changes you can use it also for a clean hosting layout. PSD layotu is available only for VIP Members
Apply for a VIP to download all PSD layouts for each tutorial including this one.
Open a new document with the following size: 960 x 900 pixels, then with Rectangle Tool, add some rectangles
For the layer number 2 and 4 (see image from above) I will add the following layer styles
For the first layer, I will use the following color: #d57a1a, and for the layer number 3 I will use the following color: #e5e1de. This is my result so far. Please click on the image to see the real size layout
On the body of this layout I will add a white shape with Rounded Rectangle Tool. I will set the corner radius to 6 pixels
For this white shape I will add the following layer styles
This is my result so far
It is nothing to fancy. The details on this layout I will add later in this tutorial.
Now I will duplicate this layer. To duplicate a layer you need to select it first in your layer palette, then press on CTRL+J
Right click on this copy, and choose Rasterize Layer.
The next step is to Grab Rectangular Marquee Tool, and you have to create a selection like in the following image
Now hit Delete on your Keyboard, then press on CTRL+D. This is my result
I will choose Rectangle Tool and I will create 2 shapes in the middle of this layout
It doesn’t matter what color you choose in the next step I will add a layer style for both black shapes
This is what I have so far
With Rounded Rectangle Tool I will create a navigation bar at the top
I will add the following layer styles
This is how my navigation bar looks like. I will place some text buttons over it. I will use the following font:
Bookman Old Style, Bold, 16 pt, Crisp
Under this big button, I will create a shape with Ellipse Tool
Then go To Filter > Blur > Gaussian Blur, and add use my settings
Lower the opacity for this shape to 50 %. This is how my navigation bar looks like
In the middle of our layout I will add 3 shapes
For all this red shapes I will add the following layer styles
This is my result
In the middle of this shape I will add an image. I will use the image with my last tutorial:
Draw an awesome surreal dragon
I will also add some arrows with Custom shape tool
The next step is to add some text on your layout with Horizontal Type Tool
With Line Tool I will add some horizontal lines. All my lines will have 1 pixel
I will add 2 buttons like in the following image
I will create a new layer on top of all layers, and with Brush Tool, I will add a single point right above the logo
I will change the blending mode for this layer to Soft Light, and the opacity value to 50 %
This is my final layout. Please click on the image to see full size layout. If you want to play with settings, please apply for a VIP Subscription , and you will be able to download this PSD layout , together with all our resources and other PSD layouts
Do you know that you can download our huge collection of PSD layouts, vectors, brushes for only 9.95 $ ? Join now !
Download new ccna training tutorials now to learn each and every thing easily and get a hold on your entire ccna exam topics. We are also offering you special tutorial for your professional mcp certification exam
Responses to “Web 2.0 photoshop layout tutorial”
Trackbacks
- Graphic Design Links and Tutorials
- You are now listed on FAQPAL
- zabox.net
- vot.eti.me
- joyoge.com
- 23 Inspirational Photoshop Tutorials For Creating Impressive Web Layouts
- 90 New And High Quality Photoshop Web Layout Tutorials | Graphic and Web Design Blog - Inspiration, Resources and Tools
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
-
nice clean web 2.0 layout I like this color, thanks for the tut..
Nice tutorial!
Featured here: http://www.presidiacreative.com/web-picks-21/
Really nice tutorial…
Thank you for such a clear and honest tutorial.
Once I created the above .PSD file, I can copy and paste the layer styles; reusing them in other projects.
carlnunes – simple content that steers your visitors to sales!
Yes you can use them in your other projects
Very well done and very detailed. A good tutorial. I’ve been looking for a few Tuts, on shiny. – ksb
Useful tut, Thanks a lot !
A good tutorial for creating a popular look. The only thing I would be worried about is creating something that looks just like everyone else’s web 2.0 website.
Good tutorial. Simple and easy to follow.
nice layout …
Very nice tutorial
Awesome layout tutorial
Nice layout
nice step by step tutorial
very easy to follow
Thanks a lot
keep up good work
god bless you
A very thorough layout tutorial, thanks for posting this!
I really like the choice of color here. Definitely not your usual color, the orange shade is a refreshing one. The layout is simple, uncluttered, and elements are well spread out. This is definitely a winner. Thanks!
Really nice tutorial…
how do you turn it into a functioning site? i want the middle to rotate through automatically.
Man I could live on this site. After reading through this site you can make anybody a designer!
Thx for this nice tutorial!
Nice! Just need to work out how to do the code behind it. Cheers.
nice layout tutorial
& good tech for psd layout
Nice tutorial, learned lot…
Thanks,