Stroupe

Beginning Banner Techniques (Photoshop)

1. Download the image “richlighthouse.jpg” from our web site into your class folder (that is, not your “www”; feel free to create a subfolder to keep things organized), and open it in Photoshop
A. In your Web browser, right-click on the image B. from the right-click menu, choose “Save Image As…” C. browse to your class folder to save the downloaded image.

2. Create a working version of the image to edit called “richlighthouse.psd,” preserving the original version that you downloaded
A. Choose File > Save As B. From format drop-down menu, choose “Photoshop” C. Name the file “richlighthouse.psd” and save it in your class folder

3. View the image at 100%, and then fit to screen
A. Select View > Actual Pixels B. Select View > Fit on Screen

4. Duplicate the locked background layer to make sure it is editable
A. In the Layers Palette, notice that the “Background” layer shows a lock icon. This can sometimes prevent you from making changes. B. Right-click on the “Background” layer and choose “Duplicate Layer…” C. Click OK D. Make the original, locked “Background” layer invisible by deselecting the eyeball icon at the left of the layer.

5. Adjust the contrast of the image
A. Choose Image > Adjustments > Brightness/Contrast

6. Adjust the colors automatically
A. Choose Image > Adjustments > Auto Color B. So we can try to adjust the colors manually in the next step, hit control+z to undo Auto Color

7. Adjust the colors manually
A. Choose Image > Adjustments > Color Balance B. Using the three sliders, experiment with the color balance both to make the image more appealing, and to make the hues of the banner work with the color scheme of your intended page

8. Crop the Image to the Size and Shape You Need
A. Choose the Marquee Tool from the Tool Palette B. To specify a certain shape and proportion for the crop selection, set the proportions by going to the Options Palette at the top and choosing “Fixed Aspect Ratio.” C. To the right of the Options Palette, enter width and height values in pixels for the banner proportions you need. D. In the document, drag diagonally to select the area you want to keep (if you need to get rid of a selection and start over, hit control+d) E. Choose Image > Crop

9. To “Undo” at any time
A. Hit control+z B. To “step back” repeatedly, hit Command+Option+Z (Mac) or Command+Alt+Z (Windows). You can also choose Edit > Step Backward.
10. Change dimensions of the banner
A. Choose Image > Image Size B. Type in values for the width and height needed in your page design

11. Add text to the banner on a new layer
A. Choose Type Tool from the Tools Palette B. Notice in the Layers Palette that a new layer has been created for the text C. Click on image D. Type text

12. Position your text in relation to the graphic behind it
A. Choose Move Tool from the Tools Palette B. Use the Move Tool cursor to reposition the text

13. Format the color, font, etc. of your text
A. Choose the Text Tool, and highlight name B. Adjust formatting using Options Palette at the top, and/or the Character Palette: font, color, size, kerning (spacing between letters). If necessary, open these palettes by via the Window command at the top. Options Palette Character Palette

14. If Desired, Colorize the Image to Match the Color Scheme of Your Page
A. In the Layer Palette, select the layer containing the image you are using as the background (as opposed to the layer containing your text, etc.) B. From the top menu, choose Layer > New Adjustment Layer > Hue Satration. From the “New Layer” window, click OK C. In the Properties Palette, click the “Colorize” box D. Move the sliders for Hue, Saturation, and Brightness to colorize the image as desired.

15. Restack the Layers if Necessary to
A. If the image doesn’t look as you intend, try dragging and restacking the layers in the Layers Palette. For instance, your colorizing effect above may be applied to your text layer as well as your background. If that case, you’d drag the text layer on top of the “Hue/Saturation” layer so it is not covered by this effect.

15. Save richlighthouse.psd
A. Choose File > Save

16. Create an “optimized” version of the image as a .jpg in the “assets” folder of the project in which you’ll use this banner
A. Choose File > Save for Web and Devices B. Select the “4-Up” tab at the top of the window C. The “4-Up” window is divided into four panes. At the upper left is the original. Notice the file size in the lower left of the original’s pane: 3.52 Megabyts, for example, is a huge file—partly because it is in the .psd format that isn’t meant for downloading and is not even compatible with web browsers. A banner like this should “weigh” something closer to 25K if possible without losing any visual quality. 3.52 Mb is 3,604 Kilobytes and would take much too long to download. D. In the upper-right pane of the “4-Up” window is the first of three optimized versions Photoshop is displaying. Click in that upper right pane and then experiment with the settings on the right. For an image like this, start by being sure the drop-down menu under “Pre-set” is set to “JPEG,” “PNG” or whatever format you desire. E. As you change the settings, the quality of the image in the pane you’ve selected will show the results. F. The file size will show in the lower-right corner of the pane. G. When you find a setting that gives the lowest possible file size with good visual quality, choose the Save button in the top right of the window. H. Navigate to the “assets” folder (or equivalent) inside the project folder (“local root folder”) where you will be using the image on a page. You will insert the image into pages using Dreamweaver. If there are other versions of the banner in that folder, be sure to use a different filename so you don’t overwrite them!