Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Apple II graphics wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Stereoscopy wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Stereo display wikipedia , lookup
Image editing wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
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: