GirlTECH | Goals | Schedule | Participants | Materials
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:
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
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!
Back to Top
pages were developed through TeacherTECH, the teacher professional development
component of GirlTECH, which
is sponsored by the Center for Excellence and Equity in Education (CEEE) with
support from the National Science Foundation through EPIC.
Copyright © 1995
-2006 by TeacherTECH
Friday, June 2, 2006 12:38 PM
URL = http://teachertech.rice.edu/Materials/TeacherTECH/