Photoshop Workshop - Lesson 2

Topics in this lesson:

• File Types and Compression
• Learning About Layers
• File Size, System Requirements
• Resolution
• Resampling

File Types and Compression
The native format for a Photoshop file is .psd. However, Photoshop is capable of saving or opening a file in a variety off formats. The most important formats for Web files are .gif, .jpeg/.jpg and .png.

There are two categories of file compression: lossy and lossless. Lossy means that the compression scheme reduces file size by discarding information, and lossless means that compression reduces file size without throwing away information.

• GIF - Graphic Interchange Format
  Developed by CompuServ in 1987, GIF was the first format to be supported by browsers. It is now owned by Unisys.
  
  This highly-compressed, lossless format displays 8-bit raster images (less than or equal to 256 colors). It is a good choice for images that contain flat color areas and shapes with well-defined edges, such as type. It is also the choice for images that need a transparent background.
  
  Color choices for GIFs should be based on what a Web browser can display. Colors that aren't in this 256- color palette are simulated by dithering, which is a technique that intermixes colors to simulate other colors.
  
  A newer version, GIF 89a allows for an animated GIF, which is a short sequence of images within a single GIF file.
  
  Transparency: All digital image files are rectangular. But if your button has curves and is intended to be viewed on a patterned background, you need to use transparent pixels to mask parts of the image, creating an image that only appears curved. The GIF file format supports 1-bit masking, meaning that specific pixels can be turned off.
  
  Traditionally, GIF was a lossless method, but in Photoshop and ImageReady you can add lossiness to GIF compression as a tool for reducing file size.
• JPEG or JPG - Joint Photographers Expert Group
  This format is a better choice than GIF for continuous tone images (continuous gradiations of color or photos) and if your viewers have 24-bit monitors.
  
  JPG is a variable-compression image format; it is called "lossy" because the decompressed image does not have the same quality as the original image. The degree of compression affects file size and image quality.
  
  JPGs can only be saved in 8-bit per pixel gray-scale mode and 24-bit (the default) per pixel color mode. Thus a JPG will be dithered on an 8-bit monitor, although dithering in continuous tone images is less noticeable than spot or flat-color images.
  
  It was developed by an ISO/CCITT-backed international standards committee and first used by field photographers transmitting images over satellite feeds for the Associated Press.
  
  In the future: JPG2000 or JPEG2000 is an initiative to update the standard. It uses state-of-the-art compression techniques based on wavelet technology which can allow an image to be retained without any distortion or loss; it has yet to be supported by browsers. For more information, see the official JPEG site.
• PNG - Portable Network Graphics
  This graphics format was designed as the successor to GIF. It features compression, transparency, and progressive loading, like GIF, but it is free of patent and licensing restrictions.
  
  PNG supports images with millions of colors and produces background transparency without jagged edges; it is a lossless compression.
  
  PNG supports three main image types: truecolor, grayscale and palette-based (8-bit). JPEG only supports the first two; GIF only the third (although it can fake grayscale by using a gray palette).
  
  The PNG specification was issued by the W3C in 1996. For more information, see the PNG images home site.

File Size, System Requirements
Photoshop files tend to be large -- especially in relation to basic text files. Thus the faster your computer (CPU speed), the more RAM you have, and the larger your hard drive, the more efficiently Photoshop will run on your system. If there is not enough room in RAM to manipulate a file, Photoshop will use the hard drive for memory; this is called a scratch disk.

Your hard drive will need at least 320MB of free space plus the volume equal to your RAM plus at least five times the size of the largest file you plan to work with. For example, assume your computer has 512MB of RAM and the largest image you think you'll work with is 100MB. Then you will need 1.332GB of free space on your hard drive: 320MB + 512MB + 500MB.

Learning About Layers
Think of a typical Photoshop file as a stack of layers -- not unlike a tall Dagwood sandwich. Just as a sandwich might be composed of many layers (bread, mayo, lettuce, meat, cheese, etc.), the Photoshop file has six layers: background, transparent, adjustment, type, shape and fill. The image you see onscreen is the view you'd get by looking down through all the layers.

When you use layers, you can separate elements of your image so that they can be edited independently. Layers allow you to apply special effects or change the image's location, color or opacity without affecting the art on the other layers. Layers are powerful and sometimes complex.

Layers can be seen and may be manipulated in the Layers Palette. Let's look at each type:

• Background - This layer is at the bottom of the stack, completely filled with pixels. However, it might be transparent. There is only one background layer per image.
• Transparent layers - These layers may hold pixels, but they may have parts that are partially or totally transparent. This means that pixels from the layers below them will be visible in the final images.
• Adjustment layers - These layers do not hold pixels. Instead, they hold instructions that change the appearance of the pixels below.
• Type layers - This is where your "type" (words, letters) live. The content is editable -- including type family or any other type characteristics (size, style, kerning). You'll need to understand type layers to create Web buttons.
• Shape layers and Fill layers - Like adjustment layers, these contain instructions for what color should show and what parts of them should be allowed to show.

Other layer terms
Except for the background layer, in Photoshop 7 each layer may also contain one or two masks -- either a pixel-based layer mask or an instruction-based vector mask -- as well as a layer style which adds special effects like shadows, bevels or color fills. Photoshop files can also have paths and alpha channels, which provide two more ways to store instructions.

By separating the content and actions (instructions), Photoshop makes it easier to experiment with different effects. The history palette makes it very easy to "undo" or "step backward" to effectively erase unwanted experiments.

Resolution
Resolution is a shorthand for the amount of information in an image file. The larger the resolution (300 dpi versus 72 dpi), the more information in the file; thus higher resolution images are larger than lower-resolution images. The more data, the larger an image can be printed before it loses detail (looks pixelated). Thus, an image that measures 600 pixels by 400 pixels at a resolution of 300 dpi is larger than one at a resolution of 72 dpi.

So how much information is enough? When you're scanning, for example, you want to gather enough information that color transitions remain smooth and details remain sharp. Scan "larger" than you expect the output level to be. For example, I scan at 300 dpi for Web images, even though Web output is normally at 72 dpi. This requires that you use the unsharpen mask. Some people prefer to scan at the resolution that they are going to use for the output. Experiment and learn which works for you.

Remember that the larger the file, the more RAM and scratch disk space it requires -- and the longer it takes to open, manipulate, save and print.

Resampling
Resampling means changing the image resolution. Resampling down means making a file smaller (throwing away information). Resampling up means increasing the file size.

Resampling takes place in the Image Size dialog box or through the Resize Image Wizard/Assistant; the former provides more customization.

When you resample an image, Photoshop must recalculate the color of each pixel in the new file, which may cause softening of the image. After you're resampled, run the Unsharp Mask filter to recover some of the detail lost in recalculation. Be careful of repeated "downsizing" as the final image can become very soft. If you need multiple sizes of an image, it's recommended to create each from the original file.