Color and Depth

Revised Anti-Alias Graphic

AntiAliasingColorGraphicBlueCanvasSmall

Further user tests indicated that the contrast between the white background and stoplight was a bit stark. I tried a light purple and light blue background, instead. The light blue fit perfectly. It softens the contrast a bit, but still leaves enough contrast between the background and the figure to keep the graphic crisp. Thanks for the suggestion!

I also changed the title after reading about hierarchy in chapter six (Lohr, 2008, p. 123). Since “pixellation” is the dominant term in the original graphic, it may mislead learners into looking for the word “pixellation” on the Fireworks menu. I changed the title to Anti-alias and Pixellation to help guide learners to the correct property when adding text to their graphics.

Enhancing Graphics with Color and Depth

AntiAliasingColorGraphicSmall  ColorsDepthTexasFlagSmall

Graphic Overview

These two graphics are designed to be part of my final unit on using Fireworks CS6. I think the pixellation graphic (stop light) does a better job of showing color and depth in a simple way. I added the layers graphic (Texas flag) only because my final unit requires more graphics than there are assignments.

Target Audience

By this point in the unit, target audience members who have completed the previous lessons will be well-versed in the use of Fireworks, particularly with using shape tools. The introduction of anti-aliasing and working with layers will be a logical addition to their tool set. There will be step-by-step directions linked with each image in the final unit. These directions will provide scaffolding for all learners, whether they have completed the previous lessons or have skipped ahead to the lessons on anti-alias and layers.

Why Will These Graphics Work?

Working with color takes a lot of practice (Lohr, 2008, p. 262), but it also has several advantages. As an elementary school educator, I need to use color because children prefer bright, primary colors (Lohr, 2008, p. 265). Another advantage to color is that it can help learners locate information quickly (Lohr, 2008, p. 266). Bearing all this in mind, I decided to stick with primary and secondary colors for both of these graphics, as those colors work very well to accomplish the desired results (Lohr, 2008, p. 267).

Anti-alias graphic In working through the graphic projects for EDTECH 506, I found text to be one of the hardest tools to master. Informal research has shown that Fireworks doesn’t perform anti-aliasing as well as some other programs. But it does provide a way to begin getting rid of pixellation. Many beginning graphic designers will not notice the pixellation occurring in their images. Or, if they do notice, they may feel that there is nothing they can do about it. This lesson and graphic will help them understand how to change the level of anti-alias.

I picked the stop light image because it is familiar to most, if not all, target audience members. They understand that green is a “go” symbol, so smooth anti-aliasing must be better than no anti-aliasing (red). I added the magnifying glasses to provide depth to the image and to bring the learner’s eye to the difference among the aliasing types. The labels are simply black, with the title contrasting with the rest of the graphic because of the font size and bold weight. The label in the lower right is for those who want to use anti-alias but don’t know where to look for it in Fireworks CS6.

Bonus image: Working With Layers Layers provide more robust editing capabilities for Fireworks CS6 users. However, many beginners only see the image on the canvas. The layering concept and the layers palette either make no sense or seem irrelevant. This graphic will help users to see how layers work together to produce a final image. The linked text provided in the lesson will walk them through adding and naming layers. It will also provide learners with practice utilizing the tools and techniques that make it advantageous to use layers.

The Working With Layers graphic utilizes both color and depth. I chose the light blue background color because it is a large graphic and a darker background would make the image hard to understand (Lohr, 2008, p. 267). I also used blue because it is a primary color. I tested white and gray, but neither provided as much contrast with the exploded layer view as does the light blue canvas color.

I used parallelograms instead of rectangles for the stacked layers to indicate depth. Covering up part of each layer with the one on top of it serves the same goal, and helps learners to visualize how the layers fit together to produce the final image, the Texas flag in this case. I picked the Texas flag because it uses all three primary colors (including the yellow/gold fringe around the flag’s edge).

User Test Results

Anti-alias graphic The user immediately understood that of the three options shown, smooth anti-aliasing provided the best results for the text. She noted that crisp and smooth are similar, but that no anti-aliasing made a noticeable difference. The user did have a hard time finding the words “no”, “crisp”, and “smooth”, which were originally only written in the lights themselves. The words were almost hidden by the magnifying glasses.

Working With Layers graphic The original graphic had solid lines drawn between the layers palette screen shot and the stacked view of the layers. These lines were too bold, distracting from the meaning of the graphic, and they didn’t match the border colors on the exploded view of each layer. Also, the labels were hard to comprehend and took too much verbal explanation.

Changes to the Original Images

Anti-alias graphic I added “no”, “crisp”, and “smooth” to each magnifying glass handle. When those terms were only shown in the lights, they were part of the background. Adding them to the handle made them part of the figure, drawing attention to each of the terms.

Working with layers graphic I changed the solid lines to dashed lines and adjusted the color to match each layer’s border. I also added labels that were easier to understand. To help the learner further make the connection between the layers palette and the exploded view of the layers, I superimposed 20% opacity rectangles over each of the layer descriptions in the palette. I chose colors that matched the content of each layer. Then I added borders to each of the stacked layers, using the same colors I used for the rectangles and dashed lines. Finally, I changed the layer names to match the color used in the layers and their borders.

Lohr, L. (2008). Creating graphics for learning and performance: Lessons in visual literacy. Upper Saddle River, N.J: Pearson/Merrill/Prentice Hall.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s