Multimedia Design SP06

Kastler's Chapter 9

2006-05-02T15:42:00.000-07:00

When I was reading chapter 9 in Wise, the section discussion the decline of the public sphere stood out the most. I have always been curious about how the public sphere was organized during the days without the technical advancements we currently take advantage of today. I figured that most of the people during those years were more in tune with what was happening in the cities, townships, or communities they lived in. This is because they had to interact with each other and the means of obtaining information was centralized. Currently, the means to which our society obtains their information is so wide, it is hard to determine where people get their information. And with stating that, I want to make it clear that I am not naive to the fact that there still is a public sphere in which people still discuss important matters in person, but rather the internet has made the public sphere decentralized. Making the public sphere obtainable to more people over a wider range of space. Because of the internet, the public sphere is world-wide and it now possible that anyone regardless to age, sex, or race can be apart of this without any discrimination.

Allen's Take on Chapter Nine

2006-05-02T15:23:00.000-07:00

Chapter Nine:

This chapter professes power and wealth through knowledge. People should strive for excellence. Excellence of unity. “Cyber Space Democracy,” is what we should go after, since we are putting all of our eggs in one basket. Yes, we are working towards a better future, but a better future for who? The “have-nots,” no, a better future those of whom are informed and those who embrace the on coming of a cyber era. Jobs are going out of the window, the cost of living increases, and only a few people standing on the necks of millions, is what seems to be forthcoming. No money, plus no job, equals your future (our future).

I'm partial to both sides of this foreseeable situation. If one doesn't take the initiative to try and roll with the punches, they are going to get pounded. The question I raise is, "Should they (we) have too?"

Zelasko Reading Response 9

2006-05-02T15:19:00.000-07:00

This chapter was filled with information that I have never been introduced to . Therefore, I was very interested in all the content.
The part I found most interesting was the information theory value. The book states that the notion of value resides in information and goes far back to philosophical traditions. The progress of humanity and the belief that this can be achieved by means of applying systematic knowledge are two ideas behind this. They believe that technology could help people achieve a better life on earth. In some ways I agree with this and in others I don't.
On one hand, it is true that with technology our life has become easier, but how can you judge whether life is better because of it. Who is to say that just because we can produce more quantities equals happier people? What if the people who used to do everything by hand now count on technology and have received hour and pay cuts or even worse, gotten laid off? I don't see how their life is better because of that.
In other ways I can see how technological advantages can help such as finding distinct ways to do a task which makes the outcome bigger and better and more efficient. Overall I think its too broad of a statement to say that the tech value makes for a better life because everyone is going to have different ideas on what makes life good and 'better'.

information age garfinkel

2006-05-02T15:09:00.000-07:00

As a Information Technology minor (sadly), the internet has both become a product that makes some things simpler to do, and have easy access to do so, but it may also cause the loss of some jobs; I don't mean neccessarily unemploying people, rather transferring them to a different department. Some telephone systems have a voice recognition system where you tell it the information to be accessed by a company. This is what a customer service representative would ask you, instead it is an automated message where that takes your information, not the representative. Yes, doing things in this way may make things easier, but you lose the "personal touch" of talking with people.

As another example, ordering products from a company to your own company used to require you to make a call and give them your information about your company and what you need as far as office supplies go. Now, you can log onto the internet, enter the information yourself, and choose which products you need, without much of a need to call that company.

Chapter 9

2006-05-02T14:37:00.000-07:00

I feel as though Wise was pretty much trying to sum up everything he has mentioned throughout the book and how cyberspace has had an effect on our society. However, the one aspect that I feel that he really touched on good was the idea that Internet is the electronic democracy. When I read this section, I found myself agreeing to the idea of how the Internet is so widely used to display governmental information or any kind of information for that matter. So this leads me to disagree with Wise's notion that cyberspace can not be the new Public Sphere and in particular because access is limited. Access to cyberspace or the Internet is not more limited than walking to the store to get a paper for $.50. I say that because everywhere you go now from public libraries to coffee shops that has either public computers or networks to connect to. The Internet or cyberspace is not as "public" as the public sphere idea would like it to be (I say this b/c of how things have changed since 9-11) but it is still open for anyone to use. So I think that Wise does not really argue is point all that well in this topic.

ch 9 response

2006-05-02T13:47:00.000-07:00

I think that using cyberspace as a political forum is generally a terrific idea. Open forums that are available to the public for discussion of societal interests are the focal point of our democracy. But what I don't like and isn't quite mentioned in the chapter are those who are participating. As the gap in the "digital divide" expands, those of whom on one side will be the only particpants in the cyber discussions. Many folks, whose family or heritage has fallen victim to the effects of economic value and automation, are the ones without a "voice" in cyberspace. Additionally, those who are not as in tune to many issues or are aware of the ramifications of a topic could be easily swayed by the process of manipulation to have a tainted opinion. But, i do think that it would be easier for someone who is intelligent enough to hold claims in a cyber forum and not be discriminated against for any physical reasons such as race, sex, etc. The key to digital participation is being taught how to effectively and ethically participate.

Chapter 9 Reading Responce

2006-05-02T13:21:00.001-07:00

This Chapter told of the impact the internet has on society. The internet can be used for many different thing from polotics to advertisments. All of which has to be read and determined to be usfull by the adience or the user. The advancements in mass comunication has made this dificult at times due to the bombardment of this information whith very little content. Also the overexposure to this suppled information has caused a decline in the debates of important issues. One of the major problems with the internet as a public forum is that only certan demographics posses the materials or even the skills to access the information easily or regularly. Making it a poor forum. I also beleave that just the use of cyber space alone may even become a cruch so when the time comes for us to stand up and express our ideas or opinion. We will be unable do too the lack of one unified voice which i find hard to express digitally. Yet the internet can help us become a better sociotey but be need to keep some of our own identety and ideals and not let anything take them from us.

Chapter 9 Response

2006-05-01T10:28:00.000-07:00

Ok what next? This is the question that this chapter left me with. Personally I believe this would have made a better introduction or first chapter than last. It would have opened up the dialog that I believe Wise attempted to answer throughout this book. In this chapter he continually describes the onset of cyberspace and why it is important to modern society. After reading this chapter and the preceding ones I find myself asking the question, ok what next? Wise has throughout this text discussed many different aspects of multimedia without providing any insight as to what or why he feels the information he presents is important. I agree that advances in media and the technologies used to present information is important but nothing I found in his writings helps me to draw any inferences that I did not already have. Most of his information can be found by simply paying attention to current news reports. In what context does he feel that this information relates differently than to media and the way it is presented? Was his goal to create further desire in the reader to know more about multimedia? If so then he failed with this reader. If his goal was to give a very basic introduction to multimedia then he succeeded.

Reading response 9 mcclure

2006-04-30T15:08:00.000-07:00

Basically for me, this chapter was telling about how the 'Information Age' has brought many types of change in our society. From how we communicate to how we work, technology has had huge impacts on our everyday behaviors. I guess I agree with the cyberspace ideology that imformation technologies have made our society materially better off by allowing fewer inputs to result in greater outputs. This idea is very obvious and seen everyday. Computers allow us to instantly send and receive information with the click of a few buttons. We no longer have to wait on 'snail mail' to get the information we are seeking. Fewer workers are needed to produce more output. Like Francis Bacon said ' knowledge is power and that man's lot could be improved by the application of reason and technology'. I certain believe this is true. Whether in the long run this is good thing, I'm not totally sure. Technology has certainly made lifes everyday tasks 'easier' and more efficient, but technology has also lead to me many money and power hungry societies, most of all our own. F.W. Taylor came up with the idea that efficiency of every task that a worker performed could be improved with careful observation and redesign of that task. His work reflects the need for the human tendency to want more, faster, and better. Technology has fed this need very well.

Class Notes: 4/27/06

2006-04-27T15:18:00.000-07:00

Students presented their progress reports.

Reading and responses to Wise, chapter 9 due May 2. Creative Notebooks due May 4.

Class Notes: 4/20/06

2006-04-22T19:28:00.000-07:00

I Review Web Usability Guidelines

Visual Organization Principles
Relative and consistent position, scale, style of information tell your audience how to interpret and make use of your Web site.

Brainstorm visual organization principles from the text.

Perceptual principles:
-proximity: closer are more related
-similarity: similar design can unify diverse elements or create relationships among items that may not be proximal
-continuance: if differences are a result of a pattern, different elements appear grouped
-closure: 'filling in the gaps' to create a more unified form
-isomorphic correspondence: association of a behavior with a visual cue-eg raised button.

Variation: the amount of visual contrast, the number of ways elements are visually different from one another, corresponds to the amount they are perceived as distinct and unrelated.

Visual Hierarchy: a way of indicating what is the most important information on the page--makes it scannable. Unification of elements, as well. Usually top to bottom.

Visual Weight: created by the contrast between two objects and the amount of time it commands attention. The 'story' begins with the item with the most visual weight. The relative position of each element leads the eye through the hierarchy, supplying information in the order needed. Need a clear path for the eye.

Need consistency, contrast, hierarchy to educate your audience quickly and effortlessly about how to move about. Not all audiences come through the homepage, so the navigation needs to be transparent quickly. Need also to quickly establish a sense of relative location or level within the site. This can be done by distinguishing the name of the link of the current page, using breadcrumbs, color coding for content, and using larger text for top-level or "parent" links that contain more information. Multiple, small links work best when information in presented in a particular order (e.g. a list of photos.

Show Apple Web site for examples.

Establishing hierarchy on the Web
1) Content: page title, section title, embedded links, supplementary info
2) Navigation: location indicator, top-level navigation, subnavigation, trace route
3) Supportive Info: site identifies, sidewide utilities, footer information
ACTIVITY: Ask students to create boxes to describe the function of different elements within the page hierarchy: orientation, top-level navigation, content, section title, page title, body, lower-level navigation

Personality
Need to have a consistent personality, so the style of writing, the graphics and type, the colors all work together to create a unique identity--think of branding/marketing. This helps to focus and attract your target audience. The presentation and content should reinforce one another.

Something should be emotionally appealing and engaging at the first glance--make the visitor want to enter the site. This should be maintained across all pages--they don't need to be identical but to have a unified "feel."

Developing a personality:
Think about audience, competition, and connotations of your content. Try to match the qualitative characteristics of your audience and content in terms of typography, imagery, and color.

Color theory
color associations--psychological reading--brainstorm these associations
warm vs. cool colors: advancing and receding
contrasting/complementary colors: creation of 'simultaneous energy' if used in equal proportions and intensity and a sense of balance if one complement is dominant and the other supplementary
analogous colors: colors next to each other on the color wheel, create tranquility
monochromatic palette: use of varying tints and shades of a single color; allow content to be primary but hard to maintain interest
dominant color: one color that sets the stage for the mood of the site; not necessarily the color most used on the site.

Typography
Consider the associations of the type used in your page; create gifs for typographic elements that contain unusual fonts.

Visual and Media Elements
Consider their appropriateness for your story and 'feel,' whether they focus or distract your reader's attention and if enhance the unity of of your site. Images should not feel like 'add ons' but can be central to the look and feel.

Creating an Effective Home Page

The home page has three responsibilities--BRAINSTORM
1) Introduction: logo and tag line, short statement, visual presentation
describes the site
establishes identity
2) Entrance: navigation system, entries to services, search utilities
entry to content
explain what's inside
3) Announcements: features/news/advertisements
show recent updates
encourages revisiting
highlights content

Important to be selective about what gets on the home page--is it helping establish the site overall? how important is the feature to your audience?

Eliminate animated intros and anything that does not help user access content

Create subtle contrast between elements on the home page to distinguish different content categories.

II. Independent/Group Worktime

III. Elements of the Progress Report--last 10-15 minutes

Review elements of the progress report for the following Thursday. Add a site map in the section on demoing the current state of the design. How to create a site map is on pages 47-48 of the Wroblewski.

Class Notes: 4/18/06

2006-04-20T10:04:00.000-07:00

Heidi Jung, an Instructional Designer from ISS, came to class today and gave a 1-hour presentation on designing instructional Web sites.

The remaining half of the class period was spent attending the debate on No Child Left Behind or on in-class work in groups.

The next few class meetings will be:

4/20 DUE--Wroblewski chapters 4,5,7
Elements of the Progress Report

4/25: In class workday

4/27: Progress Reports

Class Notes: 4/13/06

2006-04-13T18:38:00.000-07:00

1) Discuss White Readings
Creates an architectural metaphor for the design process--spaces within the spaces without; page structure

Document's purpose and its page size are the first decisions a designer must make--usual vs. unusual size; how does this translate to websites?

Repeated design elements must be findable-placed in consistent, expected places

"Boxitis" vs. intelligent use of the grid
-boxes can separate content equally--try to create "Chains" of information
-break part of the image or layout out of the box
-grids create freedom in structure--a structure that can be followed and intelligently broken in order to give page cohesion

Chains of thought--a logical way to follow the information in the page. Think of it like a path; often created through white space and the tendency to read from upper left to lower right.

Use of Space
-to connect various elements and lead the eye
-to create relationships between page elements, including overlapping
-to create a sense of cohesion between pages through the consistent use of white space
-to emphasize and echo prevailing directionality of the page

Direction
--creates a hierarchy of information, usually top to bottom. If something important is on the bottom, then create a directional space to lead there and back.
-dynamic design needs emphasis in a primary direction; diagonal directionality can be overdone and over-obvious

Situational Awareness--information mapping and wayfinding
These are strategies you can use to make your pages scannable to allow your visitor to scan your pages
-create standardized spaces between elements on the page/screen
-consolidate bits of white space--grouping space
-use white space in tables--give information room to breathe

Three-dimensional space (illusional) can be created through:
-overlapping elemens
-implication of movement through Photoshop blurring
-use scale and visual hierarchy--invert
-use perspective
-play with opacity and the sense that something might be bleeding through the page/screen from beyond.

2) Sketch grid-based designs in creative notebooks
5-column and 7-column grid design

3) Critique Web sites according to page architecture principles:
http://www.imagesfestival.com
http://www.ideasfest.org/
http://learningtoloveyoumore.com
http://www.futurefarmers.com
http://www.fondation-langlois.org/

3) Group work on the sitemap for their site and grid layout diagramming; other work as needed.

Class Notes: 4/6/06

2006-04-11T06:16:00.000-07:00

Outline:
1. Finish demonstrations on CSS
2. W3C Accessibility guidelines
3. Quiz
4. Go over expectations for presentation again

I. CSS
1. DW authoring of embedded CSS, exporting and attaching external css files
-modify the page properties of pageproperties.html and view the resultant code as an example of an embedded CSS
-export the embedded css to an external css file (mystyle.css)
-delete the embedded css and attach the external sheet. Attach the new style to other pages (all the other pages in aboutus).
-edit the formatting of the other pages by changing the stylesheet.

3. Writing and editing CSS
-redefining html tags (redefine.html) with a new css document; redefine body,

and tags; save as redefine.css
-discuss inheritance and specificity rules
-create and apply classes for pressrelease.html, create press.css. Classes allow for the formatting of a part of you page with a tag that you define, regardless of the html tag that contains the content
-Use the relevant css list in the Tag panel to quickly identify and edit the css that appies to a particular element

4. Making a navigation element in CSS using contextual selectors
create a custom class for making a navigation element (rollover.html, navigation.css); create a navigation wrap and set rollover links inside this
create new class .navcontainer
wrap the ul in a new div with the class selected
create contextual selectors for .navcontainer
ul, a, a:link, a:hover, a:visited
in ul: font arial, 11, #fffff, no listtype, box 0 margin and 0 margin left
in a: arial, 11, #fffff, bgcolor #df9300; block-display:blog; box 160wide, 3 pixel all padding, border bottom solid 1 pix #fffff;
in a:link and a:visited: arial, 11, #fffff, nodecoration
in a:hover: arial, 11 #ffff, nodecoration, bgcolor=#ffcc66
in a:active: arial, 11 #fffff, nodecoration font color #660000

4. Using CSS for positioning (advanced--just touch on this; show readysubjects)
-create IDs to describe the various components of your site, all with their own
IDs/selectors
-create new layers by clicking on the "div" button and choosing the id
-create a master wrapper with auto-width to allow the site to resize in a browser
-show floating
-static, absolute, fixed positioning and what they are good for
-show applying a bkg image to a positioned div

II W3C Accessibility guidelines
1. Show accessibility preferences and keep on. This will prompt you to make accessibility modifications to your page
2. Use the ALT tag: in the property inspector, also the longdesc file
3. Use layers/divs rather than tables for accessibility: DW will prompt you to add a caption and header info for tables, but this gets complex if you are relying on tables for your layout
4. Use CSS rather than presentational HTML
5. General guidelines:
-create contrast between text and bg color
-use descriptive names for what your link will lead to
-use sans serif fonts
-check for accessibility useing the File>Check Page>Check Accessibility options.

III. Give out the quiz

IV. Go over expectations for the proposal

Class Notes: 4/4/06

2006-04-04T15:46:00.000-07:00

Outline:
1. Review Reading on Technical Considerations
2. Dreamweaver III Demo
3. Topics for the Quiz

Technical Considerations
1. Optimizing pages for a quick download time by
a. optimizing code
b. reusing and optimizing images
c. using style sheets (more on this today)
d. reducing physical size of images
2. Create pages that can be visually scanned
a. break up chunks of information
b. minimize complex interactions
3. Don't disrupt Web conventions without a good reason
a. maintain browser navigation tools
b. do not use frames
c. use plug-ins sparingly and provide a way to get them
4. Indicate the purpose of your links
a. navigation links normally at top and left
b. internal links generally go to other parts of your site with more detailed info
c. external links should be so listed (as in a links page or with an icon)
d. download links should say what is being downloaded, the format, and the size
e. inline links link to other parts of the same page
5. Assembly of the page
a. page title in the browser bar
b. site identifier and home link
c. indication of last update
d. navigation
e. contact info

Dreamweaver III: CSS

A. Continue/Finish with Behaviors:
-Pop-Up Menu Behaviors (index.html, popupmenu.html)
-Use the forms insert bar to create a jump menu (index.html)
-Browser-check/plug-in check behavior (index.html)
-Open/Close Browser Behavior (openbrowser_done.html,
openbrowser.html, and whois.html) The Javascript that goes in the link field
in the Property Inspector is "javascript:window.close();"
-Show/Hide Layer behaviors to create a loading message

B. Advanced Layout: Layers
-set a tracing image (layers>index.html) internal to DW
-follow this layout using layers (layers>index.html)
-convert to tables for compatibility with earlier than 4.0 browsers
-create a resizing header/navbar (navbar_done.html + new document)
-go to layout mode and hand-draw a table-show cmd key trick
table=575x200
row 1=575x44
row 2=248 x 42, next cell=remainder
color bottom 2 cells df9300--talk about actual web safe!!
align cell right and make autostretch

C. CSS
1. Introduction
a. since the late 1990s, this has been the standards-compliant way of
designing Web pages; however, browser implementation has been slow so it wasn't until 2003 that it was widely implemented by designers.
b.CSS separates the structure and content of the document from the presentation. Style sheets can be:
-embedded: in the head of the document, affects only that document
-external: linked styles are completely separate, in their own document called xxx.css. they can apply to multiple pages in your site
-inline: nested inside the body tag, only affects element it is attached to
c. CSS structure is built on Selectors and Declarations
-h1 (selector) { color: green } (declaration)
d. Declarations are split into property and value
{ color (property) : green (value) }

2. DW authoring of embedded CSS, exporting and attaching external css files
a. modify the page properties of pageproperties.html and view the resultant code as an example of an embedded CSS
b. export the embedded css to an external css file
c. delete the embedded css and attach the external sheet. Attach the new style to other pages (inside aboutus).

3. Writing CSS
a. redefining html tags (redefine.html) with a new css document; redefine body, p and h tags
b. discuss inheritance and specificity rules
c. create and apply classes (pressrelease.html), including border elements, etc.
d. show relevant css list in the panels, applies to certain elements.

4. Using CSS for positioning (advanced--just touch on this)
a. create IDs to describe the various components of your site, all with their own
b. Class IDs
-create new layers by clicking on the "div" button and choosing the id
-create a master wrapper with auto-width to allow the site to resize in a browser
-show floating
-static, absolute, fixed positioning and what they are good for
-show applying a bkg image to a positioned div.

D. Topics for the Quiz
1. DW technical stuff
2. Best practices on web usability taken from the first three chapters of Wroblewski

Ch. 6 Response

2006-03-31T21:47:00.000-08:00

Convergence is an idea that is both good and bad, depending on the subject of what type of communication is converging.

The internet is an overall good form of convergence, as it blends text, images, multimedia, and audio together through an internet connection in a digital form; these are delivered to computers "on-demand" either by the use of web browsers displaying text and/or images, with plugins which enable web browsers to display videos or other multimedia.

The broadcasting medium has suffered from convergence, though. The T.Com act of 1996 lessened the strictness of how many stations a company can own within a single market. For example, Viacom, which also owns Paramount Studios, also own the television stations MTV, MTV2, VH1, Comedy Central, UPN, CBS, among others, and the radio station company, Infinity. Disney, Clear Channel, and General Electric also own several other media outlets. The convergence here may cause less varied content within their stations (NBC's Law and Order, CBS' CSI, ABC's Trading Spaces).

Convergence, in the above example, may also influence the exclusion of news related to that outlet's parent companies (an ABC news program may not mention a negative headline about Disney.)

Class Notes: 3/30/06

2006-03-30T15:39:00.000-08:00

Intro to Multimedia Design
3/30/06

Outline:
1. Web site review
2. Navigation Concepts and Site Structure
3. Dreamweaver Bells & Whistles
4. Homework

1. 5 minute Web review
-who is the site's target audience. how do you know?
-what kinds of needs does the site fill?
-what you like about the site/what is successful?
-how could the site be improved?

2.Site Navigation and planning
-Navigation is important to help your audience access information. Can be arranged according to task, topic, or audience
-Navigation can relate to the kind of story you want to tell--Bob Marley example
-Navigation is progressive (more information is at deeper levels of the site) and consistent (in the same place, always getting back to site's top level and home pages, contact information, site ID) No more than 4 levels to your site is a good rule of thumb, though very large organizations have more

3. Dreamweaver II: Bells and Whistles

A. Review: Define a new site and copy the files off the server onto it.

B. Using Images as a Navigational method

Need to create images in an image editor program, jpgs or gifs (animated gifs work, too)

Talk about the importance of ALT tags and giving images names within DW

Image Maps (imagemaps.html)

Simple Rollovers (simple.html and simple_done.html)

Pointer Rollovers (pointer_done.html and pointer.html)

Multiple Event Rollovers (multiple_done.html and multiple.html)

Navigation Bar Rollovers (navbar_done.html and navbar.html)

C. Behaviors and Forms

Behaviors are Javascript programs written by Dreamweaver to enhance the interactivity and functionality of HTML. They can be created using the “Behaviors” panel and are made up of two parts, an “event” and an “action.” The event is the variable that must be fulfilled to trigger the action, while the action specifies what happens. Events are usually mouse-related, but they can also be related to the loading of a page or a timeline.

Pop-Up Menu Behaviors (index.html, popupmenu.html)

Use the forms insert bar to create a jump menu (index.html)

Browser-check/plug-in check behavior (index.html)

Open/Close Browser Behavior (openbrowser_done.html, openbrowser.html, and whois.html

If time, inline/anchor links (anchor_done.html and anchor.html)

D. Embedding Multimedia

Show problem with using play sound behavior (indexbgsoundjava.html)

Embed a sound file to play as background sound. (index.html and indexbgsound.html)

Embed video and remove play bar. (video.html)

Dreamweaver Exchange: accessing through the behaviors palette.

4. HW in creative notebooks:

The content developer can begin to prepare schematic diagrams of possible ways of arranging the site's information. No more than 3 click should be needed to get to any information on your site (ie no deeper than 4 levels)

The graphic designer begins to sketch possible navigation layouts. Pop-up menus? drop-down menus? Position on page? Also, begin to collect images from magazines, color swatches, digital photos, etc. to look for the style you are pursuing on the site.

The tech designer plays project manager and creates a list of tasks and who needs to accomplish them by when. Also, begin to compile a list of technologies needed by your users to view the site as you are planning it.

Ch. 6 reading response Mcclure

2006-03-28T20:52:00.000-08:00

I think that after reading this chapter I had a better understanding of the convergence of media companies. I think that this convergence allows for better service to consumers because many services can be combined. It is also apparent that this convergence lessens the competition for these companies. Companies are able to grow and expand there services more cost effectively since they are combining with other companies. It is also important that companies are allowed to focus on a primary service or product. Because they are combining their services or products with other specialized companies the outcome is a better product.

After our discussion in class, I began to consider the importance of having internet service available to everyone in this society. At first I didnt think that is was that important, but then I began to realize that, in fact, we really do need internet and computer access more and more in this society. When I think about my job search over the past several months, I realized that without the internet it would have be very very difficult. Computer have become a way of life for us. Almost every career field requires some sort of computer technology knowledge.

Class Notes: 3/28/06

2006-03-28T17:55:00.000-08:00

Introduction to Multimedia Design
3/28/06

I. Outline:
1) Collect Initial Project Ideas
2) Review Wise: Capital and Multimedia Chapter
3) Introduction to Dreamweaver MX 2004
4) Homework

I. Review Wise

This chapter attempts to disarticulate the digital technologies from the rhetoric of consumer choice and freedom surrounding free market economics. It argues that the deregulation program of the New Right was designed to make companies more profitable, not empower consumers and that deregulation increased monopoly power and not consumer freedom while creating a system of regulation that paradoxically makes big companies "reluctant to exploit the full potential of the new digital technologies." (117)

Dual definition of "convergence"
Technological: delivery of previously different types of content over the same platform
Institutional:mergers and acquisitions such that content, distribution, delivery are all owned by a few large companies. This creates an oligopoly: businesses attempt to absorb rivals or cooperate with them against consumers. The bulk of this chapter shows many examples to support this thesis.

Companies were converging/integrating both horizontally (expanding business to protect own's position) and vertically (moving into another area of the production-distribution cycle) backward and forward integration into earlier or later parts of the cycle.

Telephone and cable companies went from being merely the carriers of bits of information into the producers of them as well; with everything 'converging' on bits, they did not want to be confined to being transporters. This is an example of backwards vertical integration. e.g. Time Warner and Cablevision, followed by AOL.
Signal delivery is not profitable. Delivering content is, esp. if the costs are low and the profits high due to marketing (reality TV)
See: http://www.freepress.net/content/ownership

Internet initially seemed to anarchic to be owned by corporations in this way. However, in 1995 the US government sold the "backbone" of the Internet--high capacity fiber-optic lines--to five major telecom companies. In 2005, the Supreme Court decided that disciminatory use of these fiber optic (and cable) lines was not unconstitutional.

Talks about a number of technologies that have come to pass: VoIP (problem with universal connectivity charges--Free Press), webcasting/rss ("push" technologies); cookies and targeted advertising (surveillance). Many of these techs, while seen as great ways to bypass 'old' media were developed with R&D dollars from those 'old' media in the form of massive telecom companies. Yet, change has not been as rapid as some hoped for or predicted: ex, 1997 cable modems on the market, in 2006, I still can't get one for my house; rss/subscription were being developed in 1998, still only 3% of the public uses them.

II. Introduction to Dreamweaver MX 2004

Dreamweaver is a WYSIWYG web authoring software that writes xhtml, the descendent of html. There are a few key differences between the two languages, but they are structurally very similar. We will not be covering the differences in detail, but please view H.O.T. Chapter 1 and Chapter 12 for more information.

Dreamweaver has a number of different extensions that allow you to add programming functionality without writing code. Many excellent resources are listed on page 13 of the text.

Walkthrough of Interface

Dreamweaver>Preferences to change document preferences, such as viewing on different sized browser windows, changing the estimated load time and changing default preview browser.

Page 42 lists a lot of shortcut keys

Walkthrough process of creating a site/site management (create root folder, images folder, index page. Save page title.

Use Page Properties to set page properties using html/xhtml mode.

BREAK TO DO THESE STEPS

Use Tables to create a layout.

Using the Assets panel to insert images and the insert panel to insert placeholders.

Creating links to text and images/duplicate page to new page.

BREAK TO DO THIS.

Insert metadata (keywords and description).

Discuss the file organization in the "Files" panel.

Using the "file" panel, add folders and move files. DW will update the links automatically.

BREAK TO DO THIS.

Linking with point to file on links and images.

Creating Email Links.

Creating named anchors.

Linking to files.

BREAK TO DO THIS

Working with tables
-creating
-modifying (adding rows and columns, combining and separating cells)
-setting colors

Using tables for layout
-percentages vs. fixed pixels--nesting fixed tables inside percentage tables.
-cell padding and cell spacing
-setting cell widths and heights
-arranging text within cells--vertical and horizontal alignment.
-nesting tables to create colored borders
-creating rounded or different corners using images.

BREAK TO DO THIS

4) Homework
Prepare individual Web site reviews--using the sheet--of 1 site to present in class. 5 minutes max.

Zelasko Reading Response Chapter 6

2006-03-28T15:18:00.000-08:00

The basic idea that I got out of this chapter on capital and multimedia was that back in the '80s and '90s the main idea behind communication policies was to combine technology (digital) and free markets in hope that this would offer richer, more diverse media options to consumers. I found it ironic that the exact opposite of what they had hoped for was the actual outcome of its combined ideas.

Convergences and mergers happen in each area of telecommunications. Whether it be a technological or institutional convergence, no area is skipped. Telephone companies were among the first to contribute the idea of mergers. In today's society now even Internet companies are looking to merge with telephone companies and reduce the middle man.

With all this convergence, content is of course very important. The book describes the scramble for such content over all areas. For example, TBS aquired MGM's entire film library in 1985 so they now have all that content to show on their station and affiliates.

Overall, convergence and aquisitions will always be present in our media world because people will always want to make more money and will try and achieve this by cutting out the middle man in whichever way they may be able to.

chapter 6

2006-03-28T14:43:00.000-08:00

I found this chapter to be very complex in the understanding of the dynamics of the delivery, use, economics, and ownership of multimedia. Multimedia is the result of consumers, consumers who use it for personal, work, or entertaining use. It is their demand, I think, that forces oganizations to combine, ultimately resulting in the few large corporations that predominately own rights to a lot of media. This is kinda like putting all your eggs in one basket. In order for many technologies to be interactive, wouldn't a common ground be needed to facilitate these demands? Like the quote on p. 116 says, "Imagine you had a device that combined a telephone, a TV, a camcorder, and a pc." Granted this text may be outdated, but when it was written, this was '98 or '99. Now it is possible. But how did this come about? Vertical and horizontal intergration, alliances, mergers, and acquisitions? The downside to getting what we want as consumers is now we want diversity. Through trial and error, the large corporations are struggling to satisfy the ever-changing demands of the public. The bottom line is profit. Whatever capital we put in the corporations will take and continually develop new stategies and plans to satisfy our demands. I find that it seems to be essential in the development and interactivity of mulitmedia that companies converge, aquire, and merge with other companies to bring together resources ultimately resulting in progress and satisfaction of a consumer driven market. I was surprised to see the many aspects of how I am able to consume media.

kastlers ch.6

2006-03-28T14:37:00.000-08:00

During the '90s, the government was more interested in making it easier for media companies to become involved in each other's business than fostering competition. I guess their logic was to have these companies more accessible to compete with companies worldwide instead of worrying about internally. The leaders of our nation have always had manifest destiny on their minds. Since we have taken all the land we can, why not transition that to money.

While I was reading chapter 6, I kept referencing to the idea of Manifest Destiny. The Telecommunication Act of 1996 allowed more possibilities abroad. It allowed telecommunication companies to include sound and video in their services. This allows companies to work with video companies. In short, it allowed those companies to buy out a video service and merge companies. This is called vertical integration, which i feel is the lesser of two evils. Vertical Integration makes it possible for companies and business to acquire products or services that can be combined with a current product or service in order to make it better and more desirable. I feel that horizontal integration is the major downfall of the Telecommunication Act because it made it possible for larger corporations to buy out companies so that selling their product is a cheaper process.

Johnson Chapter 6

2006-03-28T14:25:00.000-08:00

When I was reading about how companies merging together was better than one company coming out with something that might be risky and and money losing, I thought about the merger between Sprint and Nextel. Sprint was like one of the leading celluar phone companies with a bunch of satalite towers but Nextel had the "chrip" feature and this a feature that Sprint users wanted. So I think Sprint knew that it would be too costly to try and impelement this feature so they merged with Nextel who wanted more satalite capability. Athough Sprint/Nextel don't monopolize the market they do own a great share of it b/c all the other cell phone providers can't provide all the features that Sprint/Nextel can.

kastlers ch.5

2006-03-28T14:03:00.000-08:00

In relation to telecommunication and cable, deregulation is another term for accepting merges. Deregulation was initially thought that it would encourage competition. I'm sure in most companies minds, they knew exactly what was to come because of it. The companies that had a lot of money knew that they would be able to secure themselves in the market. Those without money, knew that their fate was coming. By securing themselves, they knew that they would be able to buy out the smaller companies and eliminate potential competition.

When the telecommunications act of 1996 came about, the initial idea was to help companies generate profit in which they could turn that money around and pay for advancements such as fiber-optics. The act had intentions to which companies could use cross-ownership to better the services provided. The major companies saw this differently. They basically followed the cross-owernship intentions, but instead of allowing cross-ownership, they simply bought out those companies and began merging. If the intention of the Communication Act of 1996 was to break up monopolies and allow many companies to strive, it worked in a sense. There are no local companies any more. There are just a few major corporations that have bought out those who stood in the way of making the process cheap and the profits huge.

William Wise ch6

2006-03-28T11:31:00.000-08:00

This Chapter coverd the integration of all the different forms of media ether vertically or horivonatly. The really anouying part was that they kept refferencing the Uk and there percedures wich is really confusing as a reader because it has no historical meaning to me, because i have never studyed the Uk media background. All togher this chapter covered to much on the merging or the convergence of multple differnet compines in to much detail it was hard to get the mian picture im still not sure what the main idea of the chapter was becuase i got lost in the deatil and the wording. I dont dought it also has to do with the fact my brain not functioning well doe to ilness

Class Notes: 3/23/06

2006-03-28T07:41:00.000-08:00

1. HTML Quiz

2. Review HTML Quiz

3. Discuss Web project planning process

a. Site Objectives: what do you want the site to accomplish? List four or five specific items drawn from your answers to the following two questions:
-What needs is the site going to fill?
-What questions might bring users to the site in hopes of finding an
answer?

b. Define your site's identity
-What key message will the site convey?
This should be a succinct statement--something like a headline for the site. Does not need to be a catchy slogan, but should be repeatable and easy to remember
-What is the governing metaphor for the site? How might the design reinforce this metaphor?
Define the site in abstract language, in terms of quality rather than features. What repeated elements are in the design, and how do they reinforce content?
-Describe primary and secondary audiences.

This will help you identify what design and features these audiences desire and respond to in order to help you improve your communication. Describe your audiences in terms of the technical skills and equipment they possess (dial-up or broadband, for example) as well as their age, gender, education, profession, interests, etc. Primary audiences are people who need the information on the site and will visit often; secondary audiences are more casual surfers who might be attracted by what they see. What needs might your audience have for visiting the site, what expectations will they have for content, and how can your design and content help them to meet them?

c. Identify and target content
What is your site about, and how can you communicate that to your target audience as quickly as possible? How can you get the audience 'hooked' so that they want to delve deeper into your Web page?

d. How will the style of writing suit the content and your audience?
Your writing should be engaging, in keeping with the current culture of similar Web pages (usually, use short sentences), must support effective hyperlinking, must be consistent in tone, and must be error-free. The writing may become more complex as you move deeper into the site.

Response Chapter 6

2006-03-27T18:24:00.000-08:00

This was a very in depth chapter. However with the exception of a few of the specifics concerning the micro details of some of the companies, I found this chapter talked in circles. In several places throughout the chapter Wise talks about how the companies that own the technologies controls how advancements were determined by the availability of a company to make a profit from the advancement. From Microsoft controlling programs to BT in the UK not wanting to spend the money to replace copper cables with fiber so they could go digital Wise seems to forget that these are companies that are in business to make a profit. It appears that he is flooding the reader with details in hopes that they will not realize he is saying the same thing about each of the subsections in the chapter. Wise's discussions and points are lost in the overwhelming amount of details he presents. Overall it appears that wise does not like the deregulation of the 1980's judging by his final sentence in the conclusion. Deregulation might not have produced the breakup of the large controlling companies of the telecommunications industry but I believe that without the deregulation of the industries we would still be using land phones that were rented from the local phone companies and cable TV would be the only option with satellite TV being only a Hollywood prediction.

Class Notes 3/21/06

2006-03-21T15:38:00.000-08:00

Today we begin to transition into our term projects focusing on Web design and the development process.

Outline:
1. Announcements:??

2. Get up to speed on syllabus changes
March 23: HTML test
March 24: Hand-coded site due
March 28: project pitch and Web site review due
March 31-midterm grades given out

3. HTML Project in-class worktime

4. Overview of the Site Design Process and roles
handout on roles
design process
planning
proposal
alpha design
progress report
beta design
testing
debugging/finetuning
turn it in!

5. Handout assignment; get into groups, inventory skills and discuss possible projects

Game Over

2006-03-09T16:55:00.000-08:00

the film was very informative and had some good stats. one stat is that 90% of homes that have children, own a a video game system. that would transcend alot of gamers. i think that the use of video games also contributes to obesity. taken when this video was made the numbers in console ownership and industry revenue has increased dramamtically.

I agree with the concept of the stereotypes that may permeate into the users psyche. contiuous repetition and characterization of sexuality, race, and interpersonal relationships would surely sway one's thinking and perceptions in the real world.

Question: What was the reason in the increase of number of firers (15%) from WW1 and the number of firers (95%) in Vietman?

Movie Response

2006-03-09T16:52:00.000-08:00

This to me is an age old question concerning the effect that media has had on the actions of young people throughout history. I can remember when I was young not wanting to go see Bruce Lee movies because after the movie I would have to fight my way out of the theater past all of the new martial arts experts that the movie produced. What was touched on but not expanded on in this film was the lack of parental supervision associated with these games and other media outlets. As with the military when they expose young men and women to these games they have an authority figure teaching them the proper way the games should be used. I would like to know, when are parents going to take a proactive role in raising their children and stop blaming others because they were exposed to violence and do not know how to respect others in society? When are parents going to stop using media outlets as a substitute for a baby sitter?

game over response

2006-03-09T16:26:00.000-08:00

In an English class I took in 2003, we had to take a topic addressed within the documentary film by Micahel Moore, "Bowling for Columbine," in addition to several similar videos in different classes throughout the last four years. For the English paper, I chose violence in video games.

Overall, what I learned from research on the paper and the videos are that the problems are not something to blame entirely on kids. It is more towards the problem of the parents, and their misunderstanding or ignorance of the video game rating system, in effect on video games ever since the 1990s. Parents may purchase a video game for their kids without paying attention to the rating of the video game, sometimes as a present on their birthday, or for holidays. It seems parents do not supervise video games that their kids play; in turn, parents may not enforce letting their kids to know that what goes on in video games have consequences if you perform the actions in video to other people.

From the research I did for the "Bowling for Columbine" paper, I learned a fact about the two people who committed the crime, then killed themselves. In a video game (either Quake, or Doom) that allowed for people to create their own environments for playing in, the environment of the Columbine high school was created by the two students.

Last year, CSI: Miami had an episode where a murder occured on the stage where the motions of a skateboarder where being recorded for a video game; a method constantly used in video games. I don't remember how the episode ended, but they looked toward people working on the video game and the testers of the video game.

PlayStation's slogan for their advertisements of video games is, "Live in your world, Play in ours."

The media may have something to do with the violence within society. However, it is the parents who should be preventing their children from having the ability to see or use these products until they know the difference between reality and make believe worlds.

Oh... as a side note. This video seemed like it was made in 1999-2000 based on the facts they displayed. I found it very interesting to see what they called "real-life" views within the video games at the time, compared to video games that are available now, only six years later.

Zelasko Video Game Video Reaction

2006-03-09T16:13:00.000-08:00

This video was really interesting. I've never seen it before and it showed me different perspectives I've never even thought about or considered. One of the first quotes of the video was "Video games give you the skill and the will to kill". I believe this to be true, but only to a certain extent. Video games are so very interactive that you do not just play as a character, you actually become the character. It is no doubt that video games are violent, more disturbing is the fact that violence is pushed and rewarded very heavily. The main idea of most video games are to kill the most amount of people, and if you do so you will move up levels or get better weapons to use in your killing spree.
A professor in the video said that video games make violence seem normal, and that is a scary thought. It makes you think about how many angry teenagers are walking around with this violent mind state every day.
However, with all the information given in this video, I still must disagree. I believe that many people know when to draw the line between video games and reality. A young male is not going to go out and shoot their friend because they killed a villan in a video game. Or will they?

Andy's thoughts on video games.

2006-03-09T16:12:00.000-08:00

Maybe I'm bias, o well. I like video games. Maybe it is too bad that most of the games are violent. However, life is violent. Even though I understand the opinions of the people who were interviewed, I don't want to listen to them and take what they are saying seriously. My bet is that most of those people don't play video games. Violent or not, video games introduce the idea of the user leaving the current world and entering into a false world.

I don't like to hear some guy saying that violent games are wrong. One guy said that each level you get a report of what you have done, people you have killed and other achievements. And for those achievements you get secrets or new levels and jazz like that. Well..., what else are you going to do. If you are going o create a video game, and make a stylized video game, violent or Mario or Sims, you need to have advancing levels and why wouldn't you want to make the best game you can? Answer that.

People try to link violent games to actual killing. I understand that there are games that are out now that are exact simulations, those just aid in the training of killing. But on the other hand, there is a level of maturity that is needed to play these violent games. These games have a rating system, however the rating system is just as effective as the mpaa's rating system.

If your in the industry, why wouldn't you want to use what sells. Maybe it is unethical, but I works bottom line.

Response to ch 5

2006-03-06T06:33:00.000-08:00

I can truly say that if the concepts and effects of the political and economical wrangling of control over media regulations or deregulations confused you then this chapter will completely befuddle you. This chapter bounces back and forth so much between the beginning of the media age and Al Gore’s role in inventing the internet, that you can only sit and scratch your head after reading this chapter and wonder what it just said. So many facts and figures are thrown at you in each paragraph that they become blurred to the point of incoherence. If the intent of the author was to prove how confusing the entire situation is, then he succeeded. It appears that he dislikes the monopoly that exists from this type of service. What I did not find in this article was a solution to the situation. He does not seem to want regulations controlling the infrastructure but he does not offer any solution I could find to how the resources should be fairly and equitably distributed throughout the industry. He talks about how government’s deregulation helped break up the monopolies but he has not addressed that the break-up is systematically reemerging by the collapse of the smaller entities being unable to survive in an open market. I would have been interested in knowing what his solution to the situation is.

Project 1: Personal Portfolio Website

2006-03-02T18:12:00.000-08:00

Create a simple Web site to display all your creative work up to date in this class. Pay close attention to layout and design, opting for clean and consistent design and clear navigation. You may wish to use Photoshop to create a logo for yourself to display on all pages, and you may wish to write text to describe the individual exercises.

The site MUST be hand-coded and consist of at least four pages (a home page, one page for exercises 1-3 and one each for exercises 4 and 5). The only exception to the hand-coding is that you can use Flash publish settings to generate an HTML page containing your Flash movie; however, you should modify the HTML by hand in order to make the page visually similar to the rest of your site. You will also need to resample and optimize exercises 1-3 for the Web before you put them in your site.

To turn in this project, you will take the site live on your personal server space no later than 5 pm on March 24. We will not have an in-class critique of this project, but it will be included in your cumulative midterm grade, which will be given to you by March 31 and will reflect all work completed to this point in the class. Please come to my office hours or make an appointment if you are having difficulties with HTML following the demo.

Class Notes: 3/2/06

2006-03-02T18:08:00.000-08:00

1. Announcements
2. Hand back tests--commonly made errors
3. HTML demo based on the handout--see website "links" page for a .doc version of the handout.
4. Hand out hand-coding assignment--Due March 24

Johnson Chater 5

2006-03-02T15:17:00.000-08:00

In response to reading chapter five, I would have to say that the entire regulating of the telecommunications services was a good idea. However, I also agree that the telecommunication services should only regulated to a certain extinct. When I started reading about why the whole regulation thing came about in the first place, I though about some of the telecommunication services that are offered down here. For example. For a long time ( and even now) Mediacom is the only cable company in Southern Illinois. Yeah of course there are satellite companies that are offering cable but it's not the same because those are dish networks. So with mediacom being the only cable provider down here, they can pretty much monopolized the Southern Illinois area. The same concept goes for Verizon. Before Mediacom came out with the offer of phone services, Verizon was the only phone provider and I know from experience that their prices were ridiculous but people were paying those outrageous prices because they wanted or needed a home phone. These are only a few of the reason why the telecommunication industry to a certain point. They don't have to regulated where local cable companies can't import cable transmissions from other areas but they should regulated on how much they charge their customers and the services they provide for them. So I would have to say that the regulation of telecommunication was a very good idea implemented but it just needs to be twicked to make a benefit for both the company and the customers.

Zelasko Reading Response Chapter 5

2006-03-02T12:30:00.000-08:00

The idea of regulating media dates way back into the pre digital era. Something interesting that I read in this chapter was the fact that when the telephone was first introduced, there were independant and un connected telephone systems that worked on two different directory systems. That, of course, didn't last too long due to the heavy disadvantages, and monopolies began to grow in that area of the business.

I also learned that the original idea behind radio was for shipping and military communications. This of course offered safer seas but the issue arose that unregulated tranmissions would interfere with such communication. This ultimately led to the passing of the Radio Act, which requires operators to obtain a liscense and allocate frequencies.

During the first seven decades of the 20th century each area of communication channels went through regulation patterns. The idea I chose to write about today express the information that I didn't already know or have touched base on.

Reading Response 5 mcclure

2006-03-01T19:47:00.000-08:00

Concerning the reading on multimedia and the state, I was surprised to find out how many of our cable and telephone companies were established.
I wasn't sure, at first, why the regulations were needed. Reading on I began to understand that it had to do with the idea of demand for products and services. With very few cable and telephone companies and very little competition, there would be a problem with very high prices. The scarcity of these services and the high public demand meant that prices would soar.
Competition with these 'power house' companies was exactly what the public needed in order to get reasonable rates for these services.
The competition that Gore spoke of made a lot of sense. He stated that the two basic principles - the need for private investment and fair competition, were what was needed to complete the construction of the National Information infrastructure.

I also found the idea of cable deregulation very interesting. The co-axial cables and optical fibers that were incouraged were very important to the growth of communication. Cable systems are now able to deliver information, financial and other services to homes by high capacity data links.

When seperate companies began to merge their services, I think that this is when the public was really able to have efficient means of information technology and communication. With companies specializing in one or two areas and then merging with another company with different goals, the best service can be provided.

'from here onward, the public's interests must determine the public interest'. --Mark Fowler

Class Notes: 2/28/06

2006-02-28T18:13:00.000-08:00

We had an in-class critique of the animation projects today. If you'd like more feedback on your pieces before turning them in next week, please come to my office hours.

Also, we will be getting started on html in the next class period. You will then have several weeks, mostly out-of-class and over break, on which to work on the portfolio website. This is necessary in order to 'catch up' with the syllabus.

Class Notes: 2/21/06

2006-02-21T18:11:00.000-08:00

1) Announcements:
Jackie Spinner presentation, Wed. 7 pm, Ballroom D
"Listening Room," Wed. 7 pm, COMM 1032
Big Muddy Film Festival starts Friday at midnight with "Brazil"

2) Discussion of reading: Key concepts in "Evolution of Networked Multimedia"
Satellite/Digital Satellite (67, 76, 77)
Modem (67)
Packet Switching (73)
ARPANET/Internet (74)
Protocols--IP/FTP
World Wide Web--difference from the Internet
HTTP
Client-Server relationship

Does "media content has no necessary relationship to the particular media technology employed to transmit it"? (81)

Questions of out of dateness of the readings....

3) Flash demo, completed--see old notes.

Ensign CH4 Responce

2006-02-21T15:26:00.000-08:00

I am most intrigued by the authors discussion of Alexander Graham Bell. Bell did not call his invention the telephone, that was left to later users, he did however invent more than just the electric wire communication device. He also created a device that modulated light waves to transmit sound through light. An invention that was completely useless until fiber optics. *1 The invention that caught on was his electrical transmission of vocal or other sounds. *2 The author did fail to mention that Bell attempted to sell his patent rights to Western Union but instead formed his own company which still completely dominates all telephone communication.*2 Telephones lack the fidelity to transmit music well so it is interesting to learn that early phones were used in the same manner as radio waves would later dominate. The theatrophone in London and evening music in the US sent by phone lines is very similar to our use of the telephone infrastructure to download music and listen to live streaming radio. In an age where land line telephones are becoming obsolete It seems as if technology went a full circle from entertainment and back.

*1 Sterling Technicians Guide to Fiber Optics.
*2 Stanford H. Rowe II Telecommunications for Managers

Allen's Chapter 4 Response

2006-02-21T15:08:00.000-08:00

The introduction of telecommunication started so long ago, that multimedia was not even an idea of one person. Wired transmissions dating as far back as the 1780s, are the roots of everything we deal with today. Everything as far as communication goes, and that is a lot. The birth of the great inventions originate in Europe. So if anyone try to tell me that the U.S. Military started any of this stuff, I wouldn’t believe them. I find this to be funny, because I have never heard of more than half of the inventors and founders of this chapter, only the American ones. And early education tend to push those guys off as the originating figure. All of these technological advances originating outside of any military, or without the military funding, certainly disproves the notion that we as civilians would not have accomplished what we have in the field of technology.

When comes to discussing the internet, the key was not the military, it was “Switching” and packet switching.

-Allen Johnson

Kastler's thoughts about Chapter 4

2006-02-21T14:47:00.000-08:00

This chapter once again reinforces the history behind everything that we take for granted today.

In the beginning of the chapter, it didn't surprise me that it took a tragedy to advance the telephone industry. It seems that a disaster or tragedy must happen for our world to react. This theory works anywhere in between a small disaster to a large-scale disaster. In this example, a druggist was able to use a telephone to call for medical help. The publicity of this caused a sudden rise of telephone subscribers.

When I was growing up, I remember using my sister's computer. It's hard for me now to call her computer, a computer with my idea of what a current computer is. It never hit me during those years that while I was learning how to use the internet, it was brand new to everyone in the public.

Because this was another chapter discussing the history of improved technology, I began to think about what will be read about the technological advancements that happen during my life span. My children's children might be skimming over this information and concentration on those recent advancements. I have and do read about the technical aspects that make the internet work, and I am physically able to see how they work in front of my eyes. But when I think about the future, the internet might be a thing of the past. Moreover, some new invention will come along and put the internet as just another blessing that has been around forever.

Hudgens Reading Response 4

2006-02-21T14:18:00.000-08:00

This Chapter was interesting to me because it over the evolution of mass comunication,its change from telographs to the internet. Chapter 4 even whent over the creation of DST "digital Satalite Television. The most interestion thing of the chapter was the understanding of important abreviations such as AT&T, MODEM, MPEG, just to name a few. I also found a greater understanding of the material do to my electronic classes im taking know. The terms Frequency, Hertz, and diode all have a more solid meaning so when i read about them here it doesent seem somuch like a second language.

Chapter 4 on a whole was very informative about the evolution of Technology but this evolution is common knowledge to me and most likely the rest of the class .The only knew information was the more detailed dates and companys involved. The European Corperations and there advancments were benificial but really were not widly used in the US so they are not relavent.

chapter 4 response

2006-02-21T14:15:00.001-08:00

Sorry if I go a little more in depth or off on a tangent with this... This will possibly be the second or third class that I've read this content before, just in this semester, and the name for one of these classes is Modern Media Delivery-basically this one chapter stretched over the course of an entire semester in a book that goes even more in depth. Things will most likely come from that book, in addition to this book.

Due to my familiarity with this chapter because of the other classes, I am completely amazed about all of the technologies and developments that Wise either left out completely or touched on briefly, and possibly some incorrect facts- I understand that some of these are due to the fact that it is a six year old book.

In the introduction, Wise states that the computers' first generation of multimedia began in the 80s with CD-ROM disks. I disagree with this statement. I don't remember having any CD-ROM multimedia disks for our first computer, or even having a CD-ROM drive; I do remember having both 3 1/2 inch and 5 inch floppy disks though.

To show how out of date this is since it's been published, MPEG-1 compression is almost no longer used; MPEG-2 compression is very common, and is the method of transmission for satellites, and MPEG-4 compression beginning to unfold in some media outlets.

It also makes no mention of consumer wireless networks; with the introduction of high-speed internet access, wireless networks have become more common inside businesses and homes. Wireless networks include 11b, 54b, 54g, and a new transmission of 54n.

There is also no mention of digital television. An act signed by Congress in 1996 probably should have been enough of a reason to at least touch on the subject in the book.

If you look at it though, the book being outdated gives you a great picture of how things can change. In just six years, we've seen these changes, among several others. In another six years, there will be more advances in technology, and, hopefully, a new edition of this book by then.

chapter 4 response

2006-02-21T14:15:00.000-08:00

Response to Chapter 4

2006-02-21T13:29:00.000-08:00

I found this chapter very interesting. It is amazing when you think about it. Up until the 1800’s very little advancements took place in how information was transmitted and passed on from on place to another. Since the first telegraphs to today’s wireless communications we still use basically of the same technology to communicate through devices. The impulses or the waves that information is carried on have advanced beyond what inventers like Alexander Gram Bell could have imagined. I remember watching the first space flights to the moon and thinking about how advanced our technology was then. We could travel to the moon in only three days. I read a report last month that NASA launched a spacecraft to Pluto that would pass the moon about 9 hours after launch. We can guide a rocket hundreds of thousands of miles from earth to fly through a comet and return safely to land on the earth. Just think what we be able to do 50 years from now.

response to ch 4

2006-02-21T11:44:00.000-08:00

I think that it is fascinating how the evolution of network multimedia has evolved. Evolution itself is fascinating, but the human interest in technology and the desire to build upon ideas and principles is the acheivement of many problem-solvers and scientists to be duly noted. I feel that the desire is that of automation. Kind of like with the telegraph and now the fiber optic. The text states, "the earliest telegraph networks needed many operators and the system, particularly near urban centres, found it increasingly difficult to cope with the huge growth in traffic." After reading the text, it would seem that once a stage in development is reached, having it done more efficiently is then the goal i.e., transmission of information. Now the same priciple is applied in every facet of communication but with speeds and packets of information exponentially more than Samuel Morse possibly ever fathomed.

This principle seems to be the reoccuring theme throughout every development of multimedia. Cable t.v for instance started with twisted pairs of copper telephone wire, then to coaxial, and eventually to microwaves. The same principles can be found when regarding radio and television and the frequencies on which they carry their information and how much is carried.

I learned an interesting theory in my R/T class. In terms of digitization, the speed at which modems operate, will likely DOUBLE every 18-24 months. Sorry I can't quote verbatim because I sold my book back. Recently, our processors and harddrives are measured mostly in gigabytes. Look at how now we are entering into the nanobyte era, like in iPods, and probaly soon the terabyte era.

Additionally, I found it very surprising how much input other countries had in the development of modern technology. In other R/T text, not written by British scholars, there seem to be a great deal of credit left out to our foreign allies. I had no idea that Alexander Graham Bell was a Scottish immigrant.

McClure - reading response 4

2006-02-20T19:25:00.000-08:00

The evolution of multimedia communications and entertainment is very interesting. I was not aware of how many of today's technologies came about. Once many of these technologies were discovered it was not long before more advanced and more capable techniques developed. It is hard to imagine what is yet to come in this area. I am sure that we will continue to come up with faster, cheaper, and more safisticated ways for communication and entertainment. This business is one that will continue to prosper. It seems that once one obtains the latest technology, it is not long before something new comes along.

The cultural role of these technologies is also very important. Because of the newest development it is possible for us to communicate with other cultures simply by the click of a mouse or by simply picking up the telephone.

I also thought about how fast our lives move now that we have cell phones and computers. We can conduct our business while doing everyday activities. I am not sure if this is good or bad.

Obviously, technology is important to all of us. It is something that is so everyday and normal for us that we take it for granted. Just a couple of generations ago many of these things were not even thought of. What would our lives be like without them?

Zelasko Reading Response Chapter 4

2006-02-19T19:44:00.000-08:00

I find it very interesting how we've been able to come so far in the evolution of media. It makes one wonder if we'll ever be done evolving, and since the answer to that is probably no where in the future, it also makes you wonder what the future holds in store for us in means of new media and technology. Just about 15 years ago the first networks were established in their most basic state, today we have such advanced networks, unless you are super computer savvy you may have trouble understanding how to work such means.
I also found it interesting that in 1972 only 11% of homes had cable TV. Today 11% is probably the amount of TV's without cable. It also makes sense that the satellite was the most important development to cable TV because without satellite feed cable wouldn't be available.
Some of the benefits that have come out of the age of digisation is bandwidth capabilities and the process of compression. The greater the width of a bandwidth, the greater capacity of communication channels to carry information. And compression now allows us to reduce the number of bits that have to be transmitted to convey information which make file sizes smaller and the ability to download faster, all with the same information still included.
After reading this chapter it became clear that our technologies have come a far way since the telegraph way back in the early 19th century. Our technologies now have greater capacities and higher ranges for communication.

Reading Response 4_Sjohnson

2006-02-19T08:46:00.000-08:00

This chapter was very interesting in the aspect that it gave a detail outline of the development of multimedia. It describe the intvention of media devices that started out in analog form of communication and emegred into digital form of communication. It also explained and displayed how the medias advanced from wire use to wireless use. After reading the entire chapter the once aspect of the topic that stood out to me the most that I can honestly say that I didn't know (aside from the other things that I learned) was the face that telephone was first being used by people for entertainment purposes. That was interesting because to think that the idea of the radio spiraled from the telephone is interesting. But I guess the one thing that made it the experience different from listening to entertainment on the telephone from listening to it on the radio was the idea that the telephone had to use wires to transmitt the entertainment and the early radio was being used by wireless transmission. Which in my opinion I would have to say that the invention of the radio was the beginning of the wireless use of cell phones, labptops, and other high tech mediums that we use today.

Exercise 5: Flash Animation

2006-02-18T17:40:00.000-08:00

Create a Flash animation in which you animate your name. The animation should be in two parts that will no doubt interweave somewhat:
1) the creation and animation of an interesting semi- or abstract composition out of organic (non-geometric) shapes and lines.
2) the introduction and animation of your name into this composition. The composition may need to adjust to accomodate your name.

Keep in mind the quality/sensitivity of your flowing lines and shapes. Play with tension and activity in your composition between negative and positive spaces. Consider using reversible or ambiguous figure-ground relationships in your animation.

Your palette on this project is not restricted (except to the 216 Web-safe colors); however, you are encouraged to restrict your palette for control and expression. Review the color principles on pages 65-68 of the Elements of Graphic Design for guidance. A good strategy might be to start out with a black, white, and gray composition and then change one or two elements to color.

On the technical end of things, your composition should be 900 x 500 horizontal. You must use multiple layers, shape and/or motion tweening, and export your project as html with an embedded .swf file. Please turn in the html and swf files and as well as the original Flash project in a folder marked with your name on the class server share.

Due: February 28 for in-class critique (same day as the GIF)

Class Notes: 2/16/06

2006-02-18T13:22:00.000-08:00

Today:
Shape Tweening
Symbols and Instances
Motion Tweening
Working with Bitmaps (Raster) Graphics
Publishing and Exporting

NOTE: WE DID NOT COMPLETE ALL OF THIS DEMONSTRATION/PRACTICE WORK IN CLASS TODAY. WE WILL THEREFORE COMPLETE IT ON TUESDAY, MOVING BACK THE QUIZ AND THE DUE DATE FOR THE PROJECT BY 1 CLASS SESSION ACCORDINGLY

I Shape Tweening
Tweening (a term you should remember from creating animated gifs in Photoshop) is a method for automatically generating the animation transition between a beginning state and an ending state. Shape tweening is therefore a method to automate the way one shape morphs into another. The beginning and end states are shapes placed in keyframes on a single layer, and the tween in applied by clicking on any frame between the two keyframes and selecting “shape tween” in the Property Inspector.

You can tell that a shape tween has been applied to frames because the frames will turn green and display a solid arrow between the two keyframes. Tweens that are broken (that is, not working for some reason) are displayed as dashed lines. For shape tweening to be successful, both objects must be a single, vector-based shape and must be in the same layer. Bitmap/Raster images, symbols (described below), and grouped shapes cannot be shape tweened. Shape tweening can also control the color, position, transformation, and gradient of a shape object.

In Flash, text characters are not considered shapes automatically and they must be converted to shapes in order to be shape-tweened. This process is called breaking apart the text. Using the Arrow tool, select the text box you’d like to tween and go to “Modify>Break Apart” (Apple+B). The shape tween can now be applied to any of the intermediate frames.

While the automated transition can save a lot of time and often looks pretty good, there are many times when you may wish to better control the animation. This is accomplished by shape hinting, which allows you to place markers to indicate how you want a particular area of the shape to move during the animation. To place a shape hint, use the Arrow tool to select the object being tweened as it appears in the first keyframe. Go to “Modify>Shape>Add Shape Hint”. A red circle with the letter “a” (or “b” or “c” depending on how many hints you have already made—you can set up to 26 hints!) will appear at the center of the shape. Drag the circle to an edge of your shape. This indicates to Flash that you will be specifying where you want this part of the shape to appear at the end of the animation. Select the object in the final keyframe of the tween. You’ll see another red circle there, and you should drag it to an edge where you want the area specified in the original shape to end up. The hint circle will turn green in the final keyframe and yellow in the first keyframe when Flash accepts the hint. Preview your animation to see how this has changed the way the shape tweens. Slight modifications in the placement of hints can have dramatic impact over the animation, and it is important to use them as efficiently as possible, as they also can slow down the animation for your viewer. To remove a hint, click on it while holding the Control key; this will also allow you to quickly remove all hints if necessary.

Shape tweening can also be used to animate changes in a gradient over time. This can be accomplished by changing the settings of the lightest part of a gradient from one keyframe to another and applying a shape tween. This feature can be used to produce glowing effect.

Shape tweening will only affect the contents of one layer. To create complex animations in which different shapes are animated independently of one another, it is necessary to use multiple layers. This can be easily accomplished by drawing the final state of the animation on one layer, selecting it in the timeline, and going to “Modify>Distribute To Layers” (Shift+Apple+D). This will move each shape to it’s own layer. To animate the new shapes, create new keyframes in all layers by dragging the mouse over all layers in an empty frame and choosing “Insert>Timeline>Keyframe.” After you have modified the layers individually in the animation’s first frame, you can create tweens on all layers at once by dragging the mouse over all layers in an intermediate frame and choosing “Shape Tween” from the Property Inspector.

As your animations become more complex, it is important to keep them organized. You can do this by creating special layers called layer folders that will group related layers and allow you to expand or collapse their view in the timeline. You can either create a new layer folder by clicking on the folder icon at the bottom of the Layers Panel or you can convert an empty layer into a layer folder by double-clicking it and changing its layer properties to “Folder.” The other layer properties (Guide, Guided, Mask and Masked) will be discussed under Motion Tweening below.

II Symbols and Instances
As your Flash animations grow more complex, you need to manage your elements in order to improve your workflow and to keep the file sizes small. Symbols are reusable objects that, once made, can be infinitely reused in your animations and manipulated by varying the attributes. An instance refers to each time an individual symbol is used in an animation. Because you only need to make the symbol once, it speeds your working process, and it helps your users download your movie faster because they only have to download one element that repeats rather than many unique objects. There are three types of symbols: graphics, buttons, and movie clips. In this introduction to Flash, we’ll only discuss graphic symbols.

As you build your Flash animation, you will use multiple symbols and other assets (such as sound files and pictures). The library is the place to organize your assets and can be opened using “Window>Library” or the keystroke “Apple+L.” The library also allows you to create new symbols and group related symbols in folders. When working with symbols, it is essential to keep the library palette open.

There are two primary ways to create a new symbol: using artwork you have already created or creating artwork within a symbol directly. To convert an existing shape into a symbol, go to “Modify>Convert to Symbol” or drag the shape to the library. To create a new symbol in which to draw new artwork, go to “Insert>New Symbol,” click the plus icon at the bottom of the library palette, or select “New Symbol” from the library’s drop-down menu. Any of these actions opens a new stage on which you can draw the artwork without placing it on the animation stage.

IMPORTANT NOTE: When creating symbols, it is extremely important that you name them properly. DO NOT include spaces, periods, or special characters (such as &, %, /, etc.) in the name. The symbol name should start with a lower-case letter, spaces should be replaced with an underscore (_) or words combined into one word. The reason for these stipulations is that certain characters and cases have particular meanings in ActionScript and can confuse Flash if not used appropriately.

Once you have created a symbol, drag it from the library to the stage to create an instance. Symbols and instances have a parent-child relationship, which means that edits made to symbols (the ‘parent’) control the appearance of all instances (the ‘children’) while edits made to an instance only affects that individual instance and any instances cloned from that instance (“Option+Drag”). To edit the symbol, double click on any instance or on the symbol icon in the library. This opens a symbol window, where you can add shapes to the symbol, change colors, etc. using the drawing tools. To edit an instance, use the Transform tool and the color controls in the Property Inspector. Brightness allows you to affect the brightness of the instance, from completely black (-100%) to completely white (+100%); tint allows you to select a color (from swatches or using RGB percentages) and brightness value for the instance; alpha allows you to select the transparency of the instance from invisible (0%) to opaque (100%); advanced allows you to set both the tint and the transparency of the instance using sliders.

Graphic symbols can be simple images or they can be animations. When you create a new symbol, you also create an independent timeline for that symbol which can be manipulated and animated independently of the contents in the main timeline. By double-clicking on the symbol in the library, you open the symbol timeline in which all kinds of animations (tweened and frame-by-frame) can be produced. To play this animation in the main timeline, the symbol must be placed on the stage and sufficient frames added to the main timeline to give the animation time to play through.

Instances of animated graphic symbols can be edited for color and free transformed like static graphic symbols, but they also can be edited to change the way they loop (or repeat). In the Property Inspector, you can select the frame of the symbol at which that instance begins its loop, thereby throwing off the synchronicity of the instances of the symbol and allowing for more complex-looking animations without having to draw multiple animations.

III Motion Tweening
While shape tweening only works on shapes and text that has been broken apart, motion tweening will only work on grouped shapes, symbols, and blocks of text. Like shape tweening, you set the beginning and end states of the animation using keyframes. Then, using the Property Inspector, select “motion tween” while any intermediate frame is selected.

Motion tweening affects symbol instances and grouped objects differently. Grouped objects can only be tweened to affect their positioning and transformation characteristics (such as size, rotation, and skew). Symbol instances have much more flexibility because their color properties can also be edited using the Property Inspector. Motion tweening can therefore also edit color and transparency effects of symbol instances, and the Property Inspector allows you to set other parameters, such as rotation during the motion tween (CW=clockwise; CCW=counterclockwise) and easing, which allows the speed of the tween to appear to accelerate or decelerate during the transition (easing is possible with shape tweening, as well). Because symbol instances are more flexible and have added benefits (such as decreased download speeds), I usually convert most shapes to symbols rather than grouping them in preparation for motion tweening. Motion tweening cannot affect shapes, broken-apart text, or multiple items on the same layer.

For creating more complex motion effects, you may need a motion guide. A motion guide is a special kind of layer that allows you to draw a path along which to move a symbol instance, rather than moving on a straight line. You can create a motion guide layer by selecting a layer containing a motion tween and clicking the motion guide icon in the layers palette. A new layer is created above the motion tween layer, which is indented to indicate that it is being controlled by the motion guide layer above. Draw a path with the pencil tool (set to smoothing mode) and move the instance in the first keyframe to the beginning of the path and in the last keyframe to the end of the path. The object should now move along the path.

You may find at times that you need to edit your whole animation. Rather than moving the contents of individual keyframes, you can move the whole animation by selecting the edit multiple frames button located in the status bar of the timeline. This feature will highlight an editable number of frames. By sliding the selector to include both the beginning end ending keyframes of the animation and selecting the layer in which that animation appears, it is possible to relocate the entire animation from one place to another without having to move the individual symbol instances.

IV Working with Bitmaps (Raster) Graphics
While Flash is known as a vector-graphic animation program, it also supports raster graphics (referred to in Flash as bitmaps). While bitmaps can dramatically increase the file size of a Flash movie, they are necessary to product photo-realistic effects. Flash supports all the most common bitmap graphic formats. Bitmaps must be imported into Flash (“Apple+R” to place the imported graphic on the stage or “File>Import to Library”) and are automatically placed in the library. Like in Photoshop, it is necessary to set the compression settings for raster graphics for the Web. Double-click the image in the library and select either “Lossless” or “Photo (JPEG)” compression. The results of the compression setting can be previewed using the “Test” button, which will display an estimated file size and visual for the compression selected. By editing the bitmap settings here, the optimized compression selected will override Flash’s default compression settings when you export the animation.

Once imported, bitmaps can be transformed, motion tweened, or converted to symbols and tweened as instances. Bitmaps can also be converted into complex vector graphics using the “Modify>Bitmap>Trace Bitmap” command. To preserve photographic detail, lower the values in the Color Threshold and Minimum Area and set Curve Fit to “very tight” and Corner Threshold to “many corners.” Remember that the more detail the vector graphic retains, the higher the resulting file size will be. Once the bitmap has been converted to a vector graphic, the resultant shapes can be edited or animated, the entire graphic converted to a symbol, etc.

Bitmaps can also be edited inside Flash if they are converted to shapes. This is accomplished like it is with text, using the “Modify>Break Apart” command. Then, by using a drawing tool like the pencil to cut into the resultant shape, you can delete selected parts of the image. Bitmaps and vector graphics can be combined to produce interesting effects.

Bitmaps are often used in masks. While masking layers work well with vector graphics as well, they produce especially interesting ‘window’ effects with bitmaps. To mask one layer with another, convert the first layer into a Masking Layer by double clicking on its icon and selecting “Mask” for the layer type. This layer will now hide all parts of the masked layer except that which is directly beneath any graphic symbol placed in the masking layer. Place the layer to be masked beneath the masking layer and double click on its icon to select “Masked Layer” from the layer type dialog box. Lock both layers to preview the result. Objects in masking layers can also be animated, revealing a different part of the masked layer as they move across the screen.

V Publishing and Exporting
Flash is used to produce content for various destinations, including the Web, CD-ROMs, various still images, and Quicktime movies. A run-down of the settings for each of these destinations can be found under “File>Publish Settings.” If a setting is checked, a tab for editing the default settings is created. You have the following basic options:
Flash (.swf) is the completed movie file that must be published for viewing on the Web using the flash player. However, this format must be embedded in an html document to be viewable on a Web site.
HTML (.html) will generate a simple html document with the flash movie (.swf) file properly embedded inside it to play on the Web.
GIF, JPEG, PNG are used to publish still images or animated GIFs from your Flash animation. These are rarely used in favor of the simpler “File>Export Image” command.
Projector files (Windows and Macintosh) are used to produce CD-ROMS compatible with either (but not both) of the two major operating systems. CD-ROMS are an older delivery format that is being overtaken by improved network speeds and greater connectivity.
Quicktime will output an interactive Quicktime movie. This is an advanced option that we will not cover, as we are not learning ActionScripting in this introductory unit.

Under the “Flash” settings tab, you can edit the compatibility of the .swf movie for older versions of the Flash player, specify the order in which you’d like your layers to load (not important unless there is ActionScripting in your movie), set default compression settings for sound and images, automatically debug your movie, and generate a report on the size of the completed movie. Under the “HTML” settings tab, you can set various parameters for how HTML page will be configured. If you think your users may not have the latest version of Flash installed, it may be helpful to choose select Flash https, which will insert some html text to redirect visitors to another page if they do not have the proper version of the player installed. The other settings select display parameters for the browser window and the quality and position of the flash movie in the html page.

It is important to generate an HTML page for your Flash movie if it will be viewed on the Web. If you do not, the flash player may not load properly, the alignment in the browser window may be off, and other problems in playback may emerge. Always view your movie in a number of browsers, on both Windows and Mac machines, and on a variety of connection speeds to optimize your settings.

Class Notes: 2/14/06

2006-02-15T12:52:00.000-08:00

OUTLINE:
1)Syllabus changes
a.Flash this week, readings due the 21st
b.Class starts at 6:30 PM on Thursday
2) Introduction to Flash

I Introduction to Flash
Macromedia Flash is a professional interactive content development tool that offers a high degree of flexibility for creating many types of audio-visual content, from animated movies to entire Web sites. The benefits of using Flash include:

• Fast download speeds due to smaller file sizes, even for embedded video
• Greater design control than with html
• Embedded and integrated multimedia content, including sound and animation
• Combining vector and raster graphics
• Scalable animation

The major downside for Flash content is that it requires a third-party plug-in player to be viewed by the user. Browsers alone cannot view content created in Flash. However, every computer shipped with an OS of Windows 98 or Mac OS 8 or newer has come with a pre-installed Flash player, so this problem it less significant now than it once was. In addition, it is possible to design a site to detect the presence of the Flash plug-in or allow visitors to go to an html-only version of the site.

Flash outputs to many file types. The most commonly seen file types associated with Flash are:
• Project files (.fla) contain the saved workspace and media files for your project. These can be edited in Flash, but they must be exported to be viewed by a user.
• Movie files (.swf) are the presentation files that can be embedded in a Web page for publication. These files are usually not editable.
• Projector files (.exe or .hqx) are stand-alone files that can play on any computer, with or without the Flash player. There were used to create CD-ROMs, but as that technology has become outdated are used more infrequently.

Flash uses a proprietary scripting language called ActionScript that is similar to JavaScript. If you know JavaScript, learning ActionScript will be very easy. However, ActionScript is processed entirely inside the Flash player, rather than by the browser, which results in more consistency across browsers.

II The Interface
The Document Window is divided into six main areas:
• The Timeline is where you control the visual elements of your project.
• The Stage is where your animations and images appear. It represents what is visible in your project at a given time.
• The Work Area is the gray area around the Stage. It contains elements you have added to the project but which are offstage or out of view at the particular time.
• The Toolbox contains tools for creating and editing artwork. Many of the tools are the same as Photoshop’s vector drawing tools.
• The Information Bar tells you information about your current location within your project.
• Panels, like Photoshop’s palettes, allow you to quickly access the most important functional elements of Flash. The most useful Panel is the Property Inspector, which is a context-sensitive interface to edit your current location or selection within the project.

The Timeline is the central control for your composition over time. It uses Frames, which control changes in the state of elements over time, and Layers, which control the position of elements.

The Layers control window allows you to add, select, lock, organize and display your layers.

The Status Bar, at the bottom of the timeline, gives you information about the current frame, the frames per second, and controls some animation basics.

The Frame View allows you to control how large the frames and timeline appears for greater control.

Technically, everything that isn’t the Stage is a Panel. Other than the Timeline and Layers panels described above, the major panels are:
• Property Inspector: a context-sensitive panel that will display editable attributes of the current selection
• Align: allows you to change horizontal and vertical alignment, distribution, size, and space of selected objects
• Color Mixer: allows you to mix colors in several different color spaces
• Color Swatches: displays the 216 Web-safe colors
• Info: displays exact information about he size, position, and color of your current selection
• Scene: Displays a list of all the scenes in your project; also allows you to create new scenes or jump to a specific scene
• Transform: Gives access to transform commands and allows you to create copies of a transformed object
• Actions: Permits you to add or modify “actions” for a particular movie frame, a button, or an object. This panel controls your project’s interactivity and is very important.
• Reference: Provides detailed information about ActionScripting; useful for learning the language.
• Output/Debugger: these two panels help in troubleshooting problems with your movie
• Answers: provides assistance for learning Flash

III Drawing Tools
Flash builds vector graphics using Lines, Strokes, and Fills. Flash refers to any selected stroke, line, or fill as a Shape in the Property Inspector.

Drawing and Modifying Lines, Strokes, and Fills
Lines are created with the Pencil, Pen, and Line tools.

Strokes are the outlines that are created with the Oval and Rectangle tools.

Lines and Strokes are independent of the shape or color inside them, and they can be modified with the Ink Bottle, the Color and Tool modifiers in the Toolbox, the Color Mixer panel or the Stroke Color command in the Property Inspector panel.

The Line tool draws straight lines in the color selected as the stroke color. Holding down the Shift key produces perfectly vertical, horizontal, or 45 degree lines.

The Pencil tool draws a solid line in the designated stoke color whenever the mouse is clicked and dragged. It has three modes that can be selected under the Option icon in the toolbox. Straighten produces a perfect line, smooth reduces the irregularity of the line while leaving it asymmetrical, and Ink retains a rough, hand-drawn quality.

Fills are created using the Brush, Paint Bucket, Rectangle, and Oval tools and are independent of the line or stroke around them. They can be modified using the Paint Bucket, the Color and Tool Modifiers, the Color Mixer, or the Property Inspector.

The Rectangle and Oval tools draw—surprise—rectangles and ovals in the selected fill and stroke colors. Holding down the Shift key produces squares and circles, which clicking on the Options icon in the Toolbox when the Rectangle tool is selected allows you to select a radius for curved corners.

The Paintbrush tool will paint shapes in the selected fill color. Use the Options icons to choose the brush size (middle button), shape (bottom button) and the painting mode (top button). The Normal mode paints wherever you click and drag; the Paint Fills mode will only paint over fills while leaving strokes untouched; the Paint Behind mode will paint behind, rather than over, existing shapes; the Paint Selection can be used in conjunction with the Arrow tool to paint over a selected shape; and the Paint Inside mode will only paint inside the first shape clicked on. Note that the Paintbrush generated only FILLS without strokes. To add a stroke to a fill that you created with the Paintbrush, click on the shape with the Ink Bottle tool.

The Pen tool produces both lines and fills. As in Photoshop, it takes some practice to master, but it is the only tool that allows you to create complex shapes with curves and handles. It will produce shapes filled with the designated fill color when closed or lines with of the default color if left unclosed. These shapes can be edited by hovering the Arrow tool over the edge of the shape until the curve icon appears, then by dragging the shape to the desired form. More precise adjustments can be created with the Subselection tool, which allows anchor points and curve handles to be individually edited. The Pen tool can also be used to add or subtract anchor points to a shape, and the “+” or “–“ symbol will appear next to the Tool icon when it is poised to edit a path.

To modify either the stroke or fill of a shape you have created, click on it with the Arrow tool. Note that Flash breaks straight lines into multiple component parts so that using the Arrow tool only selects a segment of the line. Double-clicking will select the entire line. You can modify the stroke color or style or fill color in the Property Inspector. The Ink Bottle will either create a stroke around an unstroked fill or modify the stroke color or style, while the Paint Bucket tool will create or modify fills. Both these tools use the style and color currently selected for the tool, which can be viewed and changed in either the Property Inspector or the Color Mixer palette.

To create a gradient or a photographic (bitmap) fill, select the Paintbucket tool. In the color mixer window, select “Linear” or “Radial” (for a gradient) or “Bitmap” for a photograph and click on the fill you’d like to edit. To change the default color for a gradient, click on the color swatch in the mixer menu to select a new color to combine with black. Where you click on the fill will become the center of the gradient fill. To adjust the range of values, move the sliders in the Color Mixer palette.

Working with Multiple Objects
As you have seen, Flash breaks lines and strokes into subsections. In addition, Flash also combines various overlapping fills into one object and recombines overlapping strokes and lines. Therefore, when you want to rearrange overlapping shapes, Flash can behave somewhat unexpectedly—at least until you figure out what is happening.
• Overlapping fills are combined into one fill. Therefore moving one fill of the same color into another will fuse the fills into one and moving a smaller overlapped fill from the larger fill will result in a hole in the larger fill.

• Overlapping strokes or lines create a new line segment at the point of intersection; therefore, selecting the stroke or line by clicking on it will select a smaller portion of the line.

In order to protect objects from combining with other objects in these ways, it is necessary to group them. Select one or more objects: click or, for multiple segments or objects, shift-click. Then, go to “Modify>Group.” This will allow you to rearrange the objects without their fusing to other fills or lines. You can also use the Arrow tool to draw a rectangle around several objects in order to group them using the keystroke (Apple+G). They will keep their same position in relation to one another but can be moved as a unit in relation to other objects on the stage.

IV Animation Basics
The Timeline is the key area of the workspace for producing successful animations. The major parts of the timeline are:
• Layers allow you to organize and arrange elements of your animation from front to back, allowing them to overlap. As in Photoshop, you can use Layers to make changes in elements independently of the overall composition.
• Frames are the building blocks of your timeline: little pictures that show what the animation is doing at a particular moment in time. There are three types of Frames in Flash: Frames (which must be created by pressing F5 or choosing “Insert>Frame”), Keyframes, and Blank Keyframes, described below.
• Frame Rate is the number of distinct ‘frames’ that play per second of your animation. A lower frame rate means each frame is displayed for longer, while a higher frame rate means that each frame is shown for less time and generally results in a smoother animation. Twelve frames per second (or 12 fps) is a default for fluid animation. 25 fps is the maximum frame rate you can reliably expect your viewer’s browser to support. For point of reference, the digital video frame rate is 29.97, while high definition video can be as much as 60! Double-clicking on the frame rate at the base of the Timeline allows quick access to the Document Properties dialogue box.
• Elapsed Time displays the time that the animation has been playing from the first frame to the currently selected frame. The elapsed time is inversely related to frame rate, with a higher frame rate creating shorter animations for an equivalent number of frames.
• Keyframes have been used in animation for almost 100 years. They are simply frames in which some important change or action occurs. Every subsequent frame is filled with the same content as the keyframe unless another keyframe (or a blank keyframe, waiting to be filled with content) is inserted in the timeline. Then a change can occur. A keyframe is displayed as a frame with a solid black circle in it; a blank keyframe has an outlined circle in it.
• The Playhead indicates which Frame is currently being displayed in the Stage area. You can drag the Playhead across the Timeline to preview the animation.

Document Properties is the default content of the Property Inspector panel when you first launch Flash. This menu allows you to change the settings of your entire project, such as the size of your Flash animation (in pixels, inches, centimeters, etc—it’s best to use pixels), the Frame Rate, and the Publish Setting you’ll use when you export your movie. You can also easily set your new settings as default in this panel.

Frame by Frame Animation Using Keyframes

In frame by frame animation, you simply draw the desired content in successive keyframes. By pressing “F6” (or “Insert>Keyframe”) all the content from the last frame is automatically copied into the new frame, while anything that you draw in the new frame appears only when that frame on the timeline has been reached. You can preview your animation by hitting “Enter/Return.”

The Transform tool is very useful in frame by frame animations because it allows you to change the shape, size, rotation, skew, proportion, and direction of a drawn shape. Combined with keyframes, this can help you to make significant changes in shapes over time.

For more complex frame-by frame animations involving transformations, it is often useful to Onion Skin. Onion skinning is another term (like keyframe) borrowed from traditional animation. It refers to the old technique of creating the new drawn frame on a semi-transparent sheet so that the old frame could be used for reference. On the bottom row of the Timeline are a number of Onion Skin options: Onion Skin (which shows the entire object being animated as a translucent form); Onion Skin Outlines (which only displays the outlines of objects); Edit Multiple Frames (which displays objects’ states for multiple frames simultaneously and allows you to select the object as it appears in several frames for group editing); and a final command that allows you to select the number of frames being hinted by the Onion Skinning mode.

Keyframes are useful for creating changes at certain moments of time in your animation, but one keyframe right after another means that the animation runs very fast. While reducing the frame rate will slow down the animation, it will slow down all parts of the project equally. If you want to slow down one part of the animation without affecting the other, it is necessary to insert frames by clicking “F5” or “Insert>Frames.” Conversely, to shorten your animation, choose “Remove Frames.” Keep in mind that this may substantially alter your animation if you remove a keyframe. To select multiple frames, use “Apple+Drag+Click.”

Note that in multi-layer animations, adding frames only adds length to the selected layer. This will cause elements from the other layers to “disappear” when that layer runs out of frames in the timeline. To solve this problem, click “F5” when selecting the last frame of the animation in the remainder of your layers.

To save time in working on long animations, it is possible to cut or copy frames themselves, rather than just their contents. To do this, select multiple frames by dragging and clicking, then drag the frames into their new location, pressing the Option key to copy them or simply releasing the mouse to cut and paste. To reverse one’s animation, go to “Modify>Frames>Reverse.”

IV Viewing Your Animation and Previewing Your Movie
To preview your animation in the timeline, simply hit the “Enter/Return” key. To preview your animation as a loop, select “Loop Playback” under the “Control” drop-down menu. This is a great way to test your animation and frame rate on the fly, but as you animations become more complicated, it will become necessary to test them using a different method.

When you are finished with your animation, you will export it into the swf file that will be viewed by your audience. In order to get a sense of what that swf file will look like, it is necessary to go to “Control>Test Movie.” This generates a Flash Player window that shows the animation at 100% of its real size, rather than whatever your magnification settings for your stage were when previewing your animation in Flash. The animation defaults to looping (which can be changed using ActionScripting—we’ll go over how to do this in a later lesson). You can drag the Flash Player window to resize it; depending on your project settings your movie may or may not scale. You can also open the Controller to stop, start, fast-forward, or rewind your animation.

These days, Flash animations are almost always exported for use on the Web. This means that Flash will generate a simple HTML file containing the embedded Flash movie. To preview what your animation will look like in a browser, go to “File>Publish Preview>HTML.” This will open your default browser to play the animation.

Exercise 4: Animated GIF

2006-02-10T14:17:00.000-08:00

Create an abstract animated GIF using only the basic shapes of a circle, square, rectangle, and triangle. You may use each shape as many times as you wish and may change the size of the shape, but you may not use any hand-drawn shapes. In addition, you may only use black, white, middle gray and one Web-safe color of your choice.

Your objective is to design and a good composition. Keep in mind issues of negative space, scale, balance, overlapping, and color choice in creating your composition.

Your animated GIF will be 400 x 300 pixels and a minimum of 7 frames long, unlooping. Due February 23 for in-class critique.

Class Notes: 2/9/06

2006-02-10T14:11:00.000-08:00

Outline
1) Discussion of readings
2) Exporting graphics for the Web
3) Creating Animated GIFS
4) Recommended lecture: Zig Jackson, 7 pm Lawson 101

Web Graphics Formats
While text still drives Web content delivery and animation/video may seem more exciting, still images often make the difference between an inviting, well-designed site and a sterile or ugly one. In producing images for the Web, the major trade-off is between aesthetics—maintaining the highest level of clarity and fidelity—and utility—ensuring the shortest download time. In addition, artists have no control over the network connect speed, or monitor resolution or color space used to view their images

Web Optimization is the process of juggling the trade-offs and lack of control involved in exporting images for distribution over the Web. It involves balancing three variables: bit depth, color depth, and compression of an image. Bit depth refers to the number of bits of data devoted to describing each pixel in an image. A one-bit format (Photoshop’s Bitmap) devotes one-bit of data to each pixel. Because each bit has two states (either “on” or “off”) a one-bit format can produce an image made of pixels of two possible colors, that is, either black or white. An 8-bit format (like GIF) can describe each pixel using eight bits of data, with each bit having two states. Each pixel, then, can have 2x2x2x2x2x2x2x2 (28 or 256) possible colors. The bit depth therefore controls the range of colors, or color depth, of an image. Compression refers to the methods various formats use to reduce “unessential” data from an image and therefore limit its file size. Compression methods are either lossless, meaning that the file structure is changed without eliminating data, or lossy, meaning that perceptual algorithms are used to eliminate the least visually important information in the image.

Currently, most browsers will appropriately display the following still graphics formats:
-Graphic Interchange Format (GIF) is a lossless, 8-bit file format best for exporting images with a limited number of colors, a high degree of contrast, and well-defined edges between colors. GIF also supports animation and binary transparency, meaning that pixels are either completely transparent or completely colored, with no feathering or transparency masking.
-Joint Photographic Experts Group Interchange Format (JPEG) is a lossy. 24-bit file format with a color depth of 16,777,215 colors. It is best for exporting photographic images or images with indistinct but significant color gradations. It is not appropriate for exporting images with solid blocks of color because its lossy compression format tends to create distortions, called artifacts. JPEG also does not support animation or transparency.
-Portable Network Graphics Format (PNG) is a file format that can be either 8- or 24-bit and which uses a lossless compression. It therefore combines the best of both the GIF and JPEG worlds. PNG-24 also supports a full range of transparency values. However, it has not become a dominant Web graphics format for two major reasons. While GIFs and 8-bit PNGs are more-or-less equivalent in terms of file size, 24-bit PNGs are much larger than their JPEG counterparts. In addition, Microsoft’s Internet Explorer for Windows—the most widely used browser in the world for now—does not support PNG’s transparency levels.

Saving Images for the Web
Adobe has bundled the Web-graphics program ImageReady with Photoshop for a long time. However, it is getting less use as the company integrated more of ImageReady’s features into Photoshop. With Adobe’s purchase of Macromedia, along with its round-trip image editor Fireworks, it is likely that ImageReady will be phased out entirely in a few years. Therefore, we will use Photoshop’s built-in “Save for Web” dialog box, which replicates ImageReady’s most-used feature.

The standard resolution for raster graphics on the Web is 72 ppi. Images with a higher resolution than 72 ppi will display larger than you expect on a monitor. It is good practice to resize/resample your image to 72 ppi and to merge your layers before attempting to export.

To optimize your image for the Web, go to “Save>Save for Web.” This dialog box allows you to compare several compressed versions of your image for both quality and file size/download speed using the “2-up” and “4-up” tabs. By clicking on one of the images, you can select from different file format and parameters presets or manually adjust the options in the settings area to the right of the screen. Using the “Image Size” tab, you can resample your image immediately inside the dialogue box. In addition, the arrow at the top of the dialog box will open the Preview pop-up menu, allowing you to estimate the time needed to download the various files at different connection speeds and to check what the image will look like on Macintosh vs. Windows monitors. Once you have found the perfect settings, simply click “Save.” You will be prompted to rename your image because “Save for Web” generates a copy of the image and does not save over the existing image file.

The “Save for Web” dialog box comes with several presets for creating GIF, PNG, and JPEG graphics. These presets are all editable, and we will explore the parameters in turn.

Optimizing Images in GIF and PNG-8
GIF and PNG are both indexed 256-color formats, which means that Photoshop searches for all the colors in an image, chooses which ones to discard, and the remaining colors and stores them in the Color Lookup Table. The algorithm Photoshop uses to index colors and reduce the color range in an image can be chosen in the Color Reduction Algorithm option menu. The dynamic choices are Perceptual (which favors colors most favored by the human eye), Selective (which favors human perception while retaining all Web-safe colors in an image), and Adaptive (which favors the colors predominating in an image). Other choices are Web, Mac OS, and Windows OS, which pushes the colors in the image to the closest equivalent system colors for the chosen output.

After PNG-8 and GIF reduce the number of colors in an image (which can be done by choosing a present or by editing the “Colors” textbox), dithering allows it to intersperse other indexed colors to better approximate the gradations of color that were lost. While dithering results in smoother gradations of color, it also can introduce noise into the image. The Dithering Algorithm can be set to Diffusion (which allows you to diffuse the dither using a percentage slider—the higher the percentage the larger the file size), Pattern (which creates a clearly discernable pattern of inserted/dithered pixels), and Noise (which randomizes the dithering).

GIF and PNG-8 both support limited transparency values. These can be adjusted using the Transparency and Matte options in the Settings area. Because these formats do not support a range of transparency values, it is important to set how and with which color you’d like to blend pixels that are semi-transparent or masked. The Matte setting allows you to select which color to set as the background color (this is usually the background color for the website you are desigining) while the Transparency settings allow you to change the way Photoshop dithers the pixels to simulate color blending.

Interlacing is an older technique for dealing with very slow connection speeds (14.4 or 28.8 kbps modems) and allowing a browser to download progressively better scans of an image until the entire, full-resolution image is displayed. These days, it is rarely necessary and can actually increase download time. It is best to leave this option unchecked.

Optimizing Images in JPEG and PNG-24
Compared with GIF, JPEG and PNG-24 seem simple. Photoshop offers three presets for JPEG (high, medium, and low quality) and one for PNG-24. In addition, the JPEG quality slider allows you to manually adjust the quality amount to achieve the best balance between image clarity and file size.

Because JPEG does not support transparency, you will use the Matte setting to specify a color to use to fill all transparent areas of an image. By selecting the Transparency option, PNG-24 will automatically retain all the transparent areas in an image—IF your viewer isn’t using Internet Explorer, that is!

“Progressive” JPEGs are similar to Interlacing of PNGs and GIFs and similarly can result in even longer download times due to forced rescanning of an image. It is best reserved for very high resolution images, not the staple images of your Web site.

Creating Animated GIF Images
The simplest form of animation is an animated GIF image. This form of animation takes a multi-layered Photoshop image and makes changes to the visibility of those layers over time using the “Window>Animation” menu. To create an animated GIF:
1) Create a multilayer image in which each layer acts as an individual frame of the finished animation.
2) Go to “Windows>Animation.” The first frame is automatically filled in with the currently displayed layers in it.
3) Click the “New Frame” button to insert the next frame (which will by default be a duplicate of the last frame). Adjust the visibility of the layers in that frame to advance the animation
4) The animation palette allows you to specify the number of times the animation repeats and the length of time each frame is held for.
5) To create a smooth transition between a single object in an animation, duplicate the frame containing the object and move the object on the layer in the new frame. Click on the “Tween” button for Photoshop to automatically insert the frames “in between” the two states.
6) Go to “Save for Web” and export as a GIF. Preview your animation in a browser!

Animated GIFs are a relatively primitive form of animation that can be extremely annoying if not used carefully or appropriately. Nevertheless (or maybe because of this?) most flashing Web advertisements rely on animated GIFs.

response #2

2006-02-09T17:48:00.000-08:00

Reading Response to Wise Ch. 2 & 3

In contrast to the first chapter I read, the concepts and ideas in chapter 2 are profoundly more different. The computer developments are diffused through a long list of scholars and innovators. Turning away from how computers can be used in the name of war, these brilliant people have focused their attention on nurturing the technologies towards the use of becoming more helpful for our cultures. It would seem that since the computers have now helped establish the protection of our communities, now computers would be used to develop, expand, and enrich the cultures of our communities.

Additionally, a good quote from the text states, “Computers are mostly used against people instead of for people, used to control people instead of to free them. Time to change all that- we need a … people’s computer company.” This quote was taken from the first ‘popular’ computing magazine. I think this quote reiterates the transition from how computers went from supporting the efforts of war to how computers can be used in a cultural-enriching environment. Ironically, once the technology is landed in the lap of the consumers or private businesses then improved, progressed, and upgraded, (trying to generate cultural enrichment) it is my opinion the uses for it will once again be applied in military operations.

I also found the studies of Resource One very intriguing. Basically, it sounds like going to the local library, logging onto a terminal, and accessing information somewhere else. As simple as this may sound, this was during 1974. Ironically, the library in my home town was only capable of this feat 20 years later.

Rob Garfinkel Reading #2

2006-02-09T15:57:00.000-08:00

The second and third sentences of the ‘Computing for the people’ section, in my opinion, summarize both chapters, for the computers’ influence on people in all aspects of life today.

“…Many in the movement regarded technology as a means of repression by the state and big business... However, for others technology represented a means of empowering the individual to take on the state and big business” (p. 27).

This quote by the author is true today on a number of levels. When the internet was created, they could have never known its potential several decades later. We may not even have seen the full potential of the internet even now.

Take television stations’ primary broadcast network websites, for example. ABC, CBS, NBC, Fox, The WB, and UPN all list the television shows that they air on the channel. Their sites advertise their programming for when and which day those programs are on within each individual site. They may also notify you of last minute changes to their schedule, had a big event or story taken place; the dreaded ‘behind-the-times’ TV Guide that you may receive every Saturday with the newspaper tends to become out of date by the time Sunday comes around. Some networks offer teasers to episodes that have not yet been broadcast, which are viewable from their websites. Some websites even go as far as to give the plot line of individual episodes, had you missed seeing that episode. Some may direct you to the stations’ website to see exclusive content of an episode that was not aired, as CBS’ CSI: Miami did recently. Just recently, broadcast networks have offered individual episodes of their programming to be purchased and downloaded through iTunes. Some non-broadcasted networks, for example, Nickelodean, offer full length episodes of programs which stream from the individual network.

Now, e-commerce. Who would have ever thought that people would go online to purchase items?

Could it be easier to shop for products online, rather than going to the store to get the same item? DAMN! I found it online for fifty dollars cheaper! Here’s my credit card number! I can point and laugh at everyone else who bought the same product for fifty dollars more than me, and I even got more accessories for it! Oh, man. There’s a delivery time for it. Oh well. I saved fifty dollars!

And so, the addiction to buying items on the internet stars. I’m not talking from experience (coughs and clears throat).

E-commerce consists of three categories: amazon.com is business to consumer (B2C), ebay.com is consumer to consumer (C2C), and, the one you hear less about, is business to business (B2B). B2B tends to be websites that can offer products in bulk, usually for a discounted price.

We most likely have not seen what will come out of technology and the internet, as new technologies and programs that are around today become constantly updated, rewritten, and improved with each edition or version.

Kastler's Reading Response #2

2006-02-09T15:44:00.000-08:00

It looked like in Chapter 2, that Wise thought that a majority of the developments of the PC came about from the hippies. These hippies were part of the 'counter culture' that worked towards making computers usable by the general public. The other part of the 'counter culture was the Left Wing movement. After reading Chapter 2, the best understanding I have is that the younger, hippy side of the 'counter culture' looked at the new technology as a higher mean of achieving something. Whereas, the new Left Wing thought that newer, cheaper computers are necessary for the advancement of democracy.

Once the first computer came about, the Altair, those hippies were able to mess around together with others at home to attempt to make the computer usable. Those who were apart of the Homebrew Club met regularly to show off what they were able to make the computer do. Many of the bigger corporations and companies with higher budgets looked down on those who tried to push the technology ahead. But many of those Homebrew members went on to form Microsoft and Apple.

It seems that without the 'counter culture' movement, what we take for granted, wouldn't be available. Even more so, it seems that we must realize that the military only took this technology so far, and once it became public, it spread like a wild fire.

2nd Reading Response

2006-02-09T13:48:00.000-08:00

2nd Reading Response
Richard Wise discusses in chapter two of his book, Multimedia, A Critical Introduction, the roll that the counter culture played with the development of technology and the explosion of the computer age. Wise states that this explosion is related and more humorously based on the hippy movement and the desire of the hippy culture to spread their message. Granted that many in this movement used this technology to further their causes. What Wise and others in his field fail to understand was the true concept of the movement as it related to the majority of the participants.As a person that at one time was called a “hippy,” I can testify that the ideology of the true hippy movement is still misunderstood by what is called mainstream America. He is correct in that some have used the advantages of technology to spread their word. But that is where he starts to stray. Those of us that would actually enjoy seeing the world, as the movement would want it to be would like to see a decrease in the use of our technological miracles and advancements and return to a more simple life uncomplicated and less stressful in trying to make it from day to day. The true counter culture he describes in this chapter in reality started as a realization came over many of us that grew up in the 60’s and 70’s that our ideological society will have to wait until the next life and if we are to survive in this one we need to adapt and use technology to make things as easy on us as we can. Over all I thought it was a good chapter and except for the comparison to the hippy movement I found it very enlightning.

Hudgens Chapter 2,3 Reading Responce

2006-02-09T12:32:00.000-08:00

While reading the chapters i came to relize that some of the most influencal people to multimedia were actualy counter-culture Supportes "hippies or drug users" who changed there sites or just spent more time on computers. This information never really got discussed, so I guess they were trying to talk about it as little as possible. I also found it to be ironic that PARC members held Homebrew members in disdainan when later some of the Homebrew members became the creaters of todays technology. Finally the most amazing part of the creation of Pc was that the first computer was sold with no software, mouse, or keyboard. This to me truly showed how much people truly wanted to use and have this new technology.
In conclusion theis two chapters go to show you that as a whole we created multi media, with out military and counter-culture we would not have been as advanced in multimedia today.

Zelasko Reading Response 2 and 3

2006-02-08T22:29:00.000-08:00

I thought it was very interesting the two very different views on the likes of computers. Not so much that there were differing views, yet more so how they were extreme opposites. On one hand you had the political "new wing" party who thought that cheap computing systems would be a strong push for democracy. Then you had the cultural new age side who thought that computers provided an artificial reality to the world. They also thought that computer technology would push the society into repression.

through the 60's WELL (whole earth lectric link) kept the uprise of the new technology. Resource One helped non profits by providing them with the means to help them with social change through education.

THe next advancement was to make computers 'thinking machines'. Before this new idea computers were based more on a mathematical approach. Basically the basic idea that I got from chapter 2 was that the New Agers thought of computers as a higher mean of being and the new Lefters regarded cheap, powerful computers to be necessary for the advancement of democracy.

In Chapter 3 I learned that Apple and IBM weren't the first people to manufacturer computers, which is what I had always assumed. Altair was actually the first company to make available the personal computer in 1975 for a mere $420. Apple was the first to come up with word processors and Microsoft was first for the term "multimedia". More advancements are still coming out in today's society and in my opinion will never be complete.

Chapters 2-3 Response_McClure

2006-02-08T20:18:00.000-08:00

It seems as though the basics for computer technologies that the military was able to so lavishly expand on were then taken a step further by individuals of ‘counter culture’. Many of these people saw power based knowledge as a way to bring society together with a desire and opportunity to learn. Counter culture seemed to have a desire to change the purpose of computers. Rather than for just military purposes, computers and multimedia could bring a world together. The CMP (community memory project) seemed like an excellent way to bring communities together with a common interest. It was a way to give those without the means to technologies, such as computers, to experience culture. Interaction was the main focus of projects such as these. Once the PC (personal computer came along the technological world was bound to grow and prosper.

I think that once young people caught hold of these technologies, they immediately saw a way that they could capitalize on them. People, such as Bill Gates and Steve Jobs, were driving forces of our most modern technologies. They changed multimedia from cultural to profitable. Microsoft and Apple are now at the forefront of computer processors and digital capabilities.

I think that this transition, we have seen, was inevitable. People will always find ways to take powerful ideas, expand on them, and find ways to profit.

Allen's Reading Response for Chapters 2&3

2006-02-08T19:15:00.000-08:00

From the readings I come to understand that hippies and anti-war activists started everything we use today. The military saw the advancements that Ted Nelson, and others like him, were making in technology. Advancements that the military could not do without. So, instead of labeling them as non-patriotic or anti-American, the U.S. military allowed them to harness their chi, and develop whatever they wanted, just as long as it was for the best and under the auspices of the U.S. military. Good for the time being, but later they had to do something on their own.

Then the birth of multimedia, the start of a multi-Billion dollar industry. The first PC, the Altair, by Ed Roberts, in 1975. After the bugs and kinks were sorted out the Big three with very familiar names emerged. Bill Gates and Paul Allen with Microsoft and the Windows OS; Apple and its Macs; and IBM (big blue); with Compaq and a few others to follow.

I now know where this great stuff came from and who developed it. To me the biggest accomplishments were the microprocessors, which enable home computing; the hard drive, everything can us a memory; and the CD/DVDs and ROMS, which allows us to accomplish a great deal today.

- Allen Johnson

Reading Response 2,3_Sjohnson

2006-02-07T21:51:00.000-08:00

From the readings, I think that Wise tries to explain how counter-culture and people who believed in the counter-culture values (hippies) had an effect on the development of computers on a more individual and personal basis; they are the inventors of a lot of the computer/multimedia technology that we have today.

My reaction to chapter two was both informative and enlightening in the aspect that the development of the personal computer when through a number of different people and companies to try and create a multimedia device that would be another way for people to communicate. I guess you can say that I am thankful that those people took the idea of technology and multimedia to include the average person because I believe that if it was left up to the government and military, we would not have the computer capability that we have today. One of the most interesting aspects that caught my attention was how there was a distinctive link between psychedelic counter culture and computer counter culture. From this section of the chapter I got the impression that the reason why people like Timothy Leary was so into the development of computers, virtual reality, and cyberspace is because maybe it was an idea that the computer generated simulation could give people that type of "high" without the drugs.

My reaction to chapter three was more of review (a little) just because I have seen the movie about Bill Gates how him and other people created software to make the personal computer more adaptable to the needs of the person using it. But I do think that it's weird how it is the little people who are messing around with a computer and it's components that create something as useful and demanding as software. It was people like Bill Gates and Paul Allen that PC carries thought they didn't have to worry about but look at them now, ironically they pretty much own the computer industry. It was these "little" people who paved a way for all types of software development that is now being used in our everyday lives.

Class Notes: 2/7/06

2006-02-07T18:03:00.000-08:00

1) Critique of student work, Exercises 1-3
2) For next time: reading and reading response: Wise chapters 2-3
3) Next time: Exporting for the Web/Animated GIFS (first half of class); Zig Jackson lecture or independent work time (second half of the class)

response #1

2006-02-02T17:44:00.000-08:00

Reaction to Chapter 1 (Wise)
My reaction from what I just read is a feeling of disbelief and realization. I find the development of modern digitization is an accumulation of human intuition and problem-solving; moreover, instincts, trial and error. When we, modern society, look around at all the things we have accomplished and achieved in our explorations for development, it is dumbfounding that many of our advancements have been discovered by the means of war between each other. The pioneers of technology have longed to achieve solutions to whatever problem they have faced. Ironically, these pioneers had the knowledge to pursue these ideas and feats but it seems that the true basis for some of these accomplishments were when they (and/or their fellow statesmen) faced the tyranny of oppression; namely, war. This seemed to be the case involving Nicolo Tartaglio and his studies of ballistics.
In today’s age where we depend on many modern marvels to help us function properly and engage in normal activities, we take for granted the developments that have helped us in these areas. It is impossible to imagine the time and effort that has been put forth by those innovators before us that have helped us overcome the problems faced in the past. Everyday we face the task of achieving more efficient ways of doing things, even efficient ways of killing one another. The war machine constantly forces us to acheive new, inventive ways of doing many different things. The threat of death will push the mind to do things that may have not been possible, or possibly not able to acheive within the time frame it has been done otherwise.
I see that war is inevitable. War between countries has always forced people to overcome the difficulties of finding solutions to problems. No matter how impossible an idea may seem, when the collective mass comes together, developments will occur. I really find it fascinating that throughout the history of spawned developments that are made in the name of war, true humanitarians find ways of adapting these achievements to foster the growth of culture in a knowledgeable, prosperous way.

Reading Response #1 _Mcclure

2006-02-02T16:04:00.000-08:00

The Military and Multimedia
After reading this chapter and learning about the many advancements in military and defense, I started to think about where multimedia would be today without these events. Would our multimedia capabilities be as advanced as they are today without military findings? It’s hard to believe that something so common today actually came from our desire to destroy other military forces. These groups have made huge leaps in computer technology and digital imaging over the last decades. We can credit those such as Nicolo Tartaglio, Isaac Newton, Galileo, and Vannevar Bush for developing many of the basic ideas to this technology. How much farther can we go in these areas? What will happen when other military forces acquire the same technologies?
It is also important to think about how our lives have changed because of multimedia, the internet, and imaging programs. We have an endless amount of information at our finger tips because of these findings. The ability to connect with individuals all over the world by just sitting in front of a computer screen is an invaluable asset.
I can not imagine not having access to these technologies. The internet is my number one means for communication. I can chat with friends, send files in seconds, and express myself with imaging programs.
There are very few professions and programs that do not require the use of some sort of computer technology. These technologies help in saving time, storage of information, and ease of accessing information. Computer technology has gone from a defense tool to simply making our lives easier.

Reading Response for Chapter 1

2006-02-02T15:46:00.000-08:00

I didn't know anything about a reading response, especially about something I read three weeks ago, but I'll be honest about what I do remeber that's that I didn't know anything about Multimedia Design. I learned that it started with the military.

I'll re-submit this response later with more details.

Sorry, but I didn't know anything about this assignment.

- Allen Johnson

Zelasko Reading Response #1

2006-02-02T14:38:00.000-08:00

Before reading this chapter I only knew the basic concept about how the military was the first influence for computers. I had no idea that they were trying to develop so many different aspects at once. There was so much information in this chapter that I found it hard to follow along and understand it all.

It was interesting to read that without the computer we wouldn't have such things as the Stealth bomber, hydrogen bomb, or even missiles. All along I thought that the logistics behind all that were more mechanical and not based around a computer, since we were inventing other things like cars and airplanes way before computers existed.

In today's society most use computers, and internet, for entertainment purposes. Sure there are a select few who use it for other purposes but the majority of computer users today don't take part in serious tasks such as the situations back when the computer was first invented. Back in the day the military officials were using computers for breaking codes to prevent war, and today we're using computers to play games and 'chat'. I'm not sure if this is a leap forward, due to enhancement of the computer, or a leap backwards.

Kastler's Reading Response #1

2006-02-02T13:34:00.000-08:00

Before reading this chapter, i knew that most to all of the development of the current technology that we take advantage of today was developed by the government. Today, the technology race is based off consumer demand for faster, cheaper, and easier to operate products. The difference between current technology advancements and the past technological advancements is who is demanding these advancements. In the first chapter of Multimedia, A Critical Introduction, Wise presents how important militaries have been towards the research and development of technology.

Having taken many classes that have touched on this subject, it was easy for me to read this chapter. Most of the facts that Wise discussed, I already knew. When it came to his conclusion, I think he is right. In regards to our technological advances, without the Cold War and Arms Race, I think we would still be heading in the right direction. However, we wouldn't be as far along as we are today. Having said that, because of the Cold War and Arms Race, the process of developing these technologies was so rapid, that the demand was immediate.

It is not possible to say that without the war, we would be as technologically advanced as we are today. Hence, I feel that Wise is correct to say that none of the technologies that make multimedia possible would exist today had it not been for the Cold War and the space race.

Hudgens Reading Response 1

2006-02-02T12:44:00.000-08:00

FUNDING

I only have one real problem with Richard Wise. In this blog I will voice my difference in opinion. Of course I agree with all his fact and time lines, because they are accurate and well researched. Rather my problem arises in the personal opinion he expressed.

Richard Wise stated that “None of the technologies that make multimedia possible would exist today had it not been for the Cold War and the space race”. I have to disagree with this statement because technology continues to advance we would not just stop every thing with out the wars and compitions. Now it is true that war lead to our advancements in multimedia but that is only because the majority of all finical backing of the United States is in the war/Defense department. In 2006 alone we are spending $441.6 billion billion for U.S. military budget (Shah 2005). While the National Science Foudation only gave a total of 35 Million to the study of new Tecnology’s in 10/1/2004 to 10/1/2005(National 2005). With 12.5 Thousound times the funding of corse many companies and experts are going to work for, or in the same fields as the greater funding. While if we put more funding in other fields we would get different rezults. We still would have discovered multimedia Technologies, because it the next step in media. Multimedia would have been created out of necessity for other reasons out side of military.

In overview, Richard Wise chapter on military was: accurate, well researched and in formative, and was fun and easy to read. Richard Wise’s last statement on how multimedia would not exist without the military really was opinion that could not be supported, and really made me have to question his writing more closely.

Shah, Anup. 2005. Section: Arms Trade—a major cause of suffering. http://www.globalissues.org/Geopolitics/ArmsTrade/Spending.asp (Accessed February 2, 2006).

National Science Foundation. 2005. Program Awards. http://www.nsf.gov/awardsearch/progSearch.do?SearchType=progSearch&page=2&Quer yText=&ProgOrganization=&ProgOfficer=&ProgEleCode=7314&BooleanElement=true &ProgRefCode=&BooleanRef=true&ProgProgram=&ProgFoaCode=&RestrictActive=o n&Search=Search#results (Accessed February 2, 2006).

Reading Response 1: Introduction

2006-02-02T12:20:00.000-08:00

In chapter one of Multimedia: A critical introduction, Richard Wise took an active approach to give an in-depth explanation of how the military played a humungous part in the creation of multimedia and computers. Some people might wonder, "Now, why would the military contribute so much to multimedia and computers?" but the reasoning behind it quite obvious. However, I was more interested is not the why but the how. How was the military able to create such great advancements and no one ever questioned the reasoning behind it? How were they able to fund these life-enhancing products?

The military is a member of the most powerful group in the world, the government. The government has the ability to buy, create and design anything it wants. The government not only has the money to do so but they also have the power. They can pay people thousands of dollars to create something that will enhance their ability to make the U.S. better (so they claim) and no one will ever question them So when it came to trying to make the U.S. better in the aspect of making the weapons better and/or trying to gain an competitive advantage over their enemies, coughing up the money to do so was not a big problem.

So why spend so much money on the advancement of war and not something else? Well, why not? Across the world the U.S. is know to have the most power for a number of different reasons and one of them being because of it's strong military history. The U.S. possessed all types of weapons and defense mechanism that were virtually impossible for any other country to get their hands on. And I think that this is why the statement that the U.S. is powerful and "untouchable” has been instilled in the minds of other countries. By allowing the military the ability to create these on so wonderful technology enhancements for warfare, it was an attempt for the U.S. to remain number one and create fear in other countries where they would be reluctant to declare war on the U.S. But then when I think back on 9/11 it makes me think are we has powerful and "untouchable" as we think? I think not!

However, I will agree that the military do deserve credit for the creation of all this computer technology because without them I would be "writing" this response instead of "tying" it. But it still somewhat upset me that the greatest advancement was created and designed initially for war. I understand that the U.S. has to defend itself and the best way to do that is try to create the best defense approach but it still makes me wonder if the computer technology we are using now was invented and implemented back in the early to mid 1900's, can you imagine the technology that we will have in the year 2022?

Class Notes: 1/31/06

2006-02-02T10:11:00.000-08:00

Intro to Multimedia Design
January 31, 2006

Outline:
1) Working independently on exercises (30 minutes)
2) Demonstration of image compositing (30 minutes)
3) Discussion/show & tell for space and composition readings (30 minutes)
4) Optional scanner demonstration (10 minutes)
5) Last exercise handed out: composite self-portrait

Exercises 1-2 Due Thursday, Feb 2; exercise 3 due Tuesday, February 7

I Independent work on exercises
-hand out optional additional corrective filtering techniques
-check in with individual students about how work is going

II Image Compositing--go over blend modes from previous handout
Steps in compositing:
-create background layer(s)
-extract elements you want in the composition
-position to as to create an interesting composition
-clean up edges (Matting>Defringe, or use eraser tools with soft edges, or crop)
-apply layer styles and blending modes until the desired look is achieved
Sample image has four layers: scanned cloth pillowcase, a gradient, extracted portrait, and extracted necklace. The portrait has an outer glow style and a Screen (lightening) blend mode applied; the pillowcase also has a blend mode applied to control how the gradient shows through the image.

Blend modes control the ways the colors of pixels blend and are used extensively in commercial image compositing and photo-collaging. We have already used a couple of them in two of our step-by-step image adjustment tutorials. It gets a lot more complicated than that: there are 23 different layer blend modes in Photoshop. We will be focusing on the basic application of blend modes for layers. Keep in mind that the topic is as complex and subjective as image compositing itself, and acquiring proficiency with blend modes will require a good deal of experimentation and trial and error. We will only be scratching the surface in this class.

The simplest way to blend layers is to modify the opacity and fill of a layer. Changing the opacity of a layer allows the pixels of the layer immediately below to show through, and the top layer can be seen as a translucent overlay on the bottom image. Changing the fill value seems to be exactly the same at first glance; however, it will change the transparency of a filled area only and not the entire layer or any effects on it.

Blend modes are applied on an individual layer to affect how each pixel on a layer blends with the composite pixel directly beneath it. The composite pixel is an important concept because it reflects the fact that every layer in an image can have blend modes that cumulatively affect the color of a pixel in a layer. For example, the second from the top layer may have a blue pool of water that appears brown and blurry due to the combined effects of blend modes below. For the purposes of blending with the top layer, Photoshop treats that each pixel of that brown and blurry pool of water as a composite, reflecting the effects of all that mixing, while treating the earlier layers as if they had been merged. Blending options can be accessed by clicking on the “F” button on the Layers palette or the “Layer>Layer Style>Blending Options” pull-down menu.

Normal mode displays each pixel in a layer as opaque and covering the pixel beneath it. When the opacity values are less than 100%, each pixel is averaged with the composite pixel beneath it.

Dissolve mode affects feathered or softened edges only, therefore having no impact on opaque pixels. If a layer is feathered or the opacity value is brought down, Dissolve randomizes the pixels, creating a pattern of fine dots.

There are four darkening modes: Darken, Multiply, Color Burn and Linear Burn. Darken applies colors in the active layer only if they are darker than the composite pixels below. It is most useful for covering up light parts of an image while letting dark parts show through. Multiply mimics the effects of projecting two images on top of one another with the effect that the darkest images from both slides are amplified. Color Burn and Linear Burn both bring out colors in the bottom layers while using the top layer’s colors to reduce brightness. The result is a high-contrast, almost stamped image, though Linear Burn creates a smoother effect.

Lighten, Screen, Color Dodge and Linear Dodge are lightening modes. In Lighten, Photoshop applies colors in the active layer only if they are lighter than the composite pixel color. Screen is the opposite of Multiply, emulating film that has been exposed multiple times, and is useful for creating glows. The Dodge modes multiply brightness, with Color Dodge creating a rougher effect and Linear Dodge a smoother. The send much of the image to white and are helpful in creating hotspots.

Photoshop has six light modes: Overlay, Soft Light, Hard Light, Vivid Light, Linear Light and Pin Light. All these modes darken the darkest colors and lighten the lightest colors, allowing the midtones to intermix and keeping the foreground and background distinct. Overlay is a good default light mode; if it seems too strong, adjust the opacity of the layer or try soft light. Vivid Light and Linear Light combine both burn and dodge modes and are therefore very “hot” and hard to control. Pin light increases contrast by making everything but the darkest black and lightest whites transparent. Hard mix is closely related, using a Vivid Light mode with a color threshold that transforms each color into only eight; is has fairly limited functionality for the general user.

Difference and Exclusion are inversion modes, producing the appearance of a “negative” image with transparency. Hue, Saturation, Color and Luminosity are blend modes that affect how the colors of pixels (rather than their brightness or transparency) blend. Hue retains the hue of the selected layer but mixes it with the saturation and luminosity value of the composite pixels below; Saturation and Luminosity work on the same respective principles. Color retains both hue and saturation while mixing luminosity values

In experimenting with blending, the order in which layers and modes stack is as important as the blend modes used. This effect is called sandwiching, and it is as important to experiment with different layer orders as blend modes.

III The importance of space in a composition
When the empty space in a composition is carefully and successfully arranged, the design is almost always effective. It is therefore helpful to think about arranging space rather than arranging forms. Space is defined when a form is placed into it. Lack of empty space creates a chaotic design.

Choose an ad, photograph or magazine layout to identify different spatial strategies being used in it.

Types of space
-negative space: space where design elements are not present
-trapped space: space surrounded by other elements
-working space/white: space that is serving an active role in the composition
-leftover space: space that does not serve a purpose.

Figure/Ground Relationships, Margins, and Spatial Context
-stable: forms appear to be placed in front of a background; balancing the shapes of sizes of forms and space creates a unified design
-reversible figure/ground: figure and ground (space and shapes) interpenetrate; creates dynamic design
-ambiguous figure/ground: elements seem to be both foreground and background simultaneously

Margins are areas of white all the way around an element. It helps to activate space to interrupt this margin with an element in at least one place.

Spatial context is the overall relation of elements to the edge of the design, especially the frame, border or page edge.

Symmetry
-symmetry creates a passive and stable space, making predictable figure-ground relationships. it is easy to do
-types of symmetry: bilateral, radial, crystallographic (all over pattern)
-symmetry is best executed in an inverse pyramid, rather than regular pyramid, because it is more dynamic

Asymmetry
-asymmetry suggests motion and activity, but required the informed use of space to prevent an all-over design
-closure is one strategy that helps bring asymmetrical compositions together--the tendency to complete shape relationships in our minds.
-repetition of elements can imply movement and prevent chaos
-pay close attention to figure-ground relationships in asymmetrical compositions

Symbolic use of space: Space connotes certain ideas, such as quality, peace, openness, solitude, cleanliness, artistic, etc.

Go around with students describing what is working or not working in the space of the layouts and photos they have chosen.

IV Scanner Introduction/Demo

V Final Photoshop still image exercise assigned Due 2/7

Scott's posting of reading response 1

2006-02-02T09:54:00.000-08:00

Richard Wise discusses in chapter one of his book, Multimedia, A Critical Introduction, the important roll that militaries have played with the research and development of technology. Wise believes that Multimedia and its related components in part owe its foundations to the research and development department of modern day militaries. I believe his idea that, only part is owed to the military, greatly underemphasizes the importance the military has played in this field, not to mention developments that affect every aspect of our normal lives.
Starting with the name of the chapter, Digitization and War, tells you that it would be evident that the military would be the basis of the technology. As he stated in the chapter, at one point a prominent scientist and inventor destroyed his works to prevent the military from gaining access. He later changed his mind when faced with invasion from a foreign entity. Simply because the military is the agency that desires the technology does not mean that it is going to be used in a non-beneficial manner. Many of the early computers were being developed not just for the purpose of killing the enemy. One of the primary reasons for the desire of accuracy of larger weapons would be to prevent destruction on non combatant civilian groups.
Financial backing is another major concern with regards to the development and availability of technology. The military has very deep pockets and in many cases research groups with the knowledge that the product will be easily adaptable to private use use them. As modern equipment increased in complexity and the need for greater training became evident, the gaming industry sprang up from the technology used to train soldiers, sailors, and airmen of the military. These technologies were easily adapted to the private sector as video games. In conjunction with video came the communication side of technology. From the telegraph to the cell phone, all of these technologies were developed with the idea of better communication during times of national emergency. Even the interstate highway system here in the United States came from the necessity to transport military supplies throughout the country in the event of a national emergency.
I agree with Wise that the military has played a roll in the development of Multimedia. In his conclusion he even mentions that none of the technologies for multimedia would be possible with out the R&D as well as the deep pockets of the military. So why then does he say that Multimedia only in part owes its existence to the military?

Reading Response 1

2006-02-01T22:15:00.000-08:00

Not having seen how to post this since I missed the first two days of class, I'm not sure if I'm in the right area to post this. I'll try finding the right place if not. So... here goes nothing. ...not that my response is nothing.

Before reading the chapter, not knowing that the idea for computers originated at first for military purposes was an interesting fact. It makes alot of sense to solve complicated formulas using that technology, and doing so very quickly; it also made sense seeing that there was no way that objects which could perform these functions back in the 1830s. Babbage thought of computers functioning as mathmatical solving systems more than a hundred years before they could've been developed, ten years before transistors were invented and implemented within technology, and another thirty years before the computers became more compact and cheaper, as compared to the image of the Analytical Engine (page 11). The microelectronics, graphical interfaces, and the artificial intelligence of today's technologies that we use from day to day, may not be as advanced as it is today, had the space race not occurred and the wars had not taken place. If these events had not taken place, the technology available for us to use today may have been less convienient, compact, or as cheap in price as it is now.

Today, every nine months or less, newer and faster computer chips are developed and delivered in new computer systems that the companies design and sell to the public, and to businesses. Some of the time, those new systems offer new features previous systems that had not been seen before.

Every couple of years, Microsoft offers new operating systems, which, for the most part, build on its previous versions features. Since Microsoft's creation in 1983, it has gone through ten or so graphical interfaces. Apple has also gone through several of its own interfaces.

Since Nintendo, video games have been using artificial intelligence in some fashion. In Super Mario Brothers, while it is waiting for a button to be pressed, the character of Mario moves thru the first level as if someone is playing the game. Today, the artificial intelligence within the game of Need For Speed Underground 2 is performed in as much as fifteen other cars in the race, and each car starts learning your driving abilities, and they modify their driving skills to try to beat you.

Computers and similar technologies have made a huge impact on today's life. The microprocessors have dramatically been improved since its first creation more than one hundred years ago. Both graphical interfaces and the artificial intelligence have heightened their presence in most forms of media.

ANNOUNCEMENT: Syllabus Changes

2006-01-29T12:13:00.000-08:00

As announced in class last week, the readings will be shuffled around a bit to accomodate difficulties folks have been having purchasing books in town. The adjusted reading due dates are as follows:

January 31: White, Section 1

February 2: White, Section 2 and Wise, Chapter 1
Reading Response No. 1 (on Wise) due

I haven't updated the syllabus on the static website yet but will after class on Tuesday based on whether the first three exercises will be extended by one class meeting.

Class Notes: 1/26/06

2006-01-29T11:57:00.000-08:00

Outline:
1) Photoshop II Demo
2) Exercise 2 hand out
3) Based on how Tuesday 1/31 goes in-class, I may extend the deadline for the first three exercises to give you 4 extra days to work on the exercises

Photoshop II: Image Manipulation

I Selections
A selection is a feature that allows you to edit one part of an image without affecting another part. A selection is described on screen by a pattern of moving dots often called “marching ants.” Photoshop has a wide range of selection tools to allow you to fine-tune your control over an image; in addition, numerous keystroke commands allow you to apply options to each selection tool or to add, subtract, or join selections. The following is a run-down of the selection tools and options.

Marquee Tools (Rectangular, Elliptical, Single-row, Single-column) create straightforward geometric selections. Useful keystroke commands for these tools are:
-Press “Shift” after the start of your selection drag to create a perfect square or perfect circle.
-Press “Alt/Option” to draw from the center rather than edge of the selection
-Press “Spacebar” to move a selection after you have begun drawing it. Release the spacebar to continue drawing the marquee.
-Click and drag the selection with the Marquee tool to move it.
-Select Fixed Aspect Ratio or Fixed Size from the “Style” menu in the Option bar to set a fixed aspect ratio or to specify a number of pixels tall and wide for your selection.
-Select Feathering or deactivate Anti-aliasing to control the appearance of the edges of your selection. Feathering softens or blurs the edge of any marqueed selection, while de-activating anti-aliasing (which means a basic smoothing of pixel edges) will create a jagged edge.

Free-Form Tools (Lasso, Polygon, Magnetic Lasso) allow you to draw selections freehand. The Lasso tool draws curves according the movements of the mouse, while the Polygonal Lasso sets end points for a free-form polygon. The two tools are interchangeable if you press the “Alt/Option” key and can be used to draw complex shapes with both straight lines and curves. Releasing or double-clicking the mouse completes the selection.

The Magnetic Lasso tool allows you to draw a selection by tracing the edge of along a high-contrast object to isolate it from its background. Use it by clicking along the edge and then tracing the cursor (without click-dragging the mouse) along the edge. If you don’t like what you’ve drawn, simply back up. The Magnetic Lasso automatically lays down anchor points along the selection; if they are in the wrong place, press “Backspace/Delete” and continue. To give the tool hints, click to place an anchor point or press “Alt/Option” to draw a straight line. You can set options for the Magnetic Lasso by changing the Width option (which controls how far from the edge you must be for the magnet to work), the amount of Contrast between foreground and background, and the Frequency with which anchor points are laid down. To adjust the Width option while drawing the selection, use the left and right bracket keys (“[“ and “]”) to lower and raise the width of the selection, respectively.

The Magic Wand Tool selects all the pixels in an image that fall within certain brightness and area ranges. Tolerance refers to the degree of difference to either side of the sample pixel that will be included in the selection: a smaller value selects a smaller range of colors. Anti-aliasing softens the selection. The Contiguous checkbox controls whether the selection will be only that range of pixels that is directly adjacent to the sample pixel or whether all pixels within the range anywhere in the image will be selected. Clicking Sample All Layers allows the tool to look at the brightness values on all layers when making a selection, rather than the active layer alone.

The Magic Wand actually selects brightness ranges within each color channel (in our case, red, green, and blue), rather than actual color values. Therefore, clicking on a mid-tone (medium-brightness) pixel creates a higher range of selected pixels. It is therefore difficult to use the magic wand tool to isolate a color area against a background if they are similar brightness values (e.g. a figure dressed in yellow against a light turquoise background). To get around this problem, it is sometimes useful to create the selection in the color channel where the contrast is the most pronounced.

Modifying Selections
To cancel a selection, hit “Control/Apple+D,” to reselect a cancelled selection, press “Shift+Control/Apple+D,” to inverse a selection (that is, to select instead all the pixels that were NOT selected previously), press “Sift+Control/Apple+I.”

To more precisely modify a selection, change the Selection State buttons in the Option Menu. These features can change the selection tool so that the pixels it chooses are added to or removed from a selection. These options can be used to build complex selections with multiple tools.

In the “Select>Modify” pull-down menu, a few options are worth mentioning. The Border command creates a border of a specified thickness around the edge of the selection. The Smooth command rounds off sharp corners and edges created by the Magic Wand or Magnetic Lasso tools. The Expand/Contract command makes the selection grow or shrink by a set number of pixels.

To soften a selection, make sure anti-aliasing is turned on or apply a feathering effect, which will make the edges of the selection blurry by a given number of pixels both inside and outside the selection. This will help the selection look more natural in its new surroundings. Feathering can be specified in the Option bar while the tool is selected or by using the “Select>Modify” pull-down menu.

Transforming Selections
To move a selection, use the Move tool. This removes the pixels from one part of the image and places them in another that can be adjusted until another tool is selected. For small movements, use the left and right arrows; to constrain the movement along horizontal, vertical, and diagonal lines, use the shift key.

If you do not want to remove the pixels you have selected but want to duplicate them from one area to another, use the Clone Selection command (“Option/Apple+drag.”

Because selections are independent from content when the selection tool is active, you can transform the selection in “Select>Transform Selection.” “Control+Click” to bring up a dialog box with various options; simply dragging or “Apple+Drag”-ing the handles can create many different effects.

II Paths
With everything that selections can do, you may be wondering why you need to draw paths manually. The answer is that all the previous automated selection options sometimes simply do not give you enough control over your selections. Paths are different from selections in that Photoshop treats them as distinct objects that can be saved and manipulated just like any other layer. They are therefore much more flexible and powerful than selections, which disappear as soon as a different selection is made.

Select the Pen Tool to draw a path, making sure that “Paths is selected in the Options Menu rather than the “Shape” button. The Pen tool creates anchor points that define important parts of the path. Photoshop automatically connects the anchor points with straight or curved lines called segments. To build a Path, create one anchor point after another, dragging with the mouse to adjust the curvature of the segment Photoshop generates. To create a closed path, click again in the first anchor point. To keep a path open, you must save it by clicking on the upper right hand arrow in the Paths palette. You can also extend an open but saved path by clicking or dragging one of its endpoints.

Paths can include many independent segments, or subpaths, that enclose different areas. Paths can be edited and adjusted using the Path Selection Tool (the black arrow) and the Direct Selection Tool (the white arrow). In general, the Direct Selection Tool edits individual points and subpaths while the Path Selection Tool edits all Paths in a group. Paths and subpaths can be moved, transformed “Edit>Transform/Free Transform”), cloned (“Alt/Option+drag”), and combined them (select the Path Selection Tool, or black arrow, and click on “Combine” in the Options menu). If you start to draw a new path altogether (rather than a subpath), make sure to select “New Path” because Photoshop will automatically add the new anchor points to the first path.

The Pen Tool is very difficult to master, and there are two slightly easier but less accurate tools for drawing Paths. The Freeform Pen Tool creates a path automatically when you click and draw with the mouse. The Magnetic Pen Tool is a click-box in the Options Menu for the Freeform Pen Tool, and it works just like the Magnetic Lasso. None of this is perfect, however, and the anchor points for all paths, whether drawn by hand or approximated by Photoshop, will almost always need to be edited using the Direct Selection Tool. Use this to move the anchor points and control handles (the little sticks on either side of a point found along a curve) to fine-tune your path. The additional tools in the Pen Tool family can also be used to edit the shape of a Path, but practice and patience is far more important here than description.

Paths are often used as tools for drawing and painting in Photoshop or for exporting images to other programs, which both are beyond the scope of what we will do in this class. However, they are very useful for creating complex selections and allowing those selections to be recalled whenever needed. To convert a Path to a selection or to store paths that can later be used as selections, click on the arrow in the upper-right hand corner of the Paths palette and choose either “Make Selection” or “Save Path.”

III Layers
For image retouching, we used layers a bit to help smooth out compression artifacts and to build the saturation level of a digital photo, but layers do much, much more than that. In fact, most of what we consider routine with image editing would not be possible without layers.

Creating and Managing Layers
There are dozens of ways to make new layers in Photoshop.
-In the Layers palette or drop-down menu, click “New Layer.” This makes an empty layer.
-“Apple+drag” a selection into a new image window. This creates a new layer with a copy of the selection.
-Copy and Paste (“Apple+C” and “Apple+V”) a selection. The selection is pasted into a new layer.
-With an area selected, choose “Layer>New>Layer Via Copy” (to duplicate the pixels in a new layer) or “Layer>New>Layer Via Cut” (to remove the pixels from one layer and place them in the new layer.
-To clone a layer in its entirety, highlight and drag the layer name from the Layer palette to the “Duplicate Layer” icon at the bottom of the palette, click on the Layer palette’s “Duplicate Layer” option, or go to the “Layer>Duplicate Layer” drop-down menu.

When a selection is moved to a new layer, all information in that selection is retained, but everything else is transparent. This is referred to as a transparency mask. Because layers have transparency masks except where they have pixels, the order in which they are stacked matters very much. Images on the top layers will cover images on the bottom layers (unless the layer opacity is less than 100% or the layers are blended—more on this later.) New layers are automatically positioned in front of the previous layer, meaning that their content will block the content of layers below. To move them, simply drag them up or down the stacking order in the Layers palette. Also, the contents of layers can be independently moved with the Move Tool.

The Layers palette contains options for displaying or hiding the contents of a layer and showing whether a layer is editable or not (a lock icon). To edit a layer, simply click on its name, which will appear highlighted and in bold font. The background layer is the based layer of the image—a fully opaque layer that forms the foundation of an image. By default, many kinds of edits cannot be applied to it, and it must be converted to a normal layer (called a floating layer) to be fully editable. This is accomplished by double-clicking on it and assigning it a layer name.

All layer names can be changed from their default numbered names; this is very handy in complex compositions in which it is hard to remember the contents of every layer. Other handy techniques for layer organization include:
-Display Layer Edges by going to the “View>Show>Layer Edges” drop-down menu. This outlines the pixel content of the layer in a blue box.
-Link Layers to treat several layers temporarily as a unit for the purposes of copying the layers in their current stacking order to a new document. Highlight more than one layer (“Shift+click”) and click on the chain icon. To unlink layers, click on the chain icon again.
-In very complex compositions, it may be helpful to Group layers according to similarity of content or some other category. To do this, select the layers you would like to place in the group, click on the palette menu icon and select the “Group From Layers” option. If you do not already have the layers you’d like to place in a group, you can click the Folder icon at the bottom of the palette to create an empty group and manually drop layers in it later. When grouped, layers act as if they are linked, but you can also link layers between groups and create sub-groups for more precise organization.

Editing, Transforming, and Merging Layers
Beyond using layers to build an image through stacking and by changing the overall transparency of a layer, layers themselves can be painted on, filtered, blended and more. Before we go into this in depth, it is helpful to know how to control this process by locking certain aspects of layers so that they can’t be modified. These locking options can be found as small buttons at the top of the Layers palette.
-Lock Transparency protects the transparency mask of the layer. For example, you can paint or clone over active pixels, but the transparent pixels will not be affected. However, the overall transparency of the layer can be adjusted.
-Lock Pixels prevents any changes from being made to the pixels, though the layer can still be moved or transformed, and the overall transparency can be adjusted.
-Lock Position prevents the layer to be moved, though all other changes, including Layer Styles, can still be made.
-Lock all prevents the layer from being edited.

Layers can be transformed (changes in height, width, aspect ratio, rotation, distortion) in much the same way as selections and paths. With a layer and the Move tool selected, make sure “Auto Select Layers/Group” and “Show Transform Commands” are clicked in the Options menu (or go to the “Edit>Transform/Free Transform” pull-down menu). Use the handles to drag the bounding box or enter values in the numeric menus that appear once the transformation is begun. To warp the layer, click on the Warp icon. A grid appears allowing the image to the custom-warped, or a pull-down menu has preset warping effects with editable numeric parameters. To cancel the tranformation, click the “stop” icon; to approve the transformation, click the “check” icon or press “Enter/Return.”

At some point in working on your image, you may wish to permanently fuse two layers and stop editing them independently. This is referred to as merging layers. Layers can eat up a lot of processing power, and only four file formats (including the Photoshop native/proprietary format psd, which you are encouraged to use for your in-progress work) support layered compositions. To merge certain layers, simply select the layers you want and click “Merge Layers” in the Palette menu or “Layers>Merge Layers” in the drop-down menu. You can also deselect layers by making them invisible and selecting the “Merge Visible” command, which will retain the invisible layers for further editing. “Flatten Image” will merge all visible layers and discard the rest, yielding a one-layer file.

IV Extractions
A common task in Photoshop is to remove an element from one image and to use it in another. This is referred to as extraction, and it can be done in many ways. You’ve probably already inferred how to do this using the selection tools, anti-aliasing, feathering, and layers, but below are a few more tricks.

The Eraser family of tools can be used to remove pixels from around the edge of a photographic element. The Eraser paints the background color when used on the locked background layer and erases pixels to layers below when used on a floating layer. The Magic Eraser works much like the Magic Want and has similar problems, creating very jagged edges. The Background Eraser can be used to erase a background around an object so long as the cross in the middle of the tool does not cross over the edge of the foreground object. Options to consider when using the Background Eraser include Discontiguous (erases all similar colors even if they are not adjacent), Contiguous (only erases adjacent colors) Tolerance (higher tolerance erases more colors at a time, lower tolerance is helpful in erasing around tight, detailed areas), and “Protect Foreground Color” (which prevents the foreground color selected in the Toolbox from being erased.)

Photoshop also has an Extract filter (Filter>Extract) that is powerful but complex. To use it, follow these steps:
1) Select the Edge Highlighter tool in the Extract menu and click “Smart Highlighting” if the image you wish to extract has fairly strong edges.
2) Trace all the way around the image, adjusting the size of the brush on the fly by hitting the “[“ or “]” keys.
3) There is only one undo (“Apple+Z”), which will undo all of your last stroke; however, you can use the extract eraser tool to clean up your highlighting.
4) After you have fully enclosed the area you wish to extract, select the Fill tool and click inside the subject of the image.
5) Click “Preview” to preview the selection. Editing tools become active to allow you to edit the image. It can also be cleaned up later in its new environment.
6) Drag around the edges of the preview with the Cleanup Tool to erase more (add more pixels to the transparency mask), use the Edge Touchup tool to add opacity to the image’s edges, or raise the Smooth value to remove stray pixels and smooth the edges.
After you have placed an extraction in a new layer with a new setting, certain problems with the selection inevitably appear, even with careful use of selection tools, light feathering, etc. Placing a “Defringe” mat on the layer contents can help to blend the awkward edges still further. This can be accomplished in the “Layer>Matting” pull-down menu.

V Blend Modes
We ran out of in-class time to go over blend modes and will discuss them on Tuesday.

VI Effects Filtering
Like Blend Modes, effects filtering can produce a wide range of results that are best learned through experimentation than through writing. However, they are relatively more straightforward than Blend Modes, and the Filter Gallery (“Filter>Filer Gallery”) allows you to easily preview the effects of many filters and their editable parameters quite easily. I am also attaching an extensive list of Effects and how they might be used. Therefore, I will not spend much time on this area but would like to offer two bits of advice.

First, it is very easy to get carried away with special effects filters for no reason other than that they are fun. That’s a part of the learning process, but it is not necessarily a good idea to show your experiments to other people or to turn them in as coursework. Always ask yourself why you are using a particular effect, especially the more extreme ones that just look “Photoshopped.” If you are interested in creating a particular effect for a reason, it may be worth researching techniques online or contacting me for specific instructions. Second, try to be focused in your experimentation. If you find an effect you are particularly excited about, write down how you created it. Think about some of the creative applications for the effects as you discover them.

After you have applied a filter, you can “Edit>Fade” to soften and make the effect more subtle.

Exercise 2: Manipulated Portrait

Using Photoshop's effects filters, selection tools, and layer blending modes, create an expressive, 'manipulated' self-portrait using the same photograph you used in Exercise 1 as a base. Feel free to add other photographs or textures to your new portrait. Try to make the picture in some way reflect something unique about yourself. Have Fun!

Copy your completed image (saved as a PSD at no smaller than 1200 x 1600) as well as your source image to the class share. Due February 2 for in-class critique.

Class Notes 1/24/06

2006-01-24T18:27:00.000-08:00

MCMA 364
Intro to Multimedia Design
January 26, 2006

Today:
Announcements: lectures on Thursday: Nato Thompson (5 pm) and Dean Kessman
(8pm) Lawson 101.
Graphics Types
Organizing and Notating Your Images with Bridge
The Photoshop Workspace
Color Modes and Color Spaces
Color Channels
Image Adjustment
Corrective Filtering
Photo Retouching
Saving Projects
Exercise 1

I Graphics Types
Broadly speaking, there are two types of graphics: vector graphics and raster graphics (also known as bitmaps).

Vector Graphics are built around lines and shapes that are mathematically defined. Because they are defined by a mathematical equation, they do not lose clarity or increase file size when the image is enlarged. They are very easily animated through such animation programs as Macromedia Flash.

Raster Graphics are built by thousands of square, colored dots called pixels that together describe the image. The larger the image, the more pixels it has, and the larger the file size. Raster graphics become pixilated, or show the ragged edges of pixels, when enlarged. Digital photographs and video are both built by pixels, which at high resolutions (or number of pixels per inch) and bit-depths (amount of data recorded per pixel per color channel) permit stunning color and photographic detail.

Photoshop traditionally has been a tool for creating and editing raster graphics, though more recent versions of the software have increased support for vector-based drawings and text.

II Organizing and Notating Your Images
Photoshop CS2 comes with an image organizer and selector called Bridge that helps you to organize, notate, and preview your image files. To access Bridge, launch Photoshop and go to “File>Browse.”

Opening the “Folders” tab will allow you to navigate to the location where your images are located, and browse-able thumbnails of the images will be displayed. Switching to “View>Filmstrip” will allow you to quickly tab through all images in the folder. The “View” pull-down menu will also allow you to sort your images according to type (vector vs. raster, etc.)

Bridge allows you to read and set metadata, keywords, and ratings for your digital images. Metadata is invisible information about your photographs appended to the image, such as file size and type, the date and time it was taken, the model of the camera, camera settings, and more. You can use the metadata box at the lower left hand side of the application window to add information to your images, such as where they were taken and by whom. The keywords tab allows you to add keywords to help organize your images. The “Label>Rating” pull-down menu allows you to rate each image.

Metadata, keywords, and ratings can be used along with standard prompts in Bridge’s “Find” to help your sort your images. In addition, if you amass a large collection of images, Bridge allows you to set favorites that you use again and again by dragging them into the “Favorites” panel.

Once you have organized and organized your images in Bridge, double-click on an image to open it in Photoshop.

III The Photoshop Workspace
The Photoshop workspace is divided into five main parts: the drop-down Menu Bar (located at the very top of the screen); the Options Bar (located just beneath the Menu Bar); the Toolbox (located at the extreme left of the workspace); the Image Window (in the center of the workspace, where the image is visible); and the Palettes (located by default at the right of the workspace). The locations of these windows can be changed by dragging them to a new location.

The Menu Bar provides most of Photoshop’s most sophisticated features, access to a built-in help feature, and pre-set workspaces providing hints for commonly used tools for given groups of tasks. For the purposes of image adjustment, go to “Window>Workspace>Color and Tonal Correction” or “Painting and Retouching.”

The Options Bar is a context-sensitive display that provides editable options for the tool currently selected from the Toolbox. It also contains “docked” palettes, or ones moved from the palette area to save screen space or because they are not frequently used.

The Toolbox icons provide one-click access to all Photoshop tools as well as color selection, masking, and image display commands. To use a tool, click on its icon. Many tools are grouped in the toolbox; to display tools that are grouped click and hold the tool icon.

For this introductory lesson, we will focus on the cloning, healing and magic wand selector tools. Other tools will be explored later.

The Palettes display many types of information about your file groups according to related functions. The “Navigator” palette group provides a thumbnail of the image and a slider bar that allows you to quickly zoom in and out; the “Info” panel provides contextually-sensitive information about the image, including color of the selected pixel, the tool currently selected, and more; and the “Histogram” panel provides a chart of the relative intensity of different tonal values in your image.

For this introductory lesson, the “History”, “Layers”, and “Channel” palettes will be most useful. The History palette allows you to jump to an earlier version of an image with the click of a button, to back up and try something a littler differently. Photoshop builds pictures according to layers, transparent and semi-independent “sheets” that contain visual elements that can be “stacked,” one on top of the other, to build a picture, and the Layers palette allows you to change the order of and apply different modes and styles to the layers. The Channel palette allows you to view the distinct color channels that make up the image. Channels are discussed in more detail below, while the second Photoshop lesson discusses layers with more depth.

IV Resolution, Resizing, Resampling, and Cropping
A raster graphic file’s size is absolute and is described by a fixed number of pixels wide by a fixed number of pixels tall. The resolution of that graphic is described by a ratio of the number of pixels that describes each square inch of that image. The higher the number of pixels that describe each inch of the image, the more crisp that image’s detail will be.

When resizing an image, you simply change the resolution so that the image appears larger or smaller. For example, and image that is 1500 x 3000 pixels will be 5” by 10” when printed at 300 pixels per inch (or dpi) but will be 100 x 300 inches if printed at 100 dpi. To resize an image in Photoshop, simple go to “Image>Image Size” and unclick the “Resample Image” checkbox. Resizing an image in this way is most useful for print output.

For the web, monitors cannot display all the pixel information that can be described by a high-quality printer. Therefore, the resolutions are much lower, and you may need to resample images that you have taken with a digital camera or scanned. The standard for web is 72dpi graphics, which is the resolution of Macintosh monitors. 96 dpi is the resolution standard for PC monitors, but the difference is not significant enough to cause a problem except for extremely fine line art—the images simply display slightly smaller on PCs. In order to convert higher-resolution images to web resolution, it is necessary to get rid of the extra pixels; however, simply discarding them will mess up the image. Therefore, Photoshop has created a resample feature in the “Image>Image Size” menu that allows you to change the overall number of pixels in an image while compensating for the pixels lost or added (more on this later). The resample command has several algorithms that can be used for different kinds of images. Bicubic is the default and tends to create smooth transitions between pixels. Bicubic smoother is another good option for upsampling images (that is, adding pixels), and bicubic sharpener is a good choice for downsampling (or removing pixels from) an image.

As a rule of thumb, it is best to work at the highest resolution possible (within reason) and later to reduce to the output resolution. The reason for this rule is twofold: the more pixels you have to work with, the more you can zoom in and do very detailed work, and Photoshop is not very good at “inventing” (also known as interpolating) pixels that are not there in the event that you decide to make a 300X500 pixel image 900X1500 pixels.

Another way to change the number of pixel that make up an image is to crop it, which simply means to remove pixels outside of a certain area. Cropping allows you to radically change the composition of the image. You can crop in three ways: by changing the “Image>Canvas Size” option, which does not give you very much control; by using the “Crop” tool, which allows you to preview, rotate, and distort your cropped area, and using the “Image>Trim” option, which removes pixels on the edge of an image that are transparent or of a certain color.

V Color Modes & Color Spaces
Photoshop allows you to create images in six different color modes. Each color mode works according to the principle of reproducing an image on different color channels, which when combined produce the image that you see. However, the image you see is (usually) actually multiple grayscale images laid on top of each other. While each color mode has its place, the most common and widely accepted color mode for on-screen editing and web output is RGB.

RGB stands for red, green, and blue and it works according to the same principles as light. RGB and light both operate according to an additive process: when you add higher levels of each component color, the resultant color is lighter, with white being the mixture of all colors. All monitors, projectors, televisions, stage lights, etc. use this additive process, which is why it is used for web graphics. It is useful for editing images because it provides an unmatched range of intensity; however, it displays brighter and richer colors than printers can print, and images for output to print must be converted to another mode called CMYK.

CMYK stands for cyan, magenta, yellow, and black and work according to the same subtractive process as visual perception and paint mixing, that is, that objects appear to be a particular color because they reflect that color of light and absorb (subtract) other colors. CMYK is the opposite of RGB in that a greater intensity of the colors in CMYK produces darker colors, while white is the absence of pigment. CMYK cannot produce the same range of color (called a gamut) that RGB can produce. CMYK is used primarily for conversion to print output and will not be covered in this course.

Lab stands for luminosity, “a” channel, and “b” channel, and it is a excellent hybrid between RGB and CMYK because it has the ability to replicate all the colors in both modes. It is primarily used for high-end print applications that require a color separation process and will not be covered in this course.

Indexed Color is a mode that strips an image of everything but its most essential colors. It is not highly editable and was primarily used before the advent of the “Save for Web” options. Today, it is rarely used, as most of its functionality has been moved to “Save for Web” options for gifs. We will cover these options when we discuss preparing graphics for the Web.

Grayscale is a mode that generates a black and white image by weighing the overall value of the brightness of each color channel. It produces very flexible, broadly compatible, and cheap-to-print images, but it is not frequently used for the Web.

In Photoshop, a Bitmap is an image that is rendered entirely by all-black or all-white pixels (1-bit. hence the name). It is really only useful in gaining greater control over the printing of a grayscale image, and we will not discuss it in this class. Keep in mind that in the non-Photoshop world, a bitmap refers to any pixel-based graphic.

It’s also worth noting here that, in addition to the color mode of particular images, Photoshop manages the appearance and tracking of the colors while you are working in order to accurately reflect what the image will look like in its final form. This is called a color space. You can check and change the color space by going to “Edit>Color Settings.” You want to make sure your main setting is “North America Web/Internet” and that the working space is set to sRGB, which is the space most digital cameras and displays use.

VI Color Channels in RGB
Photoshop treats a full-color RGB image not as a single collection of pixels but as three different grayscale images that are rendered in the appropriate color and additively combine to produce the full-color image your see. To view your color channels (and to understand this process better), click on the “channels” palette tab and change the visibility setting of the channels by clicking on or off the eye icon. You will find that the image appears gray when only one channel is visible but becomes (strangely) colored when a second one is visible. You can set all channels individually to visible but select only one channel (that is, click in the box with the channel’s name so that it is highlighted, for the purposes of editing just the Red, Green or Blue parts of the image.

Keep in mind that all changes you might make to images to adjust or create effects can also be applied to JUST ONE color channel. This can create very accurate color adjustments or rather interesting effects. When converting to grayscale, you can also simply delete unwanted color channels, so it is worth previewing to see which one is the most visually compelling.

VII Image Adjustment
Image adjustment is an art, not a science. While it is very easy to see what is wrong with an image, the particular solution will vary according to the artist and the purpose of the image. That said, these are the primary brightness and color adjustment tools that are used with Photoshop. They can all be found in the “Image>Adjustment” pull-down menu.

As the name implies, the “auto” commands automatically adjust the contrast, color and RBG levels of your image. They work very well for some images and quite badly for others. They are worth trying out to see if they give you good effects, but they are only a place to start, not to end.

Brightness Adjustments
The Levels command is one of the most powerful image correction tools in Photoshop. To understand how it works, however, it is necessary to know how to read a Histogram, which is a graph depicting the relative intensity of different values and color intensities in your image (e.g darks, midrange, bright). Where a great deal of mass appears on the brightness scale, a large mass of pixels share that brightness value. For example, in an image with a large, white area, a large mass will be concentrated at the extreme right side of the histogram. Conversely, if an image lacks a particular value, little or no mass will appear at that point on the scale. The histogram palette that can be expanded to view the histogram for each RGB channel; opening the Levels dialog box displays an editable histogram for the image overall or for individual channels.

The Levels dialogue box displays a histogram with two sets of adjustable slides. The top set of sliders contains three points corresponding to the darkest, middle, and brightest colors of the image. By raising the leftmost slider you increase the darks in the image; by lowering the slider on the far right you make the lightest values in the image still brighter. The middle slider controls the midtones; drag it to the right to raise the midtones (make them darker) and toward the left to decrease them (make lighter and lower contrast).

The lower slider in the Levels dialogue box controls the overall contrast of the image. Sliding the dark arrow up the scale lightens the darks, while sliding the white arrow down the scale darkens them, resulting in an image with less contrast.

Finally, Photoshop allow you to map certain values in the Levels dialogue box using the Eyedropper tool, which samples the color and intensity of a single pixel (or an average of 3 or 5 pixels, depending on the option selected by the main Eyedropper in the Toolbox). Click on the dark eyedropper icon and select the darkest color in your image to set as black. Everything as dark or darker than that value will be converted to black. Repeat using the midtones and highlights and the appropriate eyedropper tool.

Notice that making adjustments in the levels dialog box are reflected on the fly in the histogram palette and become permanent when finally approved by hitting “Return.”

The Curves command is another very powerful image correction tool that allows you to change the relative brightness of any value in an image. By default, the upper left hand corner of the curves diagram box represents the brightest values, while the lower left hand corner represents the darkest values. By clicking on the straight line, you can add editable points to the curve, either increasing or decrease the levels of dark or bright values in a smooth line with one another. Like the Levels setting, Curves allows you to pinpoint the darkest, midrange, and brightest values in an image and generate your curves settings based on those. Unlike levels, Curves allows you to arbitrarily map brightness and darkness by adding many random points to the curve or by drawing a curve with the pencil tool, thereby creating more extreme effects.

You can adjust the overall exposure of your photograph with three easy sliders. The exposure slider either raises or lowers the overall exposure; the offset slider either decreases contrast and makes the image more gray (by increasing) or increases contrast and darkens the image (by moving the slider to the left); the gamma slider adjusts the brightness of the midtones, either increasing them (making lighter) or decreasing them (making them darker). Like the curves and levels, the Exposure command allows you to manually select dark, midtone, and light points using the eyedropper tool.

Color Correction
One of the simplest ways to correct an overall color cast is to use a Photo Filter, which replicates a time-honored practice of photographers to place filters over their cameras to compensate for certain lighting types (known as color temperatures, with bluish light being cooler and yellow or reddish light being warmer). Therefore, the warming filters tend to add yellow or reddish color to the image, neutralizing the blues, while cooling filters bring out blue tints. There are also a number of color filter presets to choose from, and you can select your own color to use as a filter. The intensity of the filter effect can be increased or reduced by adjusting the density, and the “preserve luminosity” option prevents the filter from darkening your image overall.

Another easy way to adjust the overall color of the image is to use the Variations options, which permit you to preview thumbnails of the image with different colors enhanced. To select a particular image, simply click on it, and additional options for variations emerge. Like the Levels commands, Variations allows you to select the image overall, the shadows, or the midtones for adjustment. You can also adjust the saturation of the image using variations. The “fine/course” slider sets the degree of difference between each generation of color variation. Variations can cause the colors to exceed the maximum permissible range (or gamut) of the color space, which is signaled by bright, inverted colors in the thumbnail. This should be avoided because out-of-gamut colors will display flat in your output file.

The Hue/Saturation command allows you to change the overall colorcast, to change specific colors, or to reduce the intensity of colors in an image. It is composed of three slides: the hue slider, which alters the hue along a range of color values (that can be adjusted by apple-clicking along the slider), the saturation, which alters the intensity of the colors, and the lightness, which adjusts the overall lightness of the image and can permanently destroy detail if used poorly. The “edit” option allows you to only adjust particular color ranges (e.g. yellows, reds, etc.), which can be very useful for adjusting skin tones.

Very similar to the Hue/Saturation command is the Replace Color command, which permits you to make a selection of a particular color to adjust using an eyedropper tool and adjusting the “fuzziness” (similar to tolerance) to include a greater number of pixels in the selection to be replaced.

Corrective Filtering
Images captured with consumer-grade digital cameras tend to have certain consistent problems. The colors may appear washed out, but when you increase the saturation, they go quickly out of gamut; the standard jpeg compression (more on this in a future lesson) may reduce significant textural detail; or the on-camera flash may have flattened everything in the picture. These two corrective filtering techniques can help these common problems

To boost the saturation of a digital photo
1) In the Layers palette, click on the arrow to the top right and select “Duplicate Layer.”
2) Open the “Hue/Saturation” dialogue box and raise the saturation level to whatever you want, even if the image starts to look strange.
3) Apply “Filter>Noise>Median,” which averages the colors in an image. Set the radius to 4 or 5.
4) Apply “Filter>Blur>Gaussian” to soften the edges introduced to the image by the median filter.
5) Finally, in the Layers palette, click on the arrow to the top right and select “Blending Options>Color.” The two layers—the unfiltered, uncolored bottom layer and the blurry top layer—will be blended, creating an intensely colored yet detailed image.

To adjust the focus of a digital photo
1) In the Layers palette, click on the arrow to the top right and select “Duplicate Layer.”
2) Apply “Filter>Noise>Median” and set the radius to 2. This eliminates detail and smoothes out the rough sections (called artifacts) left over from the digital compression.
3) Apply “Filter>Blur>Gaussian” with a radius of 1 to blur the median filter slightly.
4) Apply “Filter>Sharpen>Unsharp Mask” with the maximum Amount of 500% and a radius of 1 (to un-do the blur).
5) In the Layers menu, lower the layer’s opacity to somewhere between 30 and 50% to mix with the underlying layer and express detail.
6) In the Layers menu, click on the arrow to the top right and choose “Merge Visible.”

VIII Photo Retouching
The primary photo touch-up tools are located in the Healing Brush Tool and the Clone Tool families. Options for tools can be selected and customized in the Option menu bar near the top of the workspace.

The Red-Eye Tool, which is located by default under the Healing Brush Tool, is the most straightforward tool. Simply click on the glowing eye to darken it. Options for this tool are limited to pupil size and darkness. If your subject is in a three-quarters view, remember to make the far pupil size smaller than the near pupil size to compensate for perspective.

The Clone Stamp Tool copies and replaces pixels from one area of an image to another to cover up unwanted content. It is a two-step process: first select the pixels to be sampled by Option+clicking, then either click with the mouse to leave one clone of the selected pixels or slide with the mouse while clicking to clone the selection across a larger area. By changing the size of the Brush, the brush Mode (to be discussed in more detail later), and the Opacity, you can create different blending effects, which is useful if you are trying to soften a hard shadow. If you want to clone from a single part of the image repeatedly, make sure the “Aligned” option is not selected.
The Healing Brush works similarly to the Clone Stamp Tool in that you select a reference point and then paint over problem areas in the photo. Unlike the Clone Stamp Tool, it automatically adjusts blending and lighting for the healed area. The types, modes and sizes of brushes are also selectable. For small blemishes that need healing, use the Spot Healing Brush, which doesn’t require a source point to be set but which replaces the selected pixels with content generated by neighboring pixels.

The Patch Tool allows you to copy and blend a larger image to cover up unsightly details or blemishes in a photograph.

VII Saving your Work
Photoshop supports more than 25 file formats. PSD is the native and proprietary file format, which means that it is the easiest format to use to save your projects and that almost no other software supports it. However, you should use it to save your in-progress documents for the following reasons:
• PSD supports the layers you use to build your image (unlike jpeg)
• PSD uses lossless compression, meaning that no data about the image is lost or thrown out in storing in this format (unlike jpeg)
• PSDs are infinitely re-editable as long as the layers are there.

It is always a good idea to save a “final” version in PSD format with all layers intact for yourself but flatten the image and export it to another high-quality format (like TIFF) for others. We will discuss saving for the web in another lesson.

DO NOT SAVE A WORK-IN-PROGRESS AS A JPEG. You will lose your layers, and the image will be compressed, losing quality. These quality losses will be amplified the more times you save.

We will learn about saving images for the Web in a later demonstration.

I Graphics Types
Broadly speaking, there are two types of graphics: vector graphics and raster graphics (also known as bitmaps).

Vector Graphics are built around lines and shapes that are mathematically defined. Because they are defined by a mathematical equation, they do not lose clarity or increase file size when the image is enlarged. They are very easily animated through such animation programs as Macromedia Flash.

Raster Graphics are built by thousands of square, colored dots called pixels that together describe the image. The larger the image, the more pixels it has, and the larger the file size. Raster graphics become pixilated, or show the ragged edges of pixels, when enlarged. Digital photographs and video are both built by pixels, which at high resolutions (or number of pixels per inch) and bit-depths (amount of data recorded per pixel per color channel) permit stunning color and photographic detail.

Photoshop traditionally has been a tool for creating and editing raster graphics, though more recent versions of the software have increased support for vector-based drawings and text.

II Organizing and Notating Your Images
Photoshop CS2 comes with an image organizer and selector called Bridge that helps you to organize, notate, and preview your image files. To access Bridge, launch Photoshop and go to “File>Browse.”

Opening the “Folders” tab will allow you to navigate to the location where your images are located, and browse-able thumbnails of the images will be displayed. Switching to “View>Filmstrip” will allow you to quickly tab through all images in the folder. The “View” pull-down menu will also allow you to sort your images according to type (vector vs. raster, etc.)

Bridge allows you to read and set metadata, keywords, and ratings for your digital images. Metadata is invisible information about your photographs appended to the image, such as file size and type, the date and time it was taken, the model of the camera, camera settings, and more. You can use the metadata box at the lower left hand side of the application window to add information to your images, such as where they were taken and by whom. The keywords tab allows you to add keywords to help organize your images. The “Label>Rating” pull-down menu allows you to rate each image.

Metadata, keywords, and ratings can be used along with standard prompts in Bridge’s “Find” to help your sort your images. In addition, if you amass a large collection of images, Bridge allows you to set favorites that you use again and again by dragging them into the “Favorites” panel.

Once you have organized and organized your images in Bridge, double-click on an image to open it in Photoshop.

III The Photoshop Workspace
The Photoshop workspace is divided into five main parts: the drop-down Menu Bar (located at the very top of the screen); the Options Bar (located just beneath the Menu Bar); the Toolbox (located at the extreme left of the workspace); the Image Window (in the center of the workspace, where the image is visible); and the Palettes (located by default at the right of the workspace). The locations of these windows can be changed by dragging them to a new location.

The Menu Bar provides most of Photoshop’s most sophisticated features, access to a built-in help feature, and pre-set workspaces providing hints for commonly used tools for given groups of tasks. For the purposes of image adjustment, go to “Window>Workspace>Color and Tonal Correction” or “Painting and Retouching.”

The Options Bar is a context-sensitive display that provides editable options for the tool currently selected from the Toolbox. It also contains “docked” palettes, or ones moved from the palette area to save screen space or because they are not frequently used.

The Toolbox icons provide one-click access to all Photoshop tools as well as color selection, masking, and image display commands. To use a tool, click on its icon. Many tools are grouped in the toolbox; to display tools that are grouped click and hold the tool icon.

For this introductory lesson, we will focus on the cloning, healing and magic wand selector tools. Other tools will be explored later.

The Palettes display many types of information about your file groups according to related functions. The “Navigator” palette group provides a thumbnail of the image and a slider bar that allows you to quickly zoom in and out; the “Info” panel provides contextually-sensitive information about the image, including color of the selected pixel, the tool currently selected, and more; and the “Histogram” panel provides a chart of the relative intensity of different tonal values in your image.

For this introductory lesson, the “History”, “Layers”, and “Channel” palettes will be most useful. The History palette allows you to jump to an earlier version of an image with the click of a button, to back up and try something a littler differently. Photoshop builds pictures according to layers, transparent and semi-independent “sheets” that contain visual elements that can be “stacked,” one on top of the other, to build a picture, and the Layers palette allows you to change the order of and apply different modes and styles to the layers. The Channel palette allows you to view the distinct color channels that make up the image. Channels are discussed in more detail below, while the second Photoshop lesson discusses layers with more depth.

IV Resolution, Resizing, Resampling, and Cropping
A raster graphic file’s size is absolute and is described by a fixed number of pixels wide by a fixed number of pixels tall. The resolution of that graphic is described by a ratio of the number of pixels that describes each square inch of that image. The higher the number of pixels that describe each inch of the image, the more crisp that image’s detail will be.

When resizing an image, you simply change the resolution so that the image appears larger or smaller. For example, and image that is 1500 x 3000 pixels will be 5” by 10” when printed at 300 pixels per inch (or dpi) but will be 100 x 300 inches if printed at 100 dpi. To resize an image in Photoshop, simple go to “Image>Image Size” and unclick the “Resample Image” checkbox. Resizing an image in this way is most useful for print output.

For the web, monitors cannot display all the pixel information that can be described by a high-quality printer. Therefore, the resolutions are much lower, and you may need to resample images that you have taken with a digital camera or scanned. The standard for web is 72dpi graphics, which is the resolution of Macintosh monitors. 96 dpi is the resolution standard for PC monitors, but the difference is not significant enough to cause a problem except for extremely fine line art—the images simply display slightly smaller on PCs. In order to convert higher-resolution images to web resolution, it is necessary to get rid of the extra pixels; however, simply discarding them will mess up the image. Therefore, Photoshop has created a resample feature in the “Image>Image Size” menu that allows you to change the overall number of pixels in an image while compensating for the pixels lost or added (more on this later). The resample command has several algorithms that can be used for different kinds of images. Bicubic is the default and tends to create smooth transitions between pixels. Bicubic smoother is another good option for upsampling images (that is, adding pixels), and bicubic sharpener is a good choice for downsampling (or removing pixels from) an image.

As a rule of thumb, it is best to work at the highest resolution possible (within reason) and later to reduce to the output resolution. The reason for this rule is twofold: the more pixels you have to work with, the more you can zoom in and do very detailed work, and Photoshop is not very good at “inventing” (also known as interpolating) pixels that are not there in the event that you decide to make a 300X500 pixel image 900X1500 pixels.

Another way to change the number of pixel that make up an image is to crop it, which simply means to remove pixels outside of a certain area. Cropping allows you to radically change the composition of the image. You can crop in three ways: by changing the “Image>Canvas Size” option, which does not give you very much control; by using the “Crop” tool, which allows you to preview, rotate, and distort your cropped area, and using the “Image>Trim” option, which removes pixels on the edge of an image that are transparent or of a certain color.

V Color Modes & Color Spaces
Photoshop allows you to create images in six different color modes. Each color mode works according to the principle of reproducing an image on different color channels, which when combined produce the image that you see. However, the image you see is (usually) actually multiple grayscale images laid on top of each other. While each color mode has its place, the most common and widely accepted color mode for on-screen editing and web output is RGB.

RGB stands for red, green, and blue and it works according to the same principles as light. RGB and light both operate according to an additive process: when you add higher levels of each component color, the resultant color is lighter, with white being the mixture of all colors. All monitors, projectors, televisions, stage lights, etc. use this additive process, which is why it is used for web graphics. It is useful for editing images because it provides an unmatched range of intensity; however, it displays brighter and richer colors than printers can print, and images for output to print must be converted to another mode called CMYK.

CMYK stands for cyan, magenta, yellow, and black and work according to the same subtractive process as visual perception and paint mixing, that is, that objects appear to be a particular color because they reflect that color of light and absorb (subtract) other colors. CMYK is the opposite of RGB in that a greater intensity of the colors in CMYK produces darker colors, while white is the absence of pigment. CMYK cannot produce the same range of color (called a gamut) that RGB can produce. CMYK is used primarily for conversion to print output and will not be covered in this course.

Lab stands for luminosity, “a” channel, and “b” channel, and it is a excellent hybrid between RGB and CMYK because it has the ability to replicate all the colors in both modes. It is primarily used for high-end print applications that require a color separation process and will not be covered in this course.

Indexed Color is a mode that strips an image of everything but its most essential colors. It is not highly editable and was primarily used before the advent of the “Save for Web” options. Today, it is rarely used, as most of its functionality has been moved to “Save for Web” options for gifs. We will cover these options when we discuss preparing graphics for the Web.

Grayscale is a mode that generates a black and white image by weighing the overall value of the brightness of each color channel. It produces very flexible, broadly compatible, and cheap-to-print images, but it is not frequently used for the Web.

In Photoshop, a Bitmap is an image that is rendered entirely by all-black or all-white pixels (1-bit. hence the name). It is really only useful in gaining greater control over the printing of a grayscale image, and we will not discuss it in this class. Keep in mind that in the non-Photoshop world, a bitmap refers to any pixel-based graphic.

It’s also worth noting here that, in addition to the color mode of particular images, Photoshop manages the appearance and tracking of the colors while you are working in order to accurately reflect what the image will look like in its final form. This is called a color space. You can check and change the color space by going to “Edit>Color Settings.” You want to make sure your main setting is “North America Web/Internet” and that the working space is set to sRGB, which is the space most digital cameras and displays use.

VI Color Channels in RGB
Photoshop treats a full-color RGB image not as a single collection of pixels but as three different grayscale images that are rendered in the appropriate color and additively combine to produce the full-color image your see. To view your color channels (and to understand this process better), click on the “channels” palette tab and change the visibility setting of the channels by clicking on or off the eye icon. You will find that the image appears gray when only one channel is visible but becomes (strangely) colored when a second one is visible. You can set all channels individually to visible but select only one channel (that is, click in the box with the channel’s name so that it is highlighted, for the purposes of editing just the Red, Green or Blue parts of the image.

Keep in mind that all changes you might make to images to adjust or create effects can also be applied to JUST ONE color channel. This can create very accurate color adjustments or rather interesting effects. When converting to grayscale, you can also simply delete unwanted color channels, so it is worth previewing to see which one is the most visually compelling.

VII Image Adjustment
Image adjustment is an art, not a science. While it is very easy to see what is wrong with an image, the particular solution will vary according to the artist and the purpose of the image. That said, these are the primary brightness and color adjustment tools that are used with Photoshop. They can all be found in the “Image>Adjustment” pull-down menu.

As the name implies, the “auto” commands automatically adjust the contrast, color and RBG levels of your image. They work very well for some images and quite badly for others. They are worth trying out to see if they give you good effects, but they are only a place to start, not to end.

Brightness Adjustments
The Levels command is one of the most powerful image correction tools in Photoshop. To understand how it works, however, it is necessary to know how to read a Histogram, which is a graph depicting the relative intensity of different values and color intensities in your image (e.g darks, midrange, bright). Where a great deal of mass appears on the brightness scale, a large mass of pixels share that brightness value. For example, in an image with a large, white area, a large mass will be concentrated at the extreme right side of the histogram. Conversely, if an image lacks a particular value, little or no mass will appear at that point on the scale. The histogram palette that can be expanded to view the histogram for each RGB channel; opening the Levels dialog box displays an editable histogram for the image overall or for individual channels.

The Levels dialogue box displays a histogram with two sets of adjustable slides. The top set of sliders contains three points corresponding to the darkest, middle, and brightest colors of the image. By raising the leftmost slider you increase the darks in the image; by lowering the slider on the far right you make the lightest values in the image still brighter. The middle slider controls the midtones; drag it to the right to raise the midtones (make them darker) and toward the left to decrease them (make lighter and lower contrast).

The lower slider in the Levels dialogue box controls the overall contrast of the image. Sliding the dark arrow up the scale lightens the darks, while sliding the white arrow down the scale darkens them, resulting in an image with less contrast.

Finally, Photoshop allow you to map certain values in the Levels dialogue box using the Eyedropper tool, which samples the color and intensity of a single pixel (or an average of 3 or 5 pixels, depending on the option selected by the main Eyedropper in the Toolbox). Click on the dark eyedropper icon and select the darkest color in your image to set as black. Everything as dark or darker than that value will be converted to black. Repeat using the midtones and highlights and the appropriate eyedropper tool.

Notice that making adjustments in the levels dialog box are reflected on the fly in the histogram palette and become permanent when finally approved by hitting “Return.”

The Curves command is another very powerful image correction tool that allows you to change the relative brightness of any value in an image. By default, the upper left hand corner of the curves diagram box represents the brightest values, while the lower left hand corner represents the darkest values. By clicking on the straight line, you can add editable points to the curve, either increasing or decrease the levels of dark or bright values in a smooth line with one another. Like the Levels setting, Curves allows you to pinpoint the darkest, midrange, and brightest values in an image and generate your curves settings based on those. Unlike levels, Curves allows you to arbitrarily map brightness and darkness by adding many random points to the curve or by drawing a curve with the pencil tool, thereby creating more extreme effects.

You can adjust the overall exposure of your photograph with three easy sliders. The exposure slider either raises or lowers the overall exposure; the offset slider either decreases contrast and makes the image more gray (by increasing) or increases contrast and darkens the image (by moving the slider to the left); the gamma slider adjusts the brightness of the midtones, either increasing them (making lighter) or decreasing them (making them darker). Like the curves and levels, the Exposure command allows you to manually select dark, midtone, and light points using the eyedropper tool.

Color Correction
One of the simplest ways to correct an overall color cast is to use a Photo Filter, which replicates a time-honored practice of photographers to place filters over their cameras to compensate for certain lighting types (known as color temperatures, with bluish light being cooler and yellow or reddish light being warmer). Therefore, the warming filters tend to add yellow or reddish color to the image, neutralizing the blues, while cooling filters bring out blue tints. There are also a number of color filter presets to choose from, and you can select your own color to use as a filter. The intensity of the filter effect can be increased or reduced by adjusting the density, and the “preserve luminosity” option prevents the filter from darkening your image overall.

Another easy way to adjust the overall color of the image is to use the Variations options, which permit you to preview thumbnails of the image with different colors enhanced. To select a particular image, simply click on it, and additional options for variations emerge. Like the Levels commands, Variations allows you to select the image overall, the shadows, or the midtones for adjustment. You can also adjust the saturation of the image using variations. The “fine/course” slider sets the degree of difference between each generation of color variation. Variations can cause the colors to exceed the maximum permissible range (or gamut) of the color space, which is signaled by bright, inverted colors in the thumbnail. This should be avoided because out-of-gamut colors will display flat in your output file.

The Hue/Saturation command allows you to change the overall colorcast, to change specific colors, or to reduce the intensity of colors in an image. It is composed of three slides: the hue slider, which alters the hue along a range of color values (that can be adjusted by apple-clicking along the slider), the saturation, which alters the intensity of the colors, and the lightness, which adjusts the overall lightness of the image and can permanently destroy detail if used poorly. The “edit” option allows you to only adjust particular color ranges (e.g. yellows, reds, etc.), which can be very useful for adjusting skin tones.

Very similar to the Hue/Saturation command is the Replace Color command, which permits you to make a selection of a particular color to adjust using an eyedropper tool and adjusting the “fuzziness” (similar to tolerance) to include a greater number of pixels in the selection to be replaced.

Corrective Filtering
Images captured with consumer-grade digital cameras tend to have certain consistent problems. The colors may appear washed out, but when you increase the saturation, they go quickly out of gamut; the standard jpeg compression (more on this in a future lesson) may reduce significant textural detail; or the on-camera flash may have flattened everything in the picture. These two corrective filtering techniques can help these common problems

To boost the saturation of a digital photo
1) In the Layers palette, click on the arrow to the top right and select “Duplicate Layer.”
2) Open the “Hue/Saturation” dialogue box and raise the saturation level to whatever you want, even if the image starts to look strange.
3) Apply “Filter>Noise>Median,” which averages the colors in an image. Set the radius to 4 or 5.
4) Apply “Filter>Blur>Gaussian” to soften the edges introduced to the image by the median filter.
5) Finally, in the Layers palette, click on the arrow to the top right and select “Blending Options>Color.” The two layers—the unfiltered, uncolored bottom layer and the blurry top layer—will be blended, creating an intensely colored yet detailed image.

To adjust the focus of a digital photo
1) In the Layers palette, click on the arrow to the top right and select “Duplicate Layer.”
2) Apply “Filter>Noise>Median” and set the radius to 2. This eliminates detail and smoothes out the rough sections (called artifacts) left over from the digital compression.
3) Apply “Filter>Blur>Gaussian” with a radius of 1 to blur the median filter slightly.
4) Apply “Filter>Sharpen>Unsharp Mask” with the maximum Amount of 500% and a radius of 1 (to un-do the blur).
5) In the Layers menu, lower the layer’s opacity to somewhere between 30 and 50% to mix with the underlying layer and express detail.
6) In the Layers menu, click on the arrow to the top right and choose “Merge Visible.”

VIII Photo Retouching
The primary photo touch-up tools are located in the Healing Brush Tool and the Clone Tool families. Options for tools can be selected and customized in the Option menu bar near the top of the workspace.

The Red-Eye Tool, which is located by default under the Healing Brush Tool, is the most straightforward tool. Simply click on the glowing eye to darken it. Options for this tool are limited to pupil size and darkness. If your subject is in a three-quarters view, remember to make the far pupil size smaller than the near pupil size to compensate for perspective.

The Clone Stamp Tool copies and replaces pixels from one area of an image to another to cover up unwanted content. It is a two-step process: first select the pixels to be sampled by Option+clicking, then either click with the mouse to leave one clone of the selected pixels or slide with the mouse while clicking to clone the selection across a larger area. By changing the size of the Brush, the brush Mode (to be discussed in more detail later), and the Opacity, you can create different blending effects, which is useful if you are trying to soften a hard shadow. If you want to clone from a single part of the image repeatedly, make sure the “Aligned” option is not selected.
The Healing Brush works similarly to the Clone Stamp Tool in that you select a reference point and then paint over problem areas in the photo. Unlike the Clone Stamp Tool, it automatically adjusts blending and lighting for the healed area. The types, modes and sizes of brushes are also selectable. For small blemishes that need healing, use the Spot Healing Brush, which doesn’t require a source point to be set but which replaces the selected pixels with content generated by neighboring pixels.

The Patch Tool allows you to copy and blend a larger image to cover up unsightly details or blemishes in a photograph.

VII Saving your Work
Photoshop supports more than 25 file formats. PSD is the native and proprietary file format, which means that it is the easiest format to use to save your projects and that almost no other software supports it. However, you should use it to save your in-progress documents for the following reasons:
• PSD supports the layers you use to build your image (unlike jpeg)
• PSD uses lossless compression, meaning that no data about the image is lost or thrown out in storing in this format (unlike jpeg)
• PSDs are infinitely re-editable as long as the layers are there.

It is always a good idea to save a “final” version in PSD format with all layers intact for yourself but flatten the image and export it to another high-quality format (like TIFF) for others. We will discuss saving for the web in another lesson.

DO NOT SAVE A WORK-IN-PROGRESS AS A JPEG. You will lose your layers, and the image will be compressed, losing quality. These quality losses will be amplified the more times you save.

We will learn about saving images for the Web in a later demonstration.

Exercise:
Enhanced Self-Portrait
Using Photoshop's image adjustment, corrective filtering, and photo retouching capabilities, enhance and existing portrait of yourself. You will get more points for enhancing a really troubled photo than a nice studio portrait.

Copy your completed image (saved as a PSD at no smaller than 1200 x 1600) as well as your source image to the class share. Due February 2.

Class Notes: 1/19/06

2006-01-19T18:38:00.000-08:00

1) Check on server access & retrieve snapshots
2) Discuss Wise introduction
3) Go over elements of a reading response
4) Skills & Knowledge pre-test

Homework (optional): bring in a digital photo you'd like to work with rather than the snapshot I took the other day.

just to check if it works

2006-01-19T15:58:00.000-08:00

allen

mcma364

2006-01-18T12:18:00.000-08:00

hello everyone, is this thing on....check 1, 2 check 1, 2

Trying it out

2006-01-18T05:23:00.000-08:00

Just signed in and wanted to try it out.

Class Notes 1/17/06

2006-01-17T17:23:00.000-08:00

Introduction
send a sheet of paper around for email addresses

Go over syllabus/website

Introduction of teacher and students in the class

Demo Blogger (send invites) and set up flickr accounts

Paperwork:
C&P equipment room cards
Server access sheets (if we have them)
Questionnaire

While students are working on paperwork: photographs

in-class demo blog

2006-01-17T16:41:00.000-08:00

this is the demo for the first day of class

test

2006-01-12T21:00:00.000-08:00

this is a test post