design multimedia content for websites
TRANSCRIPT
-
7/28/2019 Design Multimedia Content for Websites
1/43
End Show
Design MultimediaContent for Websites
Information & Communication Technology - 2006
-
7/28/2019 Design Multimedia Content for Websites
2/43
End Show
Photoshop: Designing Graphics for the
Web
-
7/28/2019 Design Multimedia Content for Websites
3/43
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
-
7/28/2019 Design Multimedia Content for Websites
4/43
End Show
Overview Continued
Scanning
Scanning Concepts
Evaluating Originals
Scanning Line Art vs. Photographic Images Scanning Strategies
Photoshop Measurement/Correction Tools
Additional Resources
-
7/28/2019 Design Multimedia Content for Websites
5/43
End Show
What is Photoshop?
Photo retouching, image editing, and colorpainting 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..
-
7/28/2019 Design Multimedia Content for Websites
6/43
End ShowUses of Photoshop
Art (line drawings, charcoal, color original)
Photographic
Restoration
WWW (GIFS, JPEGS, etc.) Montage
Halftones, Duotones, Tritones, Quadtones
Color Separations
Posterizations
Special Effects
-
7/28/2019 Design Multimedia Content for Websites
7/43
End Show
Touring Photoshop
Using Help
Navigating: Windows, Palettes,Features & Tools
Preferences
-
7/28/2019 Design Multimedia Content for Websites
8/43
End Show
Graphic Limitations
Connection Speeds
User Configurations
-
7/28/2019 Design Multimedia Content for Websites
9/43
End Show
Display Considerations
Screen Sizes
Colors
-
7/28/2019 Design Multimedia Content for Websites
10/43
End Show
Cross Platform/Browser-Safe
Colors
256 vs. 216 Colors
Dithering
Using the Color Picker
-
7/28/2019 Design Multimedia Content for Websites
11/43
End Show
File Formats
JPEG Joint Photographic Experts
Group GIF Graphics Interchange Format
PNG Portable Network Graphics
-
7/28/2019 Design Multimedia Content for Websites
12/43
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)
-
7/28/2019 Design Multimedia Content for Websites
13/43
End Show
GIF
Best for solid color images (buttons,
logos)
Uses 256 colors
Browsers uses 216 colors
Work in Indexed mode Good compression
Interlaced
-
7/28/2019 Design Multimedia Content for Websites
14/43
End Show
PNG (8-bit)
Best for line art (logos)
Compresses solid areas of color welland maintains sharp detail
Generally, has better compression thanGIF (10-30% smaller)
If considering saving as GIF, alsoconsider saving as PNG (8-bit)
Not supported by older browsers
-
7/28/2019 Design Multimedia Content for Websites
15/43
End Show
PNG (24-bit)
Best for continuous-tone images
Compresses well, but can be largerthan JPEGs
If considering saving as JPEG, could
also consider PNG (24-bit) Not supported by older browsers
-
7/28/2019 Design Multimedia Content for Websites
16/43
End Show
JPEG vs PNG
Comparison
of JPEG and
PNG
68K PNG 31K JPG
-
7/28/2019 Design Multimedia Content for Websites
17/43
End Show
GIF vs PNG
Comparison
of JPEG and
PNG
10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors
-
7/28/2019 Design Multimedia Content for Websites
18/43
End Show
Transparent Text
Web Graphics
-
7/28/2019 Design Multimedia Content for Websites
19/43
End Show
Saving for the Web
4-Up View
File Sizes and Download Speeds
Changing Options
Halo Effect and Matte Options
-
7/28/2019 Design Multimedia Content for Websites
20/43
End Show
Scanning Concepts
Getting Images Into Photoshop
Bitmap vs. Vector Graphics
Pixel Dimensions Image Resolution
Monitor Resolution
Printer Resolution Screen Frequency
File Size
-
7/28/2019 Design Multimedia Content for Websites
21/43
End Show
Evaluating Originals
Color Range
Contrast Size
Good Original
Shadow & Highlight Detail
Tonal Corrections
-
7/28/2019 Design Multimedia Content for Websites
22/43
End Show
Scanning Line Art
Scan Resolution = Output DeviceResolution
X SizingFactor
-
7/28/2019 Design Multimedia Content for Websites
23/43
End Show
Scanning Photographic
Images
Scan
Resolution =Screen
Ruling X XQuality
Factor SizingFactor
SizingFactor =
Desired Size/Original Size
-
7/28/2019 Design Multimedia Content for Websites
24/43
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 AdditionalCorrections
-
7/28/2019 Design Multimedia Content for Websites
25/43
End Show
Color & Tonal Adjustments
Histograms
Navigator Palette Gamma Settings
Curve Controls
Unsharp Mask Filter
-
7/28/2019 Design Multimedia Content for Websites
26/43
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
-
7/28/2019 Design Multimedia Content for Websites
27/43
End Show
Summary Continued
Scanning
Scanning Concepts
Evaluating Originals
Scanning Line Art vs. Photographic Images Scanning Strategies
Photoshop Measurement/Correction Tools
Additional Resources
-
7/28/2019 Design Multimedia Content for Websites
28/43
End Show
Conclusion
Questions & Answers
Additional Resources
Thank You!!!
-
7/28/2019 Design Multimedia Content for Websites
29/43
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
End Show
-
7/28/2019 Design Multimedia Content for Websites
30/43
To begin, open Flash Professional 8. You will
be presented with the screen shown here.
Click Flash Document. The screen shown appears below :
End Show
-
7/28/2019 Design Multimedia Content for Websites
31/43
The Stage is displayed in the center of thescreen. 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.
The upper left corner of thescreen displays the Tools
palette, which contains tools
you can use to create or
modify graphics and text.
End Show
-
7/28/2019 Design Multimedia Content for Websites
32/43
The Property Inspector
In the Property inspector, you can set the attributes of objects as
you work. You will use the Property inspector frequently whenworking in Flash Professional 8.
To open the Property inspector:
Choose Window >Properties
The Property inspector appears at the bottom of the screen.
End Show
-
7/28/2019 Design Multimedia Content for Websites
33/43
After this presentation you can create a website
including a simple animation like this. Click here
Create your animation using Flash
Open Flash
File New
FileImportand import movingBird.gif
End Show
Change the background color to black
http://localhost/var/Unit%206/web.htmlhttp://localhost/var/Unit%206/web.html -
7/28/2019 Design Multimedia Content for Websites
34/43
Change the background color to black
Insert 5 key frames
It shown below
End Show
-
7/28/2019 Design Multimedia Content for Websites
35/43
Then click frame1 and click on the image
Click Free Transform Tool.
Now you can edit the size of the picture
End Show
-
7/28/2019 Design Multimedia Content for Websites
36/43
After editing frame 1
End Show
End Show
-
7/28/2019 Design Multimedia Content for Websites
37/43
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
-
7/28/2019 Design Multimedia Content for Websites
38/43
Frame 3
Edit other key frames as above and create the
animation.
End Show
d Sh
-
7/28/2019 Design Multimedia Content for Websites
39/43
Frame 4
End Show
E d Sh
-
7/28/2019 Design Multimedia Content for Websites
40/43
Frame 5
Finally pressCtrl+Enterto view the animation
End Show
E d Sh
-
7/28/2019 Design Multimedia Content for Websites
41/43
Create the flash movie
File Export movie
Type the name asBirdthen clicksavePress Ok
The following code is used to create the web page
Uni t6. web Site Development
End Show
E d ShC di A di d Vid i HTML
-
7/28/2019 Design Multimedia Content for Websites
42/43
End ShowCoding Audio and Video in HTML
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 codebelow will call up the file Track 2.mp3from the current
directory with any browser. Note that you can play any sound
file with this command format, not just MIDI files:
Play My Song
Click here
E d Sh
http://localhost/var/www/apps/conversion/tmp/scratch_7/Audio.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_7/Audio.html -
7/28/2019 Design Multimedia Content for Websites
43/43
End Show
The simplest format of the line of HTML code will call up thefile GLOBE.AVIfrom the current directory.
Click here
http://localhost/var/www/apps/conversion/tmp/scratch_7/Video.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_7/Video.html