Date post: | 28-Dec-2015 |
Category: |
Documents |
Upload: | linda-barrett |
View: | 219 times |
Download: | 0 times |
Online News Graphics and Flash
Why use graphics
1. Attract attention
• Large pictures attract attention better than small ones
• Suitable for covers in print, front pages and photo galleries on
Web pages.
• Lead picture symbolizes article / Web site theme.
• Directs reader’s
eye to the element
placed nearby.
Why use graphics – cont.
2. Make a point
• Illustrate a point made in text
• Not only photos, but also charts,
diagrams, maps, graphs, etc
• Rule of thumb: Keep it simple!
Why use graphics – cont.
3. Tell a story by itself
• Simple images, conventional symbols.
• Text should be minimal – don’t explain the story.
• Best example: cartoons and illustrations in sequence.
Why use graphics – cont.
4. Visual relief
• Break up big amounts of texts.
• Doesn’t discourage readers.
• Rule of thumbs: no clutter!
Why use graphics – cont.
5. As a background
• On the Web only
• Simple, unobtrusive, SMALL
Remember: before choosing an illustration, decide on its function!
What to look for
Good photos have standards:
• Content value of a graphic (outweighs form)
• No flashy design, no clutter
• Technical quality – content rules, but constant lack of technical
expertise will hurt your product.
• Not always necessary: Simple is good
What to avoid
Watch out for:
• Defamatory pictures (libel)
• Pictures used without consent
• Pictures without copyright
• Stereotypes: group shots,
hand-shaking, speakers at podium
Be creative!
A few examples of creativity
Photos with journalistic value:
• NY Times – A look at 1000 who died
• NY Times – The third act
• BBC – Day in pictures
Getting the words right
RGB – Red Green Blue
• Varying intensities of red, green, blue light to each pixel in screen to
create over 16 million colors
• No light – monitor is black; maximum light – monitor is white
• Different monitors different colors; Web-safe colors
Getting the words right – cont.
Web-safe colors
• 216 Web-safe or browser safe colors
• Hexadecimal code: red green blue
• Safe color codes: 00, 33, 66, 99, CC, FF
• RGB values: 0 – 255
• Example:
• Red:#CC3300 or 204:51:0
Getting the words right – cont.
Getting the words right – cont.
Resolution
• The number of pixels per square inch on a computer-generated display
• The greater the resolution, the better the picture quality
• The greater the resolution, the bigger the file size
• Standard monitor resolution: 800 x 600, 1024 x 768
• Standard picture resolution for Web: 72 ppi
• Standard picture resolution for Flash: 150 ppi
• Don’t forget: resolution affects picture dimension
Getting the words right – cont.
Getting the words right – cont.
JPEG, GIF and BMP
• Joint Photographic Experts Groups - Web
• Lots of colors (millions), shades, shadows, rich image but large size
• Graphic Interchange Format - Web
• Limited to 256 colors (recommended for buttons), small size
• Animated
• Bitmap - Flash
• Uncompressed format
• Tip: Flash does not work with Progressive Jpeg
Getting the words right – cont.
Alias, anti-alias
• Alias = “jaggies”, rough edges
• Alias is the result of creating curves with square pixels
• Anti-aliased = edges have been blended in with the color of the
background to make it look smoother.
Getting the words right – cont.
Alias, anti-alias
• Alias = “jaggies”, rough edges
• Alias is the result of creating curves with square pixels
• Anti-aliased = edges have been blended in with the color of the
background to make it look smoother.
Need a photo?
Sources of images
• Gettyimages.com
• Comstock.com
• ForDesigners.com
• Corbis.com
• Blogs – TextAmerica.com
• Free stock images (“comps”)
• Create your own
• Recycle!
Important: remember copyright law! In general, educational use is fair use.
Start on the right foot
Time-savers:
• Make copies of all your original image files – duplicates
• Organize, name your files adequately
• Decide on the screen size before building anything
• max. 700 x 400
• Crop, scale, adjust resolution of your images in Photoshop
• Should the photo be as large as the screen?
• Do you need space for other elements (caption, buttons)?
In conclusion
Today we learned to:
• Choose photos based on function
• Good uses and bad uses
• Technical vocabulary
• Where to find good art