Session One

An emphasis on information and manipulations useful
for digital and web presentations.



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

Detailed topics:

Sizing and Resolution

Image Mode

File types: saving options

Adjusting image color, tonal range

Making selections.

Layers: separating the elements of your picture

The History Palette; viewable record of recent edits.  Accessable from menu as Edit >Stepback.




Open PhotoShop

In Library 107  

Click Start button > Programs > Departments > Comm > Photoshop


To begin we will use screen catputre to create an image for manipulation during the workshop:

Perform screen capture

[Print Screen key]


Select:  File, New, OK to the default settings, edit paste......!

Next we will look at and edit the image properties.

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

Pressing Print Screen saves an image of the current screen to the system clipboard.


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

This is a useful tool when creating handouts for the web, powerpoint.  

With high contrast menu type images they can be used in Word documents for hard copy handouts.



Changing Image Mode

Not all Modes support all PhotoShop functions. mode.jpg (60820 bytes)

RGB mode supports all functions.

mode-RGB.jpg (98516 bytes)


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

Measuring Resolution:  The fineness of detail that is rendered is dependent upon the pixel dimensions of the image and how closely the pixels are displayed.  
dpi =  dots per inch      Generally used to describe printer resolution.

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

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

4ppi.jpg (4218 bytes)

One square inch at 4 ppi


  To Change Size: select from the menu> Image> Image size.
Sizing and Resolution Considerations.

Screen size, browser size and image size.

Screen Resolution 72, some new monitors 96.


image-size01.jpg (25535 bytes)
Notice pixel dimensions and Document size.

Pixel Dimensions will only change if a check mark appears the Resample Image check box.

Without resampling change the ppi resolution setting to 72 and note the changed Document size.
This Dialog Box will appear:

 image-size02.jpg (27658 bytes)

Notice that the pixel dimensions have remained the same while the Document size has increased dramatically.

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. .

image-size03.jpg (28011 bytes)
You will see a check mark appear and the Pixel Dimensions section will now allow you to edit the settings

Highlight the Pixel Dimension Width value.

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

image-size04.jpg (33920 bytes)
After changing the width to 400, notice the reduced file size at the top of the Pixel Dimensions window.

For the highest quality and smooth tones choose Bicubic.

image-size05.jpg (39700 bytes)



File Types & Saving Options
Extension Type Attributes: pro/con
bmp Bitmap Saves actual pixel information.  High quality / Large file size

Common and readable to most applications. No compression

tif TIFF Saves actual pixel information.  High quality / Large file size

Compression available, not recommended

psd PhotoShop Saves all work including palette info and all pixel data. Very Large file size.
PhotoShop help file description: 

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).



gif GIF Saves and displays transparent areas of image in web browser.

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.

PhotoShop help file description:

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.

The GIF format uses LZW compression, which is a lossless compression method. However, because GIF files are limited to 256 colors, optimizing an original 24-bit image as an 8-bit GIF can result in the loss of color information. In addition, Photoshop and ImageReady allow you to apply lossy compression to a GIF file. Using the Lossy option yields significantly smaller files by sacrificing some image quality.

You can reduce the number of colors in a GIF image and choose options to control the way colors dither in the application or in a browser. GIF supports background transparency and background matting, in which you blend the edges of the image with a Web page background color.



jpg Jpeg Very small file size while retaining quality, ideal for single image non-transparent pictures for the web.

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.

PhotoShop help file description:

Joint Photographic Experts Group (JPEG) format is commonly used to display photographs and other continuous-tone images in hypertext markup language (HTML) documents over the World Wide Web and other online services. JPEG format supports CMYK, RGB, and Grayscale color modes, and does not support alpha channels. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data.

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 on other file types,
                                                         (see the PhotoShop Help descriptions).

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


Use the following TIFF file of the Sand Dune from the Photoshop samples images for the file saving illustration.

Dune.tif (1083644 bytes)



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.   

file-save-option-01.jpg (26326 bytes)
JPEG Format

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.


file-save-option-02.jpg (19452 bytes)
For jpg files the Quality Slider changes the level of compression.

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

 file-save-option-03.jpg (19662 bytes)
At the lowest quality setting the file size may be reduced to 1/100th of the uncompressed size. file-save-option-04.jpg (19931 bytes)
GIF Format

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.


file-save-option-11.jpg (20395 bytes)
The Dialog Box at right is displayed as well as the preview image and file size info..

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

file-save-option-12.jpg (56059 bytes)
256 is the maximum number of colors that can be displayed using the GIF file format.

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.

file-save-option-13.jpg (52904 bytes)

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

file-save-option-14.jpg (41835 bytes)
Use the preview window to choose the palette that serves your specific image needs.   file-save-option-15.jpg (34422 bytes)
In addition GIF format offers a compression method named lossy.

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

file-save-option-16.jpg (55550 bytes)
The other drop down menus adjust other functions such as:

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.

file-save-option-17.jpg (36764 bytes)



Adjusting Image Tonal Range

The tonal range can be manipulated using many different tools.

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

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

levels-01.jpg (45422 bytes)
The Levels Dialog Box will Appear.

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.

levels-02.jpg (40622 bytes)
This represents the slider positions for  the adjusted image.

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

levels-03.jpg (35450 bytes)

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

From the Menu Select Image> Adjust> Color Balance. color-balance-01.jpg (64797 bytes)
Drag the Slider to adjust balance between complementary colors.

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.

color-balance-02.jpg (35271 bytes)



Selection Tools:     Lecture Demonstration of Selection Tools.


marquee.jpg (28627 bytes)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.

marquee2.jpg (32194 bytes)Marquee Tool Options

Adding to a selection.

Subtracting from a selection.

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

Lasso Tool Options


Choose the type of lasso:

Point by point Polygonal


Adding to a selection.

Subtracting from a selection.

Feathering the selection.

lasso.jpg (24773 bytes)

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.

edit-standard-mode.jpg (13207 bytes)
Ideal for fine tuning a selection.

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.

edit-quickmask-mode.jpg (13824 bytes)






Layers Palette layout and functions

Layers_Palette_Demo.jpg (353131 bytes)
The Layers Palette allows you separate the elements of your image to manipulate your composition.

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.



Layers_Palette_Demo-02.jpg (56547 bytes)
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.
Layers_Palette_Demo-03.jpg (51665 bytes)

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.

history.jpg (46191 bytes)



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 pixel distortion effects tablet "Liquify"

New Layers Palette Styles



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

Send Comments & Questions to: