Concept Design in Photoshop
This is where the fun begins
Preface
This is the first step that all professional web designers take when making a website. It allows you as the web designer to visualize exactly what the website will look like in the browser without having to write any html and css. The whole point is to design the site entirely in Photoshop before you write any code. This makes it easy to make any revisions if you’re working with a client.
I’m using Adobe Photoshop CS4 for this guide, but most earlier versions of Photoshop will work as well. If you have an earlier version, it will just be a matter of distinguishing the interface differences.
The project
I am going to document the creation of a website for a fake company “ParadiseVodka”. This will simply be a website aimed at promoting a new product. Since many websites fall under this category, the concepts behind the layout and design are applicable to most websites.
Let's begin
- Open Photoshop and go to File -> New
- Make sure your new document window matches the values as seen below:

After you click OK, you should be presented with the following setup.
* Note - Depending on your desktop resolution, you may or may not have this much space to work
with.

- Click on the foreground color in the tools palette and choose the following color. (You can type in the color code "f4f4f4" as shown in the panel below).

- With the paint bucket tool selected, left click anywhere within the canvas to fill the new color in.

This is the point where I create a "blanket" layer. The purpose of this layer is to maintain the exact 960px width that our current canvas is set to, because in 2 more steps, we will increase our canvas width. We will fill it in with a transparent color and hide/show this layer for a point of reference to be sure we aren't designing any content outside of the 960px width.
- Create a new layer (Either by going to the Layer Menu -> New -> Layer, or the keyboard shortcut CTRL-Shift-N)
- Name it Blanket and hit OK

- Select the foreground color picker in the tools menu, and then choose any vibrant color (I chose red) and hit OK.
- Then in the layers window, make sure the Blanket layer is selected and set the Opacity to 10%.

Now we will increase the canvas width. The purpose of this step is to help us visualize exactly what the website will look like in a maximized browser. Your desktop will need a higher resolution for this (at least 1600x1200 is preferable.) I'm personally using a 1920 width resolution. The value you choose to increase your width will depend on your resolution.
- Go to Image -> Canvas Size and adjust the width as shown below. Hit OK

- In the layers window, hide the blanket layer by clicking on the little Eye icon to the left of the layer name.
- Use the eyedropper tool and select anywhere within our light gray background to set it as our foreground color.
- Use the paint bucket tool to fill in the newly created width on the left and right of the design.
- Your screen should look similar to the image below:

- Click the eye icon again on the blanket layer to show it.
- Click on the first layer in the layers window, and then choose the Type tool.
- Click in the area with the type tool shown below, and type "Paradise".
- I'm using a font called Kalinga. If you don't have it, do a search for it on google or use a similar font.
- Be sure to click the thumbnail below to view the full version to be sure you are using the correct text properties shown at the top of the design.

- To get out of the text edit mode, click on the move tool. Then right click on the text layer we just created and select "Duplicate Layer".
- With the move tool selected, first hover over the Paradise text, hold the left click, hold shift, and drag the duplicated text layer to the right of "Paradise".
- Choose the Type tool, click over the duplicated text layer to edit it, and change it to "Vodka".
- At the top you will see a square color box, click on it to change the font color to the gray color as shown below.

Now we will create the navigation bar.
- Show the blanket layer once again.
- In the tools palette, select the rounded rectangle tool. By default, the rectangle tool may be selected. If it is, left click on it and drag out to select the rounded tool.
- Set the corner radius at the top to 6px.
- Drag out to create a rounded rectangle similar to the one shown below.

- Hide the blanket layer.
- Choose the type tool and make sure the font properties at the top are the same as shown in the thumbnail below. (Click on it to view the full size).
- Start typing in the link names. After the first "Home" text, hit the space bar 13 or so times. After each consecutive link, hit the space bar the same amount of times for a consistent margin.
- Then with the text still in edit mode, select and highlight the "Home" link, and change the font color to black.

Next we will begin working on the primary content.
- With the type tool selected, make sure the font properties match the ones in the screenshot below.
- Type "Paradise in a bottle." in the orientation shown below.
- Highlight the "Paradise" text and change the font style to bold. If you do not have this font, choose a similar font.

- Underneath the "Paradise in a bottle." text layer, create a new text layer with "Introducing ParadiseVodka, 100 proof".

- Choose the standard rectangle tool from the tools menu (switch back to it if the rounded tool is selected).
- Change the foreground color to a yellow/orange color as shown below.
- Choose a layer underneath the text layer we just created.
- Left click and drag out a rectangle like the one shown below.

It's always beneficial to think of something clever when you're trying to promote a product or illustrate a point. The idea I had was to take part of our company name "Paradise" and literally illustrate an image of paradise within a bottle.
- Visit this link to purchase the bottle image as shown below from iStockPhoto. Choose the medium version. The cost is minimal. If you do not have the means to purchase this image, simply use Google Image Search to find something similar.
- Once purchased and downloaded, open it in Photoshop.
- Use the square marquee tool to select a rectangular selection close to the bottle. Hit CTRL-C to copy the selection

- Switch back to our original document and hit CTRL-V to paste the bottle.
- Hit CTRL-T to enter transform mode. You will have to resize it by holding shift and dragging one of the corners down to make it smaller, and you will also have to rotate it while holding shift to get the bottle on its side, similar to the image below.
- Once in the correct orientation, select the Move tool and hit Apply.

Now we must get rid of the white space around the bottle.
- Select the pen tool and make sure at the top the "Paths" icon is selected, and not the "Shape Layers" icon.
- Begin to outline the entire edge of the bottle as shown below, and connect the final point with the first point.

- In the layers window, select the "Paths" tab at the top.
- Right click on the "Work Path" layer, and select "Make Selection.."
- Make sure your window matches the one below, and hit OK.
- You will see the "marching ants" around the bottle. Click at the top menu "Select -> Inverse", and then hit the delete key. This gets rid of the white area around the bottle.

- With the bottle layer still selected, create a new layer. Name it "Water" and make sure "Use previous layer.." is selected and hit "OK".

- Select the pen tool, and this time, make sure the "Shape layers" icon is selected at the top.
- Change the foreground color to: 11aef7
- Begin drawing with the pen tool a shape similar to the one shown below. Connect the last point to the first point to close it out.

- In the layers palette, choose "Color Burn" for the layer mode in the drop down menu.

Now we want to add a little bit of depth and realism to the water by adding a different surface color (as if the water is moving).
- Choose the pen tool.
- Choose a slightly darker color than the current color of the water for the foreground color.
- Draw a shape similar to the one shown below

Now we will want to add a sky within our bottle.
- Purchase this image (medium) from iStockPhoto or find a similar free one available on google image search.
- Open it in Photoshop and CTRL-A to select all, and then CTRL-C to copy it.
- Close out the image and switch back to our concept.

- With the bottle layer selected, create a new layer and name it Sky. Also check it off to create a clipping mask and hit OK

- CTRL-V to paste in the sky photograph.
- CTRL-T to enter transform mode, and scale it down (while holding shift) and position it similar to the one shown below.
- Select the move tool and hit Apply.

- Select the Rectangular Marquee Tool, and select all of the water. Hit the delete key to get rid of it.

- Select the eraser tool and set the brush size to around 143px, and make sure it is a feathered brush.
- Get rid of the edges the sky as shown below.

The color of your sky might not match the same hue as the water. If not:
- With the sky layer still selected, go to Image -> Adjustments -> Hue / Saturation.
- Make adjustments similar to the ones shown below, or until the hue of the sky more closely matches the hue of the water beneath it.

- Purchase this image (small) from iStockPhoto or find a similar free one available on google image search.
- Open it in Photoshop and CTRL-A to select all, and then CTRL-C to copy it.
- Close out the image and switch back to our concept.

- Create another new layer (a clipping mask layer) and name it "Swimmer"

- Paste her in the new layer and CTRL-T to make the necessary adjustments to match what is shown below.
- Select the move tool and hit Apply.

- Use the Zoom Tool to zoom in close to the swimmer.
- Select the pen tool and make sure it is in Paths mode at the top.
- Begin to outline any part of the swimmer that is visible, including the watery reflections.
- Once you have created the shape, select the "Paths" tab on the layers window. Right click Work Path and select Make Selection and hit OK.
- Choose the menu: Select -> Inverse, and hit the delete key.

- With the simmer layer still selected, change the layer mode to "Hard Light"

- Select the two separate text layers "Paradise" and "Vodka" by holding CTRL and clicking them both. Then on the upper right corner of the layers window, click the down icon and choose "New Group from Layers" and name it "Logo"
- Right click on the new group, and hit Duplicate Group
- Drag the new duplicated group to the top of the layers window.
- CTRL-T to enter transform mode, and scale it + rotate it and move it in a similar position as shown below.
- Select the move tool, and hit apply.
- Then select the "Vodka" layer within the new group, choose the type tool, and change the color to white.

- Create a new layer and call it "Shadow"

- Choose the brush tool, and make sure the brush size is around 480 pixels, and is feathered.
- Change the foreground color to a gray.
- Click once in the middle of our canvas. Then hit CTRL-T to scale the top down and move it underneath the bottle as shown below.
- You may have to mess with the adjustments in transform mode to match what is shown below.
- Select the move tool and hit Apply.

Your screen should look like the one shown below. You may have to adjust the opacity to less than 100% on your shadow layer.

- Use the rounded rectangular tool with a radius of 6px and a foreground color of white to create a rectangle similar to the one below.
- Use the type tool to type "First Name" in Arial, bold, 14pt.

- Select the rounded rectangular tool and change the corner radius to 2.
- Make sure the foreground color is white, and drag out a rectangle that matches the one below.
- Double click the right side of the new layer. Check off "stroke" and make sure it matches the values below.

- Right click on the layer and duplicate it.
- Double click on the right side of the first layer you duplicated and make sure the values match as shown below.

- Select all of the layers we just created (The name and the two textbox layers), and then right click on either of the 3, and duplicate those layers.
- Drag the duplicated layers down while holding shift, in a position similar to the one shown below. Then edit the text layer to "Email Address"
- Create another text layer at 11pt in a gray font color to match the one below.

- With the rounded rectangular tool selected at 2px radius, drag out a similar rectangular button.
- Double click on the right side of the layer and match the values below. (You will have to click once in the blue bar to get the second dialogue box to show up).
- Hit OK twice

- Use the rounded rectangular tool again to draw out a similar white rectangle at 6px corner radius.
- Use the type tools to create the 3 new text layers as shown below.

- Purchase this image (small) from iStockPhoto or find a similar one from google images.
- Open it in Photoshop, and use the magic wand tool to select the white portion of the image. Then choose Select -> Inverse, and hit CTRL-C. Close the document.

- Paste the dirt image and position / scale it (CTRL-T) as shown below. Select the move tool and hit Apply.

- Left click and hold / drag out the additional tools on the rounded rectangular tool and select the Custom Shape Tool.
- At the top you will see a set of pre-defined shapes, choose the circle with the line through it.
- With white as your foreground color, draw out the symbol over the dirt, as shown below.

- Select all of the layers we just created for the panel, click the down icon on the upper right portion of the layers window, and select New Group from Layers.
- Right click on the group and duplicate it.
- While holding shift, left click and drag on the canvas to move the duplicated set of layers to the right.
- Use the type tool to edit the layers. Delete the dirt / no sign layers. Then use google images to search for an image of a "Drink Mixer". Save the image, open it in photoshop, and use the magic wand tool and Select -> Inverse to copy the mixer.
- Paste the mixer in the orientation shown below. CTRL-T to transform it properly.

- Use the type tool and the rounded rectangular tool to create the social networking section.
- Use google images to search for the appropriate Facebook / Twitter and RSS icons. You will need to use the CTRL-T Transform tool to get them to fit correctly.

- Duplicate the layers that make up the Facebook rectangle. Do this twice and move them underneath each other.
- Edit the layers to match the ones shown below.

- If you are running out of height on your canvas, go to Image -> Canvas size, and increase the height. Make sure the "Anchor" section matches.
- Hit OK and use the eyedropper to select the background color, then select the first layer we started with and use the paint bucket to fill in the newly added height.

- Select and duplicate the top 2 layers that make the top navigation.
- Drag the layers down to the footer area.
- Use the direct selection tool to drag out the 4 points on the white navigation bar, and extend them to the right edge of the design.
