Despite the fact that its quickly becoming a cliche, the style of web 2.0 still has a lot of nice techniques that are worth learning. This layout utilizes all the big web 2.0 standards: bright colors, gradient fades, drop shadows, and rounded edges. The key to all of these things is mastering selections. It sounds weird, but the key to good web design with Photoshop is making good selections. Almost every step of this tutorial includes making a selection.

Note: This was originally written for PSDTuts.com, so that is why it has that title all over it, but here is the effect we are going for:

This layout consists of four main sections. The header (the brightly colored top of the page), the sidebar (the narrow left column), the navigation (links to other areas of the site), and the content (where all the good stuff goes). As you make more layouts, you will find almost every page you create will require these same basic sections.

---

Step 1:

First, let me start by saying that for this tutorial, I’m making sort of a ‘mini’ layout. It needs to be small to fit on this page, but when you make yours, make it any size you want, most likely larger. To make things easier, just pretend the examples are the size of a real website. To get started, make a new layer (name it ‘White’), and create a selection with the Rectangle Marquee Tool right in the middle of your workspace. Fill it with white, then double click on the layer to bring up the Blending Options and give it a Drop Shadow with the above settings.

---

Step 2

Still with the Rectangle Marquee Tool, select an area to be the header, and press Delete to remove the selection, leaving a hole through the layer.

---

Step 3:

To create the small rounded edge sidebar, we need to make two new selections. First, with the Elliptical Marquee Tool, make a circle hanging out over the edge of the header section (hold shift to make sure the circle stays perfectly round). Next, switch back to the Rectangular Marquee Tool, and, while holding Shift, select the area from the top of the circle out to the edge of the header area. Its alright if the selections hang over the edges a tiny bit, because now we are going to fill them with white. Your ‘White’ layer is now complete.

---

Step 4:

Next, under the ‘White’ layer, create a new layer (name it ‘Header Color’). Using the Rectangle Marquee Tool, select an area around the hole. Use the Gradient Tool to fill the selection with a bright bit of color. I chose to use a fade from a bright gold to a orange color.

---

Step 5:

Next we need to make the bright rays in the header. Create a new layer above the ‘Header Color’ layer and name it ‘Rays.’ We are going to make white rays using the Custom Shape Tool. Find the shape named ‘Registration Target 2.’ Since you only need a section of the whole shape, zoom way out (I zoomed out to 25%). Click and drag the shape, covering the whole workspace and most of the document window. Since the header is going to feature a shot of the website, I made the shape a little off center, so the rays will look like they are coming from behind it.

---

Step 6:

Ctrl + Click on the ‘Header Color’ layer to select it, then hit Select > Inverse and hit delete, getting rid of the extra rays that filled the image. Lower the opacity down a bit, I chose 20%.

---

Step 7:

Next we need to make a small drop shadow to separate the sidebar area from the content area. Make a new layer above ‘White’ and name it ‘Shadow.’ Using the Gradient Tool (with a ‘Foreground to Transparent’ fade), click and drag from outside the selection into the center. Lower the opacity to 30%, and you should have the main sections of the layout done. We now have a clearly defined header, content, and sidebar area.

---

Step 8:

The header area needs an image, and I’m going to use a shot of the PSDTuts website, but you can use whatever you want. I pasted the screen shot onto a new layer above ‘Rays’ and named it ‘Website.’ I used Edit > Free Transform to tilt and size down the shot a little bit, then added a thick, low opacity stroke, just to make it stand out a bit.

---

Step 9:

Next, with the Type Tool, add in the text layers. For my title text, I added a Gradient Overlay and a Stroke, both of which are found in the Blending Options. With the subtitle text, I dropped the opacity down to 50% to make it fit in a little better.

---

Step 10:

Next we need to add in the site’s navigation. Using the Rectangle Marquee Tool, make a selection around the area of the navigation. Hit Select > Modify > Smooth > 10px. It should round off all the corner, and now you can use the arrow keys to move the selection into place, a little bit up and to the left.

---

Step 11:

With practice, making pixel perfect selections by eye get easier, but if you are now, you might want to zoom in a little on this step. Still with the Rectangular Marquee Tool, hold Alt and drag over the top part of the selection. It will remove that part from your selection. Again, do the same thing to the overlap on the left of your selection. Hold Alt, and snip off the little bit of extra. You should have a selection that fits perfectly in the space.

---

Step 12:

Make a new layer named ‘Navigation’ (making sure its under the ‘Shadow’ layer to give the layout a little more depth). Fill the selection with a light tan, then double click the layer to bring up the Blending Options and add a Gradient Overlay.

---

Step 13:

Using the Type Tool, I added some Navigation links. That’s pretty much it. Filling in the sidebar and content areas isn’t really something I can cover in a tutorial, since coming up with content for a site is really up to you, but that’s the fun part! This simple layout has all the bits that make Web 2.0 a great visual style. Its clean, bright, and looks inviting, and it was made mostly by only creating and filling selections. This method gets easier with practice, so after you finish one, start another. Once you fine tune your skills, its easy to mock up a whole site in just a few minutes.