Greyscale versions of the logos

One of the problems with designing graphics for the Web is the fact that the resolution of computer monitors is quite low. Monitors generally display around 60 to 90 dots per inch. Compare that with laser printers which print usually either 300 or 600 dots per inch.

I've been designing graphics for the Web for the last year or two and have built up a toolbox of techniques for making sure graphics look decent on Web pages, and I've applied the same techniques to both logo designs. (anti-aliasing, scaling with transparencies, use of adaptive palettes and so on.)

So the following graphics are grey-scale versions of the logo using anti-aliasing. (a type of image smoothing that improves the apparent quality of the graphic.)


Tiny logo, for use as small icons.

Here's an example of how a graphic this size is currently used on our system:

  • Human Resources Job Bank Information, Vancouver (hosted by FreeNet)

    And here's an actual page on our system containing a graphic of this size.


    Small logo, for use on page headers. (such as the "Hosted by FreeNet" page header)

    Here's an example of how a graphic this size is currently used on our system:

    Hosted by the Vancouver Regional Freenet

    And here's an actual page on our system containing a graphic of this size.


    Medium logo, for use on page headers. (such as the "Community Pages" page header)

    Here's an example of how a graphic this size is currently used on our system:

    And here's an actual page on our system containing a graphic of this size.


    Large logo, for use as a general graphic. (such as the "webPAGES" graphic)

    Here's an example of how a graphic this size is currently used on our system:

    And here's an actual page on our system containing a graphic of this size.


    Black and white versions of the logos

    The previous graphics relied on grey-scale monitors, something not everyone has. Graphics should, therefore, survive being turned into two-colour (eg: black and white graphics) The following are two-colour bitmaps.


    Tiny logo.


    Small logo.


    Medium logo.


    Large logo.


    Our logo must be suitable for both print reproduction and also reproduction on Web pages. Unfortunately Web pages pose severe restrictions as to the kind of graphics you have. Textual logos with complex shapes (such as the angled cursive text) just don't survive well when the image is small. Simple bold images with more geometric shapes do.

    For those reasons I deliberately made text an optional aspect of my logo. Three other reasons are that the word "community" is long and thus has to be in big type to be at all legible, graphics with a pictorial symbolism tend to be fairly memorable, and a non-text logo is not in any written language, which I think is somewhat relevant given our multicultural project.

    When the image is large, of course, it's not really an issue: