Welcome to Orange Frog Productions Owner Section [Banner]

Page Title:

Prologue

This page and its links were designed to show my graphics creation and editing capabilities (ie "Showing Off" smiley - wink).

Unless noted, all edits were performed using Microsoft Image Composer (MSIC) 1.5. I have a few other programs I have used for other types of editing (gamma, brightness and contrast changes and certain other changes are easier in Microsoft Photo Editor, mass changes in size are easier in other programs, and I have used Photoshop a little for a couple that are not on these pages), but, currently, MSIC is the one I use most to create and make major edits in graphics and images. I know that there are many more capable programs out there, but the one it was suggested I buy (Photoshop) costs way too much for me.  I'm sure I could learn to use it or any other imaging program, but again, since MSIC came with FrontPage and MS Photo Editor came with Windows XP, they're the one I have to work with and use most.

I have also created simple animated GIFs (blinking or changing images, like my "An OFP Website" button on the sidebar), using Microsoft's GIF Animator, usually through MSIC, too.

My point, here, is that if I can do what I've done with MSIC and the other above programs, what could I do with a little experience in the much more expensive programs? smiley - big grin

NOTE: While I like and am continually getting better at using MSIC, I do have a complaint about the paint brushes I have to use to "erase" the picture edges and transfer other colors from one area to the other... As far as I know, there's no way to view the outline of the brush being used or the area from which the transfer is occurring. So you either have to use a small brush and transfer "small" sections most of the time, or you have to "fuzz" the edges and increase the transparency, hoping the mouse doesn't slip or your fingers twitch when working on a larger area. While it obviously works, it would be much easier if the edges of the brush and/or transfer area were visible.

One of my "tricks" which those who do not do this often may not employ, is to save different versions of the picture. I have full-size images of most of the following larger pictures (well over 100K in size!), and whenever I make a major change, I save another version. This way, no matter whether the program will allow multiple "undos", if I make a mistake, or don't like the way it looks, I can always go back a step and start over. If you are trying some of the following for the first time, keep this in mind.

Each of the images, below, are a 250-300-pixel-wide varying height picture to which I've done what's described by the header. Not all of them have "step-by-step" instructions on what and how I did it, but the first few in each subheading will. The "step-by-steps" are larger images (all the extra large ones are made around 600 pixels wide. If there are even larger versions (or I've sized the picture for the web without shrinking the actual size, the images will be clickable and display a larger picture in a new page. On THAT page, on some of the images, clicking it will get you another version on a blank (no background) browser window. Be aware that the step-by-steps contain multiple images, and MAY take a few moments to download.

Remember, these are "How I Did It"s and not necessarily "How It SHOULD Be Done"s. These programs were used because they are the ones to which I have access, and that would run on my computer at the time these images were done. I am doing this to point out just some of what you can do with some of the programs available to many/most Windows users.

Adding to Image

Have you ever had a picture of your family, where one member takes the picture while the rest of the family smiles for the camera, then another person takes another picture, with everyone (but the one taking the picture) in the same place, and the one who took the first picture now in it? Ever wish you could combine them? This picture is one of those.

Family Thanksgiving

Family Thanksgiving 2002

Example #1

Two people took pictures from about the same spot, as described above. Who did I add into which picture? (Can you tell?) Why did I choose that one? How did I do it?

See Adding to Image #1.

 

 

 

Bill and Chris' Wedding (including Bill's sons, Christopher & Matthew)

Bill and Chris' Wedding - w/Christopher & Matthew

Example #2

A picture is taken at an event and someone couldn't attend. Who did I add into this picture? (Can you tell?) How did I do it?

See Adding to Image #2 or Sanders-Klump Wedding - Building a Family Photo (This link opens a new window. Simply close it to return here.)

NOTE: One thing I should have done was place Christopher and Matthew from these images side-by-side and made sure their heads were basically the same size before I used the "cutout". This would have helped and may have cut out at least one step in the process. Oh, well... Hindsight's 20/20.

 

NOTE: The following examples of adding to a picture use the same techniques as described in the step-by-steps for Examples #1 & #2. I've described the problems I had with them. If you want step-by-steps for them, let me know and I'll add the pages.

 

Bud & Martha at development's sign in Florida

Martha & Bud Sanders, 2004,
at Development's Sign in Florida

Example #3

My parents bought a house and started going to Florida for the Winter in 2004, after my father retired. In this case, there were only the two of them there, and they both took pictures with the other by the sign. Dad then asked me to combine the pictures so they could put it on the Christmas letter.

The problem was that both of them were touching the sign, and both pictures were taken with them on the same end of the sign. Dad's hand was on the top edge, and my mother's hand was on the front corner. Because of the way their hands were on the sign, I decided to use that as the basis, and cut Mom out of the one with her by the sign, "flipped" her image around the vertical axis, and put her on the other side of the sign. I got the sizing and positioning right, and cleaned everything up. Then I realized that I had concentrated so hard on the process, I didn't realize that the sunlight and shadows were wrong on her. Dad liked it anyway (said no one would notice... HA!) and accepted it as it appears.

 

Picture for address card and Christmas newsletter

Martha & Bud Sanders, 2005
for Address & Christmas Cards

Example #4

Dad has lost a lot of weight (compare him in this one to Example #3), and he wanted his address card to show it. (They also used it for their Christmas Letter.) He looked for a picture of my mother he liked (because she's REALLY smiling in it), and asked me to put them together for the card. Using the same techniques, I cut them both out of the two pictures, tried a couple or three backgrounds, and Dad liked this one. Remember, the picture will be smaller (business-card-sized leaving room for name, address and phone number), so some of the errors seen here will not be as visible. (Wish I'd have "blurred" or "fuzzed" her hair for the larger versions! LOL)


Build a Panorama

This requires a number of pictures taken from as close the same angle and level as possible. Ideally, I'd suggest you use a tripod for the camera; Make sure that the whole panorama can be taken without moving the camera up or down; and take the shots. Be sure to overlap each a little, so there's nothing for which you don't have a shot. Remember that it will be difficult to find a way to print it.

This technique would also work for vertical panoramas, too. And, combining both could give you a multi-picture picture. The latter is the way they combine satellite pictures to give the aerial shots of the earth for Google and others.

Barrinton West Apartments, West Lafayette, Indiana

Barrington West Apartments,
West Lafayette, Indiana

Example #1

I had taken a couple of pictures of Barrington West Apartments. shortly after it was built, from across the highway. (See the roadway in the foreground?) I couldn't really get any further back, and the camera I was using at the time couldn't shoot the whole complex, so it had to be a shot of either end. I combined these two pictures to create the one above. When I built the Barrington website, I cropped it a little narrower. See Build Panorama Example #1

 

Out The Front Door - Fun (missing a couple of pictures, so...)

Out the Front Door - For Fun
(missing a couple of pictures, so...)

Example #2

At the end of January, 2003, there was a pretty big snowstorm in Indiana. My brother, visiting my parents, took a couple of pictures out the front door. Dad asked if I could put them together. I tried, but found some major pieces missing. I sent him the above left, and asked if he thought anyone would notice. smiley - wink (Click on it to see full-size picture._

Out The Front Door, Lafayette, IN - for Real

Out the Front Door - For Real
(missing a couple of pictures, so...)

So, when we visited a couple of weeks later, I took pictures of the same area, but made sure I had the whole set. When I got home, I put them together so Dad had something to send to friends and family in Florida, to show "what they were missing." See Build Panorama Example #2.

 

NOTE: The following examples of building a panoramic picture use the same techniques as described in the step-by-steps for Examples #1 & #2. I've described the problems I had with them. If you want step-by-steps for them, let me know and I'll add the pages.

Click on the picture to see a full-size copy in a scrolling <div>. Use the arrows to see what a panoramic picture can show you. It will open a new window. Simply close it to return here. Be aware that I have dropped the file-size (and therefore, the resolution) on these pictures to below 200K (I tried and lost enough resolution to cause pixilation, so didn't use them). It will depend on your connection speed how fast the full-size image pages will appear.

 

Example #3

Panorama of Snowy Road on February 23, 2003

Out MY Front Door - February 23, 2003

Panorama of Snowy Road on February 24, 2003

Out MY Front Door - February 24, 2003

Panoramas of Snowy Road on February 23 & 24, 2003

Out MY Front Door - February 23, 2003

On February 23, 2003, they predicted a heavy snow for that night. I took a set of four (4) pictures out MY front door that day, then took another set of four (4) the next day when there was a new 2-3" of snow on the ground. I combined the two into the final image. It's difficult to tell, but there really IS 2-3" of snow in the second set of pictures.

 

Our back deck - Panoramic - 02/23/2003

Our Backyard Deck 02/23/2005

Example #4

Personally, I'm proud of our back deck. I designed it! LOL. And I believe that snow-covered bare trees are beautiful.

On February 23, 2003, with the predictions of a heavy snow in the offing, and already having had a lot of snow, I decided I wanted to try to make a multi-picture panoramic (my term) of the back deck. Problem was that once I took them and combined them, I realized I hadn't taken enough to "fill in" everything that was needed to keep the tree in the picture. That's why this one is simply put together without cropping or cleaning. I still think it's neat.

 

Example #5

Lake Freeman Panorama (Small)

From patio on top of boathouse
- Panoramic of Lake Freeman

In case you're wondering why you would want a panoramic shot, think of this... Let's say you have a place up on Lake Freeman near Monticello, Indiana, and you wish to sell or rent it or another building on the property. One "selling point" could be the beautiful view of the lake on a lazy afternoon. Single shots just won't do it very well. With a few well-shot and well combined pictures, you could have a panorama of the lake to show a client or potential lessee or buyer.

I took these pictures in 2000 from the top of a flat-roof boathouse that was designed as a patio. I believe there were six to seven pictures in it. I played around with arranging them, but could still see all the edges. (Back then, I didn't know what to do.) A friend, at work, knew how, and cleaned it up for me. Thanks Mike.


Build a Card

A card of almost any type can be built using almost any picture. As you saw in the Adding Examples #3 & 4, you can build a picture to put ON a business or "address" card. But you can also simply build the card using an image or two. It only takes being able to add text ON to a picture. (I'm sure some people out there have done this manually, simply writing "Happy Birthday", "Happy Anniversary", or some such phrase to a picture. And think of all those Christmas Cards you receive where a family picture is printed on a card. You can build your own using these techniques. Then you can simply send them via email, or print them. (Ok... Printing, especially multiple copies, may be a little more complicated than "simply", but you get the idea. If you can print to PDF, you can "print" multiple copies of the card on the same page. Then, print the PDF to a regular color printer, cut them apart, and Viola! (Wah-La!)

For all of the following, clicking on the picture will take you to my "Building a Card" examples page for the full-size image. These will be larger versions of the following images and a copy of the description of how I did it.

Mother's Day Picture - From Picture of a Flower

Mother's Day Card

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

 

Happy Birthday - From the Puppies

The pups say "Happy Birthday" 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?

 

Example #3

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

 

Happy Birthday Card - Example 5

Birthday Card - Image 5

Example #5 - Birthday Card

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.

For how I created the full card, see Building a Card - All Examples (Example 5)

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


Build a Desktop Background Image

As with building a card, you can use almost any picture, if it's sufficiently high in resolution and size. It just takes right-clicking on your desktop screen, selecting the Desktop tab and browsing to you selected image. With Windows XP (and others, I'm sure), any picture in your My Pictures folder is fair game. You can "stretch" it, "tile" it, or "center" it (at least in XP). You can also build a background. If you don't already know, get an idea of the size of your screen. (Right-click on your Windows Desktop, again. Select the Settings tab. Under the Screen Resolution slider it should show you the size of your screen. You will want to create or edit a picture that size or larger. The reason for this is if you use a low-resolution or smaller picture, it  loses sharpness and can become pixilated (showing all the little squares) as you make it larger. Conversely, most pictures can be shrunken without losing anything. However, remember that Compression of a JPG or GIF involves removing duplicate information, so compression plays a role, too.

Puppy Love - Desktop Background Image

Puppy Love - Desktop Background Image

Example #1

To be honest, I've only done this once. In July, 2002, our female black lab had puppies. While we gave away a three of them, we kept two.

In mid-September, I was thinking (for some dumb reason) of "The Raven" by Edgar Allen Poe, and suddenly I came up with the first verse of a poem about puppies, using the rhythm. It used a lot of alliteration, and I found this poem just "flowed" from there. I had a couple of verses where the last two lines could have been two or three different things, but after it was all said and done, I was (and AM) very proud of this poem.

So much so, that I entered it in Poetry.com's contest. (see Poetry.Com: Puppy Love - I'm listed as "Sanders, William (Bill) Daryl".) It was one of the ones selected for that season's book(!), and might even have gone on to with the $10,000 prize, but you had to purchase reservations for their convention, where the poems are read aloud. The price also included other stuff from Poetry.com, but, to me it sounded more like I was BUYING my prize, so I never went. I did purchase the book, though. Apparently, it's more of a "vanity publisher" than a "real" publisher. (Sorry... Got off track!)

As soon as I had the poem, I created this background image for my screen. It worked for quite a while - until I got too many icons on my desktop, and the program names under the icon started running into the poem.

I used the Text tool of MSIC to create an image of the poem. I should have done that at a much larger size than I did, because as I fit it into the screen, it made the poem much harder to read. It DOES read well at 800 pixels wide (or larger). As with Card Example #2, I created a rectangular black background, inserted two pictures of our puppies (at 5 and 6 weeks old) on the right side of the screen, inserted the image of the poem in about the center of the poem (leaving a "margin" to the left of the puppy pix), and there I had it. NOTE: Because my screen at the time was 800x600, I made the whole image at that size. Now that my screen is larger, it will still work, but as noted above, it's starting to blur. I SHOULD have made it more like 1600x1200 and shrunk it to fit.

The example image is 900 pixels wide, made 600 wide by HTML. (In other words, if you right-click and save it to your computer, it will actually be 900x666, but, as you will see, at 600x444 pixels wide, it's very difficult. (See Background Example #1.)


Build Graphics for Websites

Sometimes, in the corporate world, people in the marketing department will get involved in creating and building graphics for the corporations' websites (both inter- and intra-nets). In the smaller business world and for personal websites, the web designers and webmasters must create the graphics for the sites on which they work. Some can get quite fancy, while others don't.

For the websites created by me for OFP, I created most, if not all, of the online graphics. In some cases, they, and the websites' colors, came from existing materials, like a business card. In others (especially my own), I came up with my own ideas. Yes, I admit that for all but my own websites (OFP and LYAO), I did not "create" the logos. In some cases, I had to "recreate" them, for use on the banner and elsewhere, though. Any way you look at it, it takes some time to do some of them, and others, are a quick and minor edit (like resizing them).

Following are links to pages describing the graphics I created/modified for the OFP Websites. In the following, sometimes, "Playing around" means "built for approval" or "built to try something out". All the graphics shown were not used, but a description of how they were made (not all "step-by-step") and why they were or weren't used (as I remember - some were done a few years ago and it's mid-fall, 2006 as I write this) are included.

Some descriptions are on the OFP Websites pages. I hope that these are a little more detailed. I will also include links to THIS section of this page and to each individual OFP Websites' Graphics page from the OFP Websites main page.

Check them out. I'll bet even those for whom the websites were created didn't know everything I tried!

Graphics for Website:

 


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

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