Beginning Image Composition

The next time you are in the grocery store, stop by the magazine rack and open some ten magazines at random, using random locations in the magazine. Based on square inches of paper space covered, the odds are you will see far more image than text. Many of those images are tightly focused ads. Businesses bet money that ads on paper and web pages more than pay for themselves. This opens the door for some reflection on how we teach language arts communication. I bet that learning focused "subject content" ads in language arts, science, social studies and mathematics can more than pay for themselves in educational values and one of those values is teaching image composition to reinforce text composition.  Along the way of testing that bet, we'll discover quite a bit about image editing. What are these content ads and how might they pay for the time it takes to make them?

A Subject Content Ad

The image is often a partner in explaining ideas that are being discussed in the text of a page. The images in and or around paper and web articles in today’s magazines, newspapers and journals are of two general types. The first are illustrations that explain what the text of the article cannot or the images at least reinforce it. The second are ads that are unrelated to the content of whatever is being read and seek the reader’s action on some other topic (e.g., buy, explore, try, sell, vote, travel).  A content ad would be a cross between the two.  It would reinforce ideas in the article, but at the same time call for action outside of reading the article that would further reinforce article ideas. With excellent imagery and text, it might be hard to tell which is the leading medium and which is the supporting medium. Each should contribute something unique and yet still reinforce the other’s idea.

Examples

The image collage at the top of this page is one example of a content ad.

On the Web, other additional elements can easily become part of the image. The image can become clickable making an active response to its content even easier. The entire image can be a link to another Web page or be divided into hotspots where each hotspot causes a different action such as a jump to a different Web page.  A Web image can also contain rollover slices where the location of the cursor over any or some part of an image causes a new image element to appear in its place; at this point the image becomes thought of as a a multi-layered image, with surface layers leading to the display of other layers which can also contain hotspots.

Advantages and Disadvantages

Advantages

Content ads:

1. Teach image composition that reinforces the text message.
2. Teach image composition for a wider range of uses and if the Web is included also teach basic animation composition.
3. Encourage more thought about reading, that is understanding, the text and the image.
4. Teach tight blend of dual-coding theory and thereby improve retention.
5. Promote creative thinking, and verbal and visual fluency when creating an effective ad.
6. Promote a skill that has potential for immediate economic and entrepreneurial value.
7. Provide an opportunity to create an awareness of how media manipulation occurs.

Disadvantages

Though I find that the advantages outweigh the disadvantages, the potential problems and the questions they raise should be considered.

1. Time constraints. Using Language Arts and English class time to teach new forms of composition might mean there is less time to focus on text composition. When does cultural relevance outweigh the priority of state mandated tests that are behind the times? However, image use and instruction can also improve retention of the key ideas on those high stakes exams.
2. Potential confusion. Content ads appear to bring a positive perspective to the idea of an ad which might lead readers to spend more time studying those ads instead of finishing the article they started. Can we add one more nuance to the reading skills that are already being taught? However, more sophisticated readers are more thoughtful readers.

Criteria for effective content ads

Garland’s (2012) page on the Anatomy of the Perfect Banner Ad addresses 9 criteria that are equally relevant to good composition and teaching and learning and to ad making. I’ll discuss them in the context of the leaderboard ad at the top. Anatomy of Perfect Banner Ad
http://blog.buysellads.com/2011/09/anatomy-of-the-perfect-banner-ad/

1. Interactivity. The wide view shot of the ocean surfing kayaks and people contains all the elements of the other image cuts to the left and right of that image. This makes for a kind of playful “Where’s Waldo” search to interactive with the image to find the magnified elements in the wider scene.
2. Good use of space. In art and image design in general, space is that the amount of more visually empty or less visually cluttered space around areas of focus. This is sometimes called negative space and it is what allows the eye to find the focus. The most negative space is in the far left to give extra attention to the word Language Arts.
3. Compelling imagery. The photograph has strong color, action waves, splash, fishing tension and the human interest of people, kayak surfers.
4. Creative Message. The primary message here is to get involved with image editing and content ads. The intent is to create a triple puzzle – where are the pieces? How did this puzzle get made? How can I do that?
5. Call to action. This is a content ad is for an audience of students who have already learned how to reach the Atomic Learning training site to learn their interactive whiteboard software. Now it introduces another application, the very one needed as well as used to create this content ad. They know how to take the next step in this action. Now they are encouraged to do so and know which application to search for.
6. Brand incorporation (e.g., Name Reputation). Educators in preK-12 may seldom think of their having a brand. Among others, the educational brand includes the field of education, the school district and their classroom. A brand then is not exclusively some commercial property, but a name with a reputation for the current topic or service in question and related services as well. In this ad there are two content brands or name reputations, Language Arts, the text in the upper left of the image and the Digital Palette icon in the bottom right hand corner of the image associated with the online textbook and university course.
7. Strong text. This text has used color that intensifies going left to right, leading to the important call to action. The text has relevance to all participants and it is introducing some new information, some space in this size, 720x90 pixels, has a specific name in doing actual commercial Web ads, that label is Leaderboard.
8. Appropriate humor. The puzzle introduces a fun element that could be taken as humor. I thought of adding a fish as another layer being pulled from the big splash layer over the line into the fisherman layer, and then decided it was too distracting and would likely use most the negative type space remaining in those images making them cluttered and harder to read. However, the idea might be useful to include in an ad of a different size elsewhere in the same article.

Types of Ads

To make the marketing of Web ads and their ad placement easier, an organization formed to set standards, the Interactive Ad Bureau. The standard sizes are below in a highly scaled down version of what is shown in larger sizes on the wikipedia page. More detail can be found on the Wikipedia page from which the banner sizes were taken: Web banner, http://en.wikipedia.org/wiki/Web_banner.

Many Banner Ad Examples

On any given day of searching Web, many Web ads will appear. However, there is a quicker way to see a wide variety in one location, and that is to explore large collections or galleries of such ads as a way to gather ideas and inspiration. Note that these collections are for adults, not children. By that I mean that some ads that are not appropriate for children can be found in these collections, including for adult services. If teachers intend to have a set of examples for their own students, they would need to download age-appropriate examples from these sites for distribution or inclusion in directions. Teachers should not send students to or demonstrate such sites.

One of these ad sites is Banner Report:
http://www.bannerreport.com/html/gallery.php

Many of the ads that will be in these collections include animation. Animation is NOT part of this assigned activity but will be addressed in a later chapter using these similar materials.

Reflection on Education Values

We don’t merely teach in order that students will know something, but rather we want learners to learn to use and act on their knowledge, not just understand what we are teaching.  The media available for teacher compositions has a huge impact of how and what they develop. What teachers develop and how they grow such ability is also a skill that has personal economic application for them beyond the classroom. This is a skill this is just as useful for students to learn.

To help students learn, the most common media for teachers preparing classroom teaching resources are text and image. Because of the standard availability of paper however, teachers tend to compose material for their classes with text. Because images can take up large areas of paper space making duplication relatively expensive, even black and white images are not used as much in comparison. Because of the high cost of color duplication on paper, printing color images has been almost unavailable for classrooms.

The digital age is changing such thinking. Smart phones, touch tablets, desktop computers and computer projectors along with other digital media devices make the duplication and use of high quality color free and easy. This trend will only grow stronger. As the entire advertising world is based on the idea that text media is critical to communication and action, and color is almost always preferred, educators have arrived at an opportune time reconsider their habits and skill sets.

At the same time we constantly add to students ability to read however, we understand that the entire world of advertising exists to use their growing reading and information skills to cause them to do something, whether it is to buy, vote or visit. This provides not just an opportunity to teach about this form of communication but really an ethical requirement to help defend them against manipulative writing and images.  There is much information that searches can reveal on teaching how to detect propaganda, censorship, and bias including works by Baker (2012), Silverblatt, Ferry & Finan (2009) and Potter  (2008) and that are books in Hunter Library. Though an important topic, it should not be used as a replacement for teaching basic image composition skills. Rather, they go well together. For a specific example,  see a 6th grade lesson plan directly tied to one of the NCSCS competencies, available at LearnNC.org. It is titled Finding hidden messages in advertising, http://www.learnnc.org/lp/editions/careerstart-grade6/2638.

While engaged in the assignment activities below, be considering some higher order thinking ideas. How do teaching and selling compare? That is, what are their similarities and differences?

Assignment

These activities ask for demonstration of this skill by combining your own photography with text and perhaps clipart to teach content vocabulary, ideas and actions.  Your assignment is to create a teaching image that could also be thought of as a teaching ad as well thought of as a teaching aid.

Select A Knowledge Area & Find Related Images

Gather together and review assignments underway or completed for other methods courses (e.g., methods class CRSP assignments). Pick a topic area and an idea.

Find an image or related image that you own or have shot yourself. If you don’t have one, get your digital camera out and take a photo to use.

You may already have a photo collection. If not, it is time to start your career photo collection with this activity. You can use existing photo’s you already have or shoot more.  You’ll need to know a content topic in some depth (e.g., methods class CRSP assignments), how to crop and scale an image, add text in different fonts and colors and perhaps use some special effects. The assignment is to teach towards an educational idea by creating an educational ad for the idea using one or more of the standard banner ad sizes used in Web advertising and combine it with some related text. This idea could be a word that needs to be taught as part of a vocabulary lesson.

Select a couple of banner sizes that are sufficient for you to meet the criteria above. Start up Fireworks and create a workspace the size of one of those areas where you can begin to compose and experiment. If the first Banner size is not working for your concept, try a different size.

Getting to Fireworks – the Application server.

There are two ways to find the application by Adobe called Fireworks. In selected computers in Hunter Library’s Tech Commons or in the classroom computer lab, Fireworks can be found on the local hard drive.  WCU also provides an application server that will enable you to run this application on a remote desktop from anywhere on the Internet while sitting at any Mac or Windows computer that does not have this application. In fact, you will be running the Fireworks software on a computer on WCU’s campus from your computer.

To get to the remote desktop software you will first need a VMWare View Client. That client application can be found in your course Blackboard site on the Course Content page in the folder titled Tutorial/Application Services. Further directions on how to install this software and get connected are also in Blackboard. Once connected, use the usual Windows procedures for starting up an application in the remote desktop software. Click in the start box and type in Fireworks. Start it up. This is where you will do you work, save your work in progress to the desktop, then email yourself the file to continue work another day. Sometimes it is possible to save directly to your USB or Thumb drive. Only the email attachment method works reliably.

Next, use the course Web link to log into Atomic Learning and find the tutorials for this version of Fireworks, version 6.

Image Editing Intro-A Short Screencast Series

An Introduction to the Composition Tools and Setting - a video screencast.

References

Book Shelves

Baker, F. W. (2012). Media literacy in the K-12 classroom. Eugene, OR: International Society for Technology in Education.

Silverblatt, A., Ferry, J., & Finan, B. (2009). Approaches to media literacy: A handbook. Armonk, N.Y: M.E. Sharpe.
Potter, W. J. (2008). Media literacy. Los Angeles: Sage Publications.

Web sites

Anatomy of Perfect Banner Ad
http://blog.buysellads.com/2011/09/anatomy-of-the-perfect-banner-ad/

50+ Excellent Adobe Fireworks Tutorials http://www.noupe.com/tutorial/50-excellent-examples-of-adobe-fireworks-tutorials.html

Fireworks /  Interactive slices
http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fd3.html

Fireworks / Hotspots, image maps, and rollovers
http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00d35d-7fe6.html

Interactive Prototypes And Time-Savers With Adobe Fireworks
http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/

Layers http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7f81.html

Web Banner. http://en.wikipedia.org/wiki/Web_banner
The World's Best Banner Ads (And Why They Worked) Bannerblog's Ashley Ringrose Presents Work for Coke, VW, Pringles, U.K.'s National Health Service and Others  By: Michael Learmonth Published: April 19, 2010 http://adage.com/article/special-report-digital-conference-2010/world-s-banner-ads-worked/143311/
Banner Report http://www.bannerreport.com/html/gallery.php

Updated: 9.2.2012 Page author: Houghton | Computers in Education Chapters