Making the Header

Here is what we have from the last lesson...

Download my creativeworks.png from link.

We are now going to put in a header or masthead with the title of our website. Let's make it the same color blue as the sky. We need to draw a rectangle that is precisely lined up with the black borders. Since we had already created some guides previously, turn them on with Ctrl-; or menu View -> Guides -> Show Guides. If you zoom in on the upper right corner, you might see that our guides are outside the border.

If that is the case, move the guides to be inside the borders by dragging them...

Put another horizontal guide at position 100...

Select the rectangle tool with no stroke...

And pick a fill color that matches the sky ...

Next make sure that Snap to Guide is checkmarked...

Now draw out our rectangle as shown. Note that we are drawing the header much further into our side image.

This is of no consequence, because we can drag the rectangle object to be below our image.

Now our rectangle is below our image

Another reason why I started my rectangle mid-way from the side image is that we have the flexibility to blend the two if needed (as you will see later).

Naming our Layers

Technically speaking, layers are those folders icons that you see in the Layers panel. See picture above. So Layer 1 is a layer. And you can have many such layers. Those items inside our folders are objects in our layer. See that we have a Bitmap object on top of two rectangle objects.

Give these objects better names to keep organized. For example...

I have given them the following names...

This is the file that I have so far: creativeworks.png

Backing Up Files

Save your file now. In addition to saving the file, you should occasionally make backup copies of past versions so that if we mess up in the future steps, we can always come back to this good version.

We make backup copies by doing File -> Save A Copy and give it a name of creativeworks_1.png and put in same folder as your current folder of creativeworkcomp. The extra _1 in the filename is to indicate to me that this is my version 1. Notice that you still have your working copy of creativeworks.png opened in Fireworks and this is still the document that we are continuing to edit.

When ready, continue to the next lesson to perform some touchup with the smudge tool.