Photoshop for the Web CS 213 Elem. Graphics Dr. Erik Wynters

Spring 2007Bloomsburg University The Web Palette 8-bit graphics displays can display at most 256 colors at a time, which are stored in a color table (indexed-mode graphics) Some of these colors are reserved for use by Windows or other operating systems Web browsers on 8-bit systems load 216 entries into the color table

Spring 2007Bloomsburg University The Web Palette (cont.) The 216 colors of the web palette uniformly cover the gamut of all possible rgb values in increments of 1/5 or 20% Each channel has a value from 0/5 to 5/5 of maximum intensity, so 6 possible values This gives 216 = 6 X 6 X 6 possibilities

Spring 2007Bloomsburg University The Web Palette (cont.) The look up table (palette) uses 24 bits to describe each color in the table, that’s 8 bits per channel So the maximum intensity in each channel is 255 in decimal or FF in hex 1/5 of 255 = 51 in decimal and 1/5 of FF = 33 in hex

Spring 2007Bloomsburg University The Web Palette (cont.) Therefore, the only possible R, G, and B values in a web-safe color are: 0, 51, 102, 153, 204, and 255 in decimal, or 00, 33, 66, 99, CC, and FF in hexadecimal

Spring 2007Bloomsburg University Saving / Optimizing Files Most Common Web Image File Formats: JPEG – 16.7 Million colors possible (24-bit), adjustable lossy compression, best for continuous-tone images (photos) GIF – 256 or fewer colors (8-bit max), indexed (uses a color table or palette), lossless compression, best for solid colors (simple artwork) & allows transparency and animation

Spring 2007Bloomsburg University Saving / Optimizing Files (cont.) Prior to ver. 5.5, layers had to be flattened to save as jpeg or gif and mode had to be set to indexed for gifs Now, the save for web command is the better way to save files for web use Photoshop’s companion product, ImageReady, that comes on the same CD is also good for optimizing and saving web images (use the save optimized as command)

Spring 2007Bloomsburg University Saving / Optimizing Files (cont.) Can compare visual quality of original and 1 or 3 optimized versions simultaneously Quality and Blur settings affect appearance and file size of jpegs Number of colors, type of palette, and dithering settings affect appearance and file size of gifs Colors in the gif palette can be locked to retain them when number of colors is reduced, and colors can be individually shifted to a web safe color to prevent dithering in 8-bit systems if the web palette isn’t used

Spring 2007Bloomsburg University Transparent Gifs Photoshop transparency uses 8 bits (256 levels) for drop shadows, glows, and anti-aliased edges. Transparency in GIF files is 1-bit (on or off), which can cause ugly halos/fringing and aliasing (jagged edges). Set the matte color to match the web page’s background color when optimizing to minimize these effects, and if the background is an image with different colors, don’t make glows/shadows too big.

Spring 2007Bloomsburg University Slicing ImageReady and Photoshop CS have a slice tool and a slice select tool These let you “slice” up an image into non- overlapping rectangles and select/resize those rectangles, respectively Slices can be optimized individually, linked to different URLs, and replaced individually when the user’s mouse rolls over them (rollovers) Slicing produces a table in the HTML file and a folder full of smaller images that go in the table’s cells

Spring 2007Bloomsburg University Rollovers in ImageReady A rollover is a change to a graphic (or slice) when the mouse is over it At least two states are involved: normal, over, down, etc. The only changes that can occur between states are changes to the visibility of layers or use of different layer effects/styles Rollovers can be made in ImageReady only, not in Photoshop

Spring 2007Bloomsburg University Rollovers (cont.) Create the over state using the new state icon in the web content palette and make the desired changes r.e. the normal state Save Optimized creates JavaScript code in the resulting HTML that preloads the normal and over graphics and implements the rollovers

Spring 2007Bloomsburg University Web Page Design Principles Contrast – should be low in background graphics; high between foreground & background Alignment – lining things up improves appearance Proximity – things that go together should be close together and things that don’t should be separated Repetition – there should be consistency in appearance and navigation between pages

Spring 2007Bloomsburg University Web Backgrounds Background images can be used in HTML by assigning the name of an image file to the BACKGROUND attribute of the body tag, e.g., A small image file will be used as a tile and repeated horizontally and vertically to fill the browser window

Spring 2007Bloomsburg University Web Backgrounds (cont.) Small (tiled) images download much faster than a large image that fills the window without tiling Need high contrast between text and background for readability; use dark text on a light background or vice versa Medium colored backgrounds or backgrounds with high contrast (light & dark) generally don’t work well

Spring 2007Bloomsburg University Web Backgrounds (cont.) ImageReady lets you preview how a background image will look tiled in a browser Normally you want your tiles to be seamless The filter>other>offset command with wrap around and an offset of 50% brings the seam into the center where you can easily see it and try to hide it by painting, cloning, or smudging ImageReady’s TileMaker filter can also create seamless tiles from photos

Spring 2007Bloomsburg University Web Backgrounds (cont.) Custom textures can be created for background tiles using various filters in Photoshop Noise>Add Noise is the usual starting point Blur>Gaussian Blur smoothes things Stylize>Emboss adds depth Other filters add distortion/shape

Spring 2007Bloomsburg University Image Maps Let you link different regions of an image to different URLs Server-Side Image Maps – require CGI scripts and are somewhat server dependent Client-Side Image Maps – most image maps today are of this type, all the scripting is right in the html and interpreted by the browser; ImageReady makes this kind ImageReady can make these easily if the regions are on different layers; if you want to divide up a single image (on one layer) into regions, draw the regions with the image map tools – rectangle, oval, polygon

Spring 2007Bloomsburg University Animation GIF files allow multiple images (frames) to be saved in one file and displayed in succession Other kinds of animation (e.g., flash) may be more sophisticated or use less memory, but animated gifs are loaded just like any other image in HTML and work in any browser without a special plug-in ImageReady can create these animated GIFs Use the Animation palette, which allows you to create new frames (similar to creating a new state for a rollover)

Spring 2007Bloomsburg University Animation (cont.) ImageReady can produce animation in 4 ways: Frame-by-Frame – turn on and off different layers over a series of frames Automatic Tweening – ImageReady generates in between frames based on two keyframes; tweening can be based on: Position – move a layer between keyframes Opacity – change opacity of a layer Layer Style – change layer style settings

Spring 2007Bloomsburg University Automation Photoshop can automate various tasks: Apply optimization settings, filters, or other special effects to a whole folder of images Easily create a web photo gallery Creates a web page showing small thumbnail images showing all the pictures in a folder and creates html to link them to full size versions and navigate between pics and back and forth to the home page