Photoshop

Image: ..................

This module explores using Adobe Photoshop version 5.5 (at a novice level) to affect digital images. In the first part of this module the learner will become familiar with several areas of the program including the menu bar, toolbar and floating palettes. Areas of  concentration: 

Photoshop: program

Open the available version of Photoshop. This is how Photoshop 5.5 appears with an open document [File/Open], most versions of Photoshop will appear similar, with more or less tools and tabs in the floating palettes. Hosta.jpg is the file name of this digital image. The title bar (see below) of the image displays this information including the displayed percentage [50%] and its "mode" [RGB].

 

Hosta.jpg is an RGB or red, green, blue color channel image (modes will be discussed in more depth below). Above the image is the program menu bar, including File, Edit, Image, Layer, Select, Filter, View, Window and Help. To the left is the toolbar and to the right the floating palettes, which can be accessed through the Window menu if not displayed on screen. Each of these palettes have multiple information tabs. Notice the top palette has the Eraser Options tab open. This tab gives information about the eraser tool. Notice the eraser tool is activated (appears with the white background as opposed to the gray, non-active background) in the toolbar. Click on any other tool in the toolbar and that tools options will be display in this tab of the floating palette. 

While selecting the various tools, notice that many of them have a small arrowhead in the lower right corner. Position the mouse over a tool that has one of these arrowheads and hold down the mouse button.  A submenu of tools will appear. To access any of the new tools, while still depressing the mouse button, move the pointer to the tool of choice and release the mouse button. The new tool will replace the prior selected tool.

Another area of note is the lower information bar. 

This also shows the image percentage, as does the title bar, the uncompressed file size/working file size and information on use of the addressed tool. In this case the eraser. Click and drag to erase to background color.

Look at the Menu Bar

File: Open an image or create a new file. Save, Save As or Save a Copy; this area allows you to save your image into several file formats. Address preferences, screen settings and other items pertinent to the running of the program.

Edit: Copy, Paste, Paste Into, Cut and Clear actions are available here. Fill and Stroke-to fill a selected area or apply a border around the selected area.

Image: Mode: Bitmap, Grayscale, Duotone, Indexed Color, RGB, CYMK. Image types you can convert between. The different types to do various things and save as different file types; i.e. to save as a GIF file the image must be in the Indexed Color mode. Adjust: This area allows you to affect contrast, saturation, brightness, color, etc. Image Size: This area tells you the actual size and file size. It lets you change both of these dimensions. Canvas Size: Change the size and area of you image. Crop: Crops a selection.

Layer: Works in conjunction with the Layers palette. Transform is one of the more used areas under this menu item. It allows you to: Scale, Rotate, Skew, Distort, Perspective and Flip (Vertical and Horizontal).

Select: All, None and Inverse. Inverse is very useful because sometimes it is easier to select areas other than the one(s) you want to affect. Color Range. Feather, softens the edge of your selected area. Grow, selects pixels close to ones already selected. Similar, selects like pixels throughout the image.

Filter: Applying filters is one of the most interesting way of affecting the image. You can Sharpen an image or turn it into a mezzotint drawing. This is an area that is fun to experiment in to see all of the effects the various filters can give to an image or a particular layer.

View: Zooming in and out. Hide or Show Edges of selected pixels. Accessing rulers, grids and guides. Out of Gamut Colors and CMYK Previews.

Window: Showing and hiding palettes on the screen. Lists what files you have open. This is a good way of navigating between the various documents.

Bitmap

Displays black and white [only] image. Allows using only one layer for editing. Can be displayed as, 50% threshold, diffusion dithered and pattern dithered when converted from other modes. See examples below.

Grayscale

Displays black, white and grays. Allows multiple layers for editing.

Indexed color

256 colors or less (thousands of colors) Allows using only one layer for editing. Images that the user wants to be displayed as a GIF first need to be changed into Indexed Color mode

RGB

Displays millions of colors. Allows multiple layers for editing. The mode of choice for manipulating images.

 **********************************************************************************************

Selection Tools

Marquee tools Lasso tools

Move tool Magic Wand  tool

Above are the selection tools and the move tool, upper right-hand corner. They are the first four tools in the tool bar. The marquees and crop tool are in the upper left corner tool, see below. Remember a tool that has an arrowhead in the lower right of the tool has more tools underneath. The Lasso tools are in the lower left corner tool and the Magic Wand tool is in the lower right. The selection tools select pixels contained in the image. Only selected pixel can be affected.

 

Marquee Tools

The tool on the far left is the Rectangular Marquee. It draws a rectangular selection around the image as the user depresses and drags the mouse. Holding the Shift key constrained the selection to a square shape. Once the selection is drawn it can be moved by placing the mouse pointer inside the selection and holding down the mouse button and dragging the selection to the desired location. To make a new selection click the mouse outside of the selection and redraw the new selection. Notice when the mouse is clicked outside of the present selection, the selection disappears allowing the user to draw the new selection. To add to the selection hold the Shift key down and draw the new additional selection. Notice, while the Shift key is held down the old selection does not disappear.
Next is the Elliptical Marquee. It draws an elliptical/oval selection. Holding the Shift key constrains this tool to a circular selection. The same options apply to this tool as the Rectangular Marquee as far as moving and adding to the selection.
Next is the Single Row Marquee. Clicking the mouse button anywhere within the image selects a row of pixels, one pixel high, the width of the image. To make a new selection click in another location and that row will be selected.
Next is the Single Column Marquee. Clicking the mouse button anywhere within the image selects a column of pixels, one pixel wide, from the top to the bottom of the image. To make a new selection click in another location and that row will be selected.
On the far right is the Crop tool. This tool makes a rectangular selection, but it also places handles in the corners and sides midpoints. These handles allow the user to change the size of the selection. The corner handles move the adjacent sides. The midpoints move just that side and if the cursor is moved into the inside of the selection the whole selection can be moved. The crop tool is used to select the part of an image to be used and the rest to be removed. Once the desired selection is made and adjusted, double click the mouse button within the selection. The unselected portion of the image is removed. Another way to make the crop without double clicking the mouse is to click on the tool bar and a dialog box appears asking the user if they want to crop the image. There is a don't crop selection in this dialog box also which will remove the crop selection from the image.

Lasso Tools

The lasso tools allow the user to make freeform selections. The Lasso on the far left allows the user to draw a selection following the depressed mouse button. Expert mousing skills are needed to use this tool with accuracy. The next lasso (middle) is the Polygonal Lasso. This tool allows the user to click points on the image like connect the dots and if the mouse is depress it will draw a freeform line like the lasso on the left. This is an easier tool for novice mousers to use. Make a mistake and press the Delete or Backspace keys and point by point will be removed. Remember the closer the points are together the more smooth a curved selection will result. The lasso on the right is the Magnetic Lasso. It follows the edges of pixels. Click the mouse button on an edge to start and release and follow around the desired parts to be selected. The Magnetic Lasso will decide where to place the points. When the lasso returns to the starting point, double click the mouse and the selection will be made. Success using this tool depends on the image and how much definition and contrast there is between the object of selection and the "background".
Parts can be added or removed from the selection. To add to the selection, hold the Shift key down and make the new part of the selection. To subtract from the selection hold the Alt key (Windows) or Option key (Macintosh) and draw around what is to be removed..

Magic Wand Tool

The Magic Wand tool selects similar colored pixels. Mouse click anywhere in an image and that pixel within the center of the sparkle of the wand is selected along with all other surrounding pixels that are within the "tolerance" of the pixel. In the Magic Wand Options palette the value of the tolerance can be set/reset. The lower the number the more similar the color will be selected, the higher the number the greater range of color will be selected. Anti-aliased check box checked gives a smoother edge to the selection. Unchecked and the edge appears more stair stepped. Contiguous check box checked will only select the pixels within the tolerance that are adjacent to the selection. If this check box is unchecked, all matching color pixels within the tolerance throughout the image/layer  will be selected. Use All Layers checked, will select the pixels from all layers of the image, if unchecked it selects only pixels from the active layer.

Hold the shift key down and "gang" select other pixels including the pixels already selected.

Move Tool

The Move tool is used to move a selection or entire layer within the document. Make a selection on the image, select the Move tool and place the cursor on the image. Outside of the selection the cursor appears as a directional arrow icon. This symbol means the the tool will move the whole layer. Move the cursor inside of the selection and the tool appears as an arrowhead with a scissor. If you depress and move the mouse, only the selected part of the image will move. What happens to the area where the selected image has been removed?
This has been a brief introduction into the Selection tools from the Photoshop toolbar. If more information is desired about them or any of the other tools, check out the Photoshop Help area located at the far right on the Menu Bar..

Transparent GIFs

Transparent GIFs, or GIF 89a, are images that have a color or selection of colors that have been tagged to be transparent to Web browsers and computer monitors in the case of PowerPoint. Any graphic displayed on the Web has a rectangular shape. If a user inserts an image on a colored or textured background  the rectangular shape can be a problem. 

For an example, look at the upper left corner of this page. The logo located here is a transparent gif. It appears as a shadowed round shape on the gray background. Instead of  TRYING to match the gray background color ... and have the rectangular (square in this case) shape melt into the background, and if the color choice was off  even slightly the "edges" of the logo would be visible and possibly detract from the look of the page and the site. ... the image was created in Photoshop, the dropped shadow added to the indexed color mode image and exported to a GIf 89a file. During the export process the user accesses a dialog box that allows colors to designated as transparent. 

Creating a Transparent GIF

This image started as an RGB Color, which is the mode commonly used  for image editing. The polygonal lasso tool was used to draw and outline around the subject. Notice the dashed outline, in the live program this is referred to as dancing or marching ants. They encircled the selection. Select/Inverse to invert the selection so the background is selected. At this point the dancing surround the background, excluding the prior selection.

Select a foreground color. Click on the Foreground Color box in the tool bar. A color menu palette will open, select a color to replace all of the background. Important Note: When selecting a color for transparency, try to find one not in the remaining part of the image or the result will be a Swiss cheese image. 

 
For demonstration, half of the background was
filled with the foreground color of blue.

When the image is to the point of being finished, change the image mode to Indexed Color. Layer/Mode. Change image mode to Indexed Color. Flatten the layers if there is more than one layer. The Indexed Color dialog box below will appear.

Remember that an indexed color image can have only 256 colors in the color palette, notice this image has 120. Because the end product is to be a transparent GIF, the Transparency check box must be checked! Select OK. In order to make the image a transparent GIF, File/Export/GIF 89a Export... The following dialog box will appear.

With the Eyedropper selected, select the colors in the image at the left to make them transparent. The colors that are selected will change to the Transparency Preview Color [this gray is the default, note: this is only a preview color to show the user what colors have been selected; to deselect a color, depress the Control (Windows) Option (Macintosh) key and mouse click the color box from the palette] and also the color below will be boxed to show it is addressed as transparent. When all of the colors are selected, click OK and a save dialog box appears. Name and save the image. The resulting image is below.

Your Turn. Save the image to your computer and follow the steps above to create your own transparent version of ME! Download the

*************************************************
Do you want to learn the computer, then log on again immediately.
Home