Create a new document size 900 x 900 pixels. Select the gradient tool with a linear gradient, select the colors #224371 and #4b86c4. Drag the linear gradient from the top of your canvas to half way down. The look your going for is incredible like this.

Select the rounded rectangle tool with a radius of 10pixels, draw out a navigation sized rectangle and seal with any color. Place the rectangle at the top of your canvas so only the bottom corners are presentation.

Press CTRL + A on the keyboard then goto “image > crop”. This will have now chopped off the top corners of your rectangle. Next, add these layers to the navigation rectangle.

You should have something like this.

Add your navigation labels to your navigation, inbetween each link add a divider using the two 1px line method.

Find yourself a picture of the world, google is a good place to start, preferbly find one with a white background as it will be easier to hide. Copy and paste your world map onto your canvas, resize if you have to. Place the map underneath your navigation, set layer blending mode to multiply and opacity to 75%.

Add your website title and slogan over the map.

Next we need to create a diagonal line pattern, create a new document 25 x 25 pixels. Select the pen tool with a 1 pixel sized brush, zoom in as far as possilable and copy the pattern below.

Once finished goto “edit > define pattern”. Head back over to our orginal design and select the rounded rectangle tool. Draw out a simple box for our little login fields. Dont fill the rectangle with a color instead select the pen tool, then right click and goto “make selection”. Select the paint bucket tool at the very top in the menu change “forground” to “pattern”. Select your pattern from the drop down box.

Add a white color overlay to your lines then set opacity to 10%.

Download this icon pack from “WEFUNCTION” Select the padlock icon and place it onto your lined rectangled. Begin to draft out a simple members login form.

Continue to build up the content on the right side of template. Adding icons and minor details as you go along.

On the left side of the template draw out a big rectangle using the rounded rectangle tool.

Add these layer styles to your content box to complete the effect.

Head over to google again and find yourself some business images, if you favor use your favorite stock website. Find yourself 3 different commerce type images. Make the 3 images all the same size then drag them onto your canvas. Place the 3 images next to each other horizontally. Combine all 3 business image layers jointly as one. Make a layer selection by click on the business images layer whilst investment down on the CTRL key. Copy the image to the clipboard then delete the layer. Make another selection by clicking on your big content box layer whilst holding down the CTRL key. Go to “edit > paste into”. Your image will now be able to move around within the boundaries of the big content box. Reproduction the business images another 2 times and place them on top of each. Merge the business image layers as one then add a “layer mask”. Drag a linear gradient from left to right.

Fill your content box with some business jargon, you can use the blue circles in the wefunction icon pack as bullet points.

Beneath your content box add some more business jargon in the form of paragraphs, underneath the paragraphs add a simple texted footer.

Also included in the wefunction icon pack were a set of payment icons, bunch them up together and add them above your footer info.

Create a new layer underneath ALL your footer content, select the eliptical marquee tool OR the circle tool and make a selection like this.

Fill the selection with white then goto “filter > blur > guassian blur”, blur by about 48pixels. Set layer blending mode to overlay.

Thats it all done, heres the final result.

Business web development project very often becomes the most profitable work for freelance web designer.

Related posts:

1. Corporate Business Website Design Tutorial (Free PSD file) In this Corporate Business Website Design Tutorial you will...
2. Web 2.0 Portfolio Website Tutorial with PSD Source Talk-mania showing a great tutorial about Web 2.0 Portfolio...
3. Creative Brochure Design Tutorial in Adobe Photoshop Today with respect of users need just design an...
4. How to Draw A Very Detailed RadioTape From The 80’s Remember the old days where cassette tape and FM...
5. Create an Famous Blog Logo Through Photoshop Tutorial Today we’re trying to present an short way for...

Related posts brought to you by Yet Another Related Posts Plugin.

Hello welcome to Complete Website design tutorial. In this Tutorial we’ll be creating a website in Photoshop then later on code it into a 5 page template. We’ll also be addition a nice JQuery slide effect for our featured content section using JFlow.lets get started firstlt create a new document 900 x 1090 pixels with a black background. Select the rectangular marquee tool and create a box at the top. Fill the box with a radial gradient using the colors #202121 and #000000.

At the very bottom of the rectangle create two 1 pixle lines ontop of each other spanning the width of your canvas.

Add a layer mask to your lines layer. With the gradient tool and a reflected gradient start from the middle and drag towards the edge of the canvas. Make sure forground is white and background color is black. The edges of your lines should blend into the background. You should have impressive like this.

In the top left hand corner add your website title and slogan. I’ve selected to add a few layer styles to the 2nd word in my title. The layer styles are as follows.

You should have something like this

On the same level as your website title towards the right hand side add a straightforward navigation using the rounded rectangle to create a hover state. The color of the blue hover is #0096ff.

Beneath the website title add some featured content text with a title. Next to the title make a straightforward little icon/bullet point and place it next to the title.

On the right side of the header create a rounded rectangle, just big enough to fit inside the space provided. Make the rectangle over lap the header at the bottom.

View Complete Tutorial

Source File (PSD)

Related posts:

1. Web 2.0 Portfolio Website Tutorial with PSD Source Talk-mania showing a great tutorial about Web 2.0 Portfolio...
2. Corporate Business Website Design Tutorial (Free PSD file) In this Corporate Business Website Design Tutorial you will...
3. Creative Brochure Design Tutorial in Adobe Photoshop Today with respect of users need just design an...
4. Rainbow Colorful Glowing Text Effect Using Adobe Photoshop One of our new team member showing his effort...

Related posts brought to you by Yet Another Related Posts Plugin.