Intro to Web Graphics - PowerPoint PPT Presentation


PPT – Intro to Web Graphics PowerPoint presentation | free to view - id: 20dfa-NWZkM


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Intro to Web Graphics


Adobe (formally Macromedia) Fireworks: another high-end application that works ... In Fireworks, you can 'save as' to Flash SWF format, which keeps vectors as ... – PowerPoint PPT presentation

Number of Views:76
Avg rating:3.0/5.0
Slides: 21
Provided by: MISD153


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Intro to Web Graphics

Intro 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
Popular 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
  • 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?

Approximate Prices
  • Adobe Photoshop CS4 699
  • Adobe Fireworks CS4 299 (we use the
    older-but-similar Fireworks 8 in this class for
  • 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

File 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)

  • 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.  

Vectors 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

  • The web uses mainly bitmapped images (GIF, JPG,
    and PNG formats), although plugins for formats
    like Flash and SVG allow vector art to be
  • 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

BMPWindows Bitmap Format
  • It is the default image format for Microsoft
  • 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

GIFGraphics 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
  • 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
  • GIFs are bad for photo or photo-like graphics

JPEGJoint 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

PNGPortable 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.

SVGScalable 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.

Example of SVG file(from Wikipedia)
  • standalone"no"?
  • xmlnsdc"http//"
  • xmlnscc"http//"
  • xmlnsrdf"http//
  • xmlnssvg"http//"
  • xmlns"http//"
  • xmlnsxlink"http//"
  • xmlnssodipodi"http//
  • xmlnsinkscape"http//
  • 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
Flash 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)

Really basic graphic stuff
Resizing 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
  • 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

Resizing 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

What happens when you DON'T resize your images
  • 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
  • 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

Adjusting 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

Exporting 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