Photoshop LE 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: http://www.adscape.com/eyedesign/photoshop/four/index.html http://www.yorku.ca/teachtec/archive/summer96/photoshp/toc.htm http://www.andyart.com/photoshop/index.html http://www.jetcity.com/~davidh/psbooks/photobooks.html - Reviews of Photoshop Books 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.   Width - The width of your canvas. Make sure pixels is selected as it is the standard unit of measurement for the web. For a banner that spans the top of you web page, I would type in a number between 500 and 550. Height - The height of your canvas. It's better to have too much height because any excess can be cropped (cut off) when it's finished. Resolution - Should always be set at 72 pixels per inch when creating graphics for the web. Mode - Should always be RGB when designing for the web. Contents - This is the background color of your canvas. Either select white or background color. If background color is selected it makes the background color the same color as the second color swatch on your tools palette (it is usually set to white by the application. To change it, click the arrow that is between the two color squares. This brings the background color to the front. Select a color from your color palette and then click the arrow again to send it to the back). - 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.