Topic_5_Student_Page

 = Topic 5 Student Page = = Web Graphics -- Tools, Formats, and Optimization =

//** Student pages are for submitting your assignments. As a member of this wiki, you have permission to edit these pages. Please feel free to post reminders or important notes that might also assist other class members. **//

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.com]are 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 below:
 * ====**Student**==== || ====**Comparison Chart**==== ||
 * Marcia ||  ||
 * Michelle ||  ||
 * Mike ||  ||
 * Betty ||  ||
 * Curt ||  ||
 * Faye ||  ||
 * Joe ||  ||
 * Faye ||  ||
 * Joe ||  ||



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.

Also, we will be discussing the following:
 * Step 2:** Create a bibliography and post your two to three sources to the chart below 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?

Visual Literacy Periodic Table
 * ====**Student**==== || ====**Visual Literacy Bibliography**==== ||
 * Michelle || [[file:EDTC+page5.docx]] ||
 * Mike || [[file:Visual Literacy.doc]] ||
 * Betty || [[file:BIBLIOGRAPHY visual literacy 5-2.doc]] ||
 * Curt || [[file:Bibliography of sources on Visual Literacy.docx]] ||
 * Faye || [[file:Faye Bib 603 visual Literacy 5.2.docx]] ||
 * Joe || [[file:References for photoediting.rtf]] ||
 * Marcia || [[file:Blum_5.2VisualLiteracy.doc]] I LOVE the Visual Literacy Periodic Table!!! Thanks Betty. ||

· .gif graphics interchange format. From 24 bit colorspace/256 colors for each frame. Best for graphics, logos and solid color areas. · .jpg joint photographic experts group. This allows digital photography to be compressed 10:1. Most used in storing and transmitting photographic images on www. · .png portable network graphics, (also stands for Papau New Guinea, and Pawnee National Grasslands J ). This was created to improve gif to 32 bit colorspace, grayscale images and designed to transport images on internet. · RGB A color modle using Red Green Blue. They are added together in various ways to make other colors. This is an additive color modle using the primary colors red green blue. · CMYK (Cyan, Magenta, Yellow and Key/black) is a subtractive color modle, it subtracts brightness from these colors, mostly used in printing. ||
 * 5.3: Graphics Creation - Create Your Own Graphics || Notes ||
 * **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) || Graphic Formats
 * **Image fixing**: crop, resize, rotate, flip, rulers, units, pixels || **Image fixing **: crop, resize, rotate, flip, rulers, units, pixels

**Crop ** means to cut, **Resize** means to change the width or length **Rotate ** means to move in a circular way to the right or left or even upside down A better solution is to **resize** the **image** interactively using the **Crop** tool Transpose **flip image** in the vertical direction and **rotate** 90 degrees Monitor resolution is measured by the number of **pixels** or dots per **unit**. Most editing tools have let you measure along the top edge of the **image** (left to right) with the **Ruler** Tool.

[|GIMP - GIMPLite Quickies] Simply switch the **units** to "inches" and put 4 inches in the height box (opting for **...** After completing the click and drag motion, a little "**Crop** & **Resize** **...** So, to make the scaled **image** the correct size **crop** 10 **pixels** from the height. **....** If you double click on the button, up will pop the means to **flip images** **...** //[|www.gimp.org/tutorials/Lite_Quickies] // || An image is sharpened and improves contrast by bringing a blurry image into focus to improve clarity.  hint: The higher the value the more sharpening that occurs.  http://www.associatedcontent.com/article/228869/photoshop_editing_hints_sharpen_your.html?cat=24 **Smooth Effect** Is a texture that averages pixels with its neighbors for the blur effect To **Smooth** a texture is one of the standard filter operations that you can find in all image editors. It works by averaging each pixel with its neighbors. This results in a blur effect. Example: http://www.texturemaker.com/help/functions/filter_smooth.htm The ability to take a graphic or photo and to modify or make changes that were not original to the graphic. A tool that can twirl, tweak, roughen, and otherwise transform an object into something completely different. Read more: http://www.webdesign.org/vector-graphics/adobe-illustrator/use-distortion-to-transform-an-object.3413.html#ixzz1DQZ4LWb3 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/create_dynamic_distortion_effects [] || · Font family; Calibri, <span style="font-family: 'Times New Roman',Times,serif;">times, <span style="font-family: Verdana,Geneva,sans-serif;">veranda , <span style="font-family: 'Courier New',Courier,monospace;">courier · Font size; 14, 10, 18 · Font color; red, blue , green , · Font weight; **bold** or normal · Font style; //italicized// or normal · Text align
 * Adjusting colors, contrast, levels, colorize, brightness || Adjusting colors involves changing a variety of properties of a photo, for example you can change a color photo to black and white or sepia to make it look like an old photo. You can also change the levels of the colors (or what would be exposure in the traditional dark room) to brighten or darken a snapshot. Contrast can be controlled and make a photo sharper or with more definition of shading. Colorizing is an option that changes hues. The tools to do these tasks are generally located under adjust (iPhoto) or enhance (Photoshop) because you are working with a color histogram (essentially a graph or map) of the picture. ||
 * **Graphic tools:** select, rectangle, oval, lasso, magic wand, clone, stamp, burn, dodge, pen || Using graphic tools is fun. Select simply means that you are choosing a part of your picture and this is typically a rectangle in most programs you are used to. However in photo programs you can select an oval shape or use the lasso which allows you to draw around anything’s edges and just “grab” it. The magic wand makes lasso even easier by quickly defining an edge. The clone stamp tool lets you aim at one place in the picture and copy that to another part of the picture. Burn and dodge tools can be used to lighten or darken just small specific areas of a photo. The pen or pencil tool lets you draw freehand onto your photo. ||
 * **Filters and effects:** sharpen, smooth, distortions, various filters || ** Sharpen Effect- **
 * Distortions **
 * Decoration and text, fills, gradients, color grabber, borders || Text Decorations: a visual ornamentation added to the text

Center Right Left · Text decoration; none, overline, line through, __underline__, subscript, superscript · Text transform; none, UPPERCASE, lowercase, Capitalize · Font variant; small-caps (lowercase are small capital letters) · Line height · Letter spacing · Word spacing || This is a good site that goes over all versions of flash drawing. A characteristic of painting and other tools within image editing software. By adjusting opacity to a percentage of less than 100%, the user can paint a color onto an image and allow some of the image beneath to show through. (Paint with transparent paint versus opaque paint.) This same characteristic is available while performing image assembly steps and allows one image to be transparently floated in front of or behind another. [] In my opinion, this could be effective if done correctly. A hint of an image in the background can add to the overall effect, but too much will make the entire site hard to read or to concentrate on the information.
 * =====Tools: paintbrush, pencil, line, sharpen, smooth===== || []
 * Paintbrush-** Can help you quickly crop a photo or it lets you add text to an image. Can be opened in most image formats.
 * Pencil-** Pencil is an animation/drawing software for Mac OS X, Windows, and Linux. It lets you create traditional hand-drawn animation (cartoon) using both bitmap and vector graphics. Pencil is free and open source.
 * Line sharpen or smooth-** this lets you draw lines. Straighten: Smoothes a line, sharpening corners. Smooth: Smoothes a line, softening corners ||
 * ====Uses of layers, opacity, and reasoning of foreground/background colors==== || **Opacity**

<span style="color: black; font-family: 'Helvetica','sans-serif'; font-size: 9pt;">Each graphic has a **front to back position on the page**. You can imagine that each graphic is on its own sheet of acetate and the page displays all these sheets layered on top of each other. As you create each graphic, it is placed on top of the other graphics. To change this order, use menu commands or icons on the <span style="color: #0000cc; font-family: 'Helvetica','sans-serif'; font-size: 9pt;">[|Toolbar] <span style="color: black; font-family: 'Helvetica','sans-serif'; font-size: 9pt;">. <span style="color: black; font-family: Helvetica,sans-serif; font-size: 9pt; line-height: normal; margin: 0in 0in 0pt;">[]
 * Layers (Placement Front to Back)**

<span style="font-family: Helvetica,sans-serif; font-size: 9pt; line-height: normal; margin: 0in 0in 0pt;">In my opinion, you need to be very careful about how many layers you add. It could become overwhelming in looks and/or design.

In graphics programs we work with two selected colors simultaneously. One is the foreground color and one is the background color. The background color selected in our graphics program may not be the "background" area of our image file. It is simply one of the colors in the image designated at the background color for current use in the program. [] [] In my opinion, Background/foreground colors need to be complimentary in order to avoid frustration for the viewer. They also need to be relevant to the audience/age group. ||
 * Background/Foreground Colors**
 * ====Image output and optimization==== || Image output & optimization: make your images smaller so that they take up less memory on the site and the site downloads faster.
 * Use only important images.
 * GIFs should be used for bulk of images. JPEGS for photos.
 * Horizontal blocks of color compress better than vertical.
 * Never use bitmaps.
 * Avoid fancy animations and rollover images - take up memory.
 * Never make text a graphic (WordArt) - needless excess.
 * Use 72 dpi for resolution
 * Linking to other people's sites slows your site.
 * //always// include both the height and width attributes in your graphics

You have to get the right balance between **filesize** and picture **quality**. Three key areas where bytes can be shaved off your graphics: **bit depth** (number of colors), **resolution**, and **dimension**

Recommended programs:@http://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers/ || 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.

Post Graphics How-tos for Websites:
//**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.
 * ====**Student**==== ||  ||
 * Marcia's website graphics: || [[file:blum_5.3Graphics.doc]] ||
 * Faye's How to insert photos: || [[file:Faye steps to insert photo 5.4.docx]] ||
 * Curt's Modified Graphics || [[file:Modification Reflections.docx]] ||
 * Betty's modified graphics || [[file:Graphic Images Description 6-3 BAH.doc]] ||
 * Joe || [[file:Reflection on on photo editing for website.doc]] ||
 * mike || [[file:Graphics for website.doc]] ||
 * Michelle ||  ||
 * [[file:reflection of pics for website.docx]] || [[file:images for EDTC603.docx]] ||

Back to the Top of the Page