Contact Information

• Instructor: David J. Malan
• TFs: Rei, Dan, Eugenia
• Course Staff Email: cscie1@fas.harvard.edu
• Meetings available by appointment

Basic Definitions

• Compression is a technical term used similarly to its literal meaning. On a computer a file is compressed if it is made smaller (in terms of file size) but represents the same data.
• Lossless compression is a method used to express data in a way that is identical to the original and is sometimes smaller than the original file size.
• Lossy compression tends to have smaller file sizes because it makes concessions in quality. Some lossy compressions are so finely tuned that most people cannot tell the difference between it and a file losslessly compressed. In all lossy cases, however, saving a file in a lossy format loses some of the original data.
• Transparency is supported in some image formats. Transparent images can have sections that you can "see through". One example are the icons in your desktop: around them you do not see a solid color, only whatever image you have set as your wallpaper. This can be an important feature for web developers and not very important for photographers.

GIFs

• Graphical Interchange Format (GIF, pronounced by the creator of the format as "jiff") is an image format that is best used for graphics with few colors, and large fields of flat colors.
• GIFs contain a maximum of 256 colors.
• GIFs can contain fewer than 256 colors; this is one way to make a smaller GIF file.
• The colors are represented by a color table and encoded such that blocks of pixels next to each other horizontally of the same color can be represented using less data.
• Since each pixel is represented even when the image is compressed, no detail or data is lost when using GIF compression. This is LOSSLESS compression.
• GIFs support single color transparency. This means that you select one color (and only one color) that will not show up and will instead be see-through in the final image.
• The GIF specification also allows for animation. The file can contain multiple images that can change at a specified interval to give the appearance of an animation or simple video.

JPEGs

• Named for the Joint Photographic Experts Group, JPEG is a format used for images with gradients, subtle color changes, photographs, or other features such that a GIF-style color table would not work well.
• It is pronounced as "jay-peg".
• JPEGs are well suited for photographic images.
• The JPEG image format compresses images by throwing out image detail.
• This is LOSSY compression. Its appeal is the balance of compression (file size) against loss of detail in the image.
• GIFs and JPEGs are the two most popular image formats on the web.

PNGs

• The Portable Network Graphic is a newer image format which, like GIFs, relies on a color table and is therefore lossless.
• The motivation for creating the PNG format came in early 1995, after Unisys announced that it would be enforcing software patents on the LZW data compression algorithm used for GIF.
• Unlike GIFs, PNGs support millions of colors, thus offering the capability of higher quality images and, by extension, a greater array of uses.
• PNGs also (optionally) use two-dimensional interlacing. This a method of progressively displaying the image both horizontally and vertically -- meaning that you can see the image displays sooner.
• The PNG format supports transparency via an alpha channel. Very simply, an alpha channel tells the computer the degree of transparency of every pixel in the image. This allows for very smooth transparency, providing a "tint"-like effect. Unfortunately Internet Explorer, the most popular web browser in the world, does not recognize transparency in PNG files, severely limiting its utility.
• PNG is supported by all of the current, major web browsers, but older browsers may not be able to render PNG images.

Adobe Photoshop

Introduction

• Adobe Photoshop is an image-editing program. Its wide usage and popularity have made it an industry standard used by graphic designers, web designers, photographers, and video professionals. Photoshop is a very complex application, and whole courses are taught on using it. It has become so popular that the public has transformed the name into a verb. For example, some people will see a photo and say it has been "Photoshopped", meaning that it has been edited so that it is obviously fake. This is similar to the popularity gained by Google and the household term "googling" being coined. The scope of this handout is to just touch on using Photoshop to edit images and create graphics for web publishing.
• For more info on Photoshop, check out Adobe's website.
• You can download a trial version of the software here. It will EXPIRE in 30 days after installation.

Editing Tools

• Adjusting contrast or brightness
  • go to Image > Adjustments > Levels, or, Layer > New Adjustment Layer > Levels
  • change the brightness and contrast ONLY of an image by moving the sliders right and left
• Adjusting white balance
  • adjust the purity of the white and black of an image by changing what degree of lightness or darkness in the image displays as black, white, or 50% gray
  • drag the three triangles beneath the graph - called a histogram
• The clone tool (a rubber stamp icon on the toolbar) allows you to sample one part of an image and then paint with that sample on another part of the image, using the brush of your choice.
• The history brush tool (a paint brush with a curling arrow over it on the tool bar) can be used as a touch-up tool by creating a separate "layer" in Photoshop (see Using Layers in Photoshop, below) and applying the Dust and Scratches filter to it (under Filters > Noise > Dust and Scratches), then painting with the new layer onto the old layer.
• The healing brush (a band-aid midway down the toolbar on the left of the screen), a new, sophisticated tool for touching up images allows you to paint with the texture or color of another part of your image. This sophisticated tool is hard to explain but easy to learn by doing. Try it out.
• The type tool allows you to include text in your graphics.
• The marquee tools, including rectangular, and oval marquee tools allow you to click and drag the mouse to make selections.
• The lasso tool allows you to draw a path of for selection.
• The paint bucket tool (shaped like a paint bucket spilling paint) allows you to fill a selection with a certain color.
• More advanced features dealing with web safe colors, progressive images, etc. are beyond the scope of this handout, but please e-mail your TF with any questions.

Layers and Non-Destructive Editing

• Instead of placing all your different fields of text, blocks of color, photographs, and effects in the same flat layer, Photoshop allows your images to contain multiple "layers," so that all these different elements can remain separate, and separately editable. Each layer is essentially a different slice of your image. They are stacked on top of each other, can be grouped, have effects, be fully or partially transparent, and can be moved and deleted independent of other layers.
• It's almost always a good idea to implement a change to your image by doing it on a new layer. That way even though the image looks different, you don't irrevocably change anything. If you delete or render invisible the new layer, the old image comes back. This is called "non-destructive editing," and it"s the best way to work on images in Photoshop.
• There is a palette in Photoshop (Window > Layers) for viewing layers. There is also a whole menu item devoted to Layers. You can add layers by finding Layer under the New item on the Layers menu, or by clicking the icon next to the trash can at the bottom of the layers palette. Many tools, such as the shape, line, and type tools create new layers automatically when you use them.

Saving Your Work

• Use the Save As tool (File > Save As") to save GIFs, PNGs, or JPEGs.
• Just select the format you want from the list.

Exercise: Editing an Image

• Your TF will provide further details.

Extras

Technical Specifications

• GIF
• JPEG
• PNG
• PNG RFC

More Info

• Alpha Channel Transparency
• Examples of proper and improper Transparency in web browsers
• More about Photoshop's layers

Extra Photoshop Help

• An introductory Photoshop tutorial
• A list of basic Photoshop tutorials
• More advanced Photoshop tutorials