Course notes
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Moving from Design to HTML

January 25th, 2011

Design Revisions

Website design revisions are due next class period. Do not stick with your first design if it is not AWESOME. Change it completely if you need to. The design of the site is easier to revise now so do not hesitate to make changes. Turn in the new designs before class.

Image Review in Photoshop:

In Photoshop you can save for the Web and Devices.
  1. Optimizing Images for the Web


  1. Structure of the website
  2. Image Slices
  3. Animated GIFs

Optimizing Images for the Web

The file format, file size, color and compression are chosen to maximize quality yet still enable to download quickly on the web; Reduce size until image quality degrades:
1. In Photoshop: Crop the image - only include most important info.
2. Resize to 800w max, 600h max, 72 dpi.
3. File menu - Save for Web & Devices
4. In top right corner select file type (GIF, JPEG or PNG)
5. Click 2-Up tab to see original and optimized simultaneously (or 4-Up for more views).
6. Select a window and change settings to see which one is best (looks good and is smallest file size)
7. When finished selecting settings, click SAVE.

To Save a JPEG File:

1. Select JPEG as the file type:

• Maximum, High, Low, Medium Quality (or move quality slider).
• Check Progressive box to load up as a low res and increase the resolution over time.
• Increase Blur to lessen JPEG artifacts if necessary (don't over-blur).
• Matte: JPEG doesn't support it; set to Bkgd color to simulate transparency.
• Check Optimized box to produce smallest file (old browsers won't be able to read it though!)

2. SAVE - It will give you the .jpg extension by default. ALWAYS save both a copy of the PSD file and your optimized one. Save the optimized one to the images folder.

To Save a GIF File:

1. Select options for GIF:

• Palette: try different ones see definitions below.

Type of Palettes:

Perceptual - Generates a color table based on colors in the image, with attention to how humans actually perceive color; Perserves overall color integrity.
Selective - Generates a color table based on colors in the image, preserves flat colors and Web-safe colors.
Adaptive - Generates a color table based on the part of spectrum most used in the image (larger file). Custom - Create your own palette using the color picker.
Restrictive - Use for web viewing (216 common colors on Web browsers); Shifts image colors to closest in web palette; least colors, smallest file, not best image quality. System
(Mac OS or Windows) - Use if it will only be viewed on that platform.

Colors - select how many possible colors in the image (go with the smallest number possible and this will save lots of download time)

• Dither: Dither=simulates for 8-bit monitor; larger size; Diffusion=subtle & small.
• Dither %: high=better but bigger.
• Max # Colors: Web defaults.
• Transparency= preserves transparency.
      To make an image have transparency you must have parts of the image transparent already.
• Matte: controls partially transparent pixels:

• Check Interlaced Box = shows overview and sharpens up images - adds to file size.
• Web Snap%: range of colors that snap to Web-safe equivalent (High=small, dither)
• Adjust Lossy value: reduces size, but will lose some info.

2. Save ; name it (all lowercase); It will give you the .gif extension by default.

To Save a PNG File:

The difference between 8 bit and 24 bit PNG: 24 can handle millions of colors and transparency and 8 bit is 256 colors maximum.

1. Select options for PNG: (24-bit will only offer transparency)

• Palette • Dither: Dither=simulates for 8-bit monitor; larger size; Diffusion=subtle & small.
• Dither %: high=better but bigger.
• Max # Colors: Web defaults.
• Transparency= preserves transparency.
• Matte: controls partially transparent pixels:

2. Save ; name it (all lowercase); It will give you the .gif extension by default.



Photographic Image GIF
Photographic Image JPG
Simple Graphic GIF
Simple Graphic JPG

Transparency and Matte

Importing Images Into HTML documents

Images should be in an images folder (relative to HTML files) prior to inserting them into the HTML doc.

In Dreamweaver, select Insert menu - IMAGE and find the image. Enter its ALT text information.

EX: <img src="../images/dir.jpg" width="35" height="34" border="2" alt="The Logo">

SIZE attributes: (WIDTH, HEIGHT) - will distort image if you don't change width/height proportionately.

ALT attribute is Alternate Text that shows up on rollovers AND gives text description for non-graphic browsers.

BORDER attribute puts an outline around the image.

File Structure

Your file structure MUST be set up like this:

file structure

Image Slices

• Slicing divides an image into distinct ZONES.
• Divides up a large image to enable it to download faster (group of small slices downloads faster than a single large image) because you can optimize each slice individually.

1. Always use Photoshop Guides to mark where you will make your slices (hit R to turn on the rulers and pull a guide line from the Ruler)
2. Under the Crop Tool in the Tool Palette, select the slice tool.
3. Drag to select a slice of your image (make sure View - Snap is ON)
4. Slice up the parts of the image you need to be separate.
5. Go backto the slice tool and select Slice Select Tool.
6. Double click the slice and name the image. Make sure you name it an easy to remember name (Row1Col2.jpg, etc.) No need to fill in the rest, we will do that in Dreamweaver.
7.Under the View Menu you can Clear the Slices or Lock the Slices

Deleting Slices:

1. Slice Select Tool (K)
2. Shift select; hit Backspace/Delete
Resizing Slices: drag slice border handles when slice is selected.

To Save the Sliced Images:

1. File menu - Save for Web & Devices
2. Select all the options to optimize the image
3. Find and Click the image folder (do not go inside it) then SAVE
4. Format: Images Only
5. Settings: Default Settings
6. Slices: All Slices or just the selected ones

Animated GIFs

Animated GIFs are sequences of images displayed over time.

Animated GIF

Creating and Editing:

To create a hand drawn animation using Photoshop Frame Animation

In Photoshop, open a new file - 72 pixels per inch - do not make it big
Then select Window menu - Animation

Make sure it is in Frame Animation mode - Animation (Frames)
If it is not, Animation Palette Menu (on the right side of the Animation box on the bottom of the page) - Convert to Frame Animation

You need to have your Layer palette open and work with both the Animation palette and layer palette

Different ways to animate using the layers:

  • Turn layers on or off for each frame
  • Move the layers - drag it around with the pointer tool

    Steps to making an animation
  • Make new layer
  • draw on the layer
  • duplicate the layer and move the object or erase and redraw the object in new spot
    you can also make a new layer
  • repeat the previous step till you have a nice stack of layers

  • go to the Animation (Frames) palette and select the first frame
  • turn on or off the layers you want to be visible in this frame
  • Duplicate the frame by clicking the icon in the bottom of the palette
  • Turn off and on layers for each frame duplicated

    When you click the duplicate icon on the bottom it will duplicate the single frame or the series of frames you select

    If you select more than 1 frame, it will put them after the last frame you selected

    To insert new frames in the middle (Tweening)
  • Select the frame that you want the frames to go before
  • click the Tweens Animation Frames icon in the Animation palette
  • Select Previous frames, type number of frames, and only select the parameter that you want to change

    If you select:
  • a single frame it asks if you want to put the additional frames
  • two contiguous frames, it puts the new frames in the middle
  • more than 3 or more frames, it replaces the middle frames with the new interpolated frames using
    the outer frames as the ones to determine the tweening

    The tween options:
  • all layers will make inbetweens for all layers in the frame
  • selected layers makes inbetweens for only the selected layers in the layer palette

  • Select from position, opacity, or effects or a combination of the all

    To set the delay select one or more frames
  • (you can select noncontiguous frames by using the Command click on Mac or Ctl click on PC)
  • Pull down on the delay number to select a new time delay

    To set the loop
  • Pull down on the menu with Once in it to select Once, Forever or Other...

    Changing the order of the frames

  • Drag the frame to a new spot in the row of frames

    Reversing the frames
  • Select frames (can select frames that are not contiguous)
  • Animation palette menu - Reverse frames

    To delete frames
  • Drag the drag to the trash or
  • select the frame and click the trash or
  • Animation palette menu - Delete Frame

    Cut, Copy, Paste Frames

    Select one or more frames
    Animation palette menu - Copy Frame
    Select the frame to indicate where you want to paste it
    Animation palette menu - Paste Frame
    Tell it where to paste it, Replace Frames, Paste over, Paste before, Paste after

    Adding a new layer each time you make a frame:
    Each time you want to add a new frame it is helpful to have a new layer if you are drawing frame by frame animation
    Under the animation palette menu - select:
  • Create new layer for each new frame

    You can also turn on or off
    New layers visible in all frames
    all newly created frames will appear in all frames

    Increase size of frame view
  • Animation palette menu - Panel Options

    Saving your animated GIF
  • Go to the File - Save for Web & Devices
  • Select GIF and change the settings to optimize the file size
  • SAVE

  • Exercise 3:

    Slice up the image of the design of your interface.


    HOMEWORK GIVEN: Ex 3: Story Design in HTML and CSS

    Description: Create a page of your story using HTML and CSS.
    DUE: Jan. 27, 2011