Download photoshop_webS07

Photoshop for
the Web
CS 213
Elem. Graphics
Dr. Erik Wynters
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
Slicing
• ImageReady and Photoshop CS have a slice tool
and a slice select tool
• These let you “slice” up an image into nonoverlapping 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
Spring 2007
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
Spring 2007
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
Bloomsburg University
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007
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
Spring 2007