Topic_5

= Learning Topic 5: = = Web Graphics -- Tools, Formats, and Optimization =

Background/Rationale
The way a website looks makes a big difference in the reception of information by the visitor. Graphics can offer deeper understanding of the web page content. There are a variety of tools that make image preparation for the screen easier. It’s important to understand which image formats will work in a website and how to save images to small file size required for fast web download without degrading image quality. At the end of this Learning Topic, you will have deeper understanding of the uses and preparation of web graphics.

Visual literacy includes the ability to make meaning from graphic images.. Visual literacy is based on the idea that pictures can be “read” and that meaning can be communicated through a process of reading. Visual literacy is an often-overlooked type of literacy and a critical component of 21st-century communication. Think about how much information comes to you via a screen and the amount of information that can be derived from an image.
 * 1. Visual Literacy**

Well-created graphics can increase the potential to reach your audience by 43 percent. Research at the 3M Corporation concluded that we process visuals 60,000 times faster than text. This is a huge fact that is often overlooked and deserves consideration in creating learning environments. As you can see, good graphics are critical to your web communication no matter what the purpose. Graphics additionally meet the needs of nonlinguistic learners, media producers, and visual learners. Images are becoming a more collaborative form of information. It is unwise to underestimate the importance and value of images in meeting your web-based teaching and learning.
 * 2. Studies of Image Communication**

This learning topic explores using graphics to enhance your website. Graphics that support your message are a critical addition to website development. Images are what draw your visitors’ attention and invite them to stay at a site and investigate further. Quality images promote professionalism and the credibility of your site. Think about using graphics to draw the audience to the most important elements of a page. Images should balance and enhance the text and add decoration that supports the voice of the site. Images should extend the communication, description, and understanding of the text presented. There are several ways to approach creating images for your website. As with web creation software, there are both desktop and webware options.
 * 3. Using Graphics on Your Website**

Desktop applications like Photoshop are standards for professional design use. These tools serve design professionals as well as students learning design skills. Free, open source tools like Gimp and Gimpshop also offer similar strong capabilities to designers.
 * 4. Types of Graphic Creation Software**

Emerging webware tools like fotoflexr (http://fotoflexr.com) and picnik (http://www.picnik.com[|)], among many others, offer a cloud computing alternative with robust tools, filters, fonts, and layers.
 * 5. Webware Graphic Tools**

Your choice of tools will reflect your personal learning goals. If you intend to become proficient in graphic design or teach it, the Photoshop/Gimp choices are for you. If you just want to alter some images or create some basic graphics, a web-based tool that downloads an image back to your desktop as a .jpg (webware) will be your answer. Choose the graphic tool to suit your needs.
 * 6. Best Tools for Different Situations**

A few tips on web graphics:
 * 7. Current Web Graphic Trends**
 * Background images are seldom used these days; they are dated and can cause noise (distraction) to your communication.
 * Animated .gifs are small animations that can scream amateur. Cute is not a good communication tool. Use animated .gifs only if you are showing a process that has a before and after that helps the visitors to understand a concept.
 * Clip art is also out of favor and is being replaced by photo images, which are more information rich.
 * It is often hard to design graphics without text to around which to build them. If your text is not complete, use Latin filler text as placeholders for your text so you can envision how images will look on your page. This designer’s toolbox website will generate this filler text to use on your page until you can replace it with your own text. @http://www.designerstoolbox.com/designresources/greek/?PHPSESSID=015f46384a977e1aabda4f403efad646
 * Images should suit your intended audience and follow the voice and color scheme determined for your site.
 * Image output is also an important factor. Not everyone has high-speed data access, and being considerate of your potential visitors from less developed areas of the world means getting your graphics to the smallest size possible without degrading visual quality. Research best practices in image exporting and optimization, and apply your new knowledge to your images.

Learner Outcomes:
At the end of this Learning Topic, you will be able to:
 * Identify the concepts of visual literacy as they relate to education and communication.
 * Identify open source desktop and web-based graphic applications and identify the most appropriate situations in which to use each.
 * Create an organizer of key graphic tools found in several graphic applications, the tool’s purpose and application.
 * Demonstrate understanding of image software tools by creating a series of images and graphics for use on an ePortfolio website and explaining the steps in the creation process and reason for the chosen optimization scheme.

Readings and Research:
//**NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section.**//
 * Galer, Mark, and Les Horvat. "Chapter 10 - Digital Manipulation." Digital Imaging. Focal Press. 2001. Books24x7.
 * Parkinson, Mike. "The Power of Visual Communication." Business Graphics - Billion Dollar Business Graphics. N.p., n.d. Web. 23 Nov. 2009. []
 * Smith, Bud, and Peter Frazier. Creating Web Graphics For Dummies. John Wiley & Sons. 2003. Books24x7.
 * "Google Image Swirl: notre dame." Google Image Swirl. N.p., n.d. Web. 23 Nov. 2009. []

To learn more on visual design, scan these articles:
 * Supplemental: **
 * Hashimoto, Alan. "Introduction." Visual Design Fundamentals: A Digital Approach. Cengage Charles River Media. 2004. Books24x7.

There are several books on Photoshop, Gimp, and other image editing software in the Regis Library - Books24x7. Search for graphic design and multimedia, then search for image editing to support you in the tool you choose to explore. Online tutorials are abundant depending on the tool you choose, whether web or desktop based. Search for tutorials and how-to videos.

** Software graphic editors: **

 * @http://adobe.com/products/photoshop/ try for free 30 days
 * @http://adobe.com/us/photoshopelements/ try for free 30 days
 * @http://www.gimp.org/ (GNU Image Manipulation Program)– free open-source
 * @http://www.gimpshop.com/ modification of gimp – free open-source

** Webware graphic editors: **

 * Alilg: Alilg.com
 * Aviary @http://aviary.com/
 * Phoenix is the image editor in this suite
 * Cinepaint www.cinepaint.org/.webloc
 * DrPic @http://www.drpic.com/
 * FlauntR @http://www.flauntr.com/
 * FotoFlexer @http://fotoflexer.com/
 * Phixr @http://www.phixr.com/
 * Photoshop.com @http://www.photoshop.com/
 * Picassa @http://picasa.google.com/
 * Pixlr @http://pixlr.com/
 * Picnik @http://www.picnik.com/
 * Splashup @http://www.splashup.com/
 * Webresizer @http://webresizer.com/

5.1: Tool Comparison - Comparison of graphic tool types
Compare and contrast desktop image manipulation software to webware graphic software.


 * Step 1:** Download a trial or find a copy of Adobe Photoshop or Photoshop Elements you can use to demo, or use open source tools such as Gimp or Gimpshop. Also, visit a webware image editor (list provided under Readings and Research). http://Fotoflexer.com and http://www.picnik.comare good choices.


 * Step 2:** Watch or take an introductory tutorial for each tool. Create a chart comparing the strengths of each software you review. In a third column, point out where this tool might be best used, for what age group, used for what type of project possibilities, subject and/or context. Tool Comparison Table-Sample is provided for you, or you may create your own.
 * =====**Desktop Tool vs Webware**===== ||= =====**Features, Strengths**=====

**Positives & Negatives**
||= =====**Situations where the graphic tools can be best used**=====

**Grade Level, Subject Area, Project Ideas.**
||
 * Step 3:** Submit your comparison chart to Topic_5_Student_Page.
 * Step 3:** Submit your comparison chart to Topic_5_Student_Page.


 * Assessment**

5.2: Discussion - Visual Literacy

 * Step 1**: To prepare for this discussion, research the term “visual literacy.” Use the internet and the Regis library databases. In addition, use the following link: Visual Literacy Periodic Table.

Also, we will be discussing the following:
 * Step 2:** Create a bibliography and post your two to three sources to the Topic_5_Student_Page section for this activity.
 * Share your working explanation of visual literacy as it applies to your preferred area and grade level of teaching.
 * What example can you share of learning that was enhanced by visual elements and a time when learning was not assisted by quality visuals and suffered for this lack?
 * What ideas do you have to enhance understanding and conceptualization of information by adding information-rich images to your website?

Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
 * Assessment**

5.3: Graphics Creation - Create Your Own Graphics

 * Step 1:** Determine which type of website graphic tool you will use based on your research in Project 5.1 and your personal learning goals. Use the course reading and tutorials from the Internet to develop a basic understanding of each graphic skill listed below.


 * Step 2:** Complete a full set of notes on each topic as you learn and experiment with these areas:
 * **Graphic formats:** .gif, .jpg and .png, and the difference between Red, Green, Blue (RGB) and Cyan, Magenta, Yellow, Black (CMYK); (you will be using RGB for all web graphics)
 * **Image fixing**: crop, resize, rotate, flip, rulers, units, pixels
 * Adjusting colors, contrast, levels, colorize, brightness
 * **Graphic tools:** select, rectangle, oval, lasso, magic wand, clone, stamp, burn, dodge, pen
 * **Filters and effects:** sharpen, smooth, distortions, various filters
 * Decoration and text, fills, gradients, color grabber, borders
 * **Tools:** paintbrush, pencil, line, sharpen, smooth
 * Uses of layers, opacity, and reasoning of foreground/background colors
 * Image output and optimization


 * Step 3:** After you feel more confident with the terms and tool uses, begin to use your image editor to create eight images for your website -- four photographic and four others: text, chart, illustration, timeline.

//**For four of the images**//, create a dialogue of the steps taken when processing your image, and state your reasoning for each step. Also state what you wanted to create, how well it worked, what you are learning about graphic tools, and discuss saving or exporting your graphics for web use along the way.


 * Step 4:** Post your four images and dialogue to the Topic_5_Student_Page for this activity. Read and respond to two or more of your colleagues’ postings in the Discussion Section of Topic_5_Student_Page.


 * Assessment**

5.4: Discussion - Graphic Tools, Resources, and Uses
Share four images and associated dialogue from 5.3 Graphics Creation with your peers in Topic_5_Student_Page. Work to discover similar understandings. Support each other in challenging areas in order to develop a deeper understanding of the capacity of your tools as you evaluate each others' graphics and choices you make in their creation. Evaluate and provide constructive feedback for your colleagues about their images.

Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
 * Assessment**

Homework

 * **5.3 Create Your Own Graphics** - // (Due the Friday following Class Session6.) //Post your four images and dialogue to the Topic_5_Student_Page for this activity. Read and respond to two or more of your colleagues’ postings in the Discussion Section of Topic_5_Student_Page. //(40 points)//
 * Be familiar with the **Required Readings for Topic 6** by the start of Class Session6.
 * **6.1 Research Project – Copyright vs. Copy-share** // (Due by the start of Class Session6.) // Post your paper on the Topic_6_Student_Page. //(?? points)//