Welcome to Orange Frog Productions Owner Section [Banner]

Page Title:

Graphics - Building a Card - All Examples

Page Links/Examples:

Image Only

  1. Example #1
  2. Example #2

Images & HTML

  1. Example #3
  2. Example #4

Example #1

My father had planted some flowers, and when we visited, I went out and tried the close-up and other modes of new my Kodak DC3400 Zoom Digital Camera. Not all of them came out right, but some did. When Mother's Day came around, I looked through these pictures, picked one, cropped it a little, and using the Text Tool of MSIC, added the words, "Happy Mother's Day".

Mother's Day Card

Mother's Day Card


Example #2

For this card, I used MSIC's Shape tool and created a rectangle. (Whew! That was hard!) Then, using the Text tool, added two (2) text boxes: "The pups say" and "Happy Birthday!" Then I inserted two pictures of a couple of our dogs. This was within their first year, so they were "Pups". I shrunk those pictures to the same size, and arranged them on the rectangle. Sounds hard, huh?

Birthday Card

The Pups say "Happy Birthday" - Card Example


Example #3 - Images & HTML

In this one, I took four (4) images of our dogs, and using exact copies, added wording using MCIC's Word Art function. Then, using FrontPage and creating a "mini-site" on my computer, I created a simple HTML page for each of the eight (8) images, with a dissolve transition between each. I loaded the "site" into a zip file, being sure the paths to the files were included. (I could have saved worrying about the path if I'd have kept the images and the HTML in the same folder, but I didn't, in this case.) Then I used WinZip's self-extractor creator, telling it where I wanted it to go when unzipped, and sent it with the following instructions.

  1. Run the extractor (double-click it... If you have to, save to desktop, then double-click it from there)
  2. Click the UNZIP button (let it go where it's set up to go)
  3. Close the WinZip stuff
  4. In Browser, click FILE/OPEN
  5. Either:
    1. Browse to C:\$BDCARD\BDCARD\Index.html  or
    2. Select, cut and paste the following into the window address bar: C:\$BDCARD\BDCard\index.html
  6. Click OK (in browser OPEN window)
  7. Watch (8+slides and it loops)

NOTE: If the Browser Warning Bar appears, click it, click "Allow Blocked Content", and click your browser's BACK button. This may only occur in the IE browser. Also, Firefox does not "dissolve" between pages, but it still works.

Here are smaller versions of the images used. Clicking on any of these images will take you to the Example Card in a new window. The note in the above instructions may be necessary.

Happy Birthday Card - Images & HTML Example - Image 1

Birthday Card (Images & HTML - Image 1

Happy Birthday Card - Images & HTML Example - Image 2

Birthday Card (Images & HTML - Image 2

Happy Birthday Card - Images & HTML Example - Image 3

Birthday Card (Images & HTML - Image 3

Happy Birthday Card - Images & HTML Example - Image 4

Birthday Card (Images & HTML - Image 4

Happy Birthday Card - Images & HTML Example - Image 5

Birthday Card (Images & HTML - Image 5

Happy Birthday Card - Images & HTML Example - Image 6

Birthday Card (Images & HTML - Image 6

Happy Birthday Card - Images & HTML Example - Image 7

Birthday Card (Images & HTML - Image 7

Happy Birthday Card - Images & HTML Example - Image 8

Birthday Card (Images & HTML - Image 8

If you'd prefer to download the Executable ZIP file, and run it as described above, click here. (NOTE: Remember, this is an EXE file.)


Example #4 - Images & HTML

My first experiment and experience in animated graphics and creating an HTML card was in late 1999. I created a "Christmas Card" and linked to it from my father's business site's Home Page. I used MSIC to create graphic versions of a poem and song lyrics I had written. Each title, verse, and copyright was its own image. I found "Christmas-y" graphics out there in Internet-land, and put them all together.

You MUST remember, that back then, most screens did not have the resolution of today's screen, and I think the "card" was much easier to read than now-a-days. Remember, also (if you look at the HTML), I was learning as I went! Only the title and link have been changed from the original.

I have not included any thumbnails, here. To see the Image and HTML card, just click here. (Opens a new window. Simply close it to return here.)


Send comments/questions about this page to Bill Sanders at:

Return to OFPv2/Owner - Graphics Capabilities
 

Send email to Bill Sanders ()
with questions or comments about this page or site.


This site, all text and graphics (unless otherwise noted) on it
were designed, developed and published by Bill Sanders of Orange Frog Productions.
It and it's CSS was validated and complies with both the: CSS and HTML 4.01 validators from W3C.
NOTE: All CSS validates except the "New Window Buttons" - Their CSS includes  some invalid code (ie: hacks)
and warnings for using transparent backgrounds when color foregrounds defined.

Copyright © 2003, 2004, 2005, 2006 by Bill Sanders / Full site last modified: July 10, 2006
ctr