Clean White Business Template Photoshop Tutorial

Learn how to create a clean and contemporary business layout with this thorough Photoshop tutorial.

Step 1

To begin, create a new document by pressing Ctrl+N or going to File> New. Set the Width to 955 and the height to 1000 pixels. This template will fit perfectly on 1024x768 resolution. Whenever you want to create a template for 1024x768 resolution, the industry-standard width to use is 955. The height doesn't really matter because almost every website on the internet requires vertical scrolling and everyone's used to it now. What you want to avoid is horizontal scrolling caused by using a width too large for the user's monitor to display. These days, most people use at least 1024x768 resolution so it is a good idea to have your templates made for that resolution.

Step 2

Select the Rectangular Marquee Tool. It may be hidden under the Elliptical Marquee Tool. Simply click and hold on the button and a flyout menu should appear letting you select any marquee tool you wish.

Step 3

Once you have the rectangular marquee tool selected, on the top where the option bar is, you can specify the settings for this tool. We're going to use fixed size where we can specify our own size. Choose Fix Size and set the width to 100% and the height to 100px.

Step 4

Now click on the document and you should see a rectangular marquee created from the exact dimensions we specified in the previous step. Click and drag that selection so that it is positioned on the top of the document like the image shown below.

Step 5

In the Layers pallet, click on the "New Adjustment Layer" button. This should open a menu where you can select Solid Color. Select Solid Color.

Step 6

A window will appear asking you to pick a color. Simply enter in #e5e5e5 on the HTML Code field and it'll select a 90% gray for you.

Step 7

Now you have a solid color adjustment layer and a layer mask from the selection we created earlier. Now you may ask why use the solid color adjustment layer instead of just creating a new layer and filling it with a color. The reason is because adjustment layers are vector, meaning you can resize it and modify the settings without losing any details. For a solid color rectangle, using a raster layer is fine but it is good practice to use adjustment layers whenever possible because if you want to change the color, you can simply double click on the layer and select a color. Also, adjustment layers will keep your file size small. As you may already know, Photoshop files are usually very large in file size especially if you have a lot of raster layers. Now that you understand why we used a solid color adjustment layer, lets continue with the tutorial. Right mouse click on the layer and a menu should appear where you can select Blending Options. Click on Blending Options.

Step 8

A Layer Style window should appear with a lot of settings. Don't be overwhelmed, we'll show you screenshots and you just have to copy the settings in the screenshots. First, click on the Gradient Overlay item near the left of the window. It should automatically checkmark it for you and you should see the Gradient Overlay settings. This style will add a gradient to the layer. Copy the settings below but don't press OK yet.

Step 9

Now select the Drop Shadow style and copy the settings below:

Step 10

Finally, we'll add a stroke. This effect is minimal, but it is small details like this that make website templates look good. Select Stroke and copy the settings below. Now you may press OK.

Step 11

We have our header background complete and now we'll work on creating the image that'll appear below the header. Begin by opening a photo you want to add to the template in Photoshop. To do this, go to File> Open and choose the file you want. Here's the image I'll use for this tutorial:

Step 12

We're going to copy and paste this image into the template. To do this, press Ctrl+A or go to Select> All to create a selection of the canvas. Now you can copy the layer by pressing Ctrl+C or going to Edit> Copy. Once you have this image copied to your clipboard, you can close this file and switch back to the template we were working on earlier.

Step 13

Before we paste, we'll create a selection that we can paste the photo into. Select the Rectangular Marquee Tool and enter in the settings below:

Step 14

Click on the document and a rectangle marquee should be created. Position the selection to the top of the document.

Step 15

Now press Shift+Ctrl+V or go to Edit> Paste Into. What this will do is paste the image we copied earlier but paste it within the selection that we created in the previous step.

Step 16

You should now have that image as a layer with a layer mask. Move this layer to the middle and rename it to "Header Image". While we're at it, rename the top layer to "Header". To rename a layer, simply double-click on the text.

Step 17

Now we'll work on creating the menu bar below the website image we created earlier. Select the Rectangular Marquee Tool and enter in the settings below:

Step 18

Click on the document to create a selection and drag that selection so that it is positioned right under the image we made earlier.

Step 19

In the Layers pallet, click on the New Adjustment Layer button and select Solid Color. Enter in #e5e5e5 as the HTML code and click OK.

Step 20

Now rename this layer to "Background". Remember, to rename a layer, simply double-click on the text and you can edit the layer name. Now press Ctrl+G and it should put the layer inside a folder, or otherwise known as a group. Rename this group to "Menu". Renaming a group is like renaming a layer; just double click on the text and edit.

Step 21

Now we'll create the individual menu boxes. Select the Background layer and press Ctrl+J to duplicate the layer or go to Layer> Duplicate Layer. You should now have a new layer on top of the Background layer. Rename this layer to "Menu Item".

Step 22

Press Ctrl+T or go to Edit> Transform> Scale to use the Transform tool. Once you have the Transform tool activated, on the option bar at the top of your Photoshop window, enter in the following settings:

Step 23

Right mouse click on the layer we're working on (Menu Item) and select Blending Options. In the Layer Style window, select the Gradient Overlay layer style and enter in the settings below:

Step 24

Now select the Drop Shadow layer style and copy the settings below:

Step 25

Finally, we'll add a stroke that'll make this button look a lot more detailed. Select the stroke layer style and use the settings below:'

Step 26

Now select the Move tool from the toolbar. Click on the button and then while holding Alt+Shift, move the button to the right. You will see that it copied the new layer and now you have a duplicate of that menu button.

Step 27

While holding the Alt+Shift key, move the buttons to the left and right so that you have a setup like the image below. The buttons should snap beside each other and because you held down the Shift key, they move on a straight line.

Step 28

Now we're going to add an accent bar that'll add a tiny but important detail to the template. Select the Rectangular Marquee tool and type in the settings below:

Step 29

Now create a new Sold Color adjustment layer by going to your Layers pallet, clicking on the New Adjustment Layer button, and selecting Solid Color. Select a color you would like to use for this accent bar. It should be the same color as your logo or theme color.

Step 30

Move this layer to the top and rename this layer to "Accent Bar".

Step 31

Now create another new Solid Color adjustment layer but this time without a selection. I'm sure you already know how to do this, but in case you don't remember, in the Layers pallet, click on the New Adjustment Layer button and select Solid Color. Now enter in #e5e5e5 as the HTML color code and press Enter. Position the layer right above the "Background" layer and rename this layer to "Background".

Step 32

As you may have already guessed, we're now working on the background of the image. First, select the Gradient Tool from the toolbar.

Step 33

Once you have the Gradient tool selected, specify the option bar settings with the settings below:

Step 34

First, make sure you have the layer mask for the Background layer activated. There should be a white outline around the thumbnail of the Background layer mask. If you don't see it, simply click on the layer mask thumbnail to activate it. Now use the Gradient tool and draw a line from the bottom of the accent bar to about an inch or two below.

Step 35

You should now have a nice gradient like the image below.

Step 36

Now we're going to invert it. Press Ctrl+I or go to Image> Adjustment> Invert. This will invert the gradient so that it looks like a glow from the menu bar.

Step 37

We're done creating the template. It looks a little boring right now, but in the next steps, we'll add some content.

Step 38

First, add a logo to the template. Import your logo by going to File> Place, browsing for the logo, and clicking OK. You should have a new layer with the logo. For my logo, I made a simple text with a green block (Quite a boring logo isn't it?). Now move the layer to the top and rename it to "Logo". Select the Move tool and position the logo to the top left.

Step 39

Now we'll enter in some text for those empty menu boxes we created earlier. Select the Text tool and enter in some text. Use centered as the text position and #333333 as the text color. On a bright template, we use a brighter black to reduce the contrast. In color theory, this is called color grounding where the white around the text makes it look darker than it should be.

Step 40

Once you entered in a text, you should see a new layer with the text you entered. In this case, I typed in Home and I got a new text layer called Home. Move this layer so that it is the first layer in the Menu group.

Step 41

Now select the Move tool and while holding Alt+Shift, Move the text to fill the other empty menu boxes with text. You should also have four new layers called "Menu copy 1, Menu copy 2, etc.". Don't worry about renaming the layers right now because we'll show you something cool Photoshop does.

Step 42

We don't want website with five "Home" menu items do we? So select the Text tool and change the text of each menu item. Now when you're done changing the text, Photoshop renames the layer to the text you typed. For example, I changed one of the text from Home to Contact and it automatically renamed the layer to Contact. Pretty cool eh?

Step 43

We're done and here's the final template. But doesn't it look bland?

Step 44

Don't worry, once you put content in it'll look much better. For content, it should all be done in HTML after you have the template sliced and coded. Here's a preview of what the template looks like with content:

Great Tutorial
written by Cludos, November 08, 2007

Thanks for the awesome tutorial. Could you also include the source images or the PSD? I racked my brains searching for a similar pic online.