4/22/2008 08:27:00 AM Posted by Blogger Blogspot
Ok, now that the introduction is out of the way, lets get to the template. One of the most requested tutorials I see is for trendy, web 2.0 style layouts, so I thought that'd be a good place to start with our first tutorial. Web 2.0 style is all about bright colors, smooth gradients, big text, and clean organization. Here is a preview of our finished layout, trying to include all these things:
The font I'm using for the heading text is called Hit the Road, and is available for free from DaFont, but feel free to look around and pick a typeface that most matches your style.
Step 1:
Make a thin selection with the Rectangle Marquee Tool along the right side of the document. Create a new layer, and select the Gradient Tool. Press "D" to restore the default colors (black and white), and select the "Foreground to Transparent" gradient. Click and drag across the selection, making sure you let go while still inside the selection to ensure a complete fade.
Step 2:
Lower the opacity of this new layer to 25%, then Duplicate it (Layer > Duplicate Layer, or click and drag the layer to the New Layer icon in the Layers Palette). Flip is horizontally (Edit > Transform > Flip Horizontal) and move it across the document to the other side of the layout. Merge the two layers (with the top layer selected, press CTRL + E).
Step 3:
Make a thin selection across the top of the document with the Rectangular Marquee Tool. On a new layer, and fill the selection with black.
Step 4:
Make a new selection with the Rectangular Marquee Tool. You'll need to pick two colors because we are going to fill it with a really subtle gradient. I picked a bright blue and a slightly darker blue. With the Gradient Tool, click and drag across the new selection. In the Layers Palette, move this new layer below the shadow layer, giving us the drop shadow effect that gives our page shape. You are going to need to keep the shadow layer at the top of the Layers Palette, so from here on out make sure all your new layers are below it.
Step 5:
Add the title text in with the Text Tool. I love the way Hit The Road looks in all caps, but feel free to change it. Another popular web 2.0 style is typing it all lowercase, which would work fine here too. Its really just a personal preference. To make the menu bar, use the same method as the step above. Make a new layer, pick two colors, make a selection, and fill it with the Gradient Tool. Keep the selection when you are done, you'll need it in the next step.
Step 6:
We need to pick a pattern to fill the menu bar with. I made my own diagonal stripe pattern, which you can grab here. You can also find a ton of patterns to use online at sites like SquidFingers and ClickPopMedia, or you can use a site like Stripe Generator to create one. To make a new pattern, open your tiling image in Photoshop, click Edit > Select All, then click Edit > Define Pattern. Now back in your layout document,
create a new layer and fill it with a pattern(Edit > Fill > Use: Pattern). Lower the pattern opacity (I lowered it to 10%, but that might change depending on your pattern).
Step 7:
To make the active menu point, just use the Polygonal Lasso Tool. Create a new layer, and select a triangle shaped area under the link. Hold shift to make sure you get perfect 45 degree angles. Fill the selection with white, then use the Rectangular Marquee tool to snip off the extra bit hanging down into the white.
Step 8:
Add in some dummy content with the type tool. For the heading text, use the same font you did for the title of the site. For the body text, so you same font as you did for the menu. Using a consistent set of fonts throughout your design is a good way to make sure everything ends up looking clean and connected. The body text is made with two type boxes, so I can block of a small area for an image.
Step 9:
This layout has a couple previews of web sites in it, and they are built with a vector version of Safari. Its a downloadable vector file, so its complete scalable. You can open it in Photoshop at any size you wish, or you could open in it Illustrator and manipulate the layered document. It was originally made by Dave Simon, but lately I haven't been able to find the download on his site or any other, so I uploaded the AI file, and you get grab it here. Its a really nice file to have around, it really helps in creating clean looking preview images. I use it on my personal site to show my latest work.
To make a site preview image, open the vector Safari file in Photoshop. I usually open it a little larger than I will need it, because once Photoshop rasterizes the file, it can only scale down in size, not up. Underneath the Safari layer, paste in a screen shot (you can capture what's on your screen by pressing the PrtScr key, or there are numerous screen grabbing programs out there to do it for you). Once you get the screen shot positioned, merge your layers and copy them back into your layout document. Select Edit > Transform > Scale and size the preview to fit the space. I added a drop shadow with the settings in the image. Its a really light and hard-edged, with no blur, to keep with the crisp visual style we've got so far.
Step 10:
Repeat the process for the featured images. If you don't want to feature web sites, you could use this same arrangement with photos, logos, drawings, anything really. I just chose web sites because Templamatic has plenty to feature. I repeated Step 9 three times, once for each new preview I'm going to use. To arrange them in an arc, take the back site and select Edit > Transform > Rotate and rotate the site a little bit counter-clockwise. I rotated it -6 degrees, which you can just enter in the toolbar. With the site in the front, I rotated the site 6 degrees, sending it in the other direction. Arrange all three images and overlap the navigation bar with them.
Step 11:
To make the sidebar, make a selection and fill it with a really light green. Add a slightly darker green stroke with the above settings.
Step 12:
Add in some dummy sidebar content with the Type Tool. I kept the same fonts from the rest of the design: Hit The Road for the heading, and Arial for the regular text. Make a 1px selection with the Single Row Marquee tool and fill it with the same green you used as your stroke color.
Step 13:
To add a search box to the header, make a selection with the Rectangular Marquee tool, fill it with white, and add an Inner Shadow with these settings. It adds a hard shadow across the top, giving the text box a tiny bit of depth. Add the word "Go" in the same font as the rest of the headings.
Final Results:
The reason I took the time to write this web 2.0 layout tutorial is really to show that there isn't really technically hard about making layouts, its more about learning the basic techniques and putting them into practice. With these basic techniques there are countless template possibilities, only limited by your imagination. The more you practice, the more you develop your style and skills, so stay at it.
If you have a request for a tutorial, or anything you want explained, leave a comment. I'll try to write about anything you suggest, so don't be afraid to ask.
Download the PSD used in this tutorial...
