Soumettre la recherche
Mettre en ligne
CH11 Graphics Notes
•
Télécharger en tant que PPT, PDF
•
0 j'aime
•
235 vues
P
Program in Interdisciplinary Computing
Suivre
from webstyleguide.com
Lire moins
Lire la suite
Technologie
Art & Photos
Signaler
Partager
Signaler
Partager
1 sur 16
Télécharger maintenant
Recommandé
Week04 tk ramperto
Week04 tk ramperto
Lampard To Pasaribu
WSG CH08 - Typography
WSG CH08 - Typography
Program in Interdisciplinary Computing
11 interfaces
11 interfaces
Program in Interdisciplinary Computing
3 Information Architecture
3 Information Architecture
Program in Interdisciplinary Computing
Image Optimization
Image Optimization
Tasawr Interactive
About graphics-on-web
About graphics-on-web
Tayyab Ahmed
Chapter 23: Web Images
Chapter 23: Web Images
Steve Guinan
Introduction to HEVC
Introduction to HEVC
Yoss Cohen
Recommandé
Week04 tk ramperto
Week04 tk ramperto
Lampard To Pasaribu
WSG CH08 - Typography
WSG CH08 - Typography
Program in Interdisciplinary Computing
11 interfaces
11 interfaces
Program in Interdisciplinary Computing
3 Information Architecture
3 Information Architecture
Program in Interdisciplinary Computing
Image Optimization
Image Optimization
Tasawr Interactive
About graphics-on-web
About graphics-on-web
Tayyab Ahmed
Chapter 23: Web Images
Chapter 23: Web Images
Steve Guinan
Introduction to HEVC
Introduction to HEVC
Yoss Cohen
Image file types in html5
Image file types in html5
Wesley Chan
Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)
KAZEMBETVOnline
Image file types in html5
Image file types in html5
Wesley Chan
High Definition Video Conferencing and the Ohio K-12 Network ...
High Definition Video Conferencing and the Ohio K-12 Network ...
Videoguy
Lab#2 illustrator
Lab#2 illustrator
Yaowaluck Promdee
HD Video Essay (final)
HD Video Essay (final)
j.jones
Technical glossary
Technical glossary
halo4robo
IBM VideoCharger and Digital Library MediaBase.doc
IBM VideoCharger and Digital Library MediaBase.doc
Videoguy
Image Files Formats
Image Files Formats
Sarah Fernetich
Webquest
Webquest
webquest
"Machine Learning- based Image Compression: Ready for Prime Time?," a Present...
"Machine Learning- based Image Compression: Ready for Prime Time?," a Present...
Edge AI and Vision Alliance
Artdm171 Week6 Images
Artdm171 Week6 Images
Gilbert Guerrero
Video
Video
mandalina landy
The Perfect Storm MPEG DASH with H.265 (HEVC) with HTML5
The Perfect Storm MPEG DASH with H.265 (HEVC) with HTML5
IMTC
Worksheet 1
Worksheet 1
empentertainment
Technical glossary
Technical glossary
AmaanGDesign
Bitmovin LIVE Tech Talks: Data Driven Video Workflows
Bitmovin LIVE Tech Talks: Data Driven Video Workflows
Bitmovin Inc
Video-Editing Techniques.pptx
Video-Editing Techniques.pptx
1A260YashRavindraRau
Digital video
Digital video
Muhammad King
Week 6 Task File Formats
Week 6 Task File Formats
guest2cf876
Phpmysqlcoding
Phpmysqlcoding
Program in Interdisciplinary Computing
Database basics
Database basics
Program in Interdisciplinary Computing
Contenu connexe
Similaire à CH11 Graphics Notes
Image file types in html5
Image file types in html5
Wesley Chan
Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)
KAZEMBETVOnline
Image file types in html5
Image file types in html5
Wesley Chan
High Definition Video Conferencing and the Ohio K-12 Network ...
High Definition Video Conferencing and the Ohio K-12 Network ...
Videoguy
Lab#2 illustrator
Lab#2 illustrator
Yaowaluck Promdee
HD Video Essay (final)
HD Video Essay (final)
j.jones
Technical glossary
Technical glossary
halo4robo
IBM VideoCharger and Digital Library MediaBase.doc
IBM VideoCharger and Digital Library MediaBase.doc
Videoguy
Image Files Formats
Image Files Formats
Sarah Fernetich
Webquest
Webquest
webquest
"Machine Learning- based Image Compression: Ready for Prime Time?," a Present...
"Machine Learning- based Image Compression: Ready for Prime Time?," a Present...
Edge AI and Vision Alliance
Artdm171 Week6 Images
Artdm171 Week6 Images
Gilbert Guerrero
Video
Video
mandalina landy
The Perfect Storm MPEG DASH with H.265 (HEVC) with HTML5
The Perfect Storm MPEG DASH with H.265 (HEVC) with HTML5
IMTC
Worksheet 1
Worksheet 1
empentertainment
Technical glossary
Technical glossary
AmaanGDesign
Bitmovin LIVE Tech Talks: Data Driven Video Workflows
Bitmovin LIVE Tech Talks: Data Driven Video Workflows
Bitmovin Inc
Video-Editing Techniques.pptx
Video-Editing Techniques.pptx
1A260YashRavindraRau
Digital video
Digital video
Muhammad King
Week 6 Task File Formats
Week 6 Task File Formats
guest2cf876
Similaire à CH11 Graphics Notes
(20)
Image file types in html5
Image file types in html5
Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)
Image file types in html5
Image file types in html5
High Definition Video Conferencing and the Ohio K-12 Network ...
High Definition Video Conferencing and the Ohio K-12 Network ...
Lab#2 illustrator
Lab#2 illustrator
HD Video Essay (final)
HD Video Essay (final)
Technical glossary
Technical glossary
IBM VideoCharger and Digital Library MediaBase.doc
IBM VideoCharger and Digital Library MediaBase.doc
Image Files Formats
Image Files Formats
Webquest
Webquest
"Machine Learning- based Image Compression: Ready for Prime Time?," a Present...
"Machine Learning- based Image Compression: Ready for Prime Time?," a Present...
Artdm171 Week6 Images
Artdm171 Week6 Images
Video
Video
The Perfect Storm MPEG DASH with H.265 (HEVC) with HTML5
The Perfect Storm MPEG DASH with H.265 (HEVC) with HTML5
Worksheet 1
Worksheet 1
Technical glossary
Technical glossary
Bitmovin LIVE Tech Talks: Data Driven Video Workflows
Bitmovin LIVE Tech Talks: Data Driven Video Workflows
Video-Editing Techniques.pptx
Video-Editing Techniques.pptx
Digital video
Digital video
Week 6 Task File Formats
Week 6 Task File Formats
Plus de Program in Interdisciplinary Computing
Phpmysqlcoding
Phpmysqlcoding
Program in Interdisciplinary Computing
Database basics
Database basics
Program in Interdisciplinary Computing
CGS2835 HTML5
CGS2835 HTML5
Program in Interdisciplinary Computing
Mysocial databasequeries
Mysocial databasequeries
Program in Interdisciplinary Computing
Mysocial databasequeries
Mysocial databasequeries
Program in Interdisciplinary Computing
CGS2835 HTML5
CGS2835 HTML5
Program in Interdisciplinary Computing
01 intro tousingjava
01 intro tousingjava
Program in Interdisciplinary Computing
Web architecture v3
Web architecture v3
Program in Interdisciplinary Computing
Xhtml
Xhtml
Program in Interdisciplinary Computing
Webdev
Webdev
Program in Interdisciplinary Computing
Web architecture
Web architecture
Program in Interdisciplinary Computing
Sdlc
Sdlc
Program in Interdisciplinary Computing
Mysocial
Mysocial
Program in Interdisciplinary Computing
Javascript
Javascript
Program in Interdisciplinary Computing
Javascript
Javascript
Program in Interdisciplinary Computing
Html5
Html5
Program in Interdisciplinary Computing
Frameworks
Frameworks
Program in Interdisciplinary Computing
Drupal
Drupal
Program in Interdisciplinary Computing
Database
Database
Program in Interdisciplinary Computing
Javascript2
Javascript2
Program in Interdisciplinary Computing
Plus de Program in Interdisciplinary Computing
(20)
Phpmysqlcoding
Phpmysqlcoding
Database basics
Database basics
CGS2835 HTML5
CGS2835 HTML5
Mysocial databasequeries
Mysocial databasequeries
Mysocial databasequeries
Mysocial databasequeries
CGS2835 HTML5
CGS2835 HTML5
01 intro tousingjava
01 intro tousingjava
Web architecture v3
Web architecture v3
Xhtml
Xhtml
Webdev
Webdev
Web architecture
Web architecture
Sdlc
Sdlc
Mysocial
Mysocial
Javascript
Javascript
Javascript
Javascript
Html5
Html5
Frameworks
Frameworks
Drupal
Drupal
Database
Database
Javascript2
Javascript2
Dernier
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Exakis Nelite
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Skynet Technologies
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
danishmna97
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
TopCSSGallery
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
Kumar Satyam
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
johnbeverley2021
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
AnubhavMangla3
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
Samir Dash
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
BrainSell Technologies
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
jbellis
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
ScyllaDB
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
中 央社
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
MasterG
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
ScyllaDB
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
RaviKumarDaparthi
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
danishmna97
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
FIDO Alliance
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard37
Dernier
(20)
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
CH11 Graphics Notes
1.
© 2004 Ken
Baldauf, All rights reserved. Graphics CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 11: Graphics
2.
© 2010 Ken
Baldauf, All rights reserved. What are the most effective uses of graphics, and what’s the best way to integrate words and images into an understandable story for the user?
3.
© 2010 Ken
Baldauf, All rights reserved. Roles of Web Graphics Define site boundaries Provide and enhance content: illustrations, diagrams, charts, visualizations, word art
4.
© 2010 Ken
Baldauf, All rights reserved.
5.
© 2010 Ken
Baldauf, All rights reserved. Characteristics of Web Graphics RGB model is called “additive” because a combination of the three pure colors—red, green, and blue—“adds up” to white light. 16.8 million colors that are theoretically possible in a 24-bit or 32-bit display screen. 72 to 96 pixels per inch (ppi)
6.
© 2010 Ken
Baldauf, All rights reserved. Gamma The degree of contrast between the midlevel gray values of an image.
7.
© 2010 Ken
Baldauf, All rights reserved. Graphics and Bandwidth Some web users access the Internet via modem, slow wireless connection, or cell phone network, and others view pages on the small display of a handheld device such as a cell phone or an iPod Touch. This reality imposes limits on the file size and physical dimensions of web graphics.
8.
© 2010 Ken
Baldauf, All rights reserved. Graphics File Formats GIF – 8 bit, 256 colors Compression: lossless, ideal for logos Dithering: reducing color amnt to 256 Interlaced: loads entire image from low to high rez Transparent: select background color as trans JPEG – 24 bit, 16.8 million colors Great for photos PNG Combines best of GIF and JPEG but may lack support
9.
© 2010 Ken
Baldauf, All rights reserved. GIF Dithering
10.
© 2010 Ken
Baldauf, All rights reserved.
11.
© 2010 Ken
Baldauf, All rights reserved. Advantages of GIF files •gif is the most widely supported graphics format on the web •gifs of diagrammatic images look better than jpegs •gif supports transparency and interlacing Advantages of JPEG images •jpeg achieves huge compression ratios, which mean faster downloads •jpeg produces excellent results for most photographs and complex images •jpeg supports full-color (24-bit, true-color) images
12.
© 2010 Ken
Baldauf, All rights reserved. Display vs. Print Four-color printed images are separated into four subtractive printing colors (cyan, magenta, yellow, and black).
13.
© 2010 Ken
Baldauf, All rights reserved. Display vs. Print
14.
© 2010 Ken
Baldauf, All rights reserved. Coding graphics Include height and width specs for faster loading pages Include “alt” as a fall back <img src="up.gif" height="10" width="10" alt="Go to top of page">
15.
© 2010 Ken
Baldauf, All rights reserved. Color Combos http://www.colorsontheweb.com/colorcontrast.asp
16.
© 2010 Ken
Baldauf, All rights reserved. Harmonious Combos
Télécharger maintenant