3,259 Subscribers
May
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 49 $ ? Join now !
Our latest JN0-100 resources include up to date HP0-Y23 questions and 642-426 practice test to help you pass exam easily and fast.
Newsletter
Subscribe for free to the grafpedia’s newsletter and get all updates coupons and exclusive free graphic resources every week. Read this page to have more information about the newsletter or fill the form below to subscribe now !
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
- 30+ Newly Fresh Web Design Layout Tutorials | iwebask
Leave a reply
Subscribe for free to the grafpedia’s newletter and get all updates and exclusive free graphic resources every week !
- Actions (7)
- Backgrounds (2)
- Brushes (31)
- Cinema 4D (1)
- Contests (4)
- Designing (16)
- Drawing (13)
- Effects (4)
- Gradients (4)
- HTML5 / CSS3 (2)
- Icons (52)
- Illustrator (3)
- Layer Styles (4)
- Logos (1)
- News (14)
- Patterns (5)
- Photo Effects (3)
- Psd Themes (101)
- Psd to HTML (1)
- Stock Images (20)
- Templates (103)
- Text Effects (1)
- Textures (17)
- Tutorials (129)
- Vectors (134)
- VIP Downloads (217)
- Web Elements (16)
- Web layouts (108)
- Wordpress Themes (1)
Facebook Grafpedia Group
© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork
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,
Thank you my dear this is really great tutorial
very cool graphic tutorial thanks for sharing.
Thanks from Valencia. Spain
Thanks, enjoyed. Easy to follow & good result.
Nice job! it’s a very good tut. I’m looking for the tut like this
Nice tutorial with good color combination…