How to make web 2.0 cool design

In this article we explain how to make web 2.0 design using photoshop, here is the steps:

1- Setting up the document:

Create a new document in Photoshop with the dimensions 1200px x 1050px.

2-Creating the background:

Set the foreground color to #a1e8fe and background color to #59d3f

3-Placing the Grid System into the document

On a new layer, create a 960px wide grid – 12 bars, each bar at 60px wide. Place each bar 20px apart from each other. Place the grid at the center of the document.

4- Making containers for the logo and navigation items

We will now be creating the containers for the logo and the navigation items. To create the containers, use the Rounded Rectangle Tool with Shape Layers selected. Set the radius to 10px.

5- Create a rounded rectangle 300px wide. Create a second rounded rectangle 620px wide; they should be situated on the grid as follows:

6- Inputing the logo and navigation text:

Add the navigation items, Use the color #5f5f5f and dd the navigation items to the second rectangle

7- Making separators for navigation items

On a new layer add a separator in between each navigation item.

8- Creating the site header

Using the Type Tool (T), add the company tagline and a brief introduction below it. and add a slight Drop Shadow to it to give it more dimension.

9- Create a rounded button:

With the use of the Rounded Rectangle Tool with 28px radius, create a button that says "Learn More".

10- Creating a call-to-action box:

Using the Rounded Rectangle Tool once again with 16px radius, create a 300px rectangle. Go to Blending Options and add a Drop Shadow with the same values as Step 6.

11- Select the rectangle we just created (Cmd/Ctrl + Click) and create a new layer above this rectangle. Add a light blue (#96e3fc) to transparent gradient over the rectangle.

12- Move this gradient one pixel up. This may be a very minute detail but let us be keen to that. It somehow makes it look a little different as opposed to having just an ordinary gradient box.

13- Crafting a call-to-action button:

We add a heading, some description, and an icon to our buttons.

14- To add more content to the design, we can add some text below the three boxes

15- Last but not least… the footer

Next, we create the footer where we can add the copyright and the contact information for the website.

16- Icing on the cake: creating the diagonal lines

Create a new document in Photoshop with the dimensions 25px x 25px and fill the entire document with a black (#000000) background.

17- On top of the layer with the black background, create a new layer. Using the Zoom Tool (Z), zoom in the document to its maximum size so we can see clearly. Set the Pencil Tool to 1px and foreground color to white (#FFFFFF). Draw lines on your document just like the picture below.
22 Hide the layer with the black background and go to Edit > Define Pattern. The layer with the black background was created only to make the white more visible. Name your brush “diagonals” and hit OK.

18- Now let us go back to the mockup we just created. Create a new layer above the gradient background. Go to Edit > Fill and on the Contents dropdown, use Pattern. Click on Custom Pattern and look for the pattern we just created named “diagonals” and hit OK. You should see something like this:

19- Set this layer’s Blend Mode to Overlay and its Opacity to 4%. You should now have something like this:

20- From bottom to top and using an ordinary feathered eraser, erase off about 60% of the diagonal lines to make it look like this:

21- We now have a very clean, nice-looking, Web 2.0 style website design! Stay tuned for the follow-up tutorial where Jacob will show you how to convert this design into a working (X)HTML template!