Pan and Zoom - Help needed

[fh1805]

Hi everyone,

I'm in the process of preparing an illustrated talk to be given to my local branch of the Western Front Association. The subject is my grandfather and his service on the Western Front during the 1914-1918 war. I am using mostly old photos, postcards and documents (all scanned in via a flat-bed scanner).

I have a particular vision for some of the images which I will try and put into words. My problem is I don't know how to (or even if I can) convert my vision into reality.

I am building the sequence using PTEv5 on a computer with an aspect ratio of 4:3. So let's assume its display is 12 inches by 9 inches. I have a scanned photo that is 5 inches by 4 inches in portrait (vertical) orientation. It is a photo of my grandfather taken shortly after he joined the Army. At the end of the display of this image I want the image in the centre of the screen with a coloured background behind it. No problem! I know how to set that up in PTE.

But...

To get to that endpoint I would like to be able to start with the image of my grandfather zoomed in to concentrate on his head and shoulders. From there I would like to zoom out until the full image is on display. Again, no problem. I know how to do all that in PTEv5.

But... (and this is the problem)..

I would like all the animation to take place within the 5 inch by 4 inch "box" that will contain the endpoint image.

Is this possible in PTEv5?

If so, how do I set about constraining the size of the visible part of the image during its animated phase?

[Lin Evans]

Hi Peter,

Of course you can do this. Actually it's not difficult.

What you need is called "masking". A "mask" is a file you create using any photo editor which can create a transparency. I'll use Photoshop as an example but you could use any of a number of different programs including the very inexpensive PixBuilder Studio available right here at Wnsoft.

In Photoshop, you click on "File, New" and open a file with the attribute "transparent". You want to the size to be sufficient to cover the entire screen so whatever the resolution of your display in pixels would be sufficient. For example, if you are displaying at 1024x768 then make this file that size, etc.

Next paint this transparency with black using the Photoshop paint bucket. Next use the Rectangular Marquee tool to select a rectangular area on this black image the size and shape you want your photo to animate within then press the "Del" (delete) key or use the Eraser tool to remove this portion of the black revealing the transparency layer beneath. What you will now see is a black screen with a "cross-hatch" pattern representing the transparent portion in the shape you have chosen.

Save this file as a PNG file. Use a name such as "mask1.png".

Open PTE and place this mask as the top layer object in the O&A object list with the photo you want to animate on the layer just beneath. The photo will show through the transparent "window" and you may enlarge, zoom, pan, whatever you photo and the areas which fall outside the "window" will be "masked" or hidden from view. The end result is that you can do exactly what you are trying to achieve with this simple mask.

It's possible to use several masks on different layers to achieve different effects thus simultaneously have several photos doing different animations simultaneously each showing through a mask.

Also you may want to surround the transparent "window" with a white border to dress up your mask. You may want to look at some masks theDom has on his site which you may download and use.

Here is a quick sample mask I made for you to play with:

http://www.lin-evans.net/p2e/masksample.png

Best regards,

Lin

Hi everyone,

I'm in the process of preparing an illustrated talk to be given to my local branch of the Western Front Association. The subject is my grandfather and his service on the Western Front during the 1914-1918 war. I am using mostly old photos, postcards and documents (all scanned in via a flat-bed scanner).

I have a particular vision for some of the images which I will try and put into words. My problem is I don't know how to (or even if I can) convert my vision into reality.

I am building the sequence using PTEv5 on a computer with an aspect ratio of 4:3. So let's assume its display is 12 inches by 9 inches. I have a scanned photo that is 5 inches by 4 inches in portrait (vertical) orientation. It is a photo of my grandfather taken shortly after he joined the Army. At the end of the display of this image I want the image in the centre of the screen with a coloured background behind it. No problem! I know how to set that up in PTE.

But...

To get to that endpoint I would like to be able to start with the image of my grandfather zoomed in to concentrate on his head and shoulders. From there I would like to zoom out until the full image is on display. Again, no problem. I know how to do all that in PTEv5.

But... (and this is the problem)..

I would like all the animation to take place within the 5 inch by 4 inch "box" that will contain the endpoint image.

Is this possible in PTEv5?

If so, how do I set about constraining the size of the visible part of the image during its animated phase?

[alrobin]

Peter,

This option is also possible - it's uses Lin's mask suggestion as the basis for the effect, except that instead of a black mask, a copy of the original image serves as the mask.

zoom_test_Sep28_2007_9_05_11.zip

Another way to accomplish Lin's effect is through the use of the rectangles already available in O&A (no need to create a mask). PTE is capable of many alternatives! See the following:

zoom_test_Sep28_2007_9_50_51.zip

By playing around with varying opacities for the masks, you can obtain many other interesting effects. You can even achieve a feathered edge with the 4 rectangles by adding a drop shadow to the visible edge of each one as follows:

zoom_test_Sep28_2007_9_38_49.zip

[fh1805]

Lin/Al,

Thanks, guys, for the point in the right direction. I understand exactly what Lin is suggesting.

The first half of the coming weekend is already fully booked. But if the weather here in North Yorkshire stays as it is (cold, wet and miserable) I now know what I'll be doing on Saturday afternoon and evening!

Once again, thanks for the advice so freely and willingly given. It is much appreciated.

[Lin Evans]

As Al demonstrates, there are numerous ways to approach this. If you are in a hurry you can use multiple rectangles to mask areas of the screen and if you want to take some time you can make up dozens or even hundreds of PNG masks and save them for future use.

Remember, if you use Photoshop you are not limited to just a rectangle or a square but can set brushes to nearly any custom shape and use that shape to "cut" out your transparent area with the eraser tool.

Here's a 15 second quickie cut out using a star brush from a blue overlay on a transparency. Just a sample of how you could get creative with this. Also you can have less that 100% opacity on your masks by varying the opacity of the eraser so you can achieve etherial effects if desired....

http://www.lin-evans.net/p2e/smallmaskdemo.zip

Best regards,

Lin

Lin/Al,

Thanks, guys, for the point in the right direction. I understand exactly what Lin is suggesting.

The first half of the coming weekend is already fully booked. But if the weather here in North Yorkshire stays as it is (cold, wet and miserable) I now know what I'll be doing on Saturday afternoon and evening!

Once again, thanks for the advice so freely and willingly given. It is much appreciated.

[fh1805]

Lin,

I've made a basic mask and built the animation. Everything's going in the right direction to realise my vision. May I ask a further question - on using Photoshop?

I'm using Photoshop Elements v5 to make the mask file. When I'm making the mask file, is there an easy way to position the Rectangular Marquee so that its centre is exactly over the centre of the 1024x768 image?

I've tried using the Grid tool but I noticed that the 1024x768 image is not an exact number of grid squares along either of its axes.

[Lin Evans]

Unfortunately I don't have Elements (maybe someone who uses Elements can help here) but I did check on this with a friend who uses it. Apparently there is no easy way to get an exact position but it probably isn't really all that important.

In Photoshop you can quickly create a temporary reference guide line either vertical or horizontal with pixel precision thus making it relatively easy to get precise positioning, but it doesn't appear that Elements has this feature.

Normally, extreme precision for this type thing isn't necessary because you can easily move the images to visually approximate what you want. But if you want to get it exact here's how you can proceed. Tape a couple pieces of string diagonally across your monitor from the corners of the image to find dead center. Next draw your rectangle with the Rectangular Marquee (you can move it about on the screen) and find dead center on it. Use a similar technique to find center of the rectangle and move them to coincide.

I think you can click on Edit, then Preferences, then Units and Rulers also Grid and set these to pixels so you can also probably find the centers that way by simply using the Info Window and dragging. So divide 1024 by two and 768 by two then find the junction of 512 horizontal and 382 vertical.

Truthfully, if you just eyball it you will probably do about as well.

Best regards,

Lin

Lin,

I've made a basic mask and built the animation. Everything's going in the right direction to realise my vision. May I ask a further question - on using Photoshop?

I'm using Photoshop Elements v5 to make the mask file. When I'm making the mask file, is there an easy way to position the Rectangular Marquee so that its centre is exactly over the centre of the 1024x768 image?

I've tried using the Grid tool but I noticed that the 1024x768 image is not an exact number of grid squares along either of its axes.

[davegee]

Try using the CROP tool as follows:

Select the whole image (with the CROP TOOL) and then ALT/Drag from any corner to the dimension you require. (ALT/Drag will drag toward the centre). When you have the desired portion drag four guides in to mark the boundaries. Hit escape to clear the crop tool and then choose the marquee tool. With SNAP TO on it should be easy to snap to the guides.

It works in CS3 - it might not work in Elements.

DaveG

[Lin Evans]

Hi Dave,

I don't think Elements has guides - that's the problem.

Best regards,

Lin

Try using the CROP tool as follows:

Select the whole image (with the CROP TOOL) and then ALT/Drag from any corner to the dimension you require. (ALT/Drag will drag toward the centre). When you have the desired portion drag four guides in to mark the boundaries. Hit escape to clear the crop tool and then choose the marquee tool. With SNAP TO on it should be easy to snap to the guides.

It works in CS3 - it might not work in Elements.

DaveG

[Barry Beckham]

Here is a solution for Elements 5

Create a new blank file at 1024 by 768, make the new file white for this excersize.

Then create a second blank file in black, this time create the size you want your images to be within the 1024*768 page.

Select the move tool from the toolbox and while holding the shift key drag the black (smaller square) into the white one (1024*768)

The Shift key option will ensure that the black square will drop dead centre onto the white.

If you need to shunt it up a bit, just use the up arrows on the key board with the move tool selected to nudge it a pixel at a time.

Try 800*600 for the second image, but if that doesn't look right or meet your needs, create another at a different size. I think 875*600 looks best in a 1024*768 page.

You can now select the black square with the magic wand, switch to the white square and cut out the center part. Then you can drop the black layer in the bin and with the white frame/mask locked in the layers palette, you can flood it with colour, add texture or whatever you want to create the mask

In essence make a template and use that to create your mask.

BB

www.beckhamdigital.co.uk

[fh1805]

Barry,

Thanks for your suggestion. Sorry I didn't acknowledge sooner but I never got an e-mail alert for your post.

[Hawk]

Hi Peter - centering

I'm using Photoshop Elements v5 to make the mask file. When I'm making the mask file, is there an easy way to position the Rectangular Marquee so that its centre is exactly over the centre of the 1024x768 image?

Not sure how you made out with Barry’s suggestion, but here is a method I use to get opening centered creating a mask.

I use PTE and Print screen key option to center objects.

For example – add any image to PTE “ Slide List “

Open this image in the O&A section and resize the image to opening size you wish – right click and choose “ Put to center ”.

Go back to main PTE interface and click your image in the “ Slide list “ to highlight and in the larger “ Preview section “ click inside the area to view FULL SCREEN.

Hit the “ Print screen “ key.

Open Elements

New – Blank file – 1024 x 768 – Transparent.

Then I choose “ Edit “ – Paste ( pasting the clipboard print screen image onto the transparent )

Now using the rectangle “ Marquee Tool “ I simply trace around the inner picture and hit the delete key.

This leaves you a transparent center with a black border – save as .PNG file.

** If you wish a different color border – use paint bucket before saving.

Now as Lin explains add this into O&A – bring this .PNG file to the front.

Your grandfather images ( 1 back ) can now be zoomed out within the transparent opening in the mask you created.

** If you prefer a color background in the opening behind your grandfather’s picture as you indicated, create an image file with the desired solid color 1024 x 768 – add into O&A as an object, right click on it and in the section " Order " choose – “ Send to back “. Do not use “ Customize / Main / Background as this color will show in the transition.

[fh1805]

Hi Ralph,

Now that is really neat. I should have thought of it myself. Not only does it get the mask centered where I want it but it also allows me to ensure that the mask is of exactly the correct proportions and overall size. Brilliant!

In fact, using PTE O&A in this way to position the mask area would work for masks of any size/shape any where on the image.

I've actually used every single step of your solution at some time or other - just never thought to put them all together in that particular order to achieve that end result.