Welcome to Orange Frog Productions Owner Section [Banner]

Page Title:

Graphics - Building a Card - All Examples

Page Links/Examples:

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.)


Example #5 - Birthday Card

Happy Birthday Card - Example 5

Birthday Card - Image 5

One of the latest cards I made was for my niece's birthday. (SOMEONE told me the picture was Michelle, and I even brightened it up enough to verify, but didn't brighten it enough, I guess... Turns out this picture was her sister.)

Basically, I pulled the card into MSIC, picked a nice font, and added the two phrases. I used a 1px yellow Edge on the lettering, and then Drop-Shadow to create the yellow flair. I positioned everything and saved it.

I found an obviously clipart cake online and saved it for the front of the card. I opened WORD, set the page to landscape, put the clipart cake against the right margin, and centered vertically (I did have to resize it so it would fit correctly.) On the bottom of the page against the left margin, I wrote "An Orange Frog Productions CheapCard by Bill Sanders" and "Copyright 2007". (Hey... I wanted her to think I just threw something together!) On the next page, I placed the picture to the right, and sized it to fill the right-half of the landscaped page with margins (again, centered vertically).

I printed the document on both sides of the same page (heavy card-stock), folded the card in half, and VIOLA! A Birthday Card! A white 6"x9" envelope (same ones I used to send my family history CD/DVD to people in), write her name on the outside, and the package was complete.

And yes... Michelle liked the card, even if the picture was of her sister!


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" which include some invalid code (ie: hacks),
added PicoSearch Tables, and warnings for using transparent backgrounds when color foregrounds defined.

Copyright © 2003, 2004, 2005, 2006, 2007 by Bill Sanders / Full site last modified: October 21, 2006
Any reproduction, printing, or selling of this content is prohibited without express written consent from William D. Sanders.
ctr