Photoshop for the Web

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

2. 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 Bloomsburg University

3. 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 Bloomsburg University

4. 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 Bloomsburg University

5. 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 Bloomsburg University

6. 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 Bloomsburg University

7. 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) Bloomsburg University

8. 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 Bloomsburg University

9. 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. Bloomsburg University

10. 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 Bloomsburg University

11. 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 Bloomsburg University

12. 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 JavaScriptcode in the resulting HTML that preloads the normal and over graphics and implements the rollovers Bloomsburg University

13. 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 Bloomsburg University

14. 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., <BODY BACKGROUND=“small.jpg”> • A small image file will be used as a tile and repeated horizontally and vertically to fill the browser window Bloomsburg University

15. 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 Bloomsburg University

16. 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 Bloomsburg University

17. 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 Bloomsburg University

18. 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 Bloomsburg University

19. 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) Bloomsburg University

20. 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 Bloomsburg University

21. 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 Bloomsburg University