Web Images

1
Web Images

• Molloy College
• Dr. Cohen

2
A single letter becomes a forceful symbol as an
image
3
Images capture the moment as no text can
4
The animated image (animated GIF) is a powerful
slide show
5
Types of Images

• .gif (Graphics Interchange Format)
• .jpeg (Joint Photographic Experts Group)
• .png (Portable Network Graphic)

6
GIF
A .gif image is a drawing.
7
JPEG
A .jpeg is a photo.
8
PNG
.png files can contain photos and drawings.
9
Coding Images

• Images are coded by source file
• ltimg srcimages/me.jpggt
• where src is the source file, images is the
  folder, and
• me.jpg is the file.

10
Coding Images

• Images are coded by source file
• ltimg srcimages/me.jpggt
• Add dimensions
• Images are coded by source file
• ltimg srcimages/me.jpg width200
  height240gt

11
Image Borders

• Add borders
• ltimg srcimages/me.jpg border0gt

12
Image Alt Text

• Add alternative text
• ltimg srcimages/me.jpg altA picture of me at
  Molloy.gt

A picture of me at Molloy.
13
Image Align

• ltimg srcimages/me.jpg alignleftgt

14
Fireworks
Making Computer Art
15
Start with the canvas
16
Use the rectangle tool to draw a shape and color
it.
17
Put text in this text box. Size it color it.
18
Align your text.
19
Transform Skew Create nifty effects!
20
Commands Creative Create a picture frame
21
(No Transcript)
22
Animated GIFs

• Create a sequence of words or pictures
• Go
• to
• Molloy

23
Animated GIFs

• Create a .gif or .jpeg for each element

24
Now Open Multiple
25
Add
Add each file in order.
Check animation box.
26
Hit white arrow head to see the animation.
All three pictures are here.
27
Click Export Preview.
28
Set Options Tab to Animated Gif.
29
Go through the Options, File, and Animation tabs.
Set animation times. Preview. Export.
Set loop to Forever.
30
Link the animation to Molloyand your work is
done here!