By clarklab in Template Tutorials on Date 04/14/2008

Web 2.0 Layout Photoshop Tutorial

How to make a bright, clean, web 2.0 layout in Photoshop using only basic skills and concepts.

Before we get started, let me add a little note for the readers who haven't been on Templamatic yet. Templamatic is a new online marketplace for buying and selling templates. Templamatic also has a blog where you can learn new skills (with articles like this one), and a forum where you can discuss projects with other designers. Templamatic is still in beta, and you can read more about the site in the FAQS. 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: preview 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: step1 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:
step2 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:
step3 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:
step4 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: step5 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: step6 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: step7 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: step8 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: step9 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: step10 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: step11
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: step12 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: step13 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: final 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


Comments:

  • clarklab
    9 years ago
    What specifically is going wrong with your shadows? I did forget to mention to hold Shift while dragging for your gradient. Holding shift makes sure you drag a perfectly straight line.
  • Garuda
    9 years ago
    I just downloaded the example.psd , I was wondering if the shadow is supposed to vertically end like that or is it supposed to fade out at the bottom as well? Thanks
  • Garuda
    9 years ago
    hi Clark, I am stuck on making the shadow. I am trying to do exactly as your tutorial steps 1 and 2 suggest but my shadow looks nowhere near as good as yours. Is the rectangle supposed to be a certain width? Or am I supposed to drag out the gradient tool in a certain manner to achieve this effect? Thanks
  • Garuda
    9 years ago
    Thanks Clark, the layout looks awesome! I will have to go through the tutorial over the weekend, surely I will have a few questions for you :)
  • clarklab
    9 years ago
    My brother has been bugging me to do a multi-part tutorial about slicing and coding a template, so I might just do that. What do you mean by go all out of shape? If you mean the body text wrapping around the image, floating the image with correct padding should let text flow around it nicely. If thats not what you mean, let me know, I don't mind trying to answer questions.
  • godonholiday
    9 years ago
    This is really nice. Would be cool if you add a tutorial for getting this into something like Dreamweaver so that we could add text. I am worried if you added text the design would go all out of shape?
or register to post comments.