C:/tc-alumni/teddystory.htm


    "Teddy Tornado's Story" - The Birth of a Logo!
Authored by Ron Reed
    While the TCAA webpage was in its early design phase, I was trying to determine if there was a "logo" being used for Columbian High School.

    Then, I saw the image of the "tornado" on the Tiffin Columbian Alumni Association Newsletters.   Wow!   This is just the perfect size image for the web site.

    So, what do I have to do get "it" on the Internet.   It is likely that the image used by the printer would not exist in a graphic format used on the Web. The web pages use basically two file formats for their images.
Top-of-Page Align Here
    The larger Internet compatible format is commonly obtained from digital cameras and scanners.   The JPG or JPEG formats have great resolution and are used to present colored photographs.   But, the JPG file sizes, in "bytes", are very large, requiring more computer storage memory, and longer download times from the Internet.

    As an example, here is a photo of your webmaster, taken with a camera by a colleague in 2001. Dancin' Gator   The size of this file requires 187,054 bytes. It is an example of a image requiring a lengthy download time, but does have decent image resolution.   As you can see, some JPG files are big, and sometimes "too ugly" and "too big" to use on web pages.
Top-of-Page Align Here
    The second Internet graphic file format lends itself to non-photographic images, like our "tornado" image. The GIF, Graphic Interface Format, files have sufficient resolution, smaller memory storage size, and thus, less download time.   They are commonly used for logos, like "Albert", or PASSCo's Logo". GIF files are used for many graphics, like banners, links, items, and graphic icons.

    So, how do I get this "printed tornado image" into a graphic file format for a TCAA logo? I examined the Newsletter and discovered that a scan of the "tornado" would include some unwanted printed material within the image. Then, I went and got my scissors.   Yep, just like a kindergarten child, I carefully cut the image from the glossy page.
Top-of-Page Align Here
    Then, going to the office in the basement, I got a sheet of white printer paper.   I opened the scanner, and placed the "tornado" image on the glass plate and covered it with the white paper.   After trying a number of orientations and scans, I felt I had a good image.

    Next came the first decision!   What filename should I assign to the scanner "bitmap" image. "tornado.bmp"?   That did not seem to be an appropriate name.   It had to be short and easy to recall, as I planned to use the image quite often.

    What about "teddy.bmp"?   Perfect!   "Teddy, our TCAA Logo".


Thus, "Teddy" was conceived, and had a name!
Now, here is the rest of the story.
What do we do to go from the image to the finished  logo?
Top-of-Page Align Here

Jim's Cleaning Up the Outer Background!

The image on the left is the image resulting from Ron's converting the printed image into a file format that was yet not suitable for the internet web pages, "teddy.bmp".

The result of the conversion was a file where the background is a "peppery grey".

This is when Ron asked another Class of 53 classmate, Jim Swearingen, to see what he could do with this file and its content.

The image to the left is "teddy.bmp", and is the file given to Jim. This file can be processed by the PAINT.EXE utility, but as it is, '' *.bmp '' files cannot be used on a webpage.

Jim lives out on Long Island, NY. This minor fact will have an interest later.
Top-of-Page Align Here

Jim's Giving "Teddy" a Little Color!

The file to the left is the result of Jim's removing the "grey" background from the originally scanned file. This file has a new file format and name, "teddy.gif". The file now has a compatible file format for a web page.

The result is a image file with a white background as reflected by the image being displayed here on a "gainsboro" colored background.

The colors seen on a computer monitor can be easily explained. Television and computer monitors are RGB (red/green/blue) cathode ray tubes. They have three electron "guns" that emit electrons that activate three materials on the inside of the tub. These materials produce three separate colors, Red, Green and Blue.

Each color can take on a value of 00 (zero) to 255 (FF in Hex) shades dependent on the strength of the electron beams. This provides 256 shades for each of the three colors, or over two million combined colors per pixel. A pixel being a small focused spot of the three electron beams.

Thus, 00 for no red color, 00 for no green and 00 for no blue, combining to give the "no" color, "black" (000000 in hex). Thus, "#000000" is no color.
Top-of-Page Align Here

A Simple Illustration of Web Colors!

       
Black Background,  #000000 or "No Color"
Red, #FF0000 Green, #00FF00 Blue, #0000FF
Yellow, #FFFF00 Cyan, #00FFFF
Magenta Background,  #FF00FF; The text has a literal color, "Gold"
White Background,  #FFFFFF or "All Colors"

What do you think is "#FFFFFF" color would be. Yep, max red, max green and max blue giving the "all color" or "white".

Top-of-Page Align Here

So, the background color of the converted image may have been something like "#C6CDCA" at various times in the scan, resulting in the "grey" background.

  #c6cdca

You will notice the Teddy's inner shade is still "grey". We still need to color the image and make the background "transparent" (no color) so that the "Teddy" graphic could be placed on any colored background. How we reduce size is discussed later.

Top-of-Page Align Here

Yellow!  Yuck!  Not the Best Background Color!

Jim soon returned an image of "teddy" with a non-shaded yellow inner image on a white outer background.

What Jim's exact procedures were I have to speculate. But, I can guess he was able to create an image of two colors (image on the left). This had to be so as the image's inner color is no longer shaded.

Having a two color image, he altered the outer background making it white.
Top-of-Page Align Here

Jim's White Background is Much Better!

So, on the left is an image that is compatible with those useful on the web pages. But, there is still a constraint on it's use on a web page. To display the image on the screen, the "teddy" image would always be seen on a white background.

Thus, if the image background were not white, "teddy" could be displayed on any background other that white, like the "gainsboro" color we see here.

The question is, "Can the background be made invisible"?
Top-of-Page Align Here
Our Prenatal Exam: "Doctor, Is Our "Teddy" Ok?"





Well, Jim gave me a great "teddy.gif" file that I could take to TC-Online. But, I felt limited in the usage of this image.

If I were to give "Teddy", as I now called him, an appropriate presence on a web page, it would be best to always use a white background for the entire page. Here the images is bordered.

That's when I turned to my very first and best internet friend, Carrie.
Top-of-Page Align Here

Now We Needed Carrie's Help, Our Mid-Wife!

I told you Jim lived on our east coast Long Island. Well, Carrie lives on a "longer" island.

She and her family live on Canada's west coast Vancouver Island, at the northern tip to be exact.

I sent her a quick e-mail along with Jim's "teddy.gif" with his white background attached.

"Carrie Darlin', can you please make me a "transparent" background image for the attached file? Please!"

I've learn over the last fifty years that if you want something from a good looking woman, you have to talk sweet to her.

Shortly, I received the image on the left in my mail!
Top-of-Page Align Here

So, "Teddy" was really Canadian Born!

I would like to introduce you to TCAA's logo,  "Teddy".

Initially, I gave him another name. Keeping Tornado as a last name, It was not until March 2004 that I learned the image's name given him in the late 1950's.

Meet "Teddy Tornado"



Well, thanks to Jim and Carrie, I have a graphic with a transparent background. It is only 10,150 bytes in size.

Since each time you see the image on a web page, your browser must swept through the internet to find which server contains the image.   "Teddy" resides on Freiendlynet.com's server in Bascon, Ohio.

That is the function of your web browser, to go get the web pages from a remote ISP server, bring them into your browser's cache memory, and to display it for you on the web pages.

Got all that?

If not, Jim says it doesn't matter to most of you anyway. Maybe he's right!

Top-of-Page Align Here

Oh!  Isn't he a cute little fellow?

"So, here I am with all my potential.

Now, Ron can take me anywhere!

I'd like to thank Ron, Jim and Carrie.

I know I'm not alive, but if you won't tell,
I won't tell !" -- Teddy
Top-of-Page Align Here

How you might meet "Teddy" may very!

The "Teddy" graphic has a width of 164 pixels and a height of 207 pixels.







This is a 164x207 pixel image. To change the image size, the width and length values need only be re-define proportionally.
Half-Size "Teddy" is a 82x104 pixel sized image.



The Quarter-Sized "Teddy" is a 41x52 pixel image.

The Two-Thirds size "Teddy"
is a 110x138 pixel image.

"Teddy Tornado" is not an animated graphic.

"Dancin' Gator" is a half-size animated graphic.

Since "Teddy Tornado" is transparent, he's been invited to all the games! Look for him at the games, and he'll extend to you an invitation to join TCAA.

You might even bump into "Teddy." at the next game!

Top-of-Page Align Here
Go! Tornados!





Top-of-Page
Welcome Home "Teddy" !









Top-of-Page