Welcome to Orange Frog Productions Owner Section [Banner]

Page Title:

This is one I did for fun and experience a couple of years earlier. Then, when a website was requested, I just cropped it a little (narrowed it top-to-bottom) for a banner-like top-of-page.

Step #1 - Choice

First, you need to choose two pictures. It's easier if they were taken at the same time, from the same position, obviously. Even when pictures are taken from the same spot, you may have color variations, though... The sun goes behind or comes out from behind a cloud; someone or something blocks the light as you take the picture, etc. If they are the best you have, you'll have to play with them more. (How will be described in other examples.) Meanwhile, here are two pictures of the same thing.

Barrington West Apartments, Left side of complex

Barrington West Apartments #1 - Left side of complex


Barrington West Apartments - Right side of complex

Barrington West Apartments #2 - right side of complex


Step #2 - Arrangement

If you had real photos without those white margins on them, you could just lay them, one on top of the other, and match things up. Well, you basically do the same thing here, except that with just a click or two, and you can put the one in the bottom on top. Using the points of EVERYTHING (in this case, the cloud in the sky, the tree, the building, itself, the driveway, and the sealer marks and lines on the highway), position the pictures so they line up correctly. Notice that I, apparently, wasn't so careful about making sure the camera was level (I didn't have a tripod, so think I did pretty well), and I may even have moved a little to one side or the other between shots. Even so, I got a pretty good combination, even though it almost looks like it was taken with a wide-angle lens, curving the structure a little.

A little playing around, switching back and forth to chose which should be on top, matching all the landmarks, and here's the final of this step. Notice that in this case, the colors match almost perfectly. There is plenty of cleanup to do though. (Click the picture for the full-size image, and make sure it's full-size.) You can see where the left picture overlaid the right better, and see what needs cleaned.)

Barrington West Apartments - Overlay as close as possible

Barrinton West Apartments - Combined/Overlaid


Step #3 - Crop

Now a simple crop to cut the "bad" parts of the picture out (where it's obvious they were overlaid), and center the building better, both vertically and horizontally. BTW: It's been written in numerous articles about photo composition that making the subject of the picture a little low and to the left is fine... The eye sees it centered. In this case, I centered horizontally, and have more sky than foreground.

Barrington West Apartments - Overlaid & Cropped

Barrington West Apartments - Combined/Cropped


Step #4 - Cleanup

Using the Paint/Transfer tools in MSIC, I took colors from beside the line and painted them over it. The most difficult areas in this picture were the building windows, a car in the parking lot, and the right side of the driveway.

(Click the picture for the full-size image, and make sure it's full-size.) You will see that I fixed that light line that ran through the picture from Step #2.

Barrington West Apartments - Cleaned

Barrinton West Apartments - Cleaned (Final)


#5 - Crop for web

Many people now have large screens and broadband, so I could have made that assumption and left the picture as above. However, if you look around, the majority of larger "banners" are closer to 600 pixels wide and normally about 100 pixels high. I made this 700 pixels wide and about 200 high, since it was not really a banner. I cropped some of the height out of it, too.

Barrington West Apartments - Final Cropped for website

Barrinton West Apartments - Cropped for Website Pagetop


By the way: The original pictures were taken using the same camera within seconds of each other (no real lighting change), and were 1280 x 960, and around 400K each. I would ALWAYS recommend making edits on the highest resolution possible, then shrinking the whole thing when done.

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

Return to OFPv2/Owner - Graphics Capabilities (go to Panorama Example #2)
 

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