SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout How to Design a Business Web Layout

How to Design a Business Web Layout

grafpedia Web Layout Sep 26, 2012

Welcome to you in this new Photoshop tutorial on Grafpedia. You are right now going to learn how to design a graphic Template for a business web site. Only the Photoshop basic knowledge is needed to follow this Photoshop tutorial. This website layout will be perfect for companies willing to be displayed as new age and in the new technology space.

See here the preview of the final result of this Photoshop tutorial:

Be care, this tutorial can take long time, ensure you have 1 or 2 free hours in front of you to completely realize this Photoshop tutorial.

STEP 1 Create your document and start the creation of the menu

Open your Photoshop software, then go to the menu File>New. A new window gets open, fill in the name of your future .psd file, enter the width and height (1000Ã???1400 pixels).

Photoshop tutorial - How To Design A Business Web Layout - step 1

Click on the button OK and your new document get open.

Photoshop tutorial - How To Design A Business Web Layout - step 2

Advice : Save your document right now to make easy the save process of your file.
To do it, go to menu File>Save as. By next steps, click easy on Ctrl/Cmd + S to save your updates.

Press Ctrl/Cmd + R to display your document rules used to create guides. These guides a very important to help you to find the correct place of each elements of your layout.

Create a first horizontal guide to 60pixels of the top border. Create a new group and un new layer (name the group menu and the layer background). Using the Rectangular Marquee tool (M), create a bar with a size 1000x60px and the colour: dark blue #112d3b.

Photoshop tutorial - How To Design A Business Web Layout - step 3

Use now the Text tool (T) to create the links of the menu. I used for it the Helvetica Neue font ... with the colour #cde1ea.

Photoshop tutorial - How To Design A Business Web Layout - step 4

Create a new layer and create on it a rectangle (80 * 70 pixels) (never mind the colour).

Photoshop tutorial - How To Design A Business Web Layout - step 5

Go to menu Layer>Layer Style to add a gradient overlay and an inner shadow.

Photoshop tutorial - How To Design A Business Web Layout - step 6
Photoshop tutorial - How To Design A Business Web Layout - step 6

Photoshop tutorial - How To Design A Business Web Layout - step 6

Create again a new layer as well as a 3pixels height line using same as the one used for the menu. Use now the Custom Shape tool (U)to create a triangle in the middle of this bar.

Photoshop tutorial - How To Design A Business Web Layout - step 7

Use one more time the Text tool (T) to add a white link.

Photoshop tutorial - How To Design A Business Web Layout - step 8

See the result below.

Photoshop tutorial - How To Design A Business Web Layout - step 9

STEP 2 Create the map

To create the depth map, I used an interesting resource, which can be downloaded from the website of our partner Shutterstock. So, download it and open the .eps file using the Illustrator software. Select the depth and copy it.

Go back to your Photoshop document and press the Ctrl/Cmd + C keys to paste the picture. To finish, create a new group you name the map. Put the new layer into this group.

Photoshop tutorial - How To Design A Business Web Layout - step 10

Use the Text tool (T) to create the title of your map. Put your title in the center of your document and add these both layer styles (check the setup below). Reduce now the opacity of the depth to 40%.

Photoshop tutorial - How To Design A Business Web Layout - step 11
Photoshop tutorial - How To Design A Business Web Layout - step 11
Photoshop tutorial - How To Design A Business Web Layout - step 11

Go back to Illustrator and copy this time only the map. Paste the copy into your Photoshop document.

Photoshop tutorial - How To Design A Business Web Layout - step 12

STEP 3 Create the la legend

The legend is a block located on the right side of the map, it is used to display important data published on the map. To create this legend, create a new group (menu layer>new>group) you name the legend.

Use now the Rectangle marquee tool (U) to create a whit rectangle (with a size of 120x320px). Reduce the opacity of the layer to 40%.

Photoshop tutorial - How To Design A Business Web Layout - step 13

Go now to menu Layer>Layer Mask>Reveal all to add a layer mask on this layer. Change the foreground colour to the black and select the gradient tool (G). From the Gradients selector, select the second one (foreground ? transparent).

Create now two gradients on the layer mask, the first one from the top to the bottom and the second one from the bottom to the center.

Photoshop tutorial - How To Design A Business Web Layout - step 14

Create a new layer you name the glow. Update the foreground colour to the white. Change the setup of your gradient to get a radial gradient. Use now your gradient to create a white glow. To finish, switch the blending mode of this layer to overlay.

Photoshop tutorial - How To Design A Business Web Layout - step 15

Import the glove from Illustrator to Photoshop and place it over your white glow.

Photoshop tutorial - How To Design A Business Web Layout - step 16

To close the legend subject, use the Text tool (T) to add your explanation (use the #d7e7ee colour). Add a drop shadow onto the text.

Photoshop tutorial - How To Design A Business Web Layout - step 17
Photoshop tutorial - How To Design A Business Web Layout - step 17

STEP 4 Complete the map

Use the text tool (T) to add at each end of each line, a percentage or an explanation regarding your needs. Add on them, the same drop shadow as the one used for the legend text.

Photoshop tutorial - How To Design A Business Web Layout - step 18

See below the final result of the map + the legend.

Photoshop tutorial - How To Design A Business Web Layout - step 19

STEP 5 Create the first contents

Use the rounded Rectangle (U) with a radius of 3px to create 3 rectangles ((280x174px).
Place them on the whole width of your document.

Photoshop tutorial - How To Design A Business Web Layout - step 20

Reduce de background opacity to 20% and switch the blending mode to overlay. Add an outline to each rectangle.

Photoshop tutorial - How To Design A Business Web Layout - step 21
Photoshop tutorial - How To Design A Business Web Layout - step 21

To create the titles, import into your document, the small businessman icon from the eps file (top left).

Photoshop tutorial - How To Design A Business Web Layout - step 22

Use the Text tool (T) to add your title. Add again the same drop shadow (menu layer>layer style>drop shadow).

Photoshop tutorial - How To Design A Business Web Layout - step 23

In this block, I used a graphic available from the eps file. But to find the perfect integration of it, create first two glows; one white, one black.

To create the white one, create first a new layer you name the light gradient. Change the foreground colour to white and with the Radial Gradient tool (G), create the white glow (foreground gradient? transparent).

Press now the Ctrl/Cmd + t keys to activate the free transform and to reduce the glow height.

To finish, reduce the layer opacity to 30% and change the blending mode to Soft Light.

Photoshop tutorial - How To Design A Business Web Layout - step 24

Apply same method to create a black glow (will be use as a shadow).

Photoshop tutorial - How To Design A Business Web Layout - step 25

Import now the graphic over the glow and shadow layer.

Photoshop tutorial - How To Design A Business Web Layout - step 26

To terminate the first block of contents, use the Text tool (T) add few explanation regarding your graphic (use one more time the drop shadow onto the text).

Photoshop tutorial - How To Design A Business Web Layout - step 27

STEP 6 Continue the contents creation

For the second block, use same steps as the steps used previously to create the title.

Photoshop tutorial - How To Design A Business Web Layout - step 28

Import from the .eps file (under Illustrator) into your document, the icon of the blue guy. Increase its size and press Enter to validate the import.

Photoshop tutorial - How To Design A Business Web Layout - step 29

Use the text tool (T) to add a text on its right side. Create now on bottom right of the block, a rounded rectangle with yellow colour #f9a61a and size 80Ã???22 pixels (to do it, use the rounded rectangle tool (U) with 2 pixels radius).

Photoshop tutorial - How To Design A Business Web Layout - step 30

On this rectangle, add 3 layer styles : inner shadow, gradient overlay and an stroke) using the setting below.

Photoshop tutorial - How To Design A Business Web Layout - step 31
Photoshop tutorial - How To Design A Business Web Layout - step 31
Photoshop tutorial - How To Design A Business Web Layout - step 31
Photoshop tutorial - How To Design A Business Web Layout - step 31

Use the Text tool (T) to add your button name with the colour #865f11 and add a drop shadow.

Create a new group you name button. Put into this group, the rounded rectangle.

Photoshop tutorial - How To Design A Business Web Layout - step 32
Photoshop tutorial - How To Design A Business Web Layout - step 32

It is time now to start the creation of the third block. Create again title on the top of
the block.

Photoshop tutorial - How To Design A Business Web Layout - step 33

Import two yellow icons from the .eps file (see picture below).

Photoshop tutorial - How To Design A Business Web Layout - step 34

Use the Text tool (T) to add texts contents on the right side of each icon.

Photoshop tutorial - How To Design A Business Web Layout - step 35

Duplicate the button group and put the copy of the button, bottom right of the third block.

Remind: To duplicate a group or a layer, right click on the layer from the layers window, then click on "duplicate the layer".

Photoshop tutorial - How To Design A Business Web Layout - step 36

See below the final result of the 3 block.

Photoshop tutorial - How To Design A Business Web Layout - step 37

STEP 7 Services descriptions

3 blocks are located under the map to display your last works or your services (i.e.).
To create this block, create first a blue rectangle (#102d3a) which fills the bottom part of your picture.

Photoshop tutorial - How To Design A Business Web Layout - step 38

Create now a new layer you name shadow. Select the Gradient tool (G) with the second gradient (foreground ? transparent) and change the foreground colour to the black.

Photoshop tutorial - How To Design A Business Web Layout - step 39

Add a layer mask on the layer �?�« shadow �?�» (menu layer>layer mask>reveal all) and with the rectangle marquee tool (M), create a selection from the left border to the center of your picture and create a gradient from the center to the left side. Apply same method to the right side of your shadow.

Photoshop tutorial - How To Design A Business Web Layout - step 40

Use the Text tool (T) to create the titles of your new blocks. Add a drop shadow (menu layer>layer style>drop shadow).

Photoshop tutorial - How To Design A Business Web Layout - step 41
Photoshop tutorial - How To Design A Business Web Layout - step 41

Use now the rounded rectangle tool (U) to create a white rectangle (280Ã???260 pixels).

Photoshop tutorial - How To Design A Business Web Layout - step 42

Switch the blending mode of the rectangle to overlay and reduce its opacity to 20%.

Photoshop tutorial - How To Design A Business Web Layout - step 43

Over the first rectangle, create a second white rounded rectangle with a size of 260x150px (with a margin of 10px).

Photoshop tutorial - How To Design A Business Web Layout - step 44

Import the picture to illustrate this first block. Please, visit the Grafpedia�¢??s Stock pictures to find pictures with free of use. Right click (with your mouse) on the layer of the picture en select the function "create a clipping mask".

Photoshop tutorial - How To Design A Business Web Layout - step 45

Just under it, use the Text tool (T) to add a date (with yellow #fbbf21) and a paragraph (with blue #abbfc9). Ensure to skip some space between date and text.

Photoshop tutorial - How To Design A Business Web Layout - step 46

Go back to your .eps file and import into your Photoshop picture, the little yellow ball. Put it between the date and the paragraph.

Photoshop tutorial - How To Design A Business Web Layout - step 47

Duplicate the yellow button, previously created, then, switch the yellow colour of this button, to this blue #5a91aa. Change the container colour to this blue #102b38 (use same blue for the text).

Photoshop tutorial - How To Design A Business Web Layout - step 48

Now, the first block is finished.

Photoshop tutorial - How To Design A Business Web Layout - step 49

Repeat the previous steps to create two other blocks.

Photoshop tutorial - How To Design A Business Web Layout - step 50

STEP 8 Create a newsletter block 1/2

Before to create a mailing list block, you are going to create a sharing shadow. To do it, create first a new layer you name shadow.

Create a selection on the width of your picture with le Rectangle marquee tool, then use the Gradient tool (G) to create the same black gradient as the one used during the previous step.

Photoshop tutorial - How To Design A Business Web Layout - step 52

Add a blending mask to the layer, the same used to the first shadow (menu layer>blending mask>reveal all).

Use the same Gradient tool to create a gradient form the left side to the center and from the right side to the center.

STEP 9 Create a block of newsletter 2/2

Use the Text tool (T) to invite the visitor to enter its email address. In this way, create a title (blue #9ec4d5) and a paragraph (soft blue #cce0e9).

Photoshop tutorial - How To Design A Business Web Layout - step 53

Use the rounded rectangle tool (U) on the right to create a form field (blue rectangle #091a21 size 290x40px) as well as a button (soft blue rectangle #5e96ae, size 100x40px).

Photoshop tutorial - How To Design A Business Web Layout - step 54

Add on the button the layer styles previously added on the yellow and blue buttons.

Photoshop tutorial - How To Design A Business Web Layout - step 55

Use the Text tool (T) on the form filed to add an explanation text "Insert your mail..." with the blue #1d4f66.

Add now on the button the button description using this colour #102d3a (In my example, I used the Helvetica Neue LT Std font in black). Add the drop shadow from the yellow and blue buttons, previously used.

Photoshop tutorial - How To Design A Business Web Layout - step 56

See below the result final of your Template.

Photoshop tutorial - How To Design A Business Web Layout - step 57

STEP 10 Create the Footer

Use the Rectangle tool (U) to create a blue rectangle (#091a21) with a size of 1000 x 90px.

Photoshop tutorial - How To Design A Business Web Layout - step 58

Use the Text tool (T) to add your Website Copyright. I used this colour #cce0e9 for the first line and the colour #668491 for the second line.

Photoshop tutorial - How To Design A Business Web Layout - step 59

STEP 11 Create a logo

To finish this theme, return to the top to create the logo. Then, go back to the group Menu created during the Step 1.

Create first a rectangle with same colour than the one used for the menu. Create it 10pixel more than the menu on the bottom (check the picture below).

Photoshop tutorial - How To Design A Business Web Layout - step 60

Then go for the last time in your.eps file (in Illustrator) and import the icon with the business man. Add custom the fill color with a layer style (menu Layer> Layer Style> Color Overlay). Use this color! #dfecf1.

Photoshop tutorial - How To Design A Business Web Layout - step 61

Use the text tool (T) to add the name of your website. Use the Helvetica Neue LT Std font with a normal mode and with the black (colours used #dfecf1 and #6187b7).

Photoshop tutorial - How To Design A Business Web Layout - step 62

Create a new group you name the logo and group into it, the icon and the text.

See below, the result including the theme with the logo.

Photoshop tutorial - How To Design A Business Web Layout - step 63

STEP 12 Finish the Footer

Duplicate your group logo, then use the Move tool (V) to put the copy of this layer on the bottom right of your Footer.

Photoshop tutorial - How To Design A Business Web Layout - step 64

Your theme is now finished, after lot of steps, but from this hard work, it results a wonderful result, isn�¢??t it ?

Photoshop tutorial - How To Design A Business Web Layout - step 65
Photoshop tutorial - How To Design A Business Web Layout - step 66

I hope you like this new Photoshop tutorial, by my side I enjoyed to create it. If you want, you can promote it on Twitter or Facebook, or you can share it with your friends. I thanks in advance, all readers who will do it.

subscribe to newsletter