Editing Scanned Images

| previous tutorial | ACG home | Instructor home | Class home | List of tutorials | next tutorial |

Before beginning the project

• If you are working in the ACG Lab click to read these important notes before you start the tutorial. This section of the directions contains information that pertains specifically to the way the ACG Lab operates. It may not apply if you work on the project elsewhere.
• If you need to get for yourself the programs mentioned in this tutorial:
  • Photoshop is a commercial program by Adobe Systems.

Tutorial Description

• Photoshop is the most widely used tool for editing raster, or bitmapped, or paint images, such as the pictures you scanned and which were described in the previous tutorial.
  
• The capabilities of Photoshop are extremely numerous, and this beginner tutorial won't attempt to cover them all. After learning some basic techniques, you can choose to work with your scanned image using any combination of these features:
  • Image compositing (adding and removing elements)
  • Painting (creating new image 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 modify the HTML for your web page to call up the image.

return to top

Basic Techniques

• Resetting the program to factory defaults: before starting up Photoshop, it is recommended that you trash the folder 'Adobe Photoshop 6 Settings', found in the 'Preferences' folder inside the System folder.
  • After resetting, Photoshop will ask if you want to customize your color settings. Just click 'No' to dismiss the dialog.
• Opening scanned files: double-clicking the icon of your scanned image file will generally not work, since the computer will look for the scanner program to open the picture. Instead, drag the picture file icon and drop it on Photoshop's icon.
• Recovering from mistakes: like many 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).
  • Photoshop does provide the equivalent of additional Undo steps through the History palette (if not visible, use Window-->Show History). The palette lists the last several operations with the name of the tool used--simply click on an entry to return to the way the document was when that tool was used.
  • Since we won't be able to cover this feature in detail in the time available, make sure to monitor the palette closely as you work--so that you know which operations can be undone.
• Changing your view of the document: to zoom in and see the document up close, use the magnifier tool and click in the document. Option-click with the same tool to zoom out.
  
  • Use the scroll bars to see parts of the document beyond the window's edges. As an alternative, use the grabber hand tool and drag in the document window.
    
• 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 irregular shapes with straight edges, click and hold on the lasso icon in the Tools palette to reveal the polygonal lasso tool.
      
  • For a box-shaped selection, use the rectangular marquee tool.
    
    • To select an oval or circular shape, click and hold on the rectangular marquee icon in the Tools palette to reveal the elliptical marquee tool.
      
  • To turn off the current selection use the command Select-->Deselect. Also, creating a new selection turns off the current selection.
  • To add to the current selection, make an additional selection while holding down the Shift key.
  • To subtract from the current selection, use any selection tool with the Option key down.
  • Photoshop also provides more sophisticated selection tools (see the online documentation), but for our simple project these will suffice.

return to top

Image Compositing

• To remove the background of your image (so that the color of the web page--or another image--can show through):
  • Find out what type of image you have (in the Mode submenu of the Image menu). If the mode is 'Bitmap', change it to 'Greyscale'; if it is 'Indexed Color', change it to 'RGB Color'; other modes can be left as they are.
  • Double-click the name ('Background') of the only item listed in the Layers palette (if not visible, use Window-->Show Layers). In the dialog that appears, click 'OK' . The name changes to 'Layer 0'.
    
  • With 'Layer 0' highlighted in the Layers palette, make sure that 'Lock' (at the top of the same palette) is not checked.
  • Choose the Eraser tool from the Tools palette.
    
  • Pick the size and shape of the eraser from the Brush pop-up menu in the Options palette (if not visible, use Window-->Show Options).
    
  • Use the Eraser tool to remove the background. The grey checkerboard which is revealed indicates the parts of the image which will be transparent in the final output.
    
• 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'
  • Note that this command does not change the size of the picture elements themselves--to do so you have to use Image Size (see below). Canvas Size only changes the amount of space around the picture elements.
• To magnify or shrink the elements in your image (shrinking may be necessary to bring the file size down):
  • Image-->Image Size. Make sure 'Constrain Proportions' and 'Resample Image' are checked (and that 'Bicubic' is selected in the 'Resample Image' pop-up menu). Change either the 'Width' or 'Height' (the other will adjust proportionally) in the 'Pixel Dimensions' box (the content of the 'Document Size' box can be ignored for this project).
  • Keep an eye on the new size in K (at the top of the dialog) so it doesn't get too large. Click OK when done.
  • Keep in mind that once you shrink the image, some of its detail is lost and cannot be recovered by re-magnifying.
    • If you are not sure about what level of detail you may need in your image, click 'Cancel' now. Make a backup copy of the picture at the original size (File-->Save a Copy), then go back to the Image Size dialog.
  • 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.
• To crop your image (this also may be necessary to reduce file size):
  • Choose the Crop tool in the Tools palette.
    
  • 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 rotate the image as you crop it, move the pointer outside the selection (it will turn into a curved arrow), then drag.
  • To proceed to crop, press the 'Return' key. If you don't want to crop after all, press the 'Escape' key instead.
  • Like shrinking, cropping is irreversible (parts of the image are tossed out). Keep a backup copy.
• To combine parts of different pictures:
  • Arrange the windows with the pictures side-by-side.
  • Make a selection in the starting picture. In the Layers palette, make sure that the correct layer is highlighted--in case you have more than one.
  • With the selection tool still active, hold down the Command (Apple) key, and drag the selected portion of the original picture to the window of the destination picture. The selection will be added to the destination document, in a new layer.
    • To reposition the new layer and its image content, use the Move tool
      
  • If it is inconvenient to open both pictures at the same time, you can also use the same 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 and Command keys. Note that this technique will not automatically create a separate layer--when you deselect, the pixels underneath the selection in the current layer will be wiped out.

return to top

Painting

• Choose any of the painting tools in the Tools palette: Airbrush, Paintbrush, Pencil (to see the Pencil tool, click and hold on the Paintbrush tool icon).
  
• For each tool, choose an appropriate size and shape from the Options palette (Window-->Show Options)
• Choose the color of your tool from the Swatches palette (if not visible, use Window-->Show Swatches)
  
• In most cases, you will want to turn off any selections (Select-->Deselect) before you start painting. When a selection is active, painting tools leave a mark only within the selection. This can be used as a 'frisket' to protect parts of the picture from unintended overpainting.
  
• Create a new layer: display the Layer palette menu (press and hold on the triangle in the upper-right corner of the palette), choose the 'New Layer' command, optionally enter a name, then click 'OK'
  • Drawing on a separate layer protects the scanned image. If you later erase some of your painting, items on other layers won't be affected.
• Make sure the name of the new layer is highlighted in the Layers palette.
• Drag the pointer in the document window to draw.
• Use the Eraser tool to remove any mistakes.
  • The eraser tool is primarily used to determine transparency. However, it can also be used to paint with the background color if:
    • Either the special item 'Background' (with the name italicized) is available in the Layers palette, and its name is highlighted before using the eraser...
    • Or any other layer is selected, and the 'Lock' checkbox (in the Layers palette) is checked, locking the transparent areas of the layer.
  • The background color (shown at the bottom of the Tools palette) is initially white, and can be changed by Option-clicking on a color in the Swatches palette.
    

return to top

Geometric Transformations

• Make a selection (if necessary, check that the correct layer is selected).
• Use any of the commands in the second section (Scale through Perspective) of the Transform submenu of the Edit menu.
• Drag the small square handles that appear at the corners of the selection.
• If happy with the result, press the 'Enter' key; if not, press the 'Escape' key. Note that deselecting will again wipe out underlying pixels--no new layer is automatically created.
• These transformations will also degrade the image, so you do not want to perform them repeatedly. The transformations listed at the bottom of the Transform submenu (Rotate 180° through Flip Vertical) do not cause this problem.

return to top

Color and Exposure Corrections

• Make a selection (if necessary, check that the correct layer is selected).
• 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.
• 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 return to the uncorrected state of the document.

return to top

Special Effects

• Make a selection (if necessary, check that the correct layer is selected).
• Use any of the commands in the Filter menu
• Since the purpose and operation of the filters varies widely, the only generally applicable 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.
• 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 return to the unfiltered state of the document.

return to top

File Conversion

• First, make sure you have saved the edited file one last time (File-->Save), so you have a good copy without compression artifacts.
• Second, decide on a file format. The two formats readily viewable using most browsers are JPEG and GIF:

  • 	JPEG is generally more appropriate (smaller file size, better image quality) for photographs and other continuous tone images.
    JPEG (11,336 bytes)
    GIF (38,630 bytes): larger file size	GIF (16,490 bytes): worse image quality

  • 	GIF works better for images with large areas of solid color, such as charts, diagrams, logos, etc.
    GIF (4,949 bytes)
    JPEG (14,995 bytes): larger file size	JPEG (4,283 bytes): worse image quality

  • Note: if you intend to drop the background of your photograph, then you must use GIF, since transparency is currently not supported by the JPEG standard.
• Use File-->Save For Web to display the 'Save For Web' dialog.
  • Make sure that the 'Optimized' tab at the top of the dialog window is selected.
  • From the 'Settings' pop-up menu at the top-right, choose one of the presets for the format you selected.
    • Note that for GIF files you can choose a preset which uses the cross-platform Netscape color palette.
  • For each setting, observe the quality of the image and the estimate of the download time (bottom-left). Choose the setting you consider most tolerable for your viewers.
• To proceed to save the file, click 'OK'. The 'Save' dialog box will appear.
  • Enter filename with this format: your last name, underscore, your first name's initial, period, the extension 'jpeg' or 'gif' (without quotes, all lowercase). In Sam Sample's case, the filename would be either 'sample_s.jpeg' or 'sample_s.gif' (again, without quotes).
  • Choose 'Images Only' from the 'Format' pop-up menu. The other choices in the dialog are not relevant for our project.
  • Click 'Save'.
• Before closing your image file, use Image-->Image Size to find out the size of your image (width and height, in pixels), and make a note of it for later use.
• In both cases (JPEG and GIF), you will lose image quality in the conversion process (as well as useful features such as layers). Make sure to keep an unconverted copy of your image in case you want to make additional edits later on.

return to top

HTML Image Entry

• On the web, each media item is stored in a separate file, which is then called up by an appropriate tag in the HTML code.
• Updating the HTML file:
  • Start up Simple Text (you may need to quit Photoshop first to free up memory), and use File-->Open to re-open the HTML file you created from PageMaker in the previous sessions.
  • Click with the pointer to place the insertion bar in the text at the location where you would like to see your picture.
    • For the tag to work properly, make sure the insertion point is not within a piece of text enclosed by angle brackets ('<' and '>').
    • Also, make sure the insertion point is within the BODY section of the file (after <BODY> and before </BODY>).
  • Enter the following HTML code:
    • a left angle bracket (shift-comma)
    • followed by IMG SRC=
    • followed by the name of your GIF or JPEG file, enclosed in quotes
    • followed by a space
    • followed by WIDTH=
    • followed by the width of your picture in pixels
    • followed by a space
    • followed by HEIGHT=
    • followed by the height of your picture in pixels
    • followed by a right angle bracket (shift-period)
    • as an example, Sam Sample's HTML file contains this line
      <IMG SRC="sample_s.gif" WIDTH=350 HEIGHT=250>
  • Don't forget to save. When all done, use File-->Quit to exit SimpleText.
• Testing the revised HTML file
  • Make sure that the GIF or JPEG file you created in Photoshop is in the exact same folder as the HTML file you just modified.
  • Test the updated '.html' file by dragging and dropping it on the icon of the web browser program. Wen the web browser loads the HTML file, it finds the tag you added and it loads and displays the image as well.
  • Your image file(s) and the revised HTML file are now ready to post to the web site.

return to top

Notes

Raster/Bitmapped/Paint Images

• Photoshop provides direct access to the pixels that make up a raster picture, so that you can modify each one without necessarily affecting surrounding dots. This type of operation is known as image processing.

return

Trashing Preferences

• This makes it easier to follow the tutorial by returning to predictable settings. A previous user of Photoshop on the same computer might have left the program in an unusual state. The state of the program is preserved, and reloaded the next time Photoshop is used.

return

Cross-platform Netscape Colors

• Different types of computers with low-end displays (see the discussion of Indexed Color in the previous handout) will offer different default selections of colors (called the system palette for that type of computer). If a color used in a GIF file is not available, the apparent quality of the image will be degraded by artifacts (dot pattern used to simulate unavailable colors).
• To avoid this problem, the people at Netscape found a selection of colors available by default on both Macintosh and Windows computers (the two most popular platforms). By using only these 216 colors, when the GIF file is downloaded to most computers it should look the same as the designer saw it.
  • Note that use of this palette will not solve color-calibration problems, which can make all images appear to change from computer to computer--even of the same make and model.
• For more details on this issue, see the Color Palettes for the Web page. There you will also find links to other info regarding the use of color on the web.

return

• On ACG Lab computers, the program Photoshop is on the startup drive, inside the Paint folder. The program SimpleText is on the startup drive, inside the Text folder.
• After completing this step of the project, follow the instructions from previous sessions to log on to the file server 'ACG' and to locate the 'Web Pages-Put in Here' drop folder in the class folder. Drag both the updated version of your HTML file and your converted picture file (GIF or JPEG) to the drop folder. Before leaving, make sure to copy your HTML and Photoshop files back to your Zip disks.
• The online documentation for Photoshop is available on the 'ACG' lab file server, in the 'ACG_DOCS' volume.
• The Art Computer Graphics program of Fullerton College offers a class entirely devoted to Photoshop, ACG132-Electronic Paint. Find it in the schedule of classes.

return

| previous tutorial | return to top | next tutorial |

Created 1997-09-24. Last modified 2001-09-12. This document originally at <http://www.sanedraw.com/LEARN/OVERVIEW/OV050MAC/INDEX.HTM> Copyright 2001 by Sandro Corsi.