Grand Rapids Web Designers

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.

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

First step, open Photoshop and create a new document of 1300×1550px. 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.

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.

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 200×32px. 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.

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

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 960×350px. I left a top-margin of 40px to make the design more airy.

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(8×8px) using the Rounded Rectangle Tool(U) just under the big image to reproduce the real slider.

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.

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 210×160px, a title, a description and a link.

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.

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”.

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 64×64px 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.

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.

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.

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

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.

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.

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).

Related posts:

1. How to create a clean and design portfolio layout using Photoshop
2. How to Design a Clean and Minimal vCard in Photoshop
3. How to Design a Clean and Fancy Chat App in Photoshop

Need Web Designers near Grand Rapids?
Compare 5 Quotes in 24 hours:

Advertise here with BSA

If you’re launching a startup chances are you’ll need to move into the realm of business. Sooner or later startups must turn a profit to keep things moving. And what a better way to get yourself in the mood than examining business cards? The 26 examples below include designers, freelancers, and some popular startups who have created very inspirational and eye-catching business card layouts.

Easel Stand

Circles Business Card

We Are Designers

Card Doodle

Bubble Talk

Kristine Trinidad Design

Tim Van Damme Gowalla

Laura Moretz

Metallic Letterpress

KissMetrics

Mumbai Barcamp

Business Card SempreInnove

Jay Adelson Digg

Ah Design

Stubborn Business Card

Javier Garcia

TeachingShop.com

Bike Cards

we shoot cocktails

weheartit card

Facebook back

PrettyGreen

Milk, Inc. Business Card

Early Bing Card

Yahoo! Research Development

Adobe Card

Advertise here with BSA

Need Web Design?

Need Web Design?

Need Web Design?