Title: Intro to Web Graphics
1Intro to Web Graphics
You'll see the information on this slide again on
upcoming quizzes and/or tests this six weeks, so
make sure you know it
2Popular Graphics Applications
- Adobe Photoshop the most popular graphics
application out right now, and is considered the
industry standard. - Adobe (formally Macromedia) Fireworks another
high-end application that works very similar to
Photoshop, with more of an emphasis on web
graphics - Paint Shop Pro The poor-man's Photoshop. Similar
in functionality, much lower in price. I brought
Paint Shop Pro when I was in high school because
I was a geek and it was cheaper. - GIMP An open source (read free and legal)
graphics program that is pretty impressive. The
only problem is installing and getting used to
using it can be a little scary if you aren't very
geeky. If you want more info on getting it, talk
to me - Paint .NET Another open source graphics program,
originally made by college students working with
Microsoft for a senior design project. It is
similar to Paint in that it is very easy to
figure out and free, but MUCH better. I recommend
everyone use this. - Anybody use anything else?
3Approximate Prices
- Adobe Photoshop CS4 699
- Adobe Fireworks CS4 299 (we use the
older-but-similar Fireworks 8 in this class for
now) - Corel Paint Shop Pro Photo X2 99
- GIMP free (and fun)!
- Paint .NET free (and fun)!
- regular old Microsoft Paint free (and although
it is great for pixel art, it is horrible for web
stuff) -
4File FormatsBitmap Images vs Vector Images
- Bitmapped (Raster) images are images made up of
pixels. The info for each pixel in the graphic is
saved, and the image can be edited pixel by pixel - Vector images are based on mathematical formulas.
They use coordinates (points) to define the shape
of a graphic and then fill the points, kind of
like connect-the-dots. - Many graphics programs use vector images while
the image is being edited, but then save it as a
bitmapped image when it is done. - In most programs, text is treated as vectors
until the image is saved in as a bitmapped image
(which is why you can enlarge it and shrink it
without loosing quality)
5- Vector images, because of their mathematical
origins, are readily scalable without distortion.
They can be stretched in size without losing any
clarity or sharpness. - Bitmap images, since they are composed of dots,
lose their clarity when they are increased in
size because the dots get bigger. Take an image
that's 10 pixels wide by 10 pixels high, stretch
it to 100 x 100 pixels and it looks like it's
made of big squares.
6Vectors vs. Bitmaps
- Vector art primarily consists of lines and color
fills, which makes it a little harder to make
really detailed images with them - Bitmaps, since they can be edited pixel by pixel,
tend to be used more for painting and creating
highly detailed graphics
7- The web uses mainly bitmapped images (GIF, JPG,
and PNG formats), although plugins for formats
like Flash and SVG allow vector art to be
displayed - Vector graphics on the web can (in most cases) be
downloaded faster than bitmap images, which
explains why you can download a lengthy Flash
movie quickly while a large bitmapped image takes
longer than expected to load
8BMPWindows Bitmap Format
- It is the default image format for Microsoft
Paint - The Windows Bitmap is an uncompressed file format
- They can get VERY large, even for relatively
small images - Although browsers allow you to use BMP images,
you should never use them because they are
unnecessarily large - Instead, use a compressed file format
- AGAIN, DON'T USE BMPs ON WEB PAGES!
9GIFGraphics Interchange Format
- The GIF was developed by CompuServe specifically
for the web - It is a highly compressed file, so it will often
download quicker on the web than other raster
images - It is an 8-bit image, meaning it can contain at
most 256 colors (which is not very many at all) - GIF is the only format that supports transparency
on ALL browsers, so for now you still it used all
over the place - All browsers support GIF in the same way
- GIFs can also be animated (boooo!) by swapping
through several included GIFs, giving the
illusion of animation. - GIFs are good for files with large, flat areas of
color. - GIFs are bad for photo or photo-like graphics
- DO NOT USE ANIMATED GIFS FOR YOUR WEB SITE
PROJECT! THEY ARE NOT CONSIDERED "PROFESSIONAL"
10JPEGJoint Photographic Experts Group
- The JPEG format is intended for use with
photo-like images. - It is a 24-bit graphics, meaning it can display
up to 16.7 million colors (much better) - It compresses information to make the file size
smaller by removing data from the graphic that it
thinks is less important. If you enlarge the
image, you will see the loss, but most of the
time at regular size it will not make too much of
a difference - Each time you save a JPEG, it looses a little bit
of quality (even if you save it at the maximum
settings). It, like GIF, is a LOSSY format. - All browsers support JPEG the same way.
- It is good to use with gradients, photographs,
art, etc
11PNGPortable Network Graphics
- The PNG format was designed to replace the older
and simpler GIF format around 1996. Browser
support for PNG was initially horrible, and
although it is better now, it is far from perfect - PNG's compression is fully lossless (so each time
you save it, you don't loose any data like you do
with JPEG) - It supports up to 48-bit graphics (a lot)
- PNG also offers transparency, and the
transparency it offers is actually better than
GIF...EXCEPT that IE6 doesn't support PNG
transparency (which is very annoying). As more
users switch to IE7 or Firefox, this is less of
a concern, but still something you should keep in
mind when using PNGs with partial transparency. - For reasons I am not entirely sure of, PNG
transparency if IE7 seems to slow down the
browser a little bit. The page is still usable,
but there is definitely a noticeable lag when
working with partial transparency. - Because cause it is lossless, it is the default
file format used by Fireworks for saving files.
12SVGScalable Vector Graphics
- SVG is a language for describing two-dimensional
graphics and graphical applications in XML. - Firefox 2 has built-in support for SVG, but for
other browsers you have to use a plug-in like the
Adobe SVG Viewer to see it. - Interestingly enough, Adobe recently announced
they will discontinue support for their SVG
plug-in in 2008, presumably because they brought
the acquired the widely-used Flash format with
Macromedia and want to support that instead. - In the future, though, I would still expect
support for SVG to get much better. Eventually,
most vector graphics programs should allow you to
save your file as SVG, just like it does now for
JPEG and PNG.
13Example of SVG file(from Wikipedia)
- standalone"no"?
-
- xmlnsdc"http//purl.org/dc/elements/1.1/"
- xmlnscc"http//web.resource.org/cc/"
- xmlnsrdf"http//www.w3.org/1999/02/22-rdf-syn
tax-ns" - xmlnssvg"http//www.w3.org/2000/svg"
- xmlns"http//www.w3.org/2000/svg"
- xmlnsxlink"http//www.w3.org/1999/xlink"
- xmlnssodipodi"http//inkscape.sourceforge.net
/DTD/sodipodi-0.dtd" - xmlnsinkscape"http//www.inkscape.org/namespa
ces/inkscape" - version"1.0"
- x"0.00000000"
- y"0.00000000"
- width"493.28000pt"
- height"252.89000pt"
- id"svg2"
- sodipodiversion"0.32"
- inkscapeversion"0.42.2"
Note that nobody is ever expected to write their
graphics by hand by writing code like that shown
on the left. Graphics programs will write that
for you, to create an image that is created
solely by text, coordinates, and math stuff, and
no raster images
14Flash SWF
- Although Flash SWF (like SVG) allows you to
import raster graphics, it is primarily a vector
format, which is how it keeps it file sizes so
low on its animation files. - We will spend a good deal of next semester
working solely with Flash, so we won't get into
it for now. - In Fireworks, you can "save as" to Flash SWF
format, which keeps vectors as vectors when
possible to keep the file size down. Primarily,
though, you use Flash to make SWF files. - In order to view .swf (Flash) files, you have to
have a plugin installed in your browser to read
the file format - SWF apparently doesn't stand for anything
anymore, although when it started out it stood
for "Shockwave Flash", since Shockwave was the
company that originally made the standard (and
was then brought by Macromedia)
15Really basic graphic stuff
16Resizing Pictures
- Really big pictures can take a while to download.
Try to keep your file sizes down, so that
background images will still look decent on
smaller browsers (PSPs, cell phones, etc) - I recommend pictures no bigger than 800px by
600px, although those sizes are by no means
absolute - A very common mistake people make when making web
pages using Dreamweaver is to resize them in the
design view by moving the borders of the image.
This makes the image APPEAR smaller, but it
doesn't decrease the file size at all (browsers
still have to load the entire large image). - On your web pages, if you have a small image, you
must resize it in a graphics program before
putting it in your page
17Resizing in different programs
- For Fireworks 8, to resize go to
- Modify Canvas Image Size
- For the free Paint .NET, to resize go to
- Image Resize, select the size you want
- For the free Paint program that comes with all
Windows computers, to resize go to - Image Stretch/Skew and pick the size you want.
Make sure you put the same percentage for both
width and height or the picture will become
distorted
18What happens when you DON'T resize your images
correctly?!
- Bad things.
- For instance, a few years ago I was given a page
from another teacher to put up on the school
website. The person making the page (using
Microsoft Publisher) just inserted the images
from a digital camera into the document, then
resized them by dragging the edges instead of
going into a graphics program and resizing them
manually. - The result a single page that is 15.7mb in size.
That is roughly the same as 4 or 5 MP3s. For a
web page, that is HUGE and completely and totally
unacceptable...a page that big can cause IE to
slow down the computer, assuming that the user
actually stays around to download the entire
page.
19Adjusting Image Quality in Different Programs
- For Fireworks 8, to export go to
- File Image Preview. Select your format and
quality, then hit Export to save the image as
that type. - For the free Paint .NET, to export go to
- File Save As, and select the format you want.
There is not as many image quality options here
as in the other programs, but the overall effect
is similar. - For the free Paint program, to export go to
- File Save As, and select the format you want.
There is NO options for adjusting image quality
(besides selecting a lower color GIF), and their
JPEG compression is horrible, so you should use
program as a LAST resort for exporting images
20Exporting Pictures w/Transparency
- When going to FileImage Preview (for Fireworks),
if you want transparency, you need to select GIF
as the format, then select Index Transparency to
make the background transparent. - With File Save (for Paint.NET), select GIF. Note
you can't select a color for transparency here,
you have to delete the parts you don't want
before save it to make them transparent. - If you are using a PNG, you don't have to do
anything to preserve the alpha (aka
transparency), but again remember users of IE6
will show up with a solid-color background unless
you do a kind of hard fix to make it work in IE6