Create Website Business Layout

Create a nice looking website with this tutorial that looks both clean and professional. Here is an example created by a fellow visitor: Click here

Header

1. Best way to begin on these website layouts are to start working on it piece by piece. So we will begin with the header. create a new layer that is 750x200.

2. To begin, i am going to split the header into different sections. one will be the navigation menu and one will be a banner image.

3. For the banner image i am going to use some photos and just crop, and add basic effects to them. The photos will be taken from a free stock photo site such as the stock.xchng. I am going to be using

Click to enlarge

And going to add some color changes to it using the Hue Saturation option like this.

Click to enlarge

4. I am going to add some kind of logo+company name now next to the banner image. to make that curve brush stroke, just use the PEN tool and create a vector path in the shape you like. Here is how it looks so far.

Click to enlarge

5. Now it is time to work on the menu. since this is not a real site, i will use "fake" links. after you are done, rasterize all the shapes, and crop the entire header. Here is how it looks at this point.

Click to enlarge

Body

6. We are now done with the header for now, lets begin on the body. open up another new image, Ctrl-N, and set it too 750x 600 and drag the contents of the header onto this new layer.

7. Now once again i am going to fill up the site with "fake" content since this is not a "real" site. The content i use will just be randomly taken from websites around the internet. Now this part is the most subjective part, becuase it is up to you what you want to put here and how you want your content area to look like. I will just do it the way i think is easiest for you to understand, then from there it is in your hands. So first thing i did was create a section to the left right under the logo for recent news additions and added some news content i got off of google news. Also add a lil footer at the bottom of the page just for kicks. Should look something like this.

Click to enlarge

8. Next I am going to add some nice bold text as a slogan on the right side under the menu area. Also added a shadow effect and outer glow. Should look like this.

9. Next I am going to add the main text right under that slogan we had. And below the body text just throw in some small images. You are done after adding all the content. this is how mines turned out. If anyone wants to actually use this template for their sites, Contact me first and let me know and we can work something out. Otherwise just use it as inspiration for a new project, quite simple! To implement the website, open it up in Adobe ImageReady and slice it up properly.

Click to enlarge