PhotoShop 7:Creating Banners and using Layers

This lesson builds on work done in the section on editing images for the web. If you have not already done so, please review that lesson before completing this one.

In this lesson we are going to take four images saved off of the web that are large. We are then going to resize them, and then join them together side-by-side to create a banner that could be used as the top of a web-page. Below are the four pictures that we are going to be using. Save them all to your computer by right clicking on them and selecting "Save Target As..."

The final banner that we are aiming to produce should look like this:

Now, on to the lesson.

1. Open all four images in Adobe Photoshop. This can be done by going File:Open and then selecting the four images by clicking each of their names whilst holding down the Control (Ctrl) button. When they are all selected click Open.

2. The four images will now open in Photoshop. You will notice that all of them are rather large. Some may even be larger than your entire screen if you zoom in to 100%. We are going to have to make them all smaller for the banner.

3.Click on the first image and go Image:Image size. The average banner is going to be in the region of 100 pixels high, so, in the box for height, enter 100 pixels. Photoshop will automatically adjust the width so as to keep the aspect ratio.

4. Before clicking OK take note of the width that Photoshop makes the picture. We are going to need the TOTAL width of all four pictures added together, so write down the width of each one.

5. Click ok and you will see that your picture has been resized to a much smaller size.

6. Repeat steps 2 - 5 for the other 3 pictures.

7. Now that we have four pictures that are the right size, it is time to create our banner. Firstly we need to work out the dimensions of it. We know that it will be 100 pixels high. The sum total of all of the pictures' widths together should be 515. Don't worry if yours is a little off as different versions of Photoshop may resize images slightly differently.

8. Create a new image with the dimensions 100x515 by going file:new... and entering those dimensions in the window that appears.

9. Click OK and you will see a new plain white picture on your screen. This is the "canvas" onto which we are going to paste the four horse pictures.

10. Select the first horse picture for the banner by clicking on its window. Then, select the entire picture by typing Ctrl-a. You will see a border of flashing dots or marching ants appear around the picture.

11. Copy the picture to the clip-board by clicking Edit:Copy, or typing Ctrl-c

12. Select the blank banner picture and paste the first picture of the horse onto it by clicking Edit:Paste, or Ctrl-v.

13.To move the image around on the banner you will need to use the move tool from the toolbar Click and drag the image to where you want it on the banner.

14. Repeat steps 10 to 13 for the other three horse pictures.

15. Now is a good time to discuss layers. Each time you paste one of the pictures onto the banner photoshop creates what is called a layer for it. With layers you can move and edit each of the horse pictures independently. But how do you know which layer you are working with and how do you tell photoshop which layer you want to work with? If the layers window is not visible on your screen, click Window:Layers to make it visible.

16. Each image in the banner had a layer created for it by Photoshop. There is also a layer for the white background. Next to each layer's name is a small image showing you what part of the image this layer holds. In my image, Layer 4 holds the right most horse picture in the banner and Layer 1 holds the left most image.

17. Whichever layer is selected is the layer you are currently editing and will get a little paintbrush icon next to it (in this case, Layer 4.) If you have been having trouble trying to move one of the images and every time you click to move it one of the other images moves, it's probably because you do not have the correct layer selected in the Layers window.

18. The eyes next to each layer mean that that layer is visible, if you would like to make a layer invisible, click the eye. To make it visible again, click the box where the eye is once again.

19. The layer window acts like a stack for your images. If a layer is at the top of the Layers window, then it is the top layer of your image. If you want to change the order of the layers (to place one object behind another, for example) then you can click and drag the layers up and down the list to reorder them.

20. You should now have something resembling the banner I made. You can save the photoshop project so that you can edit the image later by clicking File:Save, and you can save the image to make it ready ready for the web by clicking File:Save For Web...

Last modified: 2006-12-22