Setting Guides in Fireworks

Although our canvas is 800px wide, our web page is going to 760px wide so we have 20px on each side for some air and things like browser frames. Let's have 10 pixel top margin also (just for some air).

We need precision, so drag out a vertical guide to about 20px according to the ruler. If you don't see the ruler, do View -> Rulers.

No need to drag it precisely, because with the pointer tool selected, we double-click on the green guide.

And set its position to 20.

In a similar manner. Set the other vertical guide to 780. And set two horizontal guides -- one at 10 and one at 590.

I have set the scaling to 66% so you can see the whole canvas.

Picking Out Colors

Select the rectangle tool

Pick a black pen and a light blue fill.

By clicking on the color, you can have your choice of colors:

As I was putting this screen shot together, I came across a great example of the difference between GIF and JPG. The above picture was saved in JPG format (Looks good right?). The below picture was saved in GIF format (not so good).

Most of the time, I get my screen shot in GIF format because it is sufficient and gives me small file sizes. But the reason why this image does not look good in GIF is because GIF can have at most 256 colors, whereas JPG can have about a million.

Color Codes

Colors are encoded in 6-digit hexidecimal code such as DFEDEE where each digit can be 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. With 6 digits of such values, there are more than a million combinations (enough to encode a million different shades of colors). Hexidecimal code are usually denoted with an # symbol in front. For example,

Colors are a mixture of three primary colors of light: red light, green light, and blue light. The first two digits tells you how much red light is in the color. 00 means no red light at all. 99 means a significant amount of red light. AA means even more red light. CC means even more. And FF means the maximum amount of red light. The next two digits tells you how much green light. And the rightmost two digits tells you how much blue light. You can think of the digits A, B, C, D, E, F as the numbers following 7, 8, and 9. After 9, comes A, then comes B, etc.

Hence #000000 is no red, no green, and no blue light. In other words, black. And #FFFFFF is the color white. This implies that white light is a mixture of all lights. This makes intuitive sense as we recall that if you pass white light through a prism, it spits apart to all the colors of the rainbow.

The above hexidecimal value of #24D4A8 represents the following color.

Another way to represent color is the RGB value. The color #24D4A8 can be equivalently represented in RGB form (or red-green-blue form) as rgb(36,212,168) where those number come directly from the Fireworks color dialog seen just above.

The way to equate the hex value of #24D4A8 to the rgb value of rgb(36,21,168) is to look at it this way. At what division is the hex value #24 at in the range from #00 to #FF? Just count from #00 to #FF. There are 255 counts (or divisions) as you count from 00 to FF. And about 14% of the way (or at count 36) through your counting, you will hit value #24.

Don't worry too much about the color representation. We just pick whatever color looks good.

Properties of the Rectangle Tool

So we have seen how to pick colors from our Toolbox. Another way to pick the pen and fill color for the rectangle tool is to select the rectangle tool and then click the colors in the Properties panel.

With the rectangle tool selected, there are additional properties in the Properties window that you can set. Set them as shown in the above. For the Fill, set the color to #DFEDEE. Set the Edge to Hard and Texture to 0. For the Pen, set the thickness to 1 and Hard Line. Set Edge, Texture, and roundness set to zero. The opacity is set to 100 Normal.

In the next lesson, we will draw our layout.