Photoshop Designing Graphics for the Web Computer Engg

Photoshop: Designing Graphics for the Web Computer Engg. GP Ambala

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

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

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

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

Graphic Limitations • Connection Speeds • User Configurations

Display Considerations • Screen Sizes • Colors

Cross Platform/Browser-Safe Colors • 256 vs. 216 Colors • Dithering • Using the Color Picker

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

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

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

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

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

JPEG vs PNG Comparison of JPEG and PNG 68 K PNG 31 K JPG

GIF vs PNG Comparison of JPEG and PNG 10. 8 K PNG-8 with 64 colors 9. 5 K GIF with 64 colors

Transparent Text Web Graphics

Saving for the Web • 4 -Up View • File Sizes and Download Speeds • Changing Options • Halo Effect and Matte Options

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

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

Scanning Line Art Scan Resolution = Output Device Resolution X Sizing Factor

Scanning Photographic Images Scan Screen Resolution = Ruling Sizing Factor = X Quality Factor X Sizing Factor Desired Size/Original Size

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

Conclusion • Questions & Answers • Additional Resources • Thank You!!!

Introduction to Multimedia Computer Engineering Government Polytechnic Ambala City

What is Multimedia? • Derived from the word “Multi” and “Media” – Multi • Many, Multiple, – Media • Tools that is used to represent or do a certain things, delivery medium, a form of mass communication – newspaper, magazine / tv. • Distribution tool & information presentation – text, graphic, voice, images, music and etc.

Definition of Multimedia • Multimedia is a combination of text, graphic, sound, animation, and video that is delivered interactively to the user by electronic or digitally manipulated means. GRAPHIC TEXT VIDEO AUDIO ANIMATION

Elements of Multimedia GRAPHIC TEXT VIDEO AUDIO ANIMATION A broad term for something that contains words to express something. l Text is the most basic element of multimedia. l A good choice of words could help convey the intended message to the users (keywords). l Used in contents, menus, navigational buttons l

Elements of Multimedia GRAPHIC TEXT VIDEO AUDIO ANIMATION l Example

Elements of Multimedia GRAPHIC TEXT GRAPHIC VIDEO AUDIO ANIMATION Two-dimensional figure or illustration l Could be produced manually (by drawing, painting, carving, etc. ) or by computer graphics technology. l Used in multimedia to show more clearly what a particular information is all about (diagrams, picture). l

Elements of Multimedia GRAPHIC TEXT GRAPHIC VIDEO AUDIO ANIMATION l Example

Elements of Multimedia GRAPHIC TEXT AUDIO VIDEO AUDIO ANIMATION Produced by vibration, as perceived by the sense of hearing. l In multimedia, audio could come in the form of speech, sound effects and also music score. l

Elements of Multimedia GRAPHIC TEXT AUDIO VIDEO AUDIO ANIMATION l Example

Elements of Multimedia GRAPHIC TEXT ANIMATIO N VIDEO AUDIO ANIMATION The illusion of motion created by the consecutive display of images of static elements. l In multimedia, animation is used to further enhance / enriched the experience of the user to further understand the information conveyed to them. l

Elements of Multimedia GRAPHIC TEXT ANIMATIO N VIDEO AUDIO ANIMATION l Example

Elements of Multimedia GRAPHIC TEXT VIDEO AUDIO ANIMATION Is the technology of capturing, recording, processing, transmitting, and reconstructing moving pictures. l Video is more towards photo realistic image sequence / live recording as in comparison to animation. l Video also takes a lot of storage space. So plan carefully before you are going to use it. l

Interactive Multimedia • When the user is given the option of controlling the elements. Hyper Media l. A combination of hypertext, graphics, audio, video, (linked elements) and interactivity culminating in a complete, non-linear computer-based experience.

Example • Interactive Multimedia

Example • Hyper Media Main Page 1. Video link 2. Image link 3. Audio Link

Linear VS Non-Linear LINEAR • A Multimedia Project is identified as Linear when: – It is not interactive – User have no control over the content that is being showed to them. • Example: – A movie – A non-interactive lecture / demo show

Linear VS Non-Linear LINEAR • A Multimedia Project is identified as Linear when: – It is not interactive – User have no control over the content that is being showed to them. • Example: – A movie – A non-interactive lecture / demo show

Linear VS Non-Linear NON-LINEAR • • A Multimedia Project is identified as Non-Linear when: – It is interactive – Users have control over the content that is being showed to them. – Users are given navigational control Example: – Games – Courseware – Interactive CD

Authoring Tools • • Use to merge multimedia elements (text, audio, graphic, animation, video) into a project. Designed to manage individual multimedia elements and provide user interaction (if required).

• Example: – – Macromedia Authorware Macromedia Director Macromedia Flash Microsoft Power Point Authoring Tools

Importance of Multimedia • There a number of fields where multimedia could be of use. Examples are: – Business – Education – Entertainment – Home – Public Places

Importance of Multimedia • Business – Use and Applications • Sales / Marketing Presentation • Trade show production • Staff Training Application • Company Kiosk

Importance of Multimedia • Education – Use and Applications • Courseware / Simulations • E-Learning / Distance Learning • Information Searching

Importance of Multimedia • Entertainment – Use and Applications • Games (Leisure / Educational) • Movies • Video on Demand – Online

Importance of Multimedia • Home – Use and Applications • Television • Satellite TV • SMS services (chats, voting, reality TV)

Importance of Multimedia • Public Places – Use and Applications • Information Kiosk • Smart Cards, Security

Macromedia Flash GP AMBALA

Introduction • • • History What files makes up a Flash Animation? Strengths Weaknesses How difficult it is to use Flash?

Flash Versions • • • Smartsketch Cel. Animator Future. Splash Animator Flash 1 Flash 2 • • • Flash 3 Flash 4 Flash 5 Flash MX 2004 Pro

What files makes up a Flash Animation? • • Flash Application files. fla Actionscripts. as “swiff” files. swf Flash video files. flv

Strengths • • • Simplicity of Flash movie viewing Media Animation Quick start templates. Flash allows animation interactivity No programming skills required

Strengths cont. • • Flash movies are stable in web browsers Easier font handling Easy importation of media Rendering Flash in different browsers

Weaknesses • User must wait for flash document download so as to view the whole page • Forms in Flash are usually not recognized as forms. • Flash is not readable by humans in the. swf format. • Need a Flash software program to create flash.

Weaknesses cont. • • • Need a plug-in to view Search engines cannot index Flash movies Difficulty in printing Flash content Hard to bookmark flash pages Advanced features have a steep learning curve