introductiondfitzpat/content/ca106/... · 2017. 10. 19. · colour displays monitors transmit...
TRANSCRIPT
![Page 1: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/1.jpg)
Web graphics
Introduction
![Page 2: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/2.jpg)
Role of Web Graphics
![Page 3: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/3.jpg)
Role of Web Graphics
“Although web designers could build a
site without graphics, most users
would not readily recognize a
collection of bare pages as a cohesive
“site,” and such a site would seem
unpleasantly odd, well outside of
design norms and user expectations.”
http://webstyleguide.com/
![Page 4: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/4.jpg)
Role of Web Graphics
Site-defining identity graphics do not
need to be elaborate, but they do
need to be consistent across the
range of pages in a site for the user to
establish a sense that your pages are
a discrete region… distinct as a
place.
http://webstyleguide.com/
![Page 5: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/5.jpg)
![Page 6: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/6.jpg)
![Page 7: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/7.jpg)
Role of Web Graphics
“Our limits are now fewer and our tools are more powerful, but we still have to answer the same questions communicators have always asked: 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?”
http://webstyleguide.com/
![Page 8: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/8.jpg)
![Page 9: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/9.jpg)
Graphics as content
Illustrations: Graphics can show you things, bringing
pieces of the world into your document
Diagrams: Quantitative graphics and process
diagrams can explain concepts visually
Quantitative data: Numeric charts can help explain
financial, scientific, or other data
Analysis and causality: Graphics can help take apart
a topic or show what caused it
Integration: Graphics can combine words, numbers,
and images in a comprehensive explanation
![Page 10: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/10.jpg)
Illustrations:
Graphics can
show you
things, bringing
pieces of the
world into your
document
![Page 11: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/11.jpg)
Diagrams: Quantitative graphics and
process diagrams can explain concepts
visually
![Page 12: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/12.jpg)
Quantitative data: Numeric charts can help
explain financial, scientific, or other data
![Page 13: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/13.jpg)
http://www.nytimes.com
Analysis and causality: Graphics can help
take apart a topic or show what caused it
![Page 14: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/14.jpg)
http://www.nytimes.com
Integration:
Graphics can
combine words,
numbers, and
images in a
comprehensive
explanation
![Page 15: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/15.jpg)
Graphic communication on the Web
Trust the reader’s intelligence.
Don’t dumb down your material on the supposition that
web users are somehow fundamentally different.
Respect the medium.
The web has a different profile of strengths and
weaknesses.
Be bold and substantial.
Visual evidence can’t become persuasive if no one ever
notices it.
Just don’t ever try to wow an audience with bright
graphics to make up for thin content.
![Page 16: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/16.jpg)
Displays
![Page 17: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/17.jpg)
Colour displays
Monitors transmit light, displays use the red-green-
blue (rgb) additive color model.
The RGB color model is an additive color model in
which red, green, and blue light are added together
in various ways to reproduce a broad array of colors.
Majority of computer screens in use today can
display16.8 million colours
This range of colors helps compensate for the
relatively low resolution of the computer screen
(72ppi) when compared to print (300ppi)
![Page 18: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/18.jpg)
Screen resolution
Refers to the number of pixels a screen can display
within a given area.
Screen resolution is usually expressed in pixels per
linear inch of screen (ppi).
Most standard computer displays have resolutions
that vary from 72 to 96 pixels per inch (ppi),
depending on how the monitor and display card are
configured.
Images for web pages are always limited by the
resolution of the computer screen.
![Page 19: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/19.jpg)
Things to know…
![Page 20: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/20.jpg)
Gamma
![Page 21: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/21.jpg)
Graphics and bandwidth
Although Internet access speeds have improved
greatly in the past years, bandwidth continues to be
a consideration for web designs, particularly with
regards to graphics and multimedia on mobile web
devices.
Regardless of connection speed, the more graphics
you incorporate, the longer the user will wait to see
your page.
Not everyone has broadband or current equipment
Bandwidth costs the user
Bandwidth costs you (as the provider) as well
![Page 22: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/22.jpg)
Graphics and bandwidth and mobiles
Mobiles, handhelds etc
Do they need the same images as a desktop?
Do they need any images?
Can the images be re-sized?
Can less images be downloaded?
Save bandwidth?
Increase speed?
![Page 23: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/23.jpg)
Image File Formats
![Page 24: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/24.jpg)
Graphic file formats
JPEG - Joint Photographic Experts Group
GIF - Graphic Interchange Format
PNG - Portable Network Graphic
SVG - Scalable Vector Graphics
![Page 25: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/25.jpg)
GIF FORMAT
25
When to use:
an image that has broad areas of color, an animated
image, or an image with transparency (when using png is
not desirable)
Algorithm used: LZW
Pros and Cons:
Limited to 256 colours
Reduce file size by using less colours
Compression works well with broad areas of color,
but not with details
Animation (flip-book type, as a layered stack)
Transparency
![Page 26: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/26.jpg)
GIF Compression
![Page 27: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/27.jpg)
JPEG FORMAT
27
When to use:
an image that has a lot of detail (like a photograph).
Algorithm used: JPG
Pros and Cons:
16.8 million colors
Works well with detailed images
Lossy, discards “unnecessary” data as it compresses the
image
![Page 28: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/28.jpg)
JPEG Compression
![Page 29: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/29.jpg)
PNG FORMAT
29
When to use:
When target audience browser support is known, or when
transparency is needed
Algorithm used: PNG
Pros and Cons:
GIF replacement
Lossless
Potentially larger file size
Transparency
Some cross-browser issues
![Page 30: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/30.jpg)
PNG Compression
![Page 31: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/31.jpg)
SVG FORMAT
31
SVG – (Scalable Vector Graphics)
SVG was developed by the W3C in 1998.
SVG is an XML markup language for describing two-
dimensional vector graphics.
http://en.wikipedia.org/wiki/Scalable_Vector_Graphic
s
![Page 32: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/32.jpg)
Working with Images
![Page 33: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/33.jpg)
"Optimizing is the process of selecting format,
resolution, and quality settings to make an image
efficient, visually appealing, and useful for web
pages. No single collection of settings can maximize
efficiency of every kind of image file; optimizing
requires human judgment and a good eye.”
Adobe Photoshop CS6 "Classroom in a Book,"
![Page 34: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/34.jpg)
Image optimisation for the web
Correct file format
Image size that suits the
design
File size that ensures speedy
download
![Page 35: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/35.jpg)
Image optimisation for the web
Crop
Delete the outer parts of the image, focus on the main
subject – photographer may have already done this.
Resize
Digital images can be large, 1600x1200 and more
Compress
Once the image is ‘as we want it’, you can use
compression techniques to reduce the file size
Choice of image file format will influence the file size
File size vs. file quality
![Page 36: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/36.jpg)
Cropping an image
![Page 37: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/37.jpg)
Resize
Actual height still over 53 cm
Reduce to fit you design (pixels)
Mindful of file size
![Page 38: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/38.jpg)
Compression methods
Fireworks – Preview, Export.
Photoshop – Save for web and devices
Optimising photos as JPEGs
http://www.lynda.com/home/Player.aspx?lpk4=69815
Images – files sub 20kb (pref. smaller)
Balance – file size vs. image quality
![Page 39: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/39.jpg)
Top tips
39
Optimise all images for the web
Crop (if you can)
Resize
Compress
Save as, keep the original (in original format)
You can’t ‘regain’ lost data
Image size – does it need to be that big?
Fair Use, Copyright Issues, Creative Commons
If in doubt, always ask the tutor.
![Page 40: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/40.jpg)
Guidelines for Coursework
![Page 41: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/41.jpg)
Alt text
All images (unless fluff) should have
descriptive alt text. Images that have no
importance (fluff) should have null alt text
(alt=””).
Images containing text should replicate the
text in the alt attribute when possible.
![Page 42: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/42.jpg)
Image optimisation
All images must be optimised for the web.
Cropped to remove un-necessary
elements. Resized to fit the page design.
Optimised (physical file size) to sub-20kb
or less.
Media Making ACW2 - sub-25kb or less
Sometimes there will be a need for
exceptions – talk to the tutor.
![Page 43: Introductiondfitzpat/content/CA106/... · 2017. 10. 19. · Colour displays Monitors transmit light, displays use the red-green- blue (rgb) additive color model. The RGB color model](https://reader034.vdocument.in/reader034/viewer/2022052022/6036e034d8d85746c859f0e2/html5/thumbnails/43.jpg)
Sources
Online book:
http://webstyleguide.com/wsg3/11-
graphics/index.html
Chapter 11 – Graphics
Compression illustrations
http://www.getawebsite.friezedesign.co.uk/images.ht
m