In this tutorial you’ll be learning several techniques on how to design a modern and stylish web design mock-up ready to be coded into xHTML. The purpose of the mock-up is aimed at a company or individual who offer services, such as a designer or photographer. There is plenty of nice, clean space to present your content, followed by a smooth scroller to present some of your latest work.

If you’re here for the free template mock-up, don’t worry, I haven’t forgot! You can download the .PSD right here! If you code it up in xHTML and CSS, please let me know – I’d love to see how it turns out!

Step 1: Setting up your document.

Open up Photoshop and make a new RGB document for the web; I used the document size 1280×1024 pixels. On the background layer, select a light grey and fill it with the Paint Bucket Tool. I used the colour #e9e9e9.

Step 2: Laying out the page.

Make a new layer and select the Rectangular Marquee Tool. Change your foreground colour to white. From the Marquees option palette (at the top of the screen) select ‘Fixed Size’ from the Styles drop-down menu. Change the width to 1000px and the height to 500px. Click on your canvas and on the new layer, fill your selection with white. Make sure your selection is centre by hitting Cmnd+T and making sure the ‘X’ field has the digits ‘680′ in it.

Repeat the step again, this time setting the height of your marquee tool to 250px. Fill your selection with white on another new layer. Centre your new white box and position it beneath your other box.

Step 3: Adding blending modes to your boxes.

Select both of your white boxes at the same time by Cmnd+Shift+Clicking on the two thumbnails beside your two layers. Go to Select>Modify>Smooth and enter a Sample Radius of 15 pixels and then hit OK. Go to Select>Inverse, then hit your delete key to remove the corners of your boxs – you’ll have to press delete twice, once for each layer.

With Layer 1 selected, go to Layer>Layer Style>Blending Options. Add a color overlay (I used #f3f6f5: light grey with a hint of blue), a 1px white stroke, and a drop shadow (settings can be seen below). Go to Layer>Layer Style>Copy Layer Style, and then through the same menu, paste it on to Layer 2.

Step 4: Adding some scrollers.

Select the Elliptical Marquee Tool. Select Fixed Size from the drop down styles menu and change the height and width to 64px. Click somewhere on your canvas, and on a new layer (Layer 3) fill the circle with white. Repeat the step on another new layer (Layer 4).

With Layer 3 selected, hit Cmnd+T and enter 140px into the X field and 812px into the Y field. Do the same with Layer 4 but change the X field to 1140px. With Layer 4 selected, press Cmnd+E to merge the layer down, press it again to merge the two circles to your layer with the blending mode applied.

Reselect the Rectangular Marquee Tool and select fixed size from the drop down styles menu. Change the width to 300px and the height to 210px. Click somewhere on your screen, and on a new layer fill the selection with white. Fill in two more selections on the same layer. Hit Cmnd+T and fill in the X field with 680px to align them to the centre, and the Y field with 812px to align them with our circles.

Open up 3 different images (photos or designs) in new documents. Select the Crop Tool and change the width and height settings to 290px and 200px. Crop each image down, and once done drag the layer over to our web design document. Using the shift+cursor keys, nudge the images into place. They should fit nicely into our white boxes with a nice 10px white border.

Merge all the new image layers together using Cmnd+E, then open up the Blending Options. Add a Drop Shadow (settings can be seen below).

On a new layer, select the Polygonal Lasso Tool. Whilst holding the shift key (to keep things at a 45 degree angle), draw a triangle shape. Fill it with a medium grey (I used #8d8d8d). Duplicate the layer, and arrange it into place next to our first layer using the cursor keys.

Once you’ve merged the layer down by hitting Cmnd+E, you should have a nice rewind button. Hit Cmnd+T and whilst holding the shift key scale the icon down so it can fit in our left circle.

Duplicate the layer and go to Edit>Transform>Flip Horizontal to reproduce our arrows but facing the other way. Use the nudge tools to reposition them into place on the other side of our layout.

Step 5: Adding a text-based logo, some navigation and some content.

Select the Type Tool and change the font to Helvetica. Type your portfolios name. Change the colour of your type to colour of your choice – this will be the sites secondary colour, and the second part of your name (if you have one) to bold.

It’s time to add some animation. Drag out a text box on the right side of our upper-box. With a medium to dark grey, write a few headinds. I’m using: home, services, portfolio, studio, blog, and contact.

Select the Single Column Marquee Tool, and on a new layer, click beside your navigation items. Fill the selection with white. With the cursor keys, nudge the selection once to the left and fill it with a dark grey.

Grab the Eraser tool and select a soft brush, remove some areas of the top and bottom of our lines so that they don’t overlap our top box. Lower the opacity of your lines to 20%.

I changed the size of my navigation items, nudged them about and moved the seperator line into a more suitable place. Play about with the composition until it looks right.

Now we’ve got some main content going onto our mockup, it’s best to add some guides. Go to View>Show Ruler. Once the ruler is showing, you can simply click and drag from the ruler to place a guide on your page.

Add some text to your mockup. I’ve just used some placeholders that I made up. Put emphasis on the headers by making them slightly darker and larger. You can also increase the leading between the header and first line.

Add some more text to completely fill your design – I’m filled mine with a ‘Currently working on’ section and my Twitter feed. Highlight any links and change the colour to the same that used in your logo, and change the current page (in this case ‘home’) to the same colour.

Step 6: Add some social bookmarking icons.

Head over to Nouveller and download the awesome free icon pack. Place a few icons into your document by going to File>Place, and rearrange them beneath your navigation menu. Make sure they are equally spaced by zooming in and using the cursor keys to nudge each individual item.

Step 7: Adding some texture and colour.

One of the design trends of 2009 is mixing simplistic and minimal layouts with some subtle grunge. To do this, we need to use texture. Head over to Caleb Kimbroughs new site Textur.es and download this texture. Insert it into your document by going to File>Place. Rearrange it and place it beneath all other layers apart from your background layer. Resize it to something like below:

Grab a soft eraser and erase some of the sides of your texture. Go to Layer>New Adjustment Layer>Hue/Saturation and drop the saturation right down so the layer turns black and white. Hit Cmnd+E on the new adjustment layer to merge it with out texture – this stops it from effecting any other layers beneath the adjustment layer. Set the textures blending mode to overlay, and lower the opacity to 70%. Go to View>Clear Guides; we don’t need them anymore!

Select the background layer and go to Filter>Noise>Add Noise. Make sure the settings are the same as in the screenshot below:

Step 8: Adding the ‘Letterpress Type Effect’.

Find your logo type, click on the layer and go to Layer>Layer Style>Blending Options. Add a drop shadow, inner shadow and stroke – all of the options can be seen below.

That’s it!

That’s the end of the tutorial – I hope you’ve learn a few new tricks on how to create your own website mock up. If you were to get your site coded up, you’re probably want to mockup various other things, such as the other pages, any hover links or jQuery effects or even CSS styles. Here’s my final template mock-up:

If you liked this tutorial, please subscribe to the Circlebox Feed and help promote the post using the various social bookmarking buttons below such as DesignBump, Twitter and Digg. Thanks!

Find the best quality 642-456 products by top certified professional team at testking and pass your 646-985 as well as 646-671 exam fast.