Graphics Design Color Copyright Digital

Advanced Graphics Series, Teaching & Learning Center Illinois Central College

We Learn Visually

“…we recall approximately 10% of that information 3 days later. By simply adding a visual image, we can increase that retention rate to 65%.” http://ocio.osu.edu/elearning/toolbox/brief/visual-information/7-things-you-should-know-about-visual-information/

Graphics Visual Ideas

• Photos• Graphics• Animations• Infographics• Diagrams• Charts• Audio• Video

Graphics Types of Graphics Clip Art Symbols/icons Screen capture Illustration Photos

Infographics Diagrams Graphs Maps timelines

The supply-demand model is one of the fundamental concepts of economics. The price level of a good essentially is determined by the point at which quantity supplied equals quantity demand. This point is called equilibrium. If the quantity supplied is greater than the quantity demanded, then there is a surplus of goods. If the quantity supplied is less than the quantity demanded, the there is a shortage of goods.

Graphics Criteria of a Good GraphicQuality

Can you read the text? Can you identify what it is?

PurposeWhy?

Function–Decorative – careful may just become a distraction to your message–Representational – –Mnemonic – –Organizational–Relational–Transformational–Interpretive

Graphics Raster Images• Image made of pixels• Image size (bits) = pixel dimension X bit depth• Dependent on resolution (quality)• The more you scale the image the blurrier it

becomes

Graphics Vector Images• Image made of mathematic algorithm• Points or nodes are plotted at exact

points • Can be scaled to any size• Requires special software to

edit and view

Graphics Raster vs. Vector Images

Graphics Scaling Graphics• Vector graphics can be used at any size and will be

of great qaulity. – Vector images can be scaled in specific software

and output to a raster format• Rastor graphics do not scale well, they become

blurry• Scale proportionally• Copy or save the image as close to the size you

intend to use it• Consider your final use of the image, print, display

on a web page or Blackboard, projection for a presentation

Design Elements of Design• Alignment• Repetition• Unity• Contrast• Proximity• Balance• Space• Hierarchy

Color Dithering• Some digital formats can only

contain 256 colors maximum. (GIF)• Process of reducing image to 256 or

fewer colors

Color Color Combos to Avoid• Red & Green – Any version of it• Light colored graphics with light

color text– Any color combos that cause the text

on it to not be legible– Why use it, if it’s not legible?

Color • CMYK (PRINT)– images printed as series of dots– dots are Cyan, Magenta, Yellow, and blacK– dpi – dots per inch is the resolution

• RGB (COMPUTER)– red, green, blue– color scheme digital displays use

Color Printer Basics• Images are printed as a series of

dots. Your brain interprets the dots as continuous tones.

• The dots are solid colors (Cyan, magenta, yellow, black ).

• The resulting color on the page is a function of dot concentration and the ratio between the different colored dots.

• The conversion of your image into the series of dots is halftoning.

Example of Halftones

Enlargement illustrates what halftone would look like if this image was printed on the color laser writer or plotter.

Copyright

• principle based on belief that public is entitled use portions of copyrighted materials for commentary, criticism and parody– Tricky – lots of “gray” when it comes to what is fair use

and what is an infringement

• also allows special guidelines for use of copyrighted material for educational purposes

FAIR USE

The 4 factors considered are:1. the purpose and character of your use2. the nature of the copyrighted work3. the amount and substantiality of the portion taken4. **the effect of the use upon the potential market.

The 4 factors considered are:1. the purpose and character of your use2. the nature of the copyrighted work3. the amount and substantiality of the portion taken4. **the effect of the use upon the potential market.

Copyright• Consider the 4 factors of fair use.• Always drill down to the source of an image and investigate

to find who actually created or owns the image.• Find out if the author of a work (e.g., text, video, audio,

graphic, etc.) provides information on how to use his or her work. If the author provides explicit guidelines, follow them. Look for a “license, terms of use, permissions” link.

• If the work has a watermark or logo on it, don’t use it without permission.

• If the source of the image is a site or individual offering the image for sale? You don’t have the right to use it without purchasing it.

• Always credit the source of your information. If nothing else list the url or organization.

• ask the copyright holder for permission. Keep a copy of your request for permission and the permission received.

• no copyright holder - do not assume that the material is in the public domain. Assume that the copyright holder is the author, whether it be an individual or an organization.

Tips for Using Work Found Online

Copyright

• Works no longer protected by intellectual property laws.– Old stuff– Some works by U.S. Government

• Always identify the source of the image, some websites will label an as public domain when it is not.

• http://pixabay.com/ - not technically the public domain, but what they are calling it, more along the lines of creative commons – love this site – great images – give credit to these photographers – Photographers are willing to submit their own images

and let anyone use them for anything. You are not required like attribution with creative commons to give credit, but do give attribution, please!

Public Domain

Copyright

• A structured system for creators to share their works for free but still have some protections.

• http://search.creativecommons.org/

Creative Commons

Copyright Open Educational Resourceslearning materials that are freely available to use, remix, and redistribute.Lots of ways to find OER resourcesMany online repositories for education•http://www.oercommons.org/•http://www.teachersdomain.org/•http://wiki.creativecommons.org/OER•Educause PDF Series 7 Things You Should Know: http://net.educause.edu/ir/library/pdf/ELi7061.pdf

Digital

File Formats

• Raw images• .bmp – bitmaps• .svg – vector graphics

Digital Infographics• Data visualizations that present complex

information quickly and clearly. • Great way to present data during a presentation• Examples:

– http://www.mint.com/blog/trends/hamburger-10122010/

– http://visual.ly/can-social-media-predict-election-outcomes

– http://googlemobile.blogspot.com/2010/06/google-voice-for-everyone.html

Digital 8 SOURCES FOR FINDING INFOGRAPHICS

1. http://visual.ly/

2. http://infographixdirectory.com/

3. http://www.mashable.com/follow/topics/mashable-infographics/

4. http://www.infographicsarchive.com/

5. http://www.thinkwithgoogle.com/insights/library/infographics/

6. http://pewinternet.org/Data-Tools/Get-the-Latest-Statistics/Infographics.aspx

7. http://www.educause.edu/library/infographics

8. http://davidwarlick.com/graphicaday/

text

text text text text text

Graphics Design Color Copyright

Digital

Advanced Graphics Series, Teaching & Learning Center Illinois Central College