In this tutorial, I`m going to show you how to design a clean, clear and minimal template which can be used for a portfolio, personal or for a business website. This tutorial can be a good start for you to build websites. The template is free for download and can be easily transformed into HTML or even a CMS like WordPress.

image-600

download

What we`ll be doing today(Click to see a bigger preview):

image-600

First step, open Photoshop and create a new document of 1300x1550px. The template will be 960px in width so, for your help(and I always suggest you do this every time you can) drag 2 Vertical Smart Guides at 170px and 1130px.Now, the content is centered and is 960px in width. Paint the first layer with white. This will be the background. We`ll start with the header, which will be 150px high. At the bottom of the header, draw a 1px line with the #efefef color. This line will be the delimitation between header and content.

The logo I made is just some simple text, but you can add your own logo.

logo

Let`s build the navigation menu. Grab the Horizontal Type Tool(T) and type in a navigation menu using #666666 color combined with the Arial font-family(font-weight: bold; font-size: 13px). Make sure to leave a distance between the words of 40px.

nav

For the header, I thought it would be nice to add a search form too, just above the main nav. So, grab the Rectangle Tool(U) and draw a rectangle of 200x32px. Double click the new layer created to open the layer styles pallete. Color the background with white and add a gray stroke(#efefef) of 1px. Then import a search icon or use the Custom Shape Tool(U) and draw a search icon like mine and color it with the same #efefef.

search

The header is done. It looks minimal, is clear and very clean.

header

Every portfolio website has to have slider to show off the artworks you made. I found a nice typography wallpaper on Deviantart called History by ~ebturner and I integrated it into my design after resizing it up to 960x350px. I left a top-margin of 40px to make the design more airy.

slider

If you`re thinking to convert this design to HTML, I`m suggesting you use a very popular jQuery Slider nowadays which is called Nivo Slider. When I see a slider I know it is nivo by the navigation made of small dots. I added 3 small dots(8x8px) using the Rounded Rectangle Tool(U) just under the big image to reproduce the real slider.

dots

Under the slider, I thought it would be nice to have a “Recent Works” widget. To separate the slider from the rest of the content, type in “Recent Works”, center it with the main layout and draw 2 horizontal lines on the left and right sides of it.

recent

For the recent works area, split the content width in 4 columns of 210px and 40px margin between them. Then add in each column a thumbnail image of 210x160px, a title, a description and a link.

item

Now create 3 more boxes following the same steps involved when making the first one. To make the things moving faster, duplicate the layers and arrange them one after each other, but make sure to leave 40px between columns.

works

Under the “Latest Works” widget, let`s add another widget which presents what services your company can offer. Reproduce the title you just did on latest works widget but write this time something like “What we do” or “Our Services”.

what

Create 3 columns this time of 293px in width and a margin between them of 40px. Before adding content, download the IconSweets2 icon set which is in my opinion the best icon set from the internet and choose 3 suggestive icons of 64x64px from the set. In the first column, add an icon, a title and some descriptive text of a service. For the icon, change that purple gradient with a gray one and reduce the opacity of the layer until you obtain a light gray icon. They look better if are lighter.

box

Now build 2 more boxes following the same steps. Just replace the icon with another one and make sure to leave a space of 40px between columns.

boxes

Now let`s build a footer. Draw a horizontal line like you did at header and position it at 40px under the “Services” boxes. This line will be the separator between content and footer. The footer will be divided in 3 boxes, exactly like “What We Do” widget. The first one will display latest tweets, the second one latest news and the last one some links.

Select the Horizontal Type Tool(T) and type in a title and some content which imitates a tweet. Duplicate the tweet in order to have 2 tweets. You can add as many as you want.

tweets

Now build the second column by adding a title, a small post thumbnail, a post title, some metadata(date, author).

news

Split the last column into 2 small columns. For each one add a title and some links. I set the line-height of the links to 24px, to give them some space.

links

The final touch will be represented by the copyright details. Add again a separator line, leave 40px at the top and 20-25px at the bottom of the line and type in some copyright text like “Copyright © 2011 – Template. All Rights Reserved”. Make sure to center the text after adding it.

copyright

With this final touch, the design of the template is finished and ready to be converted into HTML. If you read this line this means that you covered the tutorial and I thank you! If you have any questions, drop us a line and we`ll be happy to reply to you! Until then, take a look at what we`ve done today!(Click for bigger preview).

image-600