An emphasis on information and manipulations
Overview: toolbox and palettes, the most useful basic functions and shortcut keys for viewing work space.
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.
RGB mode supports all functions.
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.
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.
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:
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. .
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.
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.
|File Types & Saving Options|
|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,
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.
|TIFF PSD JPEG GIF
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:
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.
|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.
|At the lowest quality setting the file size may be reduced to 1/100th 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 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.
|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.
Many images, especially charts with few colors can be displayed with fewer colors without any loss of quality.
|Use the preview window to choose the palette that serves your specific image needs.|
|In addition GIF format offers a compression method named lossy.
This is inferior to jpg compression and should be used with caution.
|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.
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.
|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.
|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.
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....
|From the Menu Select Image> Adjust> Color Balance.|
|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.
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.
|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:
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.
|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.
Layers Palette layout and functions
|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.
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.
For Printing and final output flattening the image will merge all layers to reduce the amount of data set to the printer.
The History Palette
A very useful tool for undoing the edits you have made.
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.
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
Send Comments & Questions to: firstname.lastname@example.org