![Welcome to Orange Frog Productions Owner Section [Banner]](images/owner/ofp_banner_owner.jpg)
- You are here: Home
- » Owner
- » Graphics Capabilities
- »
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 - 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.)
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

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

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






