Download Adobe Photoshop for Web - QuickStart

Adobe Photoshop©
for Web
(quickstart)
WVU OIT Training and Support Services
293-4444 (Help Desk)
This workshop will teach you the basics of formatting images and graphics
for web use via Photoshop. Topics covered include: color spaces, file types,
image settings, Save for Web Photoshop feature, and matching colors with
the Color Picker.
Copyright 2007 West Virginia University
Contents
Note from the presenter: .................................................................................... 3
Color .................................................................................................................. 4
Web-safe colors: .......................................................................................... 4
RGB: Red, Green, Blue: .............................................................................. 4
CMYK: Cyan, Magenta, Yellow, and Black (or Key): ................................... 4
Image/graphic file types ..................................................................................... 5
GIF:.............................................................................................................. 5
JPG:............................................................................................................. 5
TIFF: ............................................................................................................ 5
RAW/NEF: ................................................................................................... 5
PNG: ............................................................................................................ 5
PSD: ............................................................................................................ 5
Matching Colors ................................................................................................. 6
Web Safe Colors ......................................................................................... 6
Image Size......................................................................................................... 7
Save for Web ..................................................................................................... 8
Note from the presenter:
One of the biggest complaints from Web Designers is coming across pages
where the images/graphics have not been optimized for web viewing. Improper
file choice, file size, and colors can increase download times dramatically *and*
turn away viewers. There are simple things you can do to make your pages
load faster through efficient image/graphic formatting.
Photoshop is my #1 choice for image/graphic manipulation, but Fireworks is
quickly being adopted by Web Designers worldwide as the #2 choice.
Fireworks offers an intuitive interface with tools far simpler than Photoshop’s
overwhelmingly robust feature set. Can you do the same things with web
images/graphics in both? Almost. If you’re looking to get in on the ground floor,
it would benefit you to examine both programs to see which fits your needs.
Fireworks is more a graphic manipulation tool. For image manipulation,
Photoshop can’t be beat. The University offers Photoshop in many labs, and
discounts are available when purchasing licenses via SLIC.
Photoshop is an incredibly feature rich program. I invite those who can to take
the Photoshop Workshops we offer throughout the year.
Color
Web-safe colors:
Colors that are virtually guaranteed to display correctly on a monitor when
viewed from a web browser.
RGB: Red, Green, Blue:
How most monitors and printers reproduce all colors via combinations of these
three basic colors.
CMYK: Cyan, Magenta, Yellow, and Black (or Key):
A professional printing process that uses these 4 basic colors to approximate
what you see in RGB.
Image/graphic file types
GIF:
Smallest file size. Worst quality for images with complex colors, or images with
lots of gradation.
JPG:
File size larger than GIF, but well manageable for web use when files are saved
correctly. Very good quality for images and heavy gradation.
TIFF:
An uncompressed file format. LARGE file sizes. Inappropriate for web use.
RAW/NEF:
The highest quality image file available for digital cameras. H-U-G-E files.
Totally unacceptable for web use.
PNG:
Fireworks image/graphics file. File size between GIF and JPG. Excellent for
anything GIF or JPG can do. Fast becoming the new favorite file type among
Web Designers.
PSD:
A Photoshop specific file. Maintains high quality.HUMONGOUS files. T-totally,
p-positively not for web use.
Matching Colors
From http://webservices.wvu.edu/policies_guidelines/design_guidelines :
Web Safe Colors
The following RGB values should be used to represent official university
colors.
*Please note that these values have been updated to reflect Web-safe
equivalents of all three palettes. These Web-safe values must be used to
ensure that the official colors are rendered consistently across divergent
browser and operating system platforms.
Primary Palette
#003366
#FFCC00
Image Size
Incredibly important is adjusting the size of your web image/graphic. Rarely do I
display something greater than 500 pixels in a given dimension *unless* it is an
integral part of the design of my page. Then I usually restrict the size of the
image/graphic to no more than 600x800 pixels to account for monitor sizes.
To change the size of your image/graphic, go to Image> Image size:
In the resulting window, you can
change dimensional attributes of
your file:
Save for Web
Photoshop makes it very easy to save your image to a smaller file size.
Simply go to File> Save for Web:
The Save for Web window allows you to choose file type and a myriad of other
options to reduce the file size of your image/graphic.
This graphic went from 2MB to 10K by saving as a 4-color GIF: