GirlTECH | Goals | Schedule | Participants | Materials


Making a banner in Photoshop Elements

Since a banner comes at the top of each page in a site, it is the single most important part of your site's design. It sets the style and mood, the colors and fonts, and even the layout of the body text and graphics. If you create your banner with care, the rest of your design decisions will easy. The following directions will help you make a simple (but oh so important) personal homepage banner in Photoshop Elements 3.0.

1. Create a folder in your account called imagedrafts. This is where you will save all the graphics and rough drafts used for your banners.

2. You will need at least one graphic to define your banner. Since you are doing a personal homepage banner, the picture should represent who you are as a teacher. You can scan or download personal photos or you can take pictures off the Internet.

To take them off the Internet, search in Google in the Web or Images mode using such words as "free school clipart" or "free chemistry photos." Once you find the picture you want, do a right click and save the graphic in the drafts folder.

3. Inside of the Photoshop Elements Editor,
do a File / New / Blank File.
In the New popup box fill in the following:

Name: mybanner
Preset: Custom
Width: 640 pixels
Height: 150 pixels
Resolution: 72 pixels/inch
Color Mode: RGB
Background Contents: White

4. Do a File / Save As and save this banner in the drafts folder as mybanner.psd.

5. Open the graphic that you want to insert into your banner. You can put more than one picture into your banner by repeating steps 6 through 9

6. Select the part of the graphic you want and drag it into your banner.

Notes on selecting: The two most useful tools for selecting an object in a picture are the Polygonal Lasso Tool and the Magic Wand.

To use the Polygonal Lasso, select it from the row of tools to the left of the screen. Click on the edge of the object. You will see a small circle, and this is the start of your selection.

As you move your cursor you will see a line stretch out from the anchor. Click again on the object and you are anchored again. Now cut the object out by doing clicks and drags in this manner. If you make a mistake during this process, press the Esc key and/or
Control D.

When you reach full circle, the object will be surrounded by a moving line of dashes (dancing ants.) Click on the Move Tool and drag the object into the banner. The selection will make its own layer and have a box for sizing around it.

The Magic Wand is useful when there is a solid background behind your object. To select the object, click the Wand on the background. This selects the background, but don't worry. Go up the Select menu and click on Inverse. Now the object is selected, not the background. Drag the object into banner with the Move Tool.

Notes on mistakes: Unlike in life, mistakes are easily undone in Photoshop Elements.

Use Control + Z to undo a single mistake.

Use the History Palette if at any time you realize that you have made several mistakes. This palette lists your last 20 steps, but by clicking on the last correct step, you can undo all the bad steps and start over again.

7. Drag the object into the banner and it will make another layer. You can see these layers in the Layers Palette on the right side of the Elements window.

If you can't see the Layers Palette, select Layers from the Windows menu. Double click on the words Layer 1 and change them to something descriptive of the object. You will notice that the other layer says Background.

Notes on layers: Continually check on which layer you currently have highlighted on the Layers Palette. You can't work with an object or text unless you have selected it's layer.

8. Resize your object by holding Shift down, grabbing one of the corner boxes and dragging in or out. Generally, you would only want to make the object smaller. Enlarging an object often distorts or pixelates it.

9. Clean up the object with the Eraser or the Magic Wand. First click on the object's layer so that it is highlighted in the Layers palette. To erase with the Eraser Tool, select an appropriate brush size at the top of the screen and then erase by dragging your mouse.

To erase with the Magic Wand, click on an area you want to erase and then press the delete key. The selected area disappears and the background shows through. Keep doing this as long as it is practical. Erasing with the Magic Wand erases best when there are large areas of one color.

10. To color your background, choose a color by clicking on the Foreground Color square under the tools at the left of the screen. When the Color Picker dialog box opens, select the color family by dragging the markers on the color column. Then click your cursor on the exact shade in the large color box.

If you want a particular color from the object on your banner, take move your cursor to your banner and click on the color. Note that when you do this, your cursor turns into an eyedropper. Once the color is selected, select OK in the dialog box.

Now click on the background layer in the Layers palette and select the Paint Bucket Tool. Click on the banner and the "paint" from the bucket will spill into the background.

11. To add text, select the Horizontal Type Tool and then click in the general area where you want the words to go. When you do this, a blinking line with a square dot will appear on the banner. Choose a color for your text in the Foreground Color box. Choose a beginning size and font at the top of the screen.

Now type in your words. Highlight the words and then click on a font in the font window. Press the up and down arrow keys until you find the font you want. You may also change the size and color while your words are highlighted.

Often it is best to divide your text up into several layers. To get a new text layer, click you cursor in another area and go through the same steps. Once the text layers are made, you can move them around by clicking on their layer, selecting the Move Tool and dragging the words where you want them. To redo the text, click on the T in their layer.

12. How you save your banner is very important. First do a regular Save to save your original mybanner.psd. Then to get your banner in a form that will show on the web, do File / Save for Web. In the dialog box that appears, you will see two versions of your picture. The original mybanner.psd will be on the left and the new version you are making is on the right.

If your banner is a simple drawing, you will select GIF in the upper right area. If there is a photo or a drawing with a lot of shading, then save it as JPEG. If you save it as JPEG, you will have to select the quality. In general for a JPEG, select the highest quality possible that does not make the file size over 40K. You can see this file size in the lower left hand corner of the JPEG picture.

Leave all the other options alone and click OK. Locate the lessons/mytopic/images folder and save it there as mybanner.jpg or mybanner.gif.

13. You're finished!