End Show

Design Multimedia Content for Websites

Information & Communication Technology - 2006

End Show

Photoshop: Designing Graphics for the Web

End Show

Overview
Photoshop Basics
What is Photoshop? Uses Tour

Web Graphics
Graphic Limitations Display Considerations Cross-Platform/Browser-Safe Palette File Formats Transparent Text Saving for the Web

End Show

Overview Continued
Scanning
Scanning Concepts Evaluating Originals Scanning Line Art vs. Photographic Images Scanning Strategies Photoshop Measurement/Correction Tools Additional Resources

End Show

What is Photoshop?
Photo retouching, image editing, and color painting program; graphic design tool
Create high-quality digital images Tools & special effects capabilities Manipulate scanned images, slides, & original artwork Isolate parts of an image for experimentation & individual editing And lots more..

Uses of Photoshop
Art (line drawings, charcoal, color original) Photographic Restoration WWW (GIFS, JPEGS, etc.) Montage Halftones, Duotones, Tritones, Quadtones Color Separations Posterizations Special Effects

End Show

End Show

Touring Photoshop
Using Help Navigating: Windows, Palettes, Features & Tools Preferences

End Show

Graphic Limitations
Connection Speeds User Configurations

End Show

Display Considerations
Screen Sizes Colors

Cross Platform/Browser-Safe Colors

256 vs. 216 Colors
Dithering

End Show

Using the Color Picker

End Show

File Formats
JPEG Joint Photographic Experts Group GIF Graphics Interchange Format PNG Portable Network Graphics

End Show

JPEG
Best for photos or continuous tone, full-color images Uses 16 million colors Browsers use reasonable approximations Work in RGB mode Uses lossy compression Saving (Standard, Optimized, Progressive)

End Show

GIF
Best for solid color images (buttons, logos) Uses 256 colors Browsers uses 216 colors Work in Indexed mode Good compression Interlaced

End Show

PNG (8-bit)
Best for line art (logos) Compresses solid areas of color well and maintains sharp detail Generally, has better compression than GIF (10-30% smaller) If considering saving as GIF, also consider saving as PNG (8-bit) Not supported by older browsers

End Show

PNG (24-bit)
Best for continuous-tone images Compresses well, but can be larger than JPEGs If considering saving as JPEG, could also consider PNG (24-bit) Not supported by older browsers

End Show

JPEG vs PNG

Comparison of JPEG and PNG

68K PNG

31K JPG

End Show

GIF vs PNG

Comparison of JPEG and PNG

10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors

End Show

Transparent Text

Web Graphics

End Show

Saving for the Web

4-Up View
File Sizes and Download Speeds

Changing Options
Halo Effect and Matte Options

End Show

Scanning Concepts
Getting Images Into Photoshop Bitmap vs. Vector Graphics Pixel Dimensions Image Resolution Monitor Resolution Printer Resolution Screen Frequency File Size

End Show

Evaluating Originals
Color Range Contrast Size Good Original Shadow & Highlight Detail Tonal Corrections

End Show

Scanning Line Art

Scan Resolution = Output Device Resolution X Sizing Factor

End Show

Scanning Photographic Images

Scan Screen Resolution = Ruling X Quality Factor X Sizing Factor

Sizing Factor

Desired Size/Original Size

End Show

Basic Image Correction

Examine the Original Scan the Original Identify the Image Colors & Tones Measure & Adjust Highlights Measure & Adjust Shadows Measure & Adjust Midtones Apply Unsharp Mask Save File Review Image for Rescanning or Additional Corrections

End Show

Color & Tonal Adjustments

Histograms Navigator Palette Gamma Settings Curve Controls Unsharp Mask Filter

End Show

Summary
Photoshop Basics
What is Photoshop? Uses Tour

Web Graphics
Graphic Limitations Display Considerations Cross-Platform/Browser-Safe Palette File Formats Transparent Text Saving for the Web

End Show

Summary Continued
Scanning
Scanning Concepts Evaluating Originals Scanning Line Art vs. Photographic Images Scanning Strategies Photoshop Measurement/Correction Tools Additional Resources

End Show

Conclusion
Questions & Answers

Additional Resources Thank You!!!

End Show

Design Multimedia Contents for Websites

In this presentation you will be learn How to create an Animation on a website
To create an Animation you can use applications like

PowerPoint
Flash Moho we will use Flash Professional 8

To begin, open Flash Professional 8. You will be presented with the screen shown here.

End Show

Click Flash Document. The screen shown appears below :

End Show

The upper left corner of the screen displays the Tools palette, which contains tools you can use to create or modify graphics and text.

The Stage is displayed in the center of the screen. You create your movie on the Stage. The Timeline appears in the upper portion of the screen. You use the Timeline to lay out the sequence of your movie.

End Show

The Property Inspector

In the Property inspector, you can set the attributes of objects as you work. You will use the Property inspector frequently when working in Flash Professional 8. To open the Property inspector: Choose Window > Properties

The Property inspector appears at the bottom of the screen.

After this presentation you can create a website including a simple animation like this. Click here

End Show

Create your animation using Flash

Open Flash File New

FileImport and import moving Bird.gif

Change the background color to black Insert 5 key frames

It shown below

End Show

End Show

Then click frame1 and click on the image Click Free Transform Tool. Now you can edit the size of the picture

End Show

After editing frame 1

End Show

Then go to frame 2 and edit picture as below by using Free

Transform Tool. Click on the image and put mouse pointer inside the selected

frame.
Mouse pointer change to cross. Now you can move the picture.

End Show

Edit other key frames as above and create the animation. Frame 3

End Show

Frame 4

End Show

Frame 5

Finally press Ctrl+Enter to view the animation

Create the flash movie

End Show

File Export movie

Type the name as Bird then click save Press Ok The following code is used to create the web page
<head> <title>Unit6. web Site Development</title> </head> <object> <embed src="Bird.swf" width="550" height="400"> </embed> </object>

Coding Audio and Video in HTML

End Show

The simplest way to call a sound file is to simply put a link to the file. Depending on your browser and configuration, it will either invoke your operating system's basic player software, player support built into the browser, or a plug-in that provides the player capability. As an example of the simplest format, the line of HTML code below will call up the file Track 2.mp3 from the current directory with any browser. Note that you can play any sound file with this command format, not just MIDI files:

<a href="Track
Click here

2.mp3"> Play My Song </a>

End Show

The simplest format of the line of HTML code will call up the file GLOBE.AVI from the current directory.

<EMBED SRC="GLOBE.AVI" WIDTH=500 HEIGHT=500 >

Click here