Class Four:
Hands On Graphics

Before we build

  • Flow chart
  • Navigating your site
  • text navigation like yahoo
  • graphical navigation like this
  • Iconography bad icons, good icons
  • Understandable the first time
  • Interesting the tenth time
  • Design Thoughts
  • What not to do
  • What else not to do

    Desktop Real Estate

  • 640 X 480 or 832 X 624 or 1024 X 768
  • expand your real estate
  • Different browsers, computers
  • Mac, PC, Unix, Linux, Netscape, MSIE, Text only
  • one solution (keep it small)
  • another solution (stretchy)

    Graphic Formats

  • browser support -
  • GIF - graphics, blocky colors
  • JPG - photos, gradients
  • PNG - high res
  • SWF - vector images
  • PDF, VML, VRML, Flash
  • SVG (scalable vector graphics)

    Good Graphics

  • What browsers support - PNG?
  • How to get graphics
  • free pictures free graphics
  • Digital camera, amateur photographers not bad
  • Google image search
  • Beg, borrow, steal! (don't steal)
  • Build it
  • Vector based
  • Pixel based

    Decreasing Load Time

  • Compression - jpg and gif
  • Pixel vs. vector
  • RGB vs. indexed
  • Photos vs. graphics
  • Size vs. beauty
  • Best bang for your bit
  • low compression - high resolution jpg
  • high compression - low resolution jpg
  • example of gif
  • New vector formats - swf
  • flash example
  • Clear cache
  • Reuse cache
  • Preload images
  • Shrink your images

    Tools

  • Free graphics tools
  • Photoshop
  • Paintshop Pro
  • others

    Photoshop basics

  • New document
  • Sharpen and Blur
  • Selection tools
  • Paint and draw tools
  • Erase tool
  • Select area
  • Fill area

    Backgrounds

  • free ones
  • bgimage
  • columns
  • Patterns
  • Watermarks
      -exercise- Create a background image that looks cool!

    Photoshop-ing

  • download the image
  • Alias vs Anti-alias
  • Working with text
  • Create a menu bar
  • Layers and style
  • Effects
      -exercise- Create a menu bar with beveled looking text.

    Web sizing

  • Make a big image small
  • Reduce image size
  • Reduce # of colors
  • Reduce bit rate

    Integrate into page

  • Edit html
  • Directory?

    Transparency

  • The all important transparent gif
  • Problems
  • Spacer gifs in use
      -exercise- Output your menu bar and put it on a textured background.

    Working with ImageReady

    This program comes with Photoshop 6 and is especially good at generating web graphics and clean HTML code.

    Image map

  • Client side
  • map building 101
      -exercise- Use the imagemap function to make areas of your navigation bar hot.

    Slicing Images

  • Using Imageready as an editor
  • Generate images
  • Using guides
  • Slicing and spitting
      -exercise- Slice up your navigation bar into buttons.