Photoshop LE is a light version of Adobe Photoshop and used for creating and editing graphics. This module is meant as an introduction to Photoshop, not a full tutorial for the application. We suggest learning this software by reviewing the application tour, the software manual, and through lots of experimentation and use. To further provide instruction, here are some online instructional sites for Photoshop:
Making a Banner in Photoshop
Getting Started:
- Open Photoshop by double-clicking the application icon in the Photoshop LE folder
- When Photoshop opens, you'll notice a number of palettes that appear. These palettes contain the tools used to create graphics and information about the different aspects of the graphics being worked on. Photoshop palettes can be hidden or displayed by going up to Window and dragging down to the appropriate palette you wish to open/close.
- To begin a graphic, click on File at the top of the screen and
drag down to New. This opens a box that allows the 
dimensions of the canvas/background for
the graphic to be configured. Ask yourself - how big of a canvas do I
need to make this picture? Remember that designers usually consider the
viewable area for a single web page on a monitor to be 580 pixels wide
by 430 pixels high. Create your graphics accordingly. As a general rule,
it's better to start with too big of a canvas because any excess can be
removed at the end.
- When these dimension are configured, press ok and you'll see your canvas appear.
Creating the Banner:
Photoshop's defining quality is the ability to work with layers. Layers allow an image's attributes to remain separate, yet gives a detailed idea how the whole image looks. It is wise to place each new attribute of an image on a new layer. It is also a good idea to save all of your images as both a Photoshop file and either a JPG or Gif for the web. A graphic saved as a Photoshop file retains its layers allowing a user to go back and revise individual elements of a graphic instead of having to create the whole thing from scratch.
- The first step is to create a new layer. On the Layers
Palette, you'll see a triangle located at the opposite end of the
layers tab. Click on it and drag down to New Layer. Press okay
and you'll notice that the layers palette will go from the picture shown
to the left that only has a background layer to one that has two layers
listed. Any layer can be activated by simply clicking on its tab on the
layers palette. Any changes to an image or anything inserted will be executed
on the layer selected at that moment. For this next step, make sure Layer
1 is clicked and not the background layer. Generally, nothing should
ever be placed on your background layer because it is the only layer that
cannot be moved or edited once any content has been placed directly on
it.
- After clicking on Layer 1, select the Square
Marquee from the tools palette. Marquees allow you to define areas
on your canvas either to fill or as a way of selecting portions of a graphic.
A marquee is displayed on the screen as a series of "marching ants"
or blinking lines. After selecting the square marquee tool (as is done
to the graphic to the left), put your cursor on your canvas, hold down
your mouse button, and drag across the canvas to create the shape of your
rectangular banner. When you have about the shape you want for your banner,
let go of the mouse button. You'll notice that the outline of the shape
you just drew remains on the canvas in the form of the "marching
ants". Your canvas should look something like the graphic below:
- As mentioned earlier, you can select colors from the Color Palette
and the colors you've selected are displayed on the tools palette. In
the image above of the tool palette, you can see two color squares - a
red and a white square. The red square is called the foreground color
and is the color active active at all times. The color in the back (the
white color) is the background color. You can move between the colors
by clicking on the two headed arrow. This will bring the background to
the foreground and make it active. 
Select a new color by clicking
on a color on the Color Swatches. If the color swatches aren't
visible, click on the swatches tab at the top of the color palette. Select
a color for your banner. In the graphic to the left, I've selected blue.
- Once the color for the banner is selected, go up to Edit at the top and drag down to Fill. The Fill utility fills in whatever is selected on the layer. If nothing is selected, it fills the entire layer with the selected color. Because we have selected or drawn a rectangle with our marquee tool, the fill utility will fill it with the color we've selected. Press okay and the rectangle will turn to the selected color. Deselect the rectangle by going up to Select at the top and dragging down to None or by clicking on the canvas outside of the selected rectangle with the marquee tool selected. Your canvas should look something like the one below.
- The rectangle can be moved on the canvas by selecting
the Move Tool which is the arrow on the tool palette right next
to the marquee tool. The move tool moves whatever is on the layer that
is active at the moment. Click on your rectangle, hold down the mouse,
and move the rectangle to wherever it looks good on the canvas. Release
the mouse when it is in position.
Adding Text:
- Select the Type Tool which is the solid T
on the tool palette.
- Select a color for the text of your banner from the color swatches
and make sure it is the foreground color on the tool palette (as the color
red is in the image to the left). Make sure you've select a color that
will show clearly on the color of the banner background. After the color
is selected and the type tool is selected on the tool palette, click somewhere
on the canvas to bring up the text editor. Like a word processor, the
text editor allows you to type text and configure the appearance of that
text. Type some text for the banner. 
Highlight the
text and change the size, font, or any of the other attributes. Always
make sure Anti-Aliasing is checked as this smoothes any rough edges
in text fonts. When you're happy with the appearance of your text, press
OK and the text will appear on your palette. Notice that the text
takes the color active in the foreground and a New Layer is automatically
created for the text. You can position the text on your banner by again
selecting the Move Tool and moving the text around. Your canvas should
look something like the image below:
Fun with Filters:
Filters can be used to modify attributes of a graphic in numerous ways - artistically, to blur, to sharpen, or to totally warp. The best way to learn what filters do is to create an element in a graphic and then try each photoshop filter on it.
- Make sure the layer with the banner text is selected and click on Filter at the top of the page. Drag down to Stylize and then over to Find Edges. The text for the graphic should shift. You can see that the text for the graphic above changes to the text below when find edges is employed.
Cropping and Saving:
- The banner is now ready to be prepared for the web. The first step is to crop the image. Cropping removes any extra area from the image so only the parts of the image we want to appear on our web page remain. To crop an image, select the square marquee tool and create a box around the portion of the image you want to remain after cropping (as shown in the image above).
- When the "ants" are dancing around the portion of the image you want to remain, go up to Image at the top of page and drag down to Crop. You'll see that everything on the outside of the selection has been cut. If you don't like what has been cut, go up to Edit and drag to Undo - this will undo the last action you have taken. Notice that even though the image has been cropped, the individual layers remain.
- We're going to save two version of this graphic - one as a photoshop file and one as a JPG for the web. The photoshop file will allow us to make changes on the graphic at a later date by retaining the file's layers.
To Save as a Photoshop File:
- Go up to File and drag down to Save As. "Save As" allows for files to be saved as different kinds of formats. Always save one version of the file in photoshop format so that the separate layers are retained. You'll see the format of the file displayed at the bottom of the save box. Make sure it listsPhotoshop or .psd. If it doesn't, click on the format menu and drag to that setting. Give your file a one word file name and hit the Save button.
To Save for the Web:
- Newer versions of Photoshop allow graphics to be instantly saved as any type of GIF or JPG, but the light version of Photoshop is restricted to saving as JPG's.
- Go up to File and drag down to Save As again. 
Make sure that for format, JPEG is selected.
If it is not, click on the tab and select it. Then give the file a name
and add a .jpg to the end of it. Find the location you would like
to save the file and press Save. You'll then be presented with
a box that allows the quality for the image to be determined. The higher
the quality selected, the bigger the image size. You want to select the
image quality setting that provides the smallest image with no loss in
appearance. Usually a medium setting (4 or 5) is a good balance of image
quality and size. Select your quality size and press OK. The image
is now ready to be placed on your web page.