Photoshop

Photoshop in relation to web design
Demos and Tutorial sites

Adobe Photoshop is the premier software application for the creation and editing of bitmap* image files, such as digital photographs, graphics, and certain types of animations.

*Bitmap files, as the name suggests, are composed of maps of bits, or pixels. Viewed at extreme magnification, the illusion of continuous tone pictures is revealed to be comprised of many square pixels of color arranged in a grid. Each pixel contains a certain number of bytes that determine it's color depth.
8-bit color produces a pallette of 256 colors. 24-bit color produces millions of colors. The typical resolution for web images is 72 pixels per inch, although actual display dimensions are set by the number of pixels that make up the height and width of the image file in relation to a computer's display resolution. A typical display has a screen resolution of 1024 by 768 pixels, though this may be larger or smaller depending on the display preferences for that computer.

Workflow for generating web images
Photoshop's native file format is the PSD file. This file type saves your image's layers, text attributes, clipping paths, etc, giving you full control over changes to the file. We call PSD files the Parent file. It is always a good idea to save your work in the .psd format, as it makes later edits or modifications to the image easier.

The PSD file is an incompatible file type for placement in web pages, however. In order to make our image web ready, we must create a child of the parent file. We choose File - Save for Web to generate a flattened image file that can be optimized in the Save for Web dialog box controls.

Each web-compatible image file type has its own qualities. Which type you choose will be driven by a combination of file size and image quality considerations. Here are the three predominant bitmap file types:

GIF (Graphic Image Format) is the oldest of the web-ready file types. It has a maximum color depth of 8 bits (256 colors), though dithering can smooth this limitation somewhat. Still, they are not recommended for photographic images. GIF files support transparency. GIF Animation files allow for sequential frames to be saved in a single file that can be modified to play back at various rates. Although Flash has become favored for its far greater capabilities in this regard, GIF animations require no browser plugin, and work well for small, short animations.

JPG (Joint Photographic Experts Group). Typically used for continuous tone, or photographic images, jpg files have a color depth of thousands to millions of colors. Jpeg uses image compression technology to shrink the size of the file. This is known as 'lossy' compression, because it literally 'loses' information by discarding redundant bytes. For example, large areas of the image that contain very subtle color changes between pixels are simplified so that less information is required. The amount of compression can be controlled via a scale of 0 to 100, 0 being the most compression (very small file) to 100 being no compression (large file). Too much compression can create blocky looking artifacts in the image, so compression must be applied carefully. The goal is to make the file size as small as possible without compromising the quality of the image. JPG files do not support transparency effects.

PNG (Portable Network Graphics) is the most recently developed and most flexible bitmap image file type. It can be saved in 8 bit or 24 bit color, and supports transparency.

Photoshop Demos and Tutorial Sites

Adobe Downloadable 30 day demo, plus support
PhotoshopSupport Free tutorials

back to top