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.

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.

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