Friday 5 August 2011

Module 8: Introduction to Web Graphics

WEEK 8. Module 8: Introduction to Web Graphics

8.1. Theory
8.1.1. Reading: Scanning Graphics 

Scanning Graphics

Photoshop doesn't scan, but it does support third party scanner software that comes with most scanners. Once you install your scanner's software, you should be able to scan images through Photoshop's File > Import menu, or directly through your scanner's custom software.
Generic Scanning Tips:
Once you find the analog image you want to use, you'll need to digitize it by scanning it to get it on your computer. Sometimes the frequency a scanner uses to collect dots in the digitizing process can conflict with the dots that were used in the printing process a magazine or book may have used. This generates interference on your scanned image called a moiré effect. You need to get rid of this during the scanning process by “descreening” your scan so your scanner scans at a different frequency. You will need to adjust this on whatever third-party software you use.
Scan your image as RGB color at 72-150dpi (or ppi) and save your master scan in Photoshop's proprietary format: PSD. Once you have this file, crop it using the cropping tool, and resize it down to the size you intend to use it onscreen, making sure Photoshop is displaying it at 100%.
After you crop and resize it, save it as another PSD that is different from your master copy. The PSD format allows you to save the most Photoshop settings, and it's a non-lossy format (which you'll find out more about when you read about file formats).
You will probably want to adjust the dynamic range your image has at this point, but using the levels command. This will give your image richer colors that look better than most muddy raw scans. You may also want to clean up any dust or scratches on your images by using a combination of the dust and scratches filter and the rubber stamp / cloning tool.
You final step in getting your image ready for use online will usually be your unsharp mask filter – which will sharpen the image for you.

References
Graham, L. (1999), The Principles of Interactive Design , Delmar, Scarborough , Ontario .
Lynch, P. and Horton, S. (1999), Web Style Guide , Yale University Press, New Haven , CT.
Niederst, J. (1999), Web Design in a Nutshell , O'Reilly & Associates, Sebastopol , CA .
Weimann, E. & Lourekas, P. (1999), Photoshop 5.5 for Windows & Macintosh, Peachpit Press, Berkeley , CA .
8.1.2. Reading: Graphic Image File Formats

Graphic Image File Formats

Once you're happy with the look of your image, you will need to make it ready for the Web.
Once upon a time there was only one graphic file format you could use on the Web: GIF87 (Back when Mosaic was the only graphical browser).
Then, with the release of Netscape 1.0, JPEG became common. Today there are three graphic file formats you can use on the Web, although browser support for PNG continues to remain buggy.
Here is the difference between each:
Format
GIF
JPEG
PNG
Long Name:
Graphics Interchange Format
Joint Photographic Experts Group
Portable Network Graphics
Copyright:
CompuServe
Public
Public
RGB Support:
No
Yes
Yes
Browser Support:
Since Mosaic
Since Netscape
All 4.0 Browsers?
Indexed Support:
Yes
No
Yes
Colors:
Up to 265
Up to 16.7 Million
Up to 16.7 Million
Compression:
LZW
JPEG
PNG
File Size (example):
1/5 a PSD
1/20 a PSD
1/1 – 1/3?
Specialty:
Illustrations, Type, Animations, & Special Effects
Continuous Tone & Photographs
Everything?
Vector Support:
No
No
No
Interlacing:
Yes
Progressive
Adam7
Animation:
Yes
No
No
Blend Background:
No
No
Yes
Transparency:
Yes
No
Yes
8.1.3. Reading: JPEG Image Compression

JPEG Image Compression

Compressing an image into JPEG format is fairly straight forward. Once you've confirmed your image is in RGB mode, you'll need to make sure any layers you have created are flattened (Only file formats like PSD can store layers). To save in JPEG format, just look under your file menu, choose “Save As” and select the JPEG format.
The Image options will range from 1 to 10, with 1 being the most tightly compressed (but lossiest), and 10 being the least compressed (but largest). Format options include saving your JPEG as “Baseline Standard”, “Baseline Optimized”, or “Progressive”. Baseline Standard is the most common form of JPEG, Baseline Optimized uses a better compression technique, but may not be supported on earlier browsers, and Progressive allows your JPEG image to appear a though it's coming into focus as it downloads on your Web page.
Adobe ImageReady (which comes bundled with Adobe Photoshop), allows you to visually compare various JPEG compressions (and other file formats like GIF and PNG) while tweaking their settings so you can see how they will affect your final image before outputting them:



8.1.4. Reading: GIF Images and Web Safe Colors

GIF Images and Web Safe Colors

When working with GIF images, you have far fewer colors available than what JPEGs support. Earlier computer systems with less memory in their graphics cards could only show 256 colors. Although 256 colors are enough to fool the human eye into thinking it can see more, it does pose some problems in displaying colors outside of the 256 color gamut. As a result, it's quite possible your JPEG images may appear “dithered” on older computers. Dithering is a speckled appearance that results from computer systems translating an out-of-gamut color to an in-gamut color.
To complicate matters further, the Macintosh operating system and Windows operating system use a different set of 256 colors. Although most of them are identical, forty of them are different – leaving you with only 216 colors to work with. You can view this limited range of colors in a couple of ways using Photoshop. Using your “Swatches Palette” in Photoshop, click on the black triangle in the upper right-hand corner of the palette, where you will find the “Web Spectrum” palette. On older versions of Photoshop, you'll have to choose “Load Swatches”, look in your “Goodies” folder and “Color Swatches”, and choose the file “Web Spectrum.aco” to load your Web safe colors. They'll appear at the bottom of your Swatches Palette.
If you plan on doing any kind of illustration work that will eventually be saved in GIF format, you should stick to using these 216 Web Safe Colors at the bottom. If you try to convert an image to GIF using colors that are found outside of this group, your final image will appear dithered in at least some sections.
Another way of selecting Web Safe colors in through the use of your Color Picker, which can be easily accessed by double-clicking on either of the color swatches on your tool bar. If you tick the box at the bottom of your Color Picker that says “Only Web Safe Colors”, you will see your color choices severely limited.
One nice addition to this version of Photoshop is the “#” field in the lower right-hand corner. This is where you can match the Web Safe Colors you choose to a hexadecimal value you can use in your HTML.

GIF Images

One technique for reducing the file size of GIF images is to limit the colors you work with even further. If you do attempt to change an RGB image to Indexed Color Mode, you will be asked about the number of colors you would like to use. These are your options:
Number of Colors
Bit Depth
256
8
128
7
64
6
32
5
16
4
8
3
4
2
2
1
The lower the bit depth, the smaller your file will be. An image comprised of just two Web Safe colors (and no anti-aliasing) could use just a 2-bit depth, which should be 1/4 th the size of an 8-bit GIF. Anti-aliasing will introduce a lot more colors in order to give your edges a smoother look. After you convert your image to Indexed Color Mode, you can view these colors by looking at your “Color Table”.

GIF Special Effects

The GIF file format also supports a variety of special effects, including interlacing, transparency, and animation. The easiest and quickest way to create a transparent GIF is to make a selection of an RGB image you want to make visible, copy and paste onto a layer in a new RGB image with a transparent background. From there you can choose File > Save for Web to export the image in GIF format using ImageReady's Save for Web dialog box (see below). On older versions of Photoshop, you'll need to export it using the File > Export > GIF89a option. Those areas that were transparent in the RGB image will be preserved as transparent in the GIF image. You can limit the number of colors your image uses in the GIF89a Export Options dialog box. The preview button there will display what those colors are.
The GIF89a Export Options dialog box also contains an “Interlaced” option that you can tick if you would like your image to appear as it's downloading, in finer and finer pixels.
Another way of making transparent GIFs is to make sure your image is in Indexed Color Mode before you export it. Choose a “Selective Palette” for the best-looking conversion that is closest to a Web Safe palette without dithering. After you switch to Indexed Color Mode, you will be faced with a palette of colors that you can use to select the colors that should appear transparent in the final image.

ImageReady's Save for Web Dialog Box


 
8.2. Practice
8.2.1 Reading & Exercises: Arranging Elements: Layout and Positioning

Arranging Elements: Layout and Positioning           

Tutorial Exercise
Read and do the exercises and quizes in Chapter 12 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 487-547). Learn from your mistakes by checking to see if your solutions are correct.

Do the online tutorial: Creating a CSS layout from scratch
 

8.2.2 Reading & Exercises: Getting Tabular: Tables and More Lists

Getting Tabular: Tables and More Lists           

Tutorial Exercise
Read and do the exercises and quizes in Chapter 13 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 549-590). Learn from your mistakes by checking to see if your solutions are correct.

 

8.2.3. Photoshop Tutorials
8.2.3.1. Tutorial: Photoshop Manipulating Selections Overview
8.2.3.2. Tutorial: Photoshop Blending Modes Overview

No comments:

Post a Comment