Introduction to Web Page Design with Adobe Photoshop – Level I
Before you can layout a web page in Dreamweaver, my Dreamweaver class first instructs you to create your layout with Photoshop. My introductory learn Dreamweaver class blog covers concepts like:
- How to create a new Photoshop document,
- How to work with Photoshop layers,
- Drawing vector shapes with Photoshop
- How to use Photoshop to pick colors,
- Add text
Here is a visual of the web page we’ll create with Adobe Photoshop.
A separate level II tutorial will address advanced Photoshop web page design concepts like:
- Photoshop Layer Masks
- Photoshop Clipping Masks
- Photoshop Layer Effects
The reason it is important to begin your design in Photoshop is because we will use Photoshop to help us choose colors, set sizes and measure positions prior to creating CSS rules with Dreamweaver. We’ll start with a new Photoshop document.
In the Adobe Photoshop program, select the file menu > new command.
In the new file dialog you will choose a document size (width and height), a color mode, and a resolution. For the width and height I prefer to measure web pages with the pixel measurement system. Most web pages are fewer than 1,000 pixels wide, I will create a document that is 1,200 pixels wide to show the graphics that appear on the left and right of the web page on wide screen laptops. Note that laptop screens are wider than desktop monitors. If you design on a laptop you should resist the temptation to make your webpage wider unless you want visitors to have to scroll horizontally left or right.
Another decision is the document resolution. Although Windows computers display up to 96 dots per inch (dpi), Apple Mac computers correctly display 72 dpi (WYSIWYG: what you see is what you get). One tenet of web design is always target your web page design for the lowest common denominator. You should set the new document resolution to 72 dpi. If you design at 96 dpi your web pages will appear 25% larger when viewed on an Apple Macintosh.
Another decision to make in the new document dialog is the color mode. Web pages display on monitors or projectors, which use the RGB (red, green, blue) color model. CMYK (cyan, magenta, yellow, black) is used for print work.
You also have the option to change the background color. For now choose white.
Click the OK button to create a new document.
The next step is to show the rulers. Select the View menu > Ruler command. The rulers appear along the top and left edges of the document window. If for some reason the rulers don’t display the pixel measurement system, point the tip of the mouse in the ruler and click the right mouse button to select or change the measurement system.
We’ll use the rulers to add guides to the page to indicate the left and right boundaries of the webpage. The Photoshop document is 1,200 pixels wide but the website will be 880 pixels wide. How did I decide to use 880 pixels for the width? Using Photoshop to lay out the web page, after I added my text and images to the page I determined that I’d need at least 880 pixels to fit my information.
When placing ruler guides in the document, you’ll want to display the Info panel, which shows the pixel measure as you drag a guide onto the document. To show the Info panel select the Window menu > Info command. The X measures the horizontal position and the Y measures the vertical position.
Point your mouse cursor over the vertical ruler along the left side of the document window. Press and hold the left mouse button and drag a guide onto the screen until the Info Panel shows an X measurement of 155. If Photoshop is uncooperative and reaching 155 is difficult, don’t worry, 154 or 156 is close enough. If you’re all about precision, you can more easily get to 155X by increasing the zoom. To increase the zoom you should press and release the Ctrl and the + keys together. Then, change to the move tool,
point the tip of the mouse over the guide, click and hold the left mouse button, and drag the guide to a new position.
Drag a second vertical guide until the X measurement shows 1045.
Where did the X measures of 155 and 1045 come from? The document is 1,200 pixels wide. The web page will eventually be 880 pixels wide. Subtract 1,200-880 and you are left with 320. Divide the 320 by 2 because we want an equal amount of space on the left and right of the 880 pixels.
Now we’ll add colored regions, a black outer background, and an inner regions with orange, several shades of grey and white. To help separate and organize these colored regions, we’ll work with the Layer Panel. To show the Layer Panel, select the Window menu > Layers command.
On the Layer Panel, note the presence of a background layer, and to the right, a lock symbol. The lock symbol indicates that you cannot move the layer or change its effects. Although you could paint on the background layer we’ll leave it alone.
To add a new layer you can click the new layer button illustrated above. Even better, when using the New Layer command, to show layer options that allow you to name the layer while creating it, hold the alt key when left clicking the new layer command.
If you need to rename an existing layer, either double click the layer name and type a new name or right click the layer name and choose the layer properties command.
Name the new layer Black Background.
Now we’ll paint the entire layer black. There are multiple ways to accomplish a black fill. The Edit menu > Fill command shows the Fill dialog.
Notice the Fill Contents drop-down menu shows Foreground Color. The foreground color is the top square near the bottom of the tools panel.
If your foreground color isn’t black you can change the Contents Use: Foreground Color option to Contents Use: Black
Another way to paint a layer (or a selection) is to use the paint bucket tool. The paint bucket tool paints fills using the foreground color. You can find the paint bucket tool hidden behind the gradient tool on the tools panel. To access the paint bucket tool click and hold your mouse on the gradient tool, or alt-click the gradient tool.
The next step is to add a rectangular grey fill region inside the cyan guides.
There are many techniques to create a grey filled rectangle. I find the easiest technique will be to use the rectangle tool.
Select the rectangle tool on the tools panel.
After you select the rectangle tool, Photoshop shows rectangle tool options on the horizontal options bar located across the top of the screen.
Make the following changes as needed:
Make sure the shape layer option is selected.
Make sure the new shape layer option is selected.
Click in the center of the color picker square to change the fill color of the rectangle.
In the color picker dialog change the hex value outlined in the diagram above to 1B2429 and click the OK button to close the color picker dialog.
A note about hexadecimal colors: On the web, HTML reads red, green, blue (RGB) color values as hexadecimal. In the hexadecimal measuring system, color values range from 0 – 9, and then A – F. Zero (0) represents the absence of color whereas F represents the maximum amount of a color. The hex code for black is #000000 and the hex code for white is #FFFFFF. The first two characters represent the amount of red, the second two characters represent the amount of green, and the third two characters represent the amount of blue.
To draw the rectangular shape, point the mouse cursor at the upper left corner, at the intersection of the top of the document window and the vertical guide, press and hold the left mouse button, and drag diagonally down to the right until you reach the bottom of the document window and the right vertical guide. Your screen should now appear like this:
If you drew the shape to narrow/wide or short/tall it is easy to resize it. Press the Ctrl + t key to enter transform mode (or select the edit menu > free transform command). Drag the square handles along the edges of your rectangle to change its dimensions. Key to the transform tool: to commit an edit press the enter key, to cancel your transformation press the escape key (upper left corner of your keyboard, labeled esc).
Note on the layer panel the shape creates a new layer named Shape 1. To keep your project organized, each time you add a layer that you’ll keep you should give it a meaningful name.
To rename the Shape 1 layer, double click the text Shape 1 and type Outer Gray Box. If you inadvertently open the layer styles dialog click cancel and double click again on the Shape 1 layer name.
Next we’ll use the rectangle tool again to create two inner gray rectangles, one for the flash banner and another for the left menu (shown inside the white outlines below)
Draw the flash banner rectangle:
Select the rectangle tool. On the options bar, change the color to 282F39.
Use the ruler to help guide the positioning. The top rectangle begins at the 450 pixel mark on the ruler. The height is 100 pixels. If you draw it to small/large don’t panic, press Ctrl+t to transform it (remember to press the enter key to commit the transform).
Remember to name your layers, on the layer panel (Window menu > Layers) double click the Shape 1 text and rename it Flash Banner
Draw the left menu rectangle:
Select the rectangle tool.
Use the ruler to help guide the positioning of the second rectangle. The left rectangle begins at 230 pixels on the vertical ruler and at the 155 pixel mark at the guide; The height fills the document and the width is 280 pixels, which leaves a 10 pixel vertical gap between the two rectangle shapes. Again, don’t worry too much at this stage about exact positioning, Dreamweaver CSS rules will take care of precise positioning, widths, and heights.
Rename the new Shape 2 layer Left Menu. Your layer panel should now appear as shown below. If you accidentally drew any extra shapes alt-click the trash can icon at the bottom of the layer panel to remove them now. Alt clicking the trash can removes the layer without displaying a confirmation dialog.
Next we’ll create the orange horizontal bar for the horizontal menu as outlined below. The bar stretches from guideline to guideline, is 10 pixels below the flash banner rectangle, and is 50 pixels tall. The easiest way to do this precisely is to add guides to the screen. Before adding guides, show the info panel (Window menu > Info). To add horizontal guides at the 110 pixel and 160 pixel mark, point the tip of the mouse over the horizontal ruler at the top of the document window. Click and hold the mouse and drag the guide down, note the position on the info panel.
Select the rectangle tool to show the rectangle tool options bar. Change the fill color to CC6600, then drag the rectangle shape.
Rename the new shape layer Top Menu.
The last rectangle is the white content region to the right of the left menu. It will be the same width as the flash banner layer and the same height as the left menu. First we’ll eyeball the measurements, then use the transform tool to resize as needed.
Select the rectangle tool (if it’s not selected), and on the tool options bar change the fill color from orange to white (FFFFFF).
Click and drag a box as shown below.
Before we use free transform, make sure there is a checkmark next to the View menu > Show > Smartguides command. Smartguides will help you keep your transformation aligned to other shapes edges.
Press the Ctrl+t key to enter free transform mode. Note that when you point the mouse over the edge of a square sizing handle, the mouse cursor changes shape to a two-headed arrow. Drag the square handles along the top edge up/down and note how smartguides show you alignment relative to the top edge of the left menu shape. Drag the square handle along the left edge to the left and right and note how the smartguides show you the alignment relative to the left edge of the flash banner. Remember to press the enter key to commit the transform.
Before we can add text, the final color item to add is two horizontal white lines below the orange menu, above the white content.
To select the line tool, click once on the rectangle tool. On the tool options bar, change from the rectangle shape to the line shape.
Change the weight to 2 pixels and make sure your color is still set to white.
Position the mouse about 10 pixels below the orange menu bar, at about 170Y on the info panel and aligned with the cyan guide at 155X.
To draw a straight line, press and hold the shift key on your keyboard as you drag the line across to the vertical guide at 1045X; Release the mouse button before you release the shift key.
Rename the new layer Tagline Top.
Instead of creating a second line with the line tool, let’s use a different technique. When you use the move tool to drag an object, holding the Alt key will create a copy, and holding the shift key will keep the copy aligned with the original.
On the tools panel, select the move tool.
To help you see the screen better we’ll suppress the display of those pesky cyan guides; Either select the View menu > Show > Guides command or press Ctrl+; on the keyboard.
Point the tip of the mouse cursor over the edge of the line, press and hold both the Alt and Shift keys. You should note that your cursor changes from a single black triangle to two overlapping triangles, one black one white. Click and drag down to about the 215Y pixel mark (don’t worry about exact positioning yet). Remember that to make the copy you must first release the mouse button, before you release the Alt+Shift keys, otherwise you’ll just move the original line.
Copying the line created a new shape layer. On the layers panel, rename the Tagline Top Copy layer to Tagline Bottom.
Layer Groups. Photoshop CS4 allows you to group your layers into folders to keep the layers panel organized. At the bottom of the layer panel, click once on the new layer group button.
On the layers panel, double click the new Group 1 folder to rename it Colored Shapes
To move all the layers except the locked background layer into the new Colored Shapes folder, click once on the topmost layer (Tagline Bottom) to select it.
Scroll down the layers panel to the bottom and while holding the Shift key, click on the bottom layer (Black). Shift clicking a range of layers selects multiple layers.
Scroll back to the top of the layers panel show the Colored Shapes folder is visible. Point the mouse over any of the selected layers. Click and drag the selection into the Colored Shapes folder. You’ll know the selection is inside the folder when you see a black rectangle around the Colored Shapes Layer, then release the mouse button. To verify the layers were moved into the Colored Shapes folder click the collapse button to hide the layers.
The last portion of the tutorial covers adding text (Most, if not all, text should be done with Dreamweaver, we put text in Photoshop to determine if our shapes are the right size to properly fit the message).
When working with the Text (Type) tool in Photoshop the first concept to understand is point versus paragraph text.
The Type Tool: 
To create point text, point to the document and click once. Point text does not text wrap when you reach the right edge of the document window so you have to manually press the Enter key or Shift+Enter (for a line break without a new paragraph). Point text is best suited to small amounts of text, like the logo text, menu text, or tagline text.
To create paragraph text, point to the document and click, hold the mouse, and drag a rectangle shape. Paragraph text will automatically word wrap when you reach the right edge of the document window. Paragraph text is best suited to larger blocks of text, like the copy in the white rectangular region.
We’ll start by adding the logo text NY SEO Expert
Select the Type tool. Point and click once in the upper left corner of the page to create point text.
Before typing any text, on the options bar, set the text options as:
Font: Tahoma or Helvetica
Style: Bold
Size: 32 point
Alignment: Left
Color: CC6600
On the keyboard type NY SEO EXPERT
To reposition your text to appear as indicated in the diagram below, select the move tool and tap the arrow keys to move the text (the arrow key is often easier to use than the mouse). To move the text faster, hold the shift key while you tap the arrow key to multiple the 1 pixel move by 10. If the move tool doesn’t move the text make sure to click the NY SEO EXPERT text layer to activate it.
Note that if your logo text were more characters (wider) you could shrink the font size to squeeze it, or perhaps you’d redesign the page at this stage to allow more room in the left column and less room for the banner and content, or you might increase the width of the page. You could increase the width of all the shapes at once by selecting the entire Colored Shapes layer folder, pressing Ctrl+t to free-transform, and alt-dragging either of the side handles to size equally from the center point out.
To add the text Be Seen – Be Found click the type tool. On the options bar, change the font to Courier New, the style to Bold, the size to 16 pixels and the color to white (FFFFFF). Point below the NY SEO EXPERT text, click once, and type Be Seen – Be Found. Each time you add point text Photoshop creates a new text layer (which I don’t bother to rename).
Next we’ll add the paragraph text that appears in the big white background layer region.
Download a text file here, or copy the text from http://www.nyseoexpert.com
Select the type tool. Point to the upper left of the white rectangle, click and hold the mouse button, and drag a rectangle shape to create paragraph text. Then paste the copied text into the text box and note how the text will automatically wrap when it reaches the end of a line. To force a line break you might click in front of a word and press Ctrl+Enter. To format the character and paragraph formatting you could show the character or paragraph panels (window menu).
Create another layer group for the text layers and move the text layers into the layer group.
After adding all the text to complete the page many designers would incorrectly opt to use Photoshop’s slice tool to create a web page with hyperlinks. I personally find that an offensive way to design a webpage and thoroughly discourage its use. Slicing a webpage creates dozens of jpg images that search engines cannot read, and are difficult to update should you need to make revisions.
If you have any questions, comments, or tips that would enhance this tutorial we encourage you to submit your commentary. We’ve posted a summary of the tutorial here
In our upcoming level ii tutorial we’ll look at painting, clipping masks, and layer effects to enhance your basic design.