Basic HTML: Banners: Cropping An Image

(with updates by editorial staff)

Use these to jump around or read it all

Cropping An Image

Crop It!

How We Do It

 

---

Cropping An Image

What we are going to do here is take the movie ticket image and cut it into two images. In technical terms, we will crop out two sections. First, you need the image. Click on the ticket below to get it all by itself, then save it by choosing “SAVE AS” from your browser’s FILE menu.

Make sure you save the image in the same directory as you saved the image you made in Banner Primer #2. In fact, make sure you save all the images you make during these primers
in the same directory.

Crop It!

Crop me? Crop you! (Sorry — easy joke). This is so easy you won’t believe it. What we are going to do is turn that ticket image above into two images that look like this:

               

---

How We Do It…

First off, open the ticket1.gif image you just downloaded by choosing “Open…” from under the FILE menu in PSP, as shown to the right. It should be sitting there waiting for you in the same directory where you saved your first image. Choose the image by clicking on it twice. It should open up in the PSP window.

     Now let’s put PSP in the crop mode. Look at the screen. There should be a little button that looks like this: . Click on it. Now you have placed PSP in the mode to crop out a section of the picture.

Once the crop button is clicked, place your mouse pointer over top of the ticket1.gif image. The pointer should change into this:

Do this: Put the cross in the upper left-hand corner of the image. Left click and hold, then drag the mouse down and to the right. See the box forming? Try to cut the ticket perfectly in half. Once you have one half of the image set aside, let go of the mouse button. Now the box will become a dotted line. It should look like this:

 

Got that? Good! Now let’s perform the actual cropping. Look again at the top of the PSP window. There should be a menu called IMAGE. Click on it. A few commands down, you should see “Crop.” It looks like the item at right.

     Once you choose Crop, you should now get this:

How about that, huh? Now, follow the same instructions as above
and save that half image as “leftticket.gif”. After you’ve saved that new image, close it by clicking on the grey X in the left-hand corner of the image — not on the PSP program, but the X on the image.

Open the ticket1.gif image again and perform another crop, only this time crop the right side of the image and save it as “rightticket.gif”. Do your darndest to get the crop line in the same place as the last one. I did it by making the crop follow the left vertical line of the “M” in the word “Admit.”

You now have the the ticket images you’ll need to animate the
ticket opening up.

---

Done For The Day!

Now you can crop with the best of them. I use this function constantly. It is a very basic image creation. But there’s also importing images. Thus we move on…

Use these to jump around or read it all

Cropping An Image

Crop It!

How We Do It