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.

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:

The look and techniques used here are very flexible, so this is a good skill to pick up.

Step 1:

I’ve started with a 600×400 space, but if you are doing this for a real website, it should be larger. Create a new layer, and use the Rectangular Marquee Tool to make a selection across the top of the image. Select the Gradient Tool and pick two colors you like that are slightly lighter and darker shades of the same color. I went with a cool blue, but you can use whatever colors you want.

Step 2

Click and drag within the selection, and it should fill with a gradient. Holding down Shift while you drag will make sure your resulting gradient is straight. Now we need a pattern to lay over the blue. I made some diagonal stripes you can use, just open the file in Photoshop, and click Edit > Define Pattern. Now, back in the other file (with the rectangular selection still active) make a new layer, then click Edit > Fill and select your new pattern. If you don’t like the stripes… experiment! This is a good step to add a personal touch. Scanlines, pinstripes, and even old looking victorian patterns are popular now.

Step 3:

Adjust the opacity of the pattern layer. I dropped mine way down to 15%. Create a new layer, and make a thin selection along the bottom of blue bar, and fill it with black.

Step 4:

Create a new layer, and use the Rectangular Marquee Tool to make a selection and fill it with white (this will be the main body of our layout).

Step 5:

Add a drop shadow to the white layer the Blending Options panel (In the layers palette, double click on the white layer, or right click the white layer and select ‘Blending Options’). Use the settings in the image.

Step 6:

Now we need to flatten the Blending Options to change them from being a layer effect to being part of the actual layer. Create a new layer, then CTRL + Click on both layer titles. Now you can merge the two layers (CTRL + E, or click Layer > Merge Down).

Step 7:

With your new flattened white layer, click Add Layer Mask at the bottom of the Layers Palette. Select the gradient tool and set your colors to plain black and white.

Step 8:

Click and drag to make the bottom half of the white layer fade out. That’s the basic drop shadow overhang, now its time to turn it into a layout.

Step 9:

Add title text with the type tool. I added a reflective effect using the same methods as the overhang. To achieve this, I duplicated the type, hit Edit > Transform > Flip Vertical, placed it underneath, clicked Add Layer Mask in the layers palette, and used the gradient tool to fade off the bottom half. Lower the opacity a bit and you get a nice reflection. See what I mean about this being a flexible technique? Layer masks make it easy to pull off an otherwise complex effect.

Final:

Add a line of text for a menu, or try something else, maybe buttons or tabs. Fill it with some content and you are on your way to having a finished layout featuring the Drop Shadow Overhang.