Web Designers Journal

Visions Connected To The Web

By

Create a 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

Business template layout tutorial

Step1

Go to www.960.gs 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.

1_unlock

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:

1_result

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:

2_foldericon

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

3_height

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.

3_result

Step4

Add the following layer styles:

4_gradient
4_innershadow

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.

5_result

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:

6_gradientoverlay
6_innershadow
6_result

Step7

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

7_innerglow
7_gradientoverlay
7_stroke
7_dropshadow

Result:

7_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:

8_result

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:

9_searchbar_pos

Add these layer styles:

9_coloroverlay
9_stroke
9_innershadow

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

9_totalresult

Step10

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

10_textsettings

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

Here is how I placed them:

10_placement

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.

11_submenu

Add those layer style to the submenus:

11_gradientsettings
11_gradient

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

11_coloroverlay
11_coloroverlay

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:

12_gradientsettings
12_gradient
12_innershadow

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:

12_shadowrectangle

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:

13_perspective

Now add these layer styles:

13_dropshadow
13_gradient

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

13_dotspos

Add these Layer Styles to 3 of the dots:

13_dotshadow
13_dotgradient
13_dotstroke

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

13_pressedgradient
13_pressedstroke
13_pressedinnershadow
13_presseddropshadow

Result:

13_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:

14_gradient
14_innerglow
14_dropshadow

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

14_textsettings

I positioned it like this:

14_position

Step15

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

15_pos

Add these layer styles:

15_innerglow
15_gradient

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

15_textsettings

Add these layer styles:

15_inner
15_color
15_drop

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:

15_resultbutton

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:

16_pos

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

16_textsettings

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

16_separator

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

16_textsettingsheadlines

Result:

16_results

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:

17_dropshadow
17_gradient
17_stroke

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

17_textsettings

Then add this layer style:

17_dropshadowreadmore

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

17_result

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:

18_gradient
18_innershadow

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:

19_contentboxes

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

19_coloroverlay
19_dropshadow
19_innershadow

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

19_textsettings

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%

19_seperators

Add some content in the boxes with these settings:

19_contenttextsettings

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:

20_size

Add these layer styles:

20_dropshadow
20_gradient

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

20_inner
20_color
20_drop

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

Business template layout tutorial