An overview of PhotoShop with an emphasis on information and manipulations useful
for digital and web presentations.

Workshop participation will require logging on to the university network to access the lab software and to use your personal server storage space for saving files.

OUTLINE:

New in Version 6

Options palette is now a tool bar with new control button switches for familiar functions of many tools.

New Tool functions and controls

New effects tools "Liquify"

New Layers Palette Styles

Overview: toolbox and palettes, the most useful basic functions and shortcut keys for viewing work space.

Detailed topics:

File types: saving options

Sizing and Resolution

Adjusting image color, tonal range

Making selections.

Layers: separating the elements of your picture

Using the Actions Palette to create batch processing of large numbers of files.

Using PhotoShop's automated functions: Contact sheets and Web page photo galleries.

Overview of ImageReady

Demonstrate creation of a simple two-image transition GIF animation (time allowing).

PRESENTATION

Perform screen capture [Print Screen key]

File, New, yes to the default settings, edit paste......!

Crop and adjust size, save in folder for later use.

File types: saving options

In PhotoShop the default settings for a new document will match the size and attributes of the image on the system clipboard.

Photoshop format (PSD) is the default file format for newly created images--and the only format supporting all available image modes (Bitmap, Grayscale, Duotone, Indexed Color, RGB, CMYK, Lab, and Multichannel), guides, alpha channels, spot channels, and layers (including adjustment layers, type layers, and layer effects).

Saves multiple images as animation.

User selects compression level, # of colors and optimizing features to attain efficient file size.

Loss of quality as file size is reduced.

The GIF format uses 8-bit color and efficiently compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. You also use the GIF format to create animated images. GIF is supported by most browsers.

Flattens layers, saves pixel data as compressed info.

User selects compression level and # of colors

Some loss of quality, but less so than reduced gif.

A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality. In most cases, the Maximum quality option produces a result indistinguishable from the original.

File Saving Options:  for more details see PhotoShop Help descriptions.

Lecture Demonstration of Save Options Jpeg and GIF Dialog box choices.

While editing a work in progress, the file should always be saved as a psd.  In addition important work should be archived in psd format to retain all pixel data, etc.  for future edits and use generating new jpg or gif format files for new specific web page needs.

When you are ready to save work for web use:

Open the file menu and select Save for Web.   

A dialog box will open displaying a preview of the image as it will appear if it were saved with the settings you choose using this dialog box which is attached to the preview.  

At the bottom of the preview image is a status bar that displays the file size at the settings you select.  In addition it displays the time for the file to load at the selected modem speed.

This lets you to see the results and tradeoffs between file size and loss of image quality allowing you to achieve a very low file size for specific image needs.

At the highest quality setting the file size may be reduced to 1/20th of the uncompressed size.

When used at the least compression Jpeg format files allow for smoother color tone transitions and greater detail that GIF format files.

Gif files reduce file size with compression and selective reduction of the color palette.

In addition GIF format allows files to display transparent areas as well as multi-layered images that produce animations.   

Select GIF from the drop down menu.

The Color Table displays the complete color palette that will be used to render the image as seen in the preview.

Reducing the number of colors used will drastically reduce the file size.  To change the color palette select from the drop down menu.

For continuos tone images it is best to leave the palette at 256.

Many images, especially charts with few colors can be displayed with fewer colors without any loss of quality.  

This is inferior to jpg compression and should be used with caution.

Selective (the best) which changes the method of color resampling when reducing color.

Diffusion and Dither control effects to smooth transitions between tones. 

Transparency, if the image contains transparent areas.

Matte is for choosing the background that will fill transparent areas if transparency is not checked.

Interlaced which allows early loading half the pixels, every other line, displayed across the missing row.  This displays a very low res image first followed by missing data that is filled in as it loads.

Image size for changing the dimensions of the image when saved.

Size and Resolution: Choosing the most efficient options for web pages

ppi =  pixels per inch      Refers to the screen display resolution. 

ppi refers to the number of pixels per linear inch not per square inch.

One square inch at 4 ppi

Screen size, browser size and image size.

Screen Resolution 72, some new monitors 96.

To adjust the size for 1:1 display on a web page keep in mind the pixel dimensions of the monitor screen size, browser window and how much of the page you would like the image to cover.

You will need to resample the image to reduce the pixel dimensions without cropping the image.

To do this click on the Resample Image check box. .

Highlight the Pixel Dimension Width value.

Change to a setting that will fill about half a browser window that was 800 wide.

For the highest quality and smooth tones choose Bicubic.

Changing Image Mode

RGB mode supports all functions.

Adjusting Image Tonal Range

In my opinion the easiest to use is the Levels Dialog Box.

To open select Image>Adjust> Levels from the menu.

This displays a histogram of the image with slider controls that determine the output level of the histogram data.

You can set the highlights and shadows in an image by moving Input sliders to the first group of pixels on both ends of the Levels histogram.

This maps these pixels of the histogram --the darkest and lightest pixels in each channel--to black and white, increasing the tonal range of the image.  Rendering a Blacker Black and whiter White.

The corresponding pixels in the other channels are adjusted proportionately to avoid altering the color balance.

You can use the middle Input slider to change the intensity values of the middle range of gray tones without dramatically altering the highlights and shadows.

This will give the image more contrast and tonal range while retaining detail in the darker midtones of the image.

The Levels Dialog Box can also be used for color adjustments by selecting from the drop-down menu each of the RED GREEN and BLUE channels and adjusting the sliders or use the eye dropper samplers.

This technique requires practice and experimentation for productive use.

A more straight forward method is described next.... 

Adjusting Color

Here you have control over adjustments for the Shadows, Midtones and Highlights separately.

Click the preview on and off to see the effect of your adjustments.

Make note of the Color Levels numerical changes to replicate the adjustment evenly across shadows, midtones and highlights.

It is best to Preserve Luminosity, which will subtract filtration density.

Selection Tools:     Lecture Demonstration of Selection Tools.

The Marquee Tool

Choose the type of shape you would like to use from the tool box by pressing  and holding the left mouse on the tool, wait for the options to appear.

Adding to a selection.

Subtracting from a selection.

Feathering the selection Controlling the aspects of the size and shape. 

Choose the type of lasso:

Freehand
Point by point Polygonal
Magnetic

 

Adding to a selection.

Subtracting from a selection.

Feathering the selection.

For Switching between Standard Editing  Mode and QuickMask Editing  Mode.

Standard Mode displays a moving dotted line to shoe selection area.

Used for the Marquee and Lasso Selection tools.

Quick Mask Mode displays the selection as an unmasked area.

To mask or unmask an area use the paintbrush tool. Masked areas appear red.

Flip the Foreground Background Colors to mask or unmask using the paint brush.

Layers Palette layout and functions

You can move, edit, reduce opacity, treat with styles each layer individually without effecting the other unlinked layers.

 

An important control is the "eyeball" next to each layer. This is a toggle switch that makes a layer visible or not.

 

Next to the eyeball column is a box that shows blank in some layers and for some layers two joined links of a chain.  This symbol designates the layers that are linked to the selected layer(where the brush appears). 

Each time that you paste a selection or an image it will appear in a new layer. 

In addition each time that you place "Type" it will be created in a new layer.

Using Merge Visible or Merge Linked you can selectively merge layers.

For Printing and final output flattening the image will merge all layers to reduce the amount of data set to the printer.

Saving as a jpg will automatically flatten the image.

The History Palette

A very useful tool for undoing the edits you have made.

New to version 6 the Edit Undo menu provides step back or forward in the history list.

The default number of steps saved is 20. Increasing this number consumes system memory.

This is a linear history. You may set the preference to non-linear but this consumes system memory.

In addition the History Palette will save a snapshot of the current state or create a new document from the current state. Creating versions of your work in stages.

The Actions Palette

This Palette provides several default functions that can be used to create special-affects.

In addition you may create custom actions by recording your edits of an image, for later play back to edit another image on the desktop or you can play the action on a batch of files.

Click the button Create new set.

When the Dialog Box appears name your set.

Next Click the Button Create new action.

When the Dialog Box appears name your Action.

You can also assign a function key to your action for frequent selective use.

Select Record, then perform your edit.

Make your adjustments (in this case color balance) then Click the Stop Button (Black Square) to stop the recording.

Batch function on the Automate menu.

From the File Menu>Automate>Batch

Notice the Play window.

If your set and action is not displayed, select from the drop down menus.

Select the folder containing the files to be edited.

 

Select the destination folder to place the edited files in.

Select a Name changing scheme if desired.

Select OK, watch the "action" as it opens each file, performs the recorded action and saves the edited files.

A very convenient way to view the contents of a folder as a "contact sheet".

Saving the contact sheet to the folder it displays provides a quick reference to the contents of a folder.

It can also be used to open and size image for use in a montage or multi-layered image.

Select File>Automate> Contact Sheet II

Select the Document Options.

 

 

Select the Thumbnail options.

 

Using the file name as caption will reduce the image size.

A very convenient way to view the contents of a folder in a a web page gallery.

 

The automated function provided will resize the images and creates the html files to display a gallery of thumbnails that link to individual image pages.  It will also create a structure of folders to contain the new files within the destination folder that you select.    

Select:

File>Automate> Web Photo Gallery

Select the Source and the Destination Folders. The Destination Folder should name this gallery for reference in web site structure organization and easy coping, moving or uploading.

Select the Styles drop down menu to select a layout for your gallery, preview is displayed under the cancel button.

Experiment for results that best suit your image display needs.

 

When you are ready to save the work, ImageReady saves the images and writes the HTML and JAVA codes to support the affect.    

Lecture demonstration of   simple two image transition with additional frames generated using the "Tween" function.

Sequence of 13 final frames with delayed display for the two original frames, set to loop 3 times and stop.

Select Refresh (F-5) to restart animation.

This Page created for use in The Center for Instructional Technology at Eastern Connecticut State University by
Martin Seymour, February 2002. 

Send Comments & Questions to: seymourm@easternct.edu