4/22/2008 09:00:00 AM Posted by Blogger Blogspot
If you wish to create this exact design, here are a few things you'll need to download;
• VAG Rounded (I'm afraid i think this version of the font is for the mac only. You could try the font delicious.)
• This stock photo used for the banner image.
• The diagonal background pattern. (Drag it into Adobe Photoshop > Presets > Patterns.)
Creating the Snazzy Background
Firstly we're going to create a vibrant 'Web 2.0' style background.
1) Make a new document in Photoshop 1000x1000px in size. I always use this size as i prefer to work with more space than i need. Remember that depending on your sites audience you shouldn't really exclude users who are still running 800x600 screen resolutions.
2) Fill the background with the colour #ff9900. That's orange by the way.
3) Press CTRL (or Command on a mac) + A. This will make a selection around your whole canvas. Make a new layer, grab the gradient tool, set your colour to white. Now click and drag (shown below). Finally set this gradient layer to 'Soft Light'.
4) Lets now create a slate grey bar spanning the top of our layout. Draw out a selection with the rectangular marquee tool like the one below and then fill it with the colour #292929.
4) To make it stand out a little more we'll now add a much smaller white line below. Grab the rectangular marquee tool again and draw out this selection. Fill it with white.
5) Now drag out another selection over the slate grey bar so that the top half is covered. Fill this with the colour #313131. This simply gives it a slightly glossy look.
6) These days its all the rage to have a footer than spans the whole width of your web page. Lets create one for this layout. Again take the rectangular marquee tool and draw another section (shown below). Fill it with #44C3D7.
7) In the layers palette right click the small white layer under the slate grey bar you made and 'Duplicate' the layer. Drag it down and position it above the footer.
8) Finally for the background we're going to add this pattern. Drag the .pat file into your patterns folder on your computers hard drive (Photoshop > Presets > Patterns). Now we need to load it in Photoshop. Click Edit > Fill and then click the arrow and choose Load Patterns. To apply the pattern make a new layer, press CTRL (or Command on a mac) + A to select the whole canvas and then head up to Edit > Fill and choose the pattern you just defined above. It doesn't look quite right yet, so set the opacity to 76%. That's it for the background at this stage. Make sure its positioned below the white gradient we made in Step 2. Looking good eh? 
The 'Wrapper'
Next up we need to create the white area of our actual site! Press CTRL (or Command on a mac) + R on your keyboard to bring up your rulers. Make sure the measurements are displaying pixels. If not, hover your mouse over the ruler, either one will do and right click. Select 'Pixels'.
1) Drag out a selection 800px wide or slightly smaller, and the whole height of your layout. Fill it with white and position this layer on the layers palette behind your grey, blue and two white bars, but above the orange background and pattern.
2) In the layers palette click the 'effects' button and choose 'Outer Glow'. Apply the following settings. This will give our site a nice shadow against the background.
The Logo Area
Every website needs a logo. This is no exception. The logo icon used for this layout was drawn by myself a while back. I've even written a tutorial for it. You could easily replace this for your own though. We're going to place our logo on a white background, slightly offset it and give it a shadow.
1) Grab our friend the rectangular marquee tool and draw out a small rectangular selection. Fill it with white.
2) To offset it, press CTRL (or Command on a mac) + T. This will bring up a box around the item. Move your cursor to the top corner and rotate the box slightly (shown below). Then press enter when your done and just drag the box into position.
3) Now for the shadow. Add an Outer Glow with the following settings (below). Don't worry that you can't see it very well yet. Once we add the banner you'll be able too!
4) I now want to give it a slightly three dimensional look, so i'll add a discreet gradient. Click the layer you just made at the start of this section on the layers palette whilst holding down control. This will bring up a selection.
5) Head up to the top of your screen. Click Select > Modify > Contract and choose 3px.
6) Press 'G' on your keyboard (Gradient) and take a light grey. Make a new layer, and then as we did at the start of this tutorial, click and drag over the area you wish to apply the gradient. You might need to fiddle with the opacity of this layer to get the look your after. Then just put your logo in this space.
Adding the Navigation
For this layout i wanted to keep the navigation simple, with subtle rollovers. The font i'm using is called VAG Rounded, but you are welcome to use another.
1) Press CTRL (or Command on a mac) + D to reset your colour's, then take the type tool and type each link with 10 spaces in between. This ensures each one has the same space between it.
2) Its time to add how we want our rollovers to look. Highlight one of the links and change its colour from white, to orange.
Adding the Banner and a few gradients
Now we're ready to add the banner. You'll want to make sure your banner layer is behind all your logo layers so that our logo panel can be see over the top.
1) Drag out a selection with the rectangular marquee tool like the one below.
2) Open our stock image in Photoshop. Press CTRL (or Command on a mac) + A to select it all, and then CTRL (or Command on a mac) + C to copy it.
3) Then go to Edit > Paste Into. This pastes our stock inside the area we drew with our rectangular marquee tool. Go ahead, move the banner image about. It won't come out of its area.
4) Now we need to resize it. Making sure the banner image layer is still highlighted in the layers palette, press CTRL (or Command on a mac) + T to bring up its bounding box. Hold down shift and drag it inwards at the top right corner. This ensures you resize it to scale.
5) Again with the rectangular marquee draw out a small selection under the banner across the whole width of the banner. You'll probably need to zoom in to make it accurate. When your happy with that fill it with the colour #D6D6D6.
6) Next we'll add a light grey gradient (with the colour #D6D6D6) so that the banner area flows seamlessly into our content. Take the rectangular marquee tool and draw a selection (shown below). Make sure that your gaps between elements are consistent.
7) As we've done many times make a new layer, press 'G' for the Gradient Tool and set your colour to #D6D6D6. Then click and drag down to create a gradient. You may need to play with the opacity of this layer to get the desired effect.
Adding Content - The Side Bar
This is going to be a two column layout with the main content on the left, and secondary content on the right (i always call it the sidebar). The main thing we need to achieve with this is to make clear to people viewing the site that this content on our sidebar is separate from our main content. Here's how we're going to do it.
1) Take the rectangular marquee and draw a small rectangle about one third of the way across the right side of our layout (shown below). When you've done this fill it with the colour #292929.
2) Again with the rectangular marquee tool draw another selection the same width as the bar you drew in step 1, but a lot longer (shown below). Then fill it with the colour #E5F7F9. Make sure you leave a 2 pixel grab under the bar you made above.
3) Now to give our light blue sidebar box a little depth duplicate your logo icon (the camera) and place it over the box we made above. Play with the opacity until you get the effect below. At this point we can also add some text to the first slate grey bar we created.
4) Lets add some dummy content and an image. Make a new layer, then drag out a selection inside the light blue area using the rectangular marquee tool and the go to Edit > Stroke. Choose 2px and change the colour to #44C3D7.
5) Make a smaller selection inside the border we made above. Leave a 1px gap. Then open up the image of your choice in Photoshop and paste it inside the selection we made above. This is exactly the same process we used to paste our banner image. CTRL (or Command on a mac) + A to select all the image, then Edit > Paste Into.
5) Now we want to make a second sidebar content box below the first. To save creating all this again simply go to Layer > Flatten Image, drag out a selection accurately around the sidebar content box you created, and press CTRL (or Command on a mac) + C to copy. Don't paste yet though! You'll notice we've flattened our document. before you do anything go to Edit and click 'undo' until all your layers are visible again. Now you can go ahead and paste. You may want to change the image in your second sidebar content box for another image.
6) Finally we need to add some dummy text. Choose a font and play around with colour's, titles, and link colour's After all this mock up process in Photoshop is exactly that. You should be thinking how you would like your links, titles and text to look on the finished site when its all published and coded online. When designing with text in Photoshop open up the Character Palette and play around with the settings in there. To find the Character Palette go to Window > Character. Another important thing is to use a font that can actually be used online without it having to be a graphic (image). For example its no use adding dummy text in the font VAG Rounded because you can't use that online. Obviously its fine for titles, as they can be graphics. I'm using Trebuchet MS for the main body of text on this layout. You could even try Arial, Verdana, Tahoma.
Adding Content - Main Body Content
We're almost done now, we just need to add some domain content to the main area of this layout. We'll start with the titles for each post.
1) Duplicate your logo (in this case our camera icon), press CTRL (or Command on a mac) + T and scale it down to a size similar to the one below. Also position it in the same area. We're going to use this icon before our main titles for each post.You may need to take the eraser tool (press 'E') to erase some of the white background.
2) Now take the font you used for the navigation. In this case its VAG Rounded, and type out a dummy title. In this case 'Welcome to my website'. Play with the colour's and size until you get something you like.
3) Select the Text Tool (or press 'T') and click and drag out a selection under the title we've just made. Make it slightly wider, but leave enough space between it and the sidebar content.
4) Add some dummy text to this area, and then repeat the process to create another title and some more dummy content beneath that. You should now have something like this.
The Footer
And finally here we are - the footer. I think to give the footer a little extra something we'll add a gradient shadow to create an illusion of depth. After we've done that we'll just add some dummy footer content which will include our copyright and links.
1) Take the gradient tool (press 'G'), and press 'D' on your keyboard to reset your colour's Black should now be your foreground colour.
2) In the layers palette find the blue footer layer and click it whilst holding down CTRL (or Command on a mac). This will bring up a selection around it.
3) Make a new layer and apply a gradient downwards. You might now need to adjust the opacity to get something like the example below.
4) Now take the text tool, set your foreground colour to white and type out some dummy footer text. Play about with positioning. You could even break your footer up into as many as three sections. Its up to you. However i'm going to keep it simple. Remember to show what an active link might look like, and to use a font that can actually be used online. Again i am using the font Trebuchet MS. Below is the final mock up in Photoshop.
Download the PSD
Congratulations, we're done! Well, you could always add your own little touches now. I hope you enjoyed this tutorial. You might be interested in taking a look around our forum, or even taking part in our contests? Anyway, happy web designing!
