DM20  Assignment 3       Home Page Design

Due  Thursday, February 22

In Part One of this assignment you'll begin the design of your website's home page in Photoshop. You'll design the layout in Photoshop and then in Parts Two and Three you will be slicing it into Web-friendly images, generating some html and CSS code from Photoshop, and using Dreamweaver for the finishing touches.

See some examples here.

First, you'll need a new folder to save into, a separate folder from your DM20web root folder. Your root folder is only for files you're publishing on the Web.

You can make this new folder on the computer where you're sitting, in the same C:/Documents where you have your DM20web root folder - and always keep a copy of both folders on your flash drive or other external storage. 

Create the new folder in Documents on the computer where you currently are - and name it Lastname-DM20-Projects

Launch Photoshop, go to File>New  (this tutorial uses mostly Photoshop CS6 screenshots; there may be occasional differences if you're using PhShp CC)

Give your new Photoshop document the following properties, as pictured below:
960 wide by 700 pixels in height (not inches!)
960x700 is the focal point for many screens - a design this size will be front-and-center for most viewers without scrolling.
Resolution: 72 ppi
RGB color, 8 bit
Transparent background
Click OK.

new psd 960x700

(Photoshop also has a "New Document" window that looks like this:)

Then go to File>Save and save it as homepageM.psd (M for Master design).
Save it into your new Projects folder (not your DM20web root folder).

A good starting point is to fill the existing Layer with a solid color of your choice:

Click the foreground color box and use the Color Picker window that opens to create your color.
Click in the rainbow strip to select a hue. Click in the big square to choose lightness/darkness of the color.
Click OK to close the Color Picker and the foreground color in the toolbar now displays the color you chose.

click foreground color to open color picker

Or, you can choose a color from the Swatches panel (Window>Swatches).
Click on any swatch and it will become your Foreground color.

swatches panel

Then, choose the Paintbucket tool from the toolbar and click once in your canvas to fill the Layer with that color.

paint bucket tool

Or, press the Alt and Backspace keys on your keyboard - this shortcut fills a layer or a selection with the current foreground color.

Next you'll add some texture images to give your design some depth.

Choose two or three texture images from

Download and save them into your new Projects folder (not your DM20web root folder).

In Photoshop's top menu, go to Window>Arrange>Float All in Windows, so multiple files will open in separate windows, not tabs.

window arrange float all in windows


Then from Photoshop's top menu go to File>Open to open the texture images you downloaded. 

You should still have your homepageM file open. With the Move tool (the arrow at the top of the toolbar), drag one of the texture files into your homepageM's canvas.  Dragging an image like this will automatically create a new layer for it in the Layers panel.

Note that these texture images are likely to be much larger than you need for this design, so you need to resize them after you've dragged them into your homepageM canvas. To do so:

With the image's layer highlighted in the Layers panel and the Move tool selected, press Ctrl and T on your keyboard and then drag the corner boxes to adjust the size of the image.
Holding down the Shift key will constrain proportions.
You may need to zoom out in order to see the edges of a large image - hold down Ctrl and press the - key to zoom out.  Ctrl and the + key will zoom back in, or double-clicking on the Zoom tool in the toolbar (the magnifying glass icon) returns the view to 100%.  You should be working at 100% most of the time.

Drag in and resize another one of your texture images so it is a vertical column along the left edge - this can be where your buttons/menu will go.

Try out some Layer blending.
In the Layers panel, select one of the layers with a texture image in it, then click the dropdown arrow near the top of the Layers panel, circled in the pic below.
Experiment with different blendings from the dropdown list.

layer blend modes dropdown list location

A layer with a blending mode applied will blend in different ways with the layer just beneath it. You can turn layers off and on (the eyeball icon), drag layers above or beneath each other within the Layers panel to see what different effects you can achieve.

Remember that eventually, in Dreamweaver, there may be typed-in body text for your webpage that will be going on top of some of these textured areas. Don't make the textures too vivid or detailed or your webpage text will be too hard to read.

If you wish to change your solid background color, first select the layer that has the solid color in the Layers panel (this layer should remain at the bottom of the Layers panel), then use the eyedropper tool in the Toolbar eyedropper tool and click on one of the images. The eyedropper tool picks up any solid color from an image and makes it your foreground color in the toolbar. Use the shortcut Alt-Backspace, or the Paintbucket tool to fill your background layer with the new color.

---To make a new blank layer, click the 'Create a new layer' icon at the bottom of the Layers panel, circled here:

New Layer icon at bottom of layers panel

---To duplicate a layer:
Drag a layer in the Layers panel down to this same 'new layer' icon.
Or, click a layer in the Layers panel and press the Ctrl and J keys on your keyboard.

Create a title graphic for your homepage
Choose the Type tool from Photoshop's toolbar text tool icon , click once anywhere in your document and type some text.
A new Text layer will automatically be created in the Layers panel.
Put the Text layer at the top of the Layers panel to ensure your text isn't covered up by any other layer.
Choose the Move tool and drag your text near the top center of your document, then select the Type tool again.

When the Type tool is selected, you can try out different fonts, sizes and colors from the top horizontal toolbar.
These text options are only visible when the Type tool has been selected:

top menu bar text options

Or, stay in the Move Tool, and open the Character Panel (top menu>Window>Character) - you can access all the text attributes from there and you don't have to keep the Type tool your active tool.

Next, try out some effects for your title. You can create your own, and you can also apply pre-made ones from the Styles panel.

To create your own effects:
Make sure your text's layer is selected in the Layers panel, and switch back to the Move tool (do not have the Type tool as your selected tool when applying effects to text).
Then, click on the "fx" icon at the bottom of the Layers panel and click "Blending options" from the icon's dropdown list, as pictured on the left, below. Experiment with different effects in the window that opens: drop shadow, bevel and emboss, glow, inner shadow, etc.

Note: in the left column of the Layer Style box that opens, click on the effect's name, not its checkbox, in order to get the options for it.
In the pic on the right, below, the Drop Shadow name is selected (it's blue) and its options are displayed in the column on the right side:

fx icon bottom of layers panel layer styles window drop shadow settings

Or use the Styles panel to apply pre-made fx:

Open the Styles panel - look for it on the right side of the interface, or from the top menu, Window>Styles.
Make sure your text layer is the active layer.
Click on the icons in the Styles panel and the styles will automatically apply to your text so you can see what they look like - if you don't like one, click another Styles icon and see what it looks like... you can keep applying these styles until you find something you like.

styles panel

Experiment with the "fx" and the Styles panel on your texture layers as well - click a layer in the Layers panel to make it the active layer, then click the Style panel's icons to see the styles applied, and/or click the small fx icon at the bottom of the Layers panel to apply different fx to any currently active layer.

Save your .psd often. Do not flatten the layers and do not rasterize text layers. This "master" design file must always retain its layers and editable text so you can make additions and revisions to your web page design.

go to A3, Part Two