Editing scanned images using Photoshop

| ACG Home | Instructor Home | Class Home | list of tutorials |

Photoshop is the most widely used tool for editing images such as the ones you scanned--generally known as raster, or bitmapped, or paint images. Photoshop provides direct access to the colored dots (pixels) that make up the picture, so that you can modify each one without necessarily affecting surrounding dots. This type of operation is known as image processing.

The features and capabilities of Photoshop are extremely numerous, but there are some basic types of operations that stand out. In working with your scanned image, you can choose any combination of these features:

• Painting (creating new image elements)
• Image compositing (adding and removing elements)
• Geometric transformations (changing the shape of objects)
• Color and exposure corrections (changing the brightness, contrast, and color balance)
• Special effects (a variety of image manipulation tools)

Regardless of how you choose to work on your scan, once the picture is complete you must convert it to a web-compatible format, then place it in PageMaker. Finally, you need to re-generate your html file and upload it, along with the converted image file, to the server.

Basic Operation:

1. Resetting the program to factory defaults: before starting up Photoshop, it is better to trash the file 'Adobe Photoshop 3.0 Prefs', found in the 'Preferences' folder inside the System Folder.
   • This is only recommended in a computer lab setting, where the previous user of Photoshop on that particular computer might have left the program in an unusual state.
2. Recovering from mistakes: like most other programs, Edit-->Undo will recover from the last editing operation only. You can retrace your steps further back using File-->Revert (provided you had previously saved a satisfactory version of your work in progress).
3. Selecting parts of the image: before most commands can be used, you must have selected the part(s) of the image that you want to work on.
   • To select an irregular shape, trace its outline using the lasso tool.
   • For a box-shaped selection, use the marquee tool.
   • To select an oval or circular shape, optio-click the marquee icon in the toolbox to reveal the elliptical selection tool.
   • To add to the current selection, make an additional selection while holding down the Shift key.
   • To deselect portions of the current selection, use any selection tool with the Command (Apple) key down.
   • To turn off the current selection, click outside its outline using any selection tool (or use the command Select-->None).
   • More sophisticated selection tools are covered in the Photoshop class.

Painting

1. Choose any of the painting tools in the toolbox: Pencil, Brush, Airbrush, Line.
2. Pick the size and shape of your tool from the Brushes palette (if not visible, use Window-->Palettes-->Show Brushes)
3. Choose the color of your tool from the Swatches palette (if not visible, use Window-->Palettes-->Show Swatches)
4. Drag the cursor in the document window to draw.
5. Erase to the background color with the Eraser tool. The background color is initially white, and can be changed by Option-clicking in the Swatches palette.

Image compositing

1. To remove the background of your image so that the grey of the web page can show through:
   • Double-click the name ('Background') of the only item listed in the Layers palette (if not visible, use Window-->Palettes-->Show Layers). In the dialog that appears, click 'OK' .
   • With 'Layer 0' highlighted in the Layers palette, make sure that 'Preserve Transparency' (in the same palette) is not checked.
   • Use the Eraser tool to remove the background (after choosing an appropriate size and shape from the Brushes palette). The grey checkerboard which is revealed indicates the parts of the image which will be transparent in the final output.
2. To enlarge your work space (this may be useful later to make room for distortions or additional elements):
   • Image-->Canvas Size. Change the Width and Height units to pixels, and enter the new size (don't overdo it, remember that we want to keep the file size small).
   • The position of the gray box in the grid at the bottom of the dialog indicates the position of the current image in the new workspace. Click to reposition it as needed.
   • Click 'OK'
3. To magnify or shrink your image (shrinking may be necessary to bring the file size down):
   • Image-->Image Size. Change the Width and Height units to pixels, make sure 'Proportions' is checked and 'File Size' is unchecked.
   • Enter the new width (the height will adjust proportionally). Keep an eye on the new size in K so it doesn't get too large. Click OK
   • Keep in mind that once you shrink the image, some of its detail is lost and cannot be recovered by re-magnifying. Make a backup copy of the picture at the original size.
   • If you find that you need to magnify the picture by more than 10-15%, you are better off re-scanning, since the enlarged image will look rather out of focus.
4. To crop your image (this also may be necessary to reduce file size);
   • Choose the Crop tool in the toolbox (4th from the top, on the left)
   • Drag a selection box enclosing the part of the picture that you want to keep.
   • Drag the small square handles that appear at the corners of the selection to adjust its size.
   • To proceed to crop, click inside the selection ("gavel" cursor); if not, click outside ("slashed circle" cursor).
   • Like shrinking, cropping is irreversible (parts of the image are tossed out). Keep a backup copy.
5. To combine parts of different pictures:
   • Arrange the windows with the pictures side-by-side.
   • Make a selection in the starting picture (make sure that the correct layer, if any, is selected).
   • Drag the selection to the window of the destination picture. While the selection is still active, reposition it as needed (once you deselect, the new image element replaces whatever was underneath it)
   • If it is inconvenient to open both pictures at the same time, you can also use the Edit-->Copy and Edit-->Paste commands that you used for text editing.
   • You can duplicate a detail within a picture by dragging its selection while holding down the Option key.

Geometric transformations

1. Make a selection (check that the correct layer, if any, is selected)
2. Use any of the commands in the Flip, Rotate, or Effects submenus of the Image Menu
3. Drag the small square handles that appear at the corners of the selection
4. If happy with the result, click inside the selection ("gavel" cursor); if not, click outside ("slashed circle" cursor)

Color and exposure corrections

1. Make a selection (check that the correct layer, if any, is selected)
2. Bring up the exposure controls with Image-->Adjust-->Brightness/Contrast. Make sure 'Preview' is checked. Drag the sliders as needed. Click 'OK' when done, or click 'Cancel' to reset.
3. Bring up the color controls with Image-->Adjust-->Hue/Saturation. Make sure 'Preview' is checked. Drag the sliders as needed. For a monochrome effect, check 'Colorize'. Click 'OK' when done, or click 'Cancel' to reset.
4. Use any of the commands in the Map submenu of the Image Menu for exposure effects.

Special effects

1. Make a selection (check that the correct layer, if any, is selected)
2. Use any of the commands in the Filter menu
3. Since the purpose and operation of the filters varies widely, the only appropriate advice is to make a copy of your image before you begin, then proceed to experiment to your heart's content. Keep in mind that many filters will completely destroy your image--that backup copy is really important.
4. Most filter commands will bring up a dialog with controls and a preview window. Adjust the sliders and other controls based on what you see in the preview. Some filters will also show you the effect of your adjustments directly in the document window, provided 'Preview' is checked (for large selections and processor-intensive filters, you may want to uncheck this option to speed up operations). Click 'OK' when done, or click 'Cancel' to reset.

File conversion

1. First, decide on a file format. Of the two formats readily viewable using most browsers, JPEG is generally more appropriate (smaller file size, better image quality) for photographs and other continuous tone images. GIF works better for images with large areas of solid color, such as charts, diagrams, logos, etc. However, if you intend to drop the background of your photograph, then you must use GIF, since transparency is currently not supprted in the JPEG standard.
2. If you did not erase the background to make it transparent (the Layers palette shows a single italicized 'Background' item):
   • File-->Save As.
   • Enter filename with this format: your last name, underscore, your first name's initial, period, the extension 'jpeg' (without quotes, all lowercase). In Sam Sample's case, the filename would be 'sample_s.jpeg' (again, without quotes).
   • From the 'Format' pop-up menu, select 'JPEG' (if JPEG is greyed out, you have used unallowed features in your image: make sure that you don't have extraneous items in the Layers, Channels, and Paths palettes, and that 'RGB Color' is checked in the Mode menu).
   • Click 'Save'. In the JPEG Options dialog, choose 'Medium' image quality and click OK.
   • Select the icon for your JPEG file in the Finder, and use File-->Get Info to check that its size is not much larger than 30K. If it is, go back to Photoshop and repeat the conversion process, cropping/scaling the image and/or choosing a lower image quality setting.
3. If you did erase the background to make it transparent (the Layers palette shows one or more non-italicized  items):
   • Check that 'RGB Color' is still checked in the Mode menu, then File-->Export-->GIF89a Export.
   • Click 'Load' and open the document 'WEB216 CLUT' (it's in the 'Color Palettes' folder inside the Photoshop folder on the hard drive). The name of the color look-up table you loaded will appear selected in the 'Palette' pop-up menu. Make sure 'Interlaced' is checked. Click 'OK'
   • Enter filename with this format: your last name, underscore, your first name's initial, period, the extension 'gif' (without quotes, all lowercase). In Sam Sample's case, the filename would be 'sample_s.gif' (again, without quotes). Click 'Save'.
   • Select the icon for your GIF file in the Finder, and use File-->Get Info to check that its size is not much larger than 30K. If it is, go back to Photoshop and repeat the conversion process after cropping and/or scaling the image.
4. In both cases (JPEG and GIF), you will lose image quality in the conversion process. Make sure to keep an unconverted copy of your image in case you want to make additional edits later on.

Placement in PageMaker

1. Make sure that the GIF or JPEG file you created in Photoshop is in the exact same folder as the PageMaker document you worked on in the past sessions.
2. Start up PageMaker (you may need to quit Photoshop first to free up memory), and re-open your PageMaker document.
3. Choose the text ('T') tool in the toolbox, and use it to place the insertion point in the text block where you would like to see your picture.
4. File-->Place. Find and click on the name of your GIF or JPEG file. Make sure that 'As Inline Graphic' is checked, then click 'OK'. Note that the picture will appear much worse than it really is because PageMaker displays a low-resolution preview for increased speed: this is not going to affect the final result.

Updated HTML file

1. Utilities-->PageMaker Plug-ins-->HTML Author. Click on the 'Contents' tab.
2. In the list on the left, click on the title of your document. Verify that all the settings are still in proper working conditions.
3. Click 'Export HTML'. PageMaker will notify you of the progress of the operation. Click OK when completed.
4. Don't forget to save. When all done, use File-->Quit to exit PageMaker.
5. Test the updated '.html' file by dragging and dropping it on the icon of Netscape Navigator.
6. If everything is fine, follow the instructions from previous sessions to log on to the file server 'GX' and to locate the drop folder in the class folder.
7. Drag both the updated version of your HTML file and your converted picture file (GIF or JPEG) to the drop folder.
8. Before leaving, make sure to copy your PageMaker and Photoshop files back to your floppy disks.

Additional Info:

• The complete manual for Photoshop, in Acrobat format, is available on the ACG lab file server (GX), in the Manuals folder.
• The Art Computer Graphics program of Fullerton College offers a class entirely devoted to Photoshop, ACG132-Electronic Paint. Look it up in our class schedules..