![Welcome to Orange Frog Productions Owner Section [Banner]](images/owner/ofp_banner_owner.jpg)
Page Links:
Prologue
This page and its links were designed to show my graphics creation
and editing capabilities (ie "Showing Off"
).
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?
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 larger pictures, following (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 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 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 the full-size picture in a new and 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 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.
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.
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 an image 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.
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.
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.
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
Example #2
(missing a couple of pictures, so...)
(missing a couple of pictures, so...)
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.
(Click on it to see full-size
picture. It will open a new window. Close it to return
here. Remember, it's 1445 pixels wide, so won't fit on
most screens when full-size.)
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. It will open a new window. Simply close it to return here. Be warned that these pictures are DEFINITELY wider than the normal screen (in full size), and can be quite large in size.
Example #3
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.
for Address & Christmas Cards
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
- 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. 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.
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".
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.
- Run the extractor (double-click it... If you have to, save to desktop, then double-click it from there)
- Click the UNZIP button (let it go where it's set up to go)
- Close the WinZip stuff
- In Browser, click FILE/OPEN
- Either:
- Browse to C:\$BDCARD\BDCARD\Index.html or
- Select, cut and paste the following into the window address bar: C:\$BDCARD\BDCard\index.html
- Click OK (in browser OPEN window)
- 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.
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.)
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.
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.)
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"
- 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
