Week+5


 * Learning Topic 5: ** **Web Graphics- Tools, Formats and Optimization**
 * Background/Rationale: **

Visual literacy is the ability to interpret, negotiate, and make meaning from information presented in the form of an image. Visual literacy is based on the idea that pictures can be “read” and that meaning can be communicated through a process of reading.- [] ) This is an often overlooked literacy which is 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.
 * Visual Literacy **

**Studies of Image Communication** Well created graphics can increase the potential to reach your audience by 43% (3M-sponsored study at the University of Minnesota School of Management [] ). Research at the 3M Corporation concluded that we process visuals 60,000 times faster than text. This is a huge fact often overlooked and deserving of consideration in creating learning environments. To learn more on the importance of graphics read this article : []. As you can see, good graphics are critical to your web communication no matter what the purpose. Graphics additionally meet the needs of non-linguistic learners, producers and visual learners. Images are becoming a more collaborative form of information sharing as shown in a recent Google swirl introduction: @http://image-swirl.googlelabs.com/html?query=notre%20dame It is unwise to underestimate the importance and value of images in meeting your web based teaching and learning.

This learning topic explores using graphics to enhance your web site. The ability to create graphics to support your message is a critical addition to web site development. Images are what draw your visitors’ attention, cause 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 web site. As with web creation software, there are both desktop and webware options.
 * 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.
 * Types of graphic creation software **

Emerging webware tools like [|http://picnik], among many others offer a cloud computing alternative with robust tools, filters, fonts and layers.
 * 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 images back to your desktop as a .jpg, or work with students to create basic graphics then webware is your answer. You will explore a graphic tool in-depth depending on your personal learning goals.
 * Best tools different situations**


 * Current web graphic trends** A few tips on web graphics:
 * 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 build them around. If your text is not complete, use Latin filler-text as place holders for your text so you can envision how images will look on your page. This site will generate this filler text to use on your page until you can replace it with your own text. []
 * 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 practice image export and optimization and apply your new knowledge to your images.

The student will:
 * Learner Outcomes **
 * Identify the concepts of visual literacy as they relate to education and communication. (Discussion 1)
 * Differentiate desktop based, open-source desktop and web based graphic applications and identify the most appropriate situations to use each. (Project 1)
 * Create an organizer of key graphic tools found in several graphic applications, their purpose, and application. (Discussion 2)
 * Demonstrate understanding of image software tools by creating a series of images and graphics for use on a portfolio website and explaining the steps in the creation process and reason for chosen optimization scheme. (Project 2)


 * Readings and Research: **

**Required**
 * Galer, Mark, and Les Horvat . " Chapter 10 - Digital Manipulation ". Digital Imaging . Focal Press . © 2001 . Books24x7 . < [] > (accessed November 21, 2009 )
 * Smith, Bud, and Peter Frazier . Creating Web Graphics For Dummies . John Wiley & Sons . © 2003 . Books24x7 . < [] > (accessed November 21, 2009 )
 * Parkinson, Mike. "The Power of Visual Communication." Business Graphics - Billion Dollar Business Graphics. N.p., n.d. Web. 23 Nov. 2009. .
 * "Google Image Swirl: notre dame." Google Image Swirl. N.p., n.d. Web. 23 Nov. 2009. 


 * Supplemental: ** to learn more on visual design scan:
 * Hashimoto, Alan . " Introduction ". Visual Design Fundamentals: A Digital Approach . Cengage Charles River Media . © 2004 . Books24x7 . < [] > (accessed November 21, 2009 )
 * There are several books on Photoshop, Gimp and other image editing software in the Regis Library - Books24x7. search for Graphic Design and multimedia then Image editing to support you in the tool you choose to explore.
 * Online tutorials are abundant depending on the tool you choose either web or desktop based. Search for tutorials and video how-to videos.


 * Software graphic editors: **
 * [] try for free 30 days
 * [] try for free 30 days
 * []
 * []


 * Webware graphic editors: **
 * Aviary [] Phoenix is the image editor in this suite
 * DrPic []
 * FlauntR []
 * FotoFlexer []
 * Phixr []
 * Photoshop.com []
 * Picassa []
 * Pixlr []
 * Picnik []
 * Splashup []
 * Webresizer [|http://webresizer.com/> >]


 * Image Repositories:**
 * []
 * []


 * Learning Activities : **

Compare and contrast desktop image manipulation software to webware graphic software. Download a trial or find a copy of Adobe Photoshop or Photo-elements you can use to survey or use open-source tools such as Gimp / Gimpshop. Also visit a webware image editor (list below) [|http://Fotoflexer.com] and [|http://picnik.com] are good choices.
 * Project 1 - Comparison of graphic tool types **

**Watch or take an introductory tutorial for each tool**. Create a chart comparing the strengths of each software. In a third column, point out where this tool might be best used, age group, project possibilities, subject context. Sample table is provided below:
 * Tool desktop vs. webware || Positives, Negatives, Strengths, Features || Situation where tool can be best used, grade, subject, project ideas ||
 * Desktop tool - ||  ||   ||
 * Webware tool - ||  ||   ||

Proficient: Form examines each type of graphic editing tool in-depth, identifying features, similarities, difficulty level, and tools. Form answers the question on which tool is best for use when they offer similar features. The situations for each tools uses are clear and justified and ideas for curricular uses are presented.
 * Assessment - Project 1 **

To prepare for this discussion, research the term “visual literacy”; share your sources in your discussion reply. Also address the following in your response: -Share your working explanation of visual literacy as it applies to your preferred area and grade level of teaching. Post resources in APA format. -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?
 * Discussion 1 - Visual literacy **

Regis general discussion rubric: Student actively and thoughtfully participated in the discussion – sharing his/her learning and challenges learning about visual literacy Student was respectful of classmates’ points of view.
 * Assessment - Discussion 1 **

Determine which type of website graphic tool you will use based on your research in Project 1 and your personal learning goals. Read Chapter 2 from Visual Design Fundamentals @http://common.books24x7.com.dml.regis.edu/book/id_10424/book.asp.
 * Project 2 - Create your own graphics **

As you work on creating your graphic images, consider the following issues: -graphic formats, .gif, .jpg and .png. and the difference between RGB and CMYK, (you will be using RGB for all web graphics) -Image fixing: crop, resize, rotation, flipping, 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 paint brush, pencil, line, sharpen, smooth -uses of layers, opacity, and reasoning foreground/background colors -image output and optimization

After you feel more confident with the terms and tool uses, begin to use your image editor to create 6 images for your website- 3 photographic and 3 other, text, chart, illustration, timeline.

For these 6 images, write a description of the steps taken when processing your image and reasoning for each step; what you wanted to create; how well it worked; what you are learning about graphic tools; and, saving or exporting your graphics for web use along the way. Also describe how the six images follow the visual design principles of continuity, repetition, rhythm, and contrast. Post your images and descriptions on the Week 5 Projects page.

**Assessment - Project 2** Proficient: Four images are shared that show development of understanding and use of graphic editing tools. Images are cohesive to the site purpose and voice as well as "look" and add understanding to the site text. Narrative dialogue shows growth and conceptualization of personal graphic skill development.


 * Discussion 2 - Share what you have learned about Graphic tools, resources and uses ** Share 4 images and associated dialogue from project 2 with your peers and work to discover similar understandings. Support each other in areas that are difficult.

Work as a group to develop a deeper understanding of the capacity of your tools as you evaluate each others graphics and choices in their creation. Evaluate and give positive feedback and constructive criticism to your peers about their images. Create a group chart of tools and their uses.

Regis general discussion rubric: Student actively and thoughtfully participated in the discussion – sharing his/her learning and challenges learning how to create graphics, tool uses, and output schemes. Student was respectful of classmates’ points of view.
 * Assessment - Project 2 **