Basic HTML: Banners: Copy and Paste An Image

By Joe Burns


Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

(with updates by editorial staff)

Use these to jump around or read it all
Copy and Paste
Performing the Copy
Performing the Paste
Tearing the Ticket


If you're following along at home, then you should have four images in your banner folder by now: banner.gif, ticket1.gif, leftticket.gif, and rightticket.gif. Those four images are your building blocks, now let's construct the sections.

This should be a fairly easy primer to follow because you have probably done this method a thousand times. What we intend to do is copy one image and paste it into another.
     This is the same method as if you were writing a text document in a word processor. Let's say you want to move an entire paragraph from one section to another. You would highlight the text, choose to copy (or cut) it, and then paste it in the section you feel is a better fit. This is the same thing except it's done with images.

Copy and Paste

Here we go. First off, you need to open PSP if you haven't already. Now open two images: ticket1.gif and banner.gif. Both of the images should now appear in the PSP window. They might be on top of each other. If that's the case, place your pointer on the blue bar at the top of one of the images, click, hold, and drag the one image off of the other.

Notice this to begin with: Even though there are two images on the screen, they are not seen as equal by PSP. One of the images is in the forefront, meaning that it is the image that is being acted upon at the moment. Look at this screen capture taken from my own PSP while both images were open:

See how the banner.gif has a blue bar at the top and the ticket1.gif image has a gray bar at the top? Look at your two images; one will be blue and one will be gray. The one with the blue bar at the top is the one that is in the forefront. That means that if you perform a copy (or a cut) or a paste, that is the image that will be acted upon. If you want the other image to be the one acted upon, then click on it. You'll see that its gray bar becomes blue and the other image's bar becomes gray. Do that -- click back and forth between the images to see them work that way.

This Is What We're Going To Do:

We are going to take those two images, banner.gif and ticket1.gif, and combine them to create a third image we will call banner1.gif. It'll look like this:

Performing the Copy

We will copy one image, the ticket, and paste it into the other image, the banner. Now, we want the copy to act upon the ticket as that is the image we will copy. So, if it isn't already, click on the ticket image to bring it to the forefront. You'll know it is ready by its bar at the top turning blue.

Once it is at the forefront, click on the menu marked EDIT at the top of the PSP window. Under that menu, you'll find the command "Copy". Choose it as it shows to the right.

The ticket image is now copied to a section of your computer's hard drive called the Clipboard. Think of it as having a Xerox of the image standing by.

Performing the Paste

Now, we need to bring the banner image to the forefront. Click on it so it has a blue bar up top. You'll want to be careful about just jumping to paste at this point. When you go back to the EDIT menu, you'll notice that the Paste command has three options, as is shown to the left.

     You are interested in pasting the copied image "As New Selection". If you paste it as a new image, it will paste all by itself and not into the other image. If you paste it as a transparant image, your effect will be altered and you won't get what you're looking for. So go with the middle one. If the banner image is in the forefront, choose to Paste "As new Selection".

You should now have something that looks like this:

Go ahead and move your pointer around a bit. You'll see that the little cross with arrows on the ends allows you to move the image wherever you want it. Try to get it right in the middle. Once you have it right where you want it, click the left mouse button, but don't hold it. Just click it.
     The image will now lock into place and the same dotted line you saw in the crop function will appear. Click again anywhere outside of the pasted image. Don't click inside or you'll get the arrows again. The dotted lines should disappear.

There's your new image. You now need to save it following the same commands you used to save the images you created. Make sure you choose SAVE AS. You see, if you just choose SAVE, then you'll save right over banner.gif. You don't want to do that. You want to make a whole new image, so choose SAVE AS and save the image as banner1.gif in the same directory you have been saving all your other images in.

Tearing the Ticket

Now you have the first banner with the full ticket right in the middle. The process now is to create the next five images where the banner splits and pulls to the outer walls of the image. That is done by creating five new banners that look like this:

You already have the tools to create the five images above. You'll need to open four images in the PSP window for this, leftticket.gif, rightticket.gif, banner.gif, and banner1.gif. Once you have all of those images open, place banner1.gif just above banner.gif. The PSP screen should look like this:

The reason I am having you do this is because you will use banner1.gif as a guide to create the next image. Copy and paste leftticket.gif and rightticket.gif into banner.gif so that you get a little bit of a tear. It should look like this:

Save it as banner2.gif. Now leave banner2.gif open and re-open banner.gif. Place banner.gif below banner 2.gif. Now you can use banner 2.gif as a guide to make the next image, which will be banner3.gif. The screen will look something like this when you finish making banner3.gif:

See how I am using one image as a guide to create the next image in the sequence? That's why I am asking you to create the images by looking at the image that comes before it. What you need to do now is create banner4.gif, banner5.gif, and banner6.gif so they closely resemble the six images above. They are all made by copying and pasting again and again until the image is finished. Then save the image using the Save As command.
     The image banner.gif is your palette. It is the blank space that all the other items will be placed upon. You then use the image that came before it as a guide to creating the next image. Remember, these images are all going to be animated and they need to be related to each other somewhat or the final animation will look way too jumpy to be enjoyed.

Make sure that banner1.gif through banner6.gif also end up in the same directory as the other images you have made. It's a little time consuming, but not as scary as you first thought, right?

Copy and Paste
Performing the Copy
Performing the Paste
Tearing the Ticket

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date