SlideShare a Scribd company logo
1 of 4
Digital Imaging
Unit 11: Creating Images for the Web
Module 1: Understanding Web Graphics
Creating Images for the Web and mobile devices
There is a difference in creating
images for the web vs. creating
images for print.
As a designer it is essential to
understand how to create
graphics for web and mobile
devices.
Digital Imaging
Unit 11: Creating Images for the Web
Module 1: Understanding Web Graphics
Creating Images for the Web
Web images are typically 72dpi and not suitable for resizing or
printing.
Digital Imaging
Unit 11: Creating Images for the Web
Module 1: Understanding Web Graphics
Creating Images for the Web
Web images are compressed for
faster loading.
Images that have been
compressed, should not be
scaled up since the compression
process, which is necessary for
fast loading, degrades both color
and detail.
Digital Imaging
Unit 11: Creating Images for the Web
Module 1: Understanding Web Graphics
Creating Images for the Web
Not all computers or mobile
devices will have all the fonts
available for use in a design. The
only way to make custom fonts
appear consistent across web
browsers is to render them as
images.

More Related Content

Viewers also liked

Elem of design unit 9 module 1 integrating text and graphics
Elem of design unit 9 module 1 integrating text and graphicsElem of design unit 9 module 1 integrating text and graphics
Elem of design unit 9 module 1 integrating text and graphicskateridrex
 
Presentación FEDELUCD
Presentación FEDELUCDPresentación FEDELUCD
Presentación FEDELUCDRene Rodriguez
 
Herramientas web-2 (1)
Herramientas web-2 (1)Herramientas web-2 (1)
Herramientas web-2 (1)marita2101
 
Mortalité piscicole Est France 1973
Mortalité piscicole Est France 1973Mortalité piscicole Est France 1973
Mortalité piscicole Est France 1973Pierre Marle
 
Ivy Lam RD Nutrition Poster
Ivy Lam RD Nutrition PosterIvy Lam RD Nutrition Poster
Ivy Lam RD Nutrition PosterIvy Lam
 
Premiação 6º Encontro de Jovens Cientistas (2015)
Premiação 6º Encontro de Jovens Cientistas (2015)Premiação 6º Encontro de Jovens Cientistas (2015)
Premiação 6º Encontro de Jovens Cientistas (2015)Mariana Alcântara
 
Trend Kejahatan Cyber 2015
Trend Kejahatan Cyber 2015Trend Kejahatan Cyber 2015
Trend Kejahatan Cyber 2015Dedi Dwianto
 
La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...
La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...
La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...Nicolas Hurtado T.·.
 
Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)
Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)
Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)Peter Tzagarakis
 
Estado actual y perspectivas de la Acuicultura al 2030
Estado actual y perspectivas de la Acuicultura al 2030Estado actual y perspectivas de la Acuicultura al 2030
Estado actual y perspectivas de la Acuicultura al 2030Nicolas Hurtado T.·.
 

Viewers also liked (12)

Dnip16maternidadesocial (3)
Dnip16maternidadesocial (3)Dnip16maternidadesocial (3)
Dnip16maternidadesocial (3)
 
Elem of design unit 9 module 1 integrating text and graphics
Elem of design unit 9 module 1 integrating text and graphicsElem of design unit 9 module 1 integrating text and graphics
Elem of design unit 9 module 1 integrating text and graphics
 
Presentación FEDELUCD
Presentación FEDELUCDPresentación FEDELUCD
Presentación FEDELUCD
 
Herramientas web-2 (1)
Herramientas web-2 (1)Herramientas web-2 (1)
Herramientas web-2 (1)
 
Αιγιακοί πολιτισμοί
Αιγιακοί πολιτισμοίΑιγιακοί πολιτισμοί
Αιγιακοί πολιτισμοί
 
Mortalité piscicole Est France 1973
Mortalité piscicole Est France 1973Mortalité piscicole Est France 1973
Mortalité piscicole Est France 1973
 
Ivy Lam RD Nutrition Poster
Ivy Lam RD Nutrition PosterIvy Lam RD Nutrition Poster
Ivy Lam RD Nutrition Poster
 
Premiação 6º Encontro de Jovens Cientistas (2015)
Premiação 6º Encontro de Jovens Cientistas (2015)Premiação 6º Encontro de Jovens Cientistas (2015)
Premiação 6º Encontro de Jovens Cientistas (2015)
 
Trend Kejahatan Cyber 2015
Trend Kejahatan Cyber 2015Trend Kejahatan Cyber 2015
Trend Kejahatan Cyber 2015
 
La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...
La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...
La acuicultura sostenible para la seguridad alimentaria y la nutrición en el ...
 
Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)
Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)
Εποχή του Χαλκού - Μινωική Κρήτη (α.κατοίκηση)
 
Estado actual y perspectivas de la Acuicultura al 2030
Estado actual y perspectivas de la Acuicultura al 2030Estado actual y perspectivas de la Acuicultura al 2030
Estado actual y perspectivas de la Acuicultura al 2030
 

Similar to Wd133 unit 11 module 1 understanding web graphics

Digital Graphics Technology
Digital Graphics TechnologyDigital Graphics Technology
Digital Graphics Technologyhaverstockmedia
 
Digital Graphics Technology
Digital Graphics TechnologyDigital Graphics Technology
Digital Graphics Technologyhaverstockmedia
 
Digital graphics technology
Digital graphics technologyDigital graphics technology
Digital graphics technologyhaverstockmedia
 
Digital graphics technology
Digital graphics technologyDigital graphics technology
Digital graphics technologyhaverstockmedia
 
Digital graphics technology
Digital graphics technologyDigital graphics technology
Digital graphics technologyhaverstockmedia
 
Website development tool
Website development toolWebsite development tool
Website development toolJins Joseph Seo
 
From Print Design to Web Design
From Print Design to Web DesignFrom Print Design to Web Design
From Print Design to Web DesignESUG
 
How to Splice Images for Web Design
How to Splice Images for Web DesignHow to Splice Images for Web Design
How to Splice Images for Web DesignChristopher Dill
 
It presentation specialised application software
It presentation specialised application softwareIt presentation specialised application software
It presentation specialised application softwareNisarga Nikam
 
Android Web app
Android Web app Android Web app
Android Web app Sumit Kumar
 
Android design lecture #1
Android design   lecture #1Android design   lecture #1
Android design lecture #1Vitali Pekelis
 
Design Responsibly
Design ResponsiblyDesign Responsibly
Design ResponsiblyJacob Surber
 
Computer Art Applications.pptx
Computer Art Applications.pptxComputer Art Applications.pptx
Computer Art Applications.pptxleovieortega2
 
Preparing for WP8
Preparing for WP8Preparing for WP8
Preparing for WP8Matt Lacey
 

Similar to Wd133 unit 11 module 1 understanding web graphics (20)

Digital Graphics Technology
Digital Graphics TechnologyDigital Graphics Technology
Digital Graphics Technology
 
Digital Graphics Technology
Digital Graphics TechnologyDigital Graphics Technology
Digital Graphics Technology
 
Digital graphics technology
Digital graphics technologyDigital graphics technology
Digital graphics technology
 
Digital graphics technology
Digital graphics technologyDigital graphics technology
Digital graphics technology
 
Digital graphics technology
Digital graphics technologyDigital graphics technology
Digital graphics technology
 
POV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle EnterprisePOV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle Enterprise
 
Website development tool
Website development toolWebsite development tool
Website development tool
 
Rapid design
Rapid designRapid design
Rapid design
 
report
reportreport
report
 
From Print Design to Web Design
From Print Design to Web DesignFrom Print Design to Web Design
From Print Design to Web Design
 
How to Splice Images for Web Design
How to Splice Images for Web DesignHow to Splice Images for Web Design
How to Splice Images for Web Design
 
It presentation specialised application software
It presentation specialised application softwareIt presentation specialised application software
It presentation specialised application software
 
Android Web app
Android Web app Android Web app
Android Web app
 
Unit 13 assignment 1
Unit 13 assignment 1Unit 13 assignment 1
Unit 13 assignment 1
 
Android design lecture #1
Android design   lecture #1Android design   lecture #1
Android design lecture #1
 
Design Responsibly
Design ResponsiblyDesign Responsibly
Design Responsibly
 
(2) gui drawing
(2) gui drawing(2) gui drawing
(2) gui drawing
 
Computer Art Applications.pptx
Computer Art Applications.pptxComputer Art Applications.pptx
Computer Art Applications.pptx
 
programming
programmingprogramming
programming
 
Preparing for WP8
Preparing for WP8Preparing for WP8
Preparing for WP8
 

More from kateridrex

Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)kateridrex
 
Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)kateridrex
 
Dig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imageDig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imagekateridrex
 
Dig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imageDig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imagekateridrex
 
Dig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonsDig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonskateridrex
 
Dig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectsDig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectskateridrex
 
Dig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapesDig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapeskateridrex
 
Dig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolDig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolkateridrex
 
Dig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color correctionsDig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color correctionskateridrex
 
Dig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelsDig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelskateridrex
 
Dig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channelsDig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channelskateridrex
 
Dig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filtersDig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filterskateridrex
 
Dig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filtersDig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filterskateridrex
 
Dig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masksDig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping maskskateridrex
 
Dig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layersDig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layerskateridrex
 
Dig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masksDig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer maskskateridrex
 
Dig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolsDig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolskateridrex
 
Dig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertiesDig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertieskateridrex
 
Dig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textDig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textkateridrex
 
Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]kateridrex
 

More from kateridrex (20)

Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
 
Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
 
Dig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imageDig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an image
 
Dig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imageDig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an image
 
Dig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonsDig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttons
 
Dig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectsDig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effects
 
Dig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapesDig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapes
 
Dig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolDig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen tool
 
Dig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color correctionsDig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color corrections
 
Dig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelsDig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channels
 
Dig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channelsDig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channels
 
Dig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filtersDig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filters
 
Dig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filtersDig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filters
 
Dig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masksDig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masks
 
Dig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layersDig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layers
 
Dig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masksDig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masks
 
Dig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolsDig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting tools
 
Dig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertiesDig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and properties
 
Dig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textDig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path text
 
Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]
 

Wd133 unit 11 module 1 understanding web graphics

  • 1. Digital Imaging Unit 11: Creating Images for the Web Module 1: Understanding Web Graphics Creating Images for the Web and mobile devices There is a difference in creating images for the web vs. creating images for print. As a designer it is essential to understand how to create graphics for web and mobile devices.
  • 2. Digital Imaging Unit 11: Creating Images for the Web Module 1: Understanding Web Graphics Creating Images for the Web Web images are typically 72dpi and not suitable for resizing or printing.
  • 3. Digital Imaging Unit 11: Creating Images for the Web Module 1: Understanding Web Graphics Creating Images for the Web Web images are compressed for faster loading. Images that have been compressed, should not be scaled up since the compression process, which is necessary for fast loading, degrades both color and detail.
  • 4. Digital Imaging Unit 11: Creating Images for the Web Module 1: Understanding Web Graphics Creating Images for the Web Not all computers or mobile devices will have all the fonts available for use in a design. The only way to make custom fonts appear consistent across web browsers is to render them as images.