Grafpedia

Premium graphics for smart webmasters

 Home
 News
 Tutorials
 VIP Downloads

RSS Feed

 About Us
 Advertise

Search

Grafpedia » Tutorials » Web 2.0 photoshop layout tutorial

Advertise Here

Web 2.0 photoshop layout tutorial

in Tutorials, Web layouts by admin on May 18th, 200918 Comments
 32
tweets

retweet

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

Preview full size layout

Apply for a VIP to download the layout

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
Login/Register to Download

 Digg
 Del.icio.us
 StumbleUpon
 Technorati
 Reddit

Advertise Here
Responses to “Web 2.0 photoshop layout tutorial”

1.
joyologo design shop 2.0 18.05.2009 um 12:15 pm

nice clean web 2.0 layout I like this color, thanks for the tut..

2.
Eric Shafer 18.05.2009 um 2:17 pm

Nice tutorial!

Featured here: http://www.presidiacreative.com/web-picks-21/

3.
sandeep 19.05.2009 um 12:57 am

Really nice tutorial…

4.
carlnunes 20.05.2009 um 12:41 am

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!

5.
admin 20.05.2009 um 4:12 am

Yes you can use them in your other projects

6.
Ken Sven Boostrom 20.05.2009 um 7:06 am

Very well done and very detailed. A good tutorial. I’ve been looking for a few Tuts, on shiny. - ksb

7.
Danh ba web 2.0 20.05.2009 um 7:53 am

Useful tut, Thanks a lot !

 8.
Neil Gilbert 20.05.2009 um 9:18 am

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.

9.
Dicky 21.05.2009 um 4:08 am

Good tutorial. Simple and easy to follow.

10.
saurabh shah 21.05.2009 um 12:42 pm

nice layout …

11.
sakis 22.05.2009 um 11:16 am

Very nice tutorial

12.
tirath 25.05.2009 um 8:48 am
 Awesome layout tutorial
Nice layout
nice step by step tutorial
very easy to follow
Thanks a lot
keep up good work
god bless you

13.
Color Printing 16.06.2009 um 12:08 am

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!

Trackbacks

1. Graphic Design Links and Tutorials

2. You are now listed on FAQPAL
3. zabox.net
4. vot.eti.me
5. joyoge.com

Leave a reply

Name (required)

Mail (will not be displayed) (required)

Website
submit comment

Learn More | Sign up

Advertise Here
 Login

Username

Password

Login

b
c
d
e
f
g Remember me

Register Recover password

 Grafplus lates downloads

 Vector missile launcher

 Vector bug - Vector grasshopper
 vector bombs - vector torpede
 Vector bilboard
 Old style retro car in vector file format
 Vector army tank
 ACrobatic vector plane
 Vector military tank
 Vector acrobatic plane
 Vector speed boat
 Subscribe to Grafpedia

Subscribe to our RSS feed and you can download unique premium downloads

Enter your email

address:
 Subscribe

 Categories

 Actions
 Brushes
 Contests
 Designing
 Drawing
 Gradients
 Icons
 Illustrator
 Layer Styles
 News
 Patterns
 Photo Effects
 Stock Images
 Swatches
 Textures
 Tutorials
 Vectors
 VIP Downloads
 Web layouts
 Advertise here

Advertise Here

 

Recent Comments

 steve on Draw Fairy Tale Characters in Photoshop

 oppeneer on Create an awesome black portfolio layout
 Wholesale Printing on Create an awesome portfolio layout
 Wholesale Printing on Draw Fairy Tale Characters in Photoshop
 Jza on Design a two color website layout in Photoshop

 Pages

 About
 Advertise
 Contact us
 Vip Membership
 Most downloaded resources
 27.000 Photoshop Gradients
 Last Posts

 48 Decorative Vector Flowers

 10 Hi-Res Blank 3D software boxes
 Draw Fairy Tale Characters in Photoshop
 Hi-Res Square pattern brushes
 Design a two color website layout in Photoshop

© 2008 | Grafpedia is proudly powered by Wordpress