1. Create a new document of 1024×850 pixels.

2. Fill the background with color #1f1f1f

3. Next use your Rulers to make a selection area for place company logo and rest area for top navigation buttons.

4. Now choose “Rounded Rectangle Tool” with radius “5px” and draw as you need there top navigation buttons with two colors as you seen below screen.

5. I searched wallpapers-room.com(Download) and found a nice and simple photo to use for the purpose of header, you should use same size rectangle with white background for top and bottom border of this header image as you seen below image.

Download banner Image

6. now we’re going to make an heading on our header image which can be done as follow mentioned steps below on image.

7. in this step we’re going to more creative and professional our design when we just put there heading “Mixing your ideas with our creativity” with follow some specific steps, using “Photoshop free styles DOWNLOAD” and apply whereever you want for make more beautiful your header and also using “HelveticaInseratCyr Upright DOWNLOAD” font for heading font style.

Photoshop Style Download

HelveticaInseratCyr Upright DOWNLOAD

7.1. Ultimate Web 2.0 Layer Styles

I used these blending options onto the fonts layer

8.  we step forward for content area where we designing an latest concept and devide into 3 columns as follow design requirments, in this first colum “Web Design” with an illustrative icon download from iconfinder.net, in these 3 columns we follow some Photoshop techniques like blending options as you seen in below images.

Web Design Icon Download

Web Design Area with Icon

Web Design Icon Download

Print Media Area

Print Media Icon Download

Multimedia Area

Multimedia Icon Download

9. The content area and footer is attractive and illustrative for this business website layout, where 3 sections displayed as “Web Design” “Print Media” and “Multimedia”.

10. now we’re on final step where we designing our Business Website footer as follow some latest trends, in this step we draw light yellow background #fffac0 also place there company logo as you seen below image.

11. as all professionals know fotter requirments which we placed there according to our design needs.

Final Result Business Website Design Tutorial

When your finished you should have something like this.

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly and this will be really appreciated.

Download PSD Source File

Step #1 Create New File

We’re start now, in this step create new file (Ctlr + N or File – New) that is 1400 wide and 1150 height.

Step #2 Download a grunge Backgound images

we just choose an free grunge background image for our website design
Grunge Backgrounds – Paper 4 by zerocustom1989

Step #3 Set Ruler Design Area

in this below screen shot you may get idea about design area where we put all contents, you may get idea from Photoshop info penel of right column in this below picture

Step #4 Designe Header Links Area

in below screen get futher idea to make top header link background using Photoshop custom shape tool.

Step #4 Designe Header Background

top area where we create background for add our required top links as you seen in below picture.

Step #5 Header with Top Menu

after create top background under top menus using font-face Myriad Pro, write there links as you seen in underneath picture, there we using an custome shape (rounded ractangle) with Background Color #cae10e and active link color is #010101 of active top Tab.

Step #5 Header (Company Name/Personal Name)

My header will contain only personal name, where you can write your company name too with same grunge font which also available here Download Link (Dead Secretary by Dirt2.com – Andrew2) now further with the logo, you seen our logo where font-size is 50pt, this should be aligned use guide.

Dead Secretary by Dirt2.com – Andrew2

Step #5 Header Social Bookmarking Area

We will add some famous social bookmarking website icons (twitter, Digg, facebook and stumbleupon), we’re getting these transparent icons from http://webtreats.mysitemyway.com, you can Download Free Glossy Orange Orb Social Networking Icons (3.8 MiB)

Step #6 Draw Guides for Body contents

In this below picture we draw guides as reference for decide our contents in 3 columns where we put Services, about and Experience description text which is design requirement.

Step #7 Body contents Title Background

this is very creative tip for you when we going to draw an background using brush”Charcoal Large Smear” 63 Master Diamiter, just draw wherever you want to make your titles.

Step #8 Body contents Title Area

Leave an titles with some description text box with the size of 340px wide and height according to text data which you seen there in single title example, with font color #000000.

Step #9 Body contents Title Area

Then duplicate the same content titles with description text the middle and right columns.
in portfolio category i am using sample portfolio screen shots from Templatemonster just as sample and not selling here.

Step #9 Body contents (Blog Detail Area)

in this step create an black background with the size of 1024px wide there we will be adding 6 blog designs (some of these are my friend blog websites) that showcase work from my blog websites, you find your own images that you want tp showcase and crop, resize, make white border the images will be 313px wide and 174px height.

Step #9 Footer Area

Another very importent area of any professional website where we put our links and copyright information.
there we create an rounded rectangle for write bottom links.

Step #10 Final Website Design Look

Here is finaly a professional look at what we have designed for you.

hope you’d like so you can Download PSD File use can your personal and commercial use, but please leave your comments below too about this tutorial effort.

Tutorial Link: Tutorial9.net