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