Make a nice web 2.0 style news or blog website

dangtruong

Author lv1 (3900/5000)

7,025 views

4 Comments

(15 votes, average: 4.87 out of 5)

In this tutorial we will be showing you how to make a web 2.0 website, which could be used for a news or blog site.

Start by making a new document, 1000×900 pixels. Set your foreground to #9dd525 grab the Rounded Rectangle tool and draw a rectangle in the top left hand corner as shown below.

Rename this layer to “Green Background”, and duplicate this layer. Place it below the Green background layer as shown below.

Add a layer mask by clicking on the layer mask button (). Grab your gradient tool, and change it to white to black if it isn’t already. Draw a gradient as shown below.

You should end up with something like below:

Make a new layer and add a gradient effect, like shown below. Simply grab the gradient tool, and change your gradient to White to Transparent. Then make a selection of the “Green Background” layer by holding ctrl and clicking on the thumbnail of the “Green Background” layer. Draw a gradient from the left side into the middle, the right side into the middle, and then both top side. Lower opacity on this layer to about 20%.

Add your text. Below I’m using a font called Reznor Broken. Let me explain what fonts I’ve used and where. First off, The letter “S” at the beginning of “Sample” and “Site” is in Trebuchet MS Bold, Size 30pt. “ample” and “ite” are in Reznor Broken Size 30pt. “.com” Is in Trebuchet MS Bold, Size 10pt in Capitals. I have anti-aliasing set to “Crisp” on all of the text. The word “Sample” is in #2f2f2f and “Site.com” is in #edfccb.

Set your foreground to #97c23b. Select the rounded rectangle tool and set radius to 5px, and draw a rounded rectangle like below.

Add a layer mask to this layer, and draw a gradient like below.

Now, right beside the green bit we just did, add a new rounded rectangle as shown below, only in #2f2f2f. Also, add a reflection, as we did earlier for the green bit.

Reduced: 64% of original size [ 1000 x 287 ] – Click to view full image

Hold ctrl and click on the thumbnail of the Black-ish rounded rectangle layer. Draw a gradient using the White to transparent gradient, on a new layer and then lower opacity on said layer to around 12%.

Reduced: 64% of original size [ 1000 x 295 ] – Click to view full image

Make a new document, 4 pixels wide, and 1 pixel high. Zoom into it with the magnifying tool, and then make a new layer. Delete the background layer, and on the new layer draw two white pixels in the center, as shown below

Go to Edit -> Define Pattern.. and click OK. You can rename it if you wish.

Go back to your template and add some text content to the black area. Below I’m using Trebuchet MS, Size 10pt in White. The top text and the “Comments (2) | [Read More]” is in bold, while the rest is not.

Reduced: 64% of original size [ 1000 x 323 ] – Click to view full image

Now make a one pixel selection between the main text and the “Comments (2) | [Read More]” part, as shown below. Fill it with any color on a new layer, and then set fill on said layer to 0%.

Reduced: 64% of original size [ 1000 x 332 ] – Click to view full image

Right click on this layer and select “Pattern Overlay”. Set the pattern to the one we made a few minutes ago. Click OK and then lower Opacity on the layer to 10%.

Reduced: 64% of original size [ 1000 x 328 ] – Click to view full image

Lets add a navigation bar. Grab the rounded rectangle tool and set the color to #2f2f2f. Draw three rounded rectangles like below. The first one has Opacity set to 100%, while the other two are set to 80%.

Reduced: 64% of original size [ 1000 x 382 ] – Click to view full image

Now lets add some text. I’m using the Reznor Broken Font again. The words “home”, “forum”, and “tutorials” are in white. The word “page” in the first tab is in #99d123, while the word “page” in the second and third tabs are in #c2f05f.

Next, draw a Rounded Rectangle behind the text in the “homepage” tab as shown below.

Reduced: 63% of original size [ 1001 x 299 ] – Click to view full image

Add a layer mask to the rounded rectangle layer we just made, and then grab your gradient tool and draw a gradient like below.

Reduced: 64% of original size [ 999 x 332 ] – Click to view full image

Lets add some content.

First off, grab your rounded rectangle tool, and set the radius to 5px. Draw two rounded rectangles as shown below. Also, in the picture below I have an advert box. This is to give you an idea of where you could put an advert or something like that.

Reduced: 64% of original size [ 1000 x 900 ] – Click to view full image

Right click on one of the rounded rectangle layers, and give it these settings:

Reduced: 71% of original size [ 901 x 398 ] – Click to view full image

Once you do it with one rounded rectangle, simple right click on it, select “Copy Layer Style”, right click on the other rounded rectangle, and select “Paste Layer Style”.

Reduced: 64% of original size [ 1000 x 900 ] – Click to view full image

Next, set your foreground to #F2F2F2, and then make a selection like below, and draw a gradient like below on a new layer using the Foreground to Transparent gradient.

Reduced: 64% of original size [ 1000 x 451 ] – Click to view full image

Now to add your content. Just add it in the places shown below. The Headers, “News” and “Open Design” are in Tahoma bold, Size 16pt, in #F2F2F2. The text underneath that is Trebuchet MS, Size 11pt under “Open Design” and Size 10pt under “News”. I have both text under “Open Design” and “News” in black, only underneath “News” I have Opacity set to 70%. Also, both the text under “Open Design”, and under “News”, has Anti Aliasing set to None. The “Tutorial one” and “Lorem Ipsum” headers have the same settings as the “News” and “Open Design” headers, only Opacity is set to 40%. The text underneath the headers “Lorem Ipsum” and “Tutorial one” is Size 10pt in Trebuchet MS, with Anti Aliasing set to None.

Reduced: 64% of original size [ 1000 x 900 ] – Click to view full image

Next, use the rounded rectangle tool to draw a shape in #F2F2F2 as shown below. Then give it the drop shadow displayed in the image below.

Reduced: 64% of original size [ 998 x 701 ] – Click to view full image

Now select the rounded rectangle we just drew. on the layer palette, to the left of “Opacity”, you should see a drop down with “Normal” written in it. This is the blending mode. Set it to “Multiply”. Then add some content to the The footer, as shown below. All of the text is in Trebuchet MS, Size 10pt with Anti Aliasing set to None in White. The green text is in #9cd523, in bold. The Statistics are in bold also. You should end up with something like below.