Creating the Footer

Here is what we have from the last lesson: creativeworks.png

Typically, a website will have a footer element. Using guides, draw a rectangle of color #333333 and put on top of it white text in Verdana font that says "copyright CompanyName" as shown...

Then create the New Layer button to create a new layer folder and name it footer. We are trying to be more organized now.

Special Symbols

What if we want our footer to have the special copyright symbol such as ...

Windows has a program called Character Map that can give us these symbols. Go to Windows Start Menu -> All Programs -> Accessories -> System Tools -> Character Map. Since our text was in Verdana font, we select that font in Character Map, click on the copyright symbol that we desire, click Select, and then click Copy.

Now this special character is in Window's clipboard. So now we can edit and paste this symbol in our copyright text as shown.

Adding Lorem Ipsum Text

Now we just need to fill our empty page with some fake content to make it look like a real page. Often designers want to get a sense of what a page will look like with some content text in it. But when content text is not ready and they don't want to make some up, they will use Lorem Ipsum text. These are just dummy filler text, but the characters are statistically choosen to make it look like an actual language. Using the Lorem Ipsum generator, we generated four paragraphs and pasted it to our page. And this is what our page looks like ...

Since we had been working in our footer layer last when we added our text, that text object went into our footer layer. But since that is not really a part of our footer, we better put it in its own layer called content text as shown.

Similarly, organize the rest of our objects as shown below. You can see which objects goes with items in the design view by clicking on and off the eye icon.

Make sure that the side image layer is above the masthead layer.

We are now done with the design, and you can get the file here: creativework.png.

In the next lesson, we will learn to slice and prepare our design comp for website implementation.