Create a business website layout in photoshop

Business websites with huge image sliders are totally selling at this moment. You get overwhelmed with templates like these on ThemeForest for example. So it might be a good idea for you to learn to craft such websites. In this tutorial we’ll teach you how!

Result Preview

Step1

Go to www.960.gz and download the grid pack. Navigate to the photoshop template and pick the 24 column template.
Then in Photoshop go to Image > Canvas Size and set the width to 1020 px and the heigth to 1300 px.

In the Layer Palette at the right bottom of your screen (default) and you should see a group called “24 col grid”. There should be a lock on it, but we want to have it unlocked. So select the layer group and hit the lock at the top of the palette.

Now press V to get access to the transform tool and stretch the pink bars all the way to the top and the bottom of the document. (Don’t change anything horizontally!)

Your document should look like this now:

Step2

It is really essential to work organized when designing a web layout. Because of that, we’re going to create layer groups like a maniac.

To start with, we’re going to create the main group called “Template”. You can do this by clicking the tiny Folder icon at the bottom of your screen:

Inside that group, create another group called Header. If your group doesn’t want to get created inside the template group, just create it anyways and drop it on top of the “Template” group.

Step3

Inside this Header group, we’re going to put a new group called “Top Bar”. (The name doesn’t have to be the same to make things work, it’s just for easy refference.)

Go to the Window options and make the Info Palette visible (F8). Now take the Rectangle Tool (U) and draw a rectangle at any place on the screen. While still holding the mouse button to draw the rectangle, look at the Info box and check the width and height changing. The height is what we need to get right now. Drag your rectangle until H is 0.25

Pick the transform tool (V) and change the width so it fits the enitre document. Then place this bar at the entire top of the document. Make sure everything fits the document and isn’t running outside your document.

Step4

Add the following layer styles:

Step5

Now pick the Brush Tool and set its color to white. Make sure the hardness is on 0% and set the size to something like 900px. Then draw a big dot right in the middle of the bar. Reduce the opacity to 17%

If you don’t see enough color difference, either duplicate the layer or raise the opacity.

Now the top bar is finished.

Step6

In the Header group create a new layer which will be the main header background, use the same technique as Step 3, but make the height 3.81px

Add these layer styles:

Step7

Create another new layer and apply another long rectangle with 1.59 height. This bar will be the navigation bar.

Result:

Step8

I’m not going to explain you how to create the logo, since it’s just a dummy and very likely to be replaced. If you really want to know how to get it the same, then take a look at the .psd you can download at the end of this tutorial.

It is recommended to place it close to this on the grid:

Step9

Create a new layer group inside the Header group. Name it Searchbar.

Were going to place it at the same height as the Logo, which is in the middle (vertically) of the header bar. Place it on the grid as shown below:

Add these layer styles:

We also need to place a icon next to it, to make clear it’s a search bar.You can find such icon by default in Photoshop. Pick the Custom Shape Tool (in the stack of all shape tools) and at the top you can pick the shape. If you can’t find it, press the small triangle and select “all”. Set its color to #d0d0d0

Step10

Create a new layer group inside the Header group and call it navigation. I used the following text settings for the items:

I moved the text 3 times to the left from eachother while holding the Shift key.

Here is how I placed them:

Step11

Create a new layer group again called submenu. The pick the Rectangle Tool and draw a rectangle around one of the navigation items. Duplicate it some times and make a dropdownmenu of it.

Add those layer style to the submenus:

Add text on top of it with the same settings as the normal navigation items. But add these layer styles:

Now the Header is completed!

Step12

Create a new layer group inside the Template group.Call it “Slider”. Take the Rectangle Tool and draw a rectangle with 13.44 height. Add these layer styles to it:

Get a big picture you would like to put as a slider image. I made it 26.49 wide and 10.16 high.

On a new layer, draw a black rectangle about this size at this spot:

Go to Edit>Transform Path>Perspective and drag the bottom nobs inward.Then go to Filter>Blur>Motion Blur and set the direction to 0° and 20px distance. Then reduce the opacity to something like 20% and make sure the layer is positioned BEHIND the image. Also make sure the entire Slider group is positioned behind/below the Header group.

Step13

Pick the Rounded Rectangle tool and set its radius to 10px. Draw a rectangle bar at the bottom of the slider image. Make sure the layer is behind the image. Now transform the perspective until it becomes like this:

Now add these layer styles:

Inside of this, we’re going to add some dots (made with the Ellipse Tool). Place them on the grid like so:

Add these Layer Styles to 3 of the dots:

For 1 other dot, we’re going to make the pressed version. Do that with these layer styles:

Result:

The slider is now finished.

Step14

Create a new group inside the Template group called “body”. Inside that we’re going to put another group called “Note Bar”.

Now create a rectangle on a new layer and make it 3.21 high on the info panel.Place it below the slider area and apply these layer styles to it:

Add a short quote on top of this bar with these text settings:

I positioned it like this:

Step15

Create a new layer and pick the Rounded Rectangle Tool. Draw a rectangle like so:

Add these layer styles:

On top of this button we’re going to write something like “Full Tour” with these text settings:

Add these layer styles:

We’re going to add some shadow behind it. First pick the Ellipse Tool and draw a black flat ellipse at the bottom of the button. Apply a Gaussian Blur of 4.5px to it.

On another layer we’re going to add another shadow, made the same way as for the slider at step 12, but with the appropriate size for the button of course. Reduce the opacity to 50%

Result:

Step16

Inside of the Body group, add a group called Features. It depends on how you would like to categorize items now. I put all the read more buttons in one group, all text in one group and all headlines in one group. It might suit you better to create groups for every block of content. Use what you’ve learned so far to organize this part yourself!

Create a text block with these of this size (drag the content box with the text tool before typing to make everything fit easily!). Duplicate it twice and position them like so:

Use these text settings for the dummy text (color is #202937)

On top of the text you might like to add some separators with the color #909daf. Create these with the Line Tool.

Above that add the headlines with these settings (color is #243749):

Result:

Step17

We’re going to create some fancy Read More buttons. Pick the Rounded Rectangle Tool and drag buttons with the size of something close to 3.88 wide and 0.96 high in the info panel. Then add these layer styles:

On top of that, add the “Read More” text with these text settings (color is #2a3442):

Then add this layer style:

I alligned the buttons at the right of side of the text blocks.

Now the Body is also finished! Up to the last part … the footer.

Step18

Create a new layer group inside the Template group, call it Footer. Pick the Rectangle Tool and draw a rectangle with a height of 9.70 in the info panel. Place it at the bottom of the screen. Add these layer styles:

Step19

Create a rectangle with the size of 7.06w and 6.95h in the info panel and duplicate it twice. Position them like this:

Add these layer styles (and set the overall opacity of the boxes to 40%:

Above that add some Titles with these text settings (you can replace DIN with any other sexy font):

We also need some separators.The easiest way to get them nice and fitting, is by duplicating the Grid group and turning it 90° so the bars are horizontal. Then place it so it fits the boxes and draw white lines in between them. Then reduce the lines their opacity to 10%

Add some content in the boxes with these settings:

Step20

The final part will come now. We’re going to create a big button in the footer. Create one with the Rounded Rectangle tool and make the size something like this:

Add these layer styles:

Put some text like “Get Quote” on it. I used DIN as font with 44pt as size. Apply these layer styles:

To complete it I put some tiny white text (DIN 12pt) below the button to fill up the empty space; also real sites should have this sort of content in their footer.

I put: “This site uses valid HTML and CSS. All content Copyright © 2010 NAME HERE, Inc”

Result