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.
Thanks for the nice tutorial on layout design. In a series post you can post on “how to htmlize the layouts like these with css”.
wow, love the clean design, nice
Nice tutorial and nice design
This is a nice tutorial. It is really necessary to have a pretty Website Design to catch the eye of customers or visitors. Our website should have credibility. We should consider this if we don’t want our website to be compromised.
Your site have very useful links and contents. Thanks for sharing this in online.
thanks for great tut!
Good example. I appreciate the work.
very nice post..u got 10 out out of ten..u guys are really doing well keep it up.
Very clean and professional looking design, thanks Callum.
pretty cool ..
Yeah…
Nice tutorials…gREAT..
Awesome tutorial.
Very easy and well explained tutorial to create mockup in photoshop. Thanks for sharing this nice post.
Nice tutorial. What can you expect from Web design? The answer to this depends on what you are expecting to get from an excellent webpage.
This effect is so crazy~i love this blog~
nice , thx.
thank you,very nice design..
Simple & efective design! Thanks for sharing!
Can you PLEASE has this tutorial in Windows!? TY so much.
Sane: You should be able to follow this tutorial on Windows – just swap any CMND shortcuts for CTRL
Cool techniques but isnt the text a bit too dominating? For a design design i think the images should be dominating as people will expect to see that.
I think its more conventional and better to have the image slides at the top
I absolutely love this tutorial. I used it recently while making a website for my parents’ new business.
Since you mentioned you’d like to see a live site off of your tutorial, their website is http://www.rivervalleycelebrationcenter.com
Thanks so much for the wonderful tuts.
RoxAnne
Wow!
Verry nice tutorial!
Very good step by step description – keep it up!
Thanks for sharing!
Simple layout, but useful…
very cool layout.i like it..thanks for share it
nice layout, professional and practical, thanks for sharing…
cool tutorial ! thank you.
Very awesome tutorial, very professional – thanks!
Nice! You explain well.
Nice tutorial for the beginners who want to be an expert one.Thanks.
Nice design, clean and simple, good.
Great summary, what a design, like it a lot.
very nice post, thanks for the Work.
Nice tutorial.
Very professional thanks!
Verry nice tutorial!
Very good step by step description – keep it up!
Thank for this…
I’ll use my web site designs…
So nice tutorial! Thank you!
Very nice post and impressive articles are found here. thanks for sharing
Nice tutorial,thanks.I saved your blog in my bookmarks.
Really nice tutorial, quite simple but with an awesome result. Great website by the way
Woodworking Plans
This is great – one of the steps I feel this is skipping, is the back and forth process every designer goes through in iterating their designs. No one starts with the finished polish. I posted a video showing my own back and forth in creating a website in a time-lapse format. http://www.youtube.com/watch?v=AOJlQRTbLpM if you’re curious.
awesome ! i like it so much !
Hi Callum, your tutorial is excellent, thank you.
nice & helpful tutorial for me! this site is really awesome to learn lots of helpful tutorial!
Wonderful tutorial, Hope it would be useful for many.Thanks for sharing.
Awesome tutorial, thanks for sharing.
This one is useful, no need to use that 960 grid system. You make it simple. Great.
Really Informative
I am very impressed with your views and interesting content. I hope you intend to continue writing more informational articles.This blog Is very informative , I am really pleased to post my comment on this blog . I
The article in your blog reminds me some old memory .That is good .It gives me happy .I think we will have a harmonious talk.