JRN338: The news graphics class
Spring semester, 2010 (SS10)

Wikispaces help

• Curriculum
Week 1: INTRO TO COURSE
Week 2: ILLUSTRATOR: MAPS
Week 3: ILLUSTRATOR: CHARTS



Week 1:


Wednesday, 1/1
INTRO TO COURSE

• Class expectations. Homework, format for naming and submitting graphics
• Talks: what is/isn't a graphic that communicates information.
• Break apart a graphic/page/website/motion graphic: type, color, map, chart, diagram, etc.
• Story about me exercise

Homework:
• Find an infographic that is legible, evaluate it and write a half page critique (approx. 250 words) of the graphic using your judgment as a typical reader (there is an example of a good critique under the Homework/Critique a Graphic tab at left):
Consider these issues:
What works, what doesn't.
What confused you?
What was left out?
What questions didn't it answer?
What do you think about the colors, the usability, the flow of information, the logic, the design.
Was it effective, instructive? Etc.
http://infographicsnews.blogspot.com/

Place critique and graphic into class wiki: Cut and paste your critique on the "Critique page" under the "Homework" link at left. At the top of your critique include your full name and a link to the largest (legible) version of the graphic you chose. (Do not embed the graphic itself on the page).




Week 2:

Wednesday, 1/8

• Review critique graphics
• Overview of class wiki site.
• Go to Wikspaces.com and create your Wikispaces site. Then, send a request to join this site (www.JRN303.wikispaces.com) by clicking on the "Join this Wiki" link at top-left navigation bar.

MAPS IN ADOBE ILLUSTRATOR
• Maps presentation
• Adobe Illustrator overview.
• Make a Michigan map
• Make a Lansing map

Homework:
• Finish up your Michigan and Lansing maps.
• Place both Michigan and Lansing maps into class wiki: Click on "Homework" link in navigation bar at left and select the "Map page" link. Using the "File" tab at top of page, insert your maps onto the "Map page" under the "Homework" link at left. Make sure you put your full name above your map in the type style shown.


Week 3:

Monday, 1/13
CHARTS IN ADOBE ILLUSTRATOR
• Charts presentation
• Make a bar, pie and line chart.
• Package three charts together

Homework:
Find data pertaining to a topic (cancer, home prices, newspaper sales, etc.) and plot three charts. Package them together with a headline and subhead. Include a source line at the bottom.

If needed, refresher tutorials:
How to make a bar chart in Adobe Illustrator, Part 1
How to make a bar chart in Adobe Illustrator, Part 2




Wednesday:


DRAWING IN ADOBE ILLUSTRATOR
http://vector.tutsplus.com/tutorials/tools-tips/illustrators-pen-tool-the-comprehensive-guide/
• Trace/label an object
• Isometric drawing

Homework:
• Finish your isometric drawing, color and label
• Upload to wiki (page name: Isometric drawing in Illustrator)

Also:
• Do this Illustrator type tutorial
Illustrator type tutorial, Part 1
Illustrator type tutorial, Part 2



Week 3: 1/25




GRAPHIC DESIGN

Monday:
• Presentation/discussion: Graphic design
  • basic principles: balance, hierarchy, proximity, alignment, consistency, contrast, white space
  • on design principles.


Homework:
• Assemble a single page or ad design using the elements from three different magazine pages or ads.

Wednesday:
• Working with type and the grid. terminology, kerning, leading, letter spacing, paragraph width, accent, point size, hierarchy, typeface, font, family, serif, san serif, color, condensed, regular, bold. http://www.designingwithtype.com/5/home.php
Presentation/discussion: Graphic design: Proximity, visual hierarchy, symmetry/asymmetry, repetition, unity, contrast, dynamics, emphasis)
• Position shapes in InDesign to reflect the placements discussed in class
• Overview of InDesign.

Homework:



Week 4: 2/1 (turn in sketchbooks)

INFORMATION GRAPHICS

Monday:
• Review Alaska ads
• Presentation/discussion:
  • Benefits of visualizing information. Ways to communicates information visually. Types of graphics: map, chart, diagram, etc.
  • Elements of information design and graphics: Tufte. Redundancy, multiples, storytelling, cause and effect, comparing and contrasting, grouping, sorting, connecting, etc.,

Homework:
• Using InDesign, create a five-page document illustrating some aspect of "you" utilizing the following five elements. Do not design into a layout. Once concept per page:
  1. compare and contrast
  2. cause and effect
  3. measure
  4. locate
  5. group

Wednesday:
• Organize the homework elements into a single graphic. Label.

Homework:
• Design an 8 1/2" x 11 " horizontal or vertical description about an object that explains it. Use photographic images from Google, adhere to a grid structure, no superfluous ornament, use a sans serif typeface
• Upload wiki (page name: Object layout) (Make sure to save as a PDF file with your full name!)


Week 5: 2/8, 2/10

THE COMPUTER DRAWN IMAGE

Monday:• Adobe Illustrator overview.
• Draw elements in Adobe Illustrator.
http://vector.tutsplus.com/tutorials/tools-tips/illustrators-pen-tool-the-comprehensive-guide/

Homework:
• Illustrator tutorial

Wednesday:
Adobe Illustrator: isometric drawing

Homework:
• Finish your isometric drawing, color and label
• Upload to wiki (page name: Isometric drawing in Illustrator)


Week 6: 2/15, 2/17 (turn in sketchbooks)

QUANTIFYING WITH CHARTS

Monday:
• The world of charts and graphs. Looking at data and graph styles, icons, etc.
• Make a chart in Adobe Illustrator.

Homework:
• Create a bar, line and pie on a single topic. You can find data at the Census Bureau, Bureau. of Labor statistics, American Cancer Society, etc.
http://www.census.gov/
http://www.census.gov/ipc/www/idb/
• Design them into the precise grouping as reference file on Angel
• Upload to wiki. (page name: Three charts)

BREAKING DOWN CONTENT FOR A GRAPHIC

Wednesday:
• Introduce graphic project
• More charts in Illustrator: resizing, putting into layout, text

Homework:
You will take the first steps toward the creation of an 11-inch x 17-inch graphic on the subject of your choice.
The graphic must contain the following elements:
• A title
• 5 chapters (or sections)
• at least one map
• at least one chart
• at least one diagram

Here is a link to several graphics done by professionals for you to get ideas from

Your homework for this weekend will be to research, refine and lay out your idea:

Here are the steps you need to do:

1) Brainstorm with Post it notes:
• Write down everything you can think of about your topic onto post-it notes. One idea per note.
• Find logical groupings: these all deal with financing, these with logistics, these with history, these with ... Try to limit the number of groups you make to between five and ten.
• Research your subject further and add to your groupings with new information and detail

2) Make decisions:
• Now that you can see your topic laid out before you in organized groups, make decisions about what you want to include in your graphic
• Ask yourself what story you want to tell here, and who your audience is
• Edit your content. Let the necessary speak
• Take away the post-it notes that you no longer need.
• The groupings that remain will be your five chapters/sections in your graphic

3) Create a mind map from your groupings: (USE this site to create your mind map: http://bubbl.us/)
• Put the main theme of your topic in the center
• Surround it with your main chapter topics, and more if you like. You can still continue to make decisions here. It's a process!
• Expand on these with the details from your post-it notes and add new ideas where detail is required.

HERE'S MIND MAP made on Bubbl.us

[[image:file/view/Marla_Kambach_dance_mind_map_1.png width="840" height="471"]]

4) Lay out a design in Adobe InDesign or Illustrator:
• What is your plan to package your five sections together?
• Decide what is most important and what is least important.
• If the reader had to walk away with just one thing, what would that be? What ever you decide is your most important element.

5) Think about these things when doing your layout:
• Use a grid. Five to six columns is best. Link to some grid information
• Keep the layout simple. Remember the dragon hands
• Lay your graphic out hierarchically, with important topics at the top
• Have a dominant object, or area of focus
• Keep the typography simple. One or two fonts, a serif and san serif
• Use color intelligently, for navigation, to attract the eye Link to good color article






Week 7: 2/22, 2/24

GRAPHIC

Monday:
• Review and critique layouts for your graphics
• Use remaining time to refine your design based on critiques

Homework:
• Continue to refine your design. Begin to generate elements for your graphic.

Wednesday:
• Work on your graphics

Homework:
• Type tutorial in Adobe Illustrator:
Type tutorial part 1
Type tutorial part 2

You will need this image for your tutorial. Right click on it and save it to your desktop. Place into Illustrator on it's own layer and copy the type according to the video tutorials above.
[[image:file/view/Illustrator_type_tool_tutorial_BLUE_CAR.jpg width="714" height="332"]]
• Upload to wiki (page name: Street map)


Week 8: 2/29, 2/30

PROJECT GRAPHIC CONTINUED
Monday:
Work on your graphics. Instructor will review them with you one-on-one

Homework:
Continue building elements for graphic.

Wednesday:
Work on your graphics. Instructor will review them with you one-on-one

Homework:
GIS map
• Upload to wiki (page name: Data map)


Spring Break



Week 9: 3/15, 3/17

Here is a US map you can use in Illustrator. You must draw individual states.



PROJECT GRAPHIC CONTINUED
Monday:
• Adobe Illustrator. Refresher: Divide into grid. How to modify charts and maps.
• Review layouts of project graphics with students.

Homework:
Continue on project graphic

Wednesday:
• Adobe Illustrator. Refresher.
• Work on project graphic.

Homework:
• Prepare project graphic for brief one-on-one critique on Monday. In this I expect to see all of your content presented in some form. Actual charts plotted, maps drawn, text written. Final graphic will be due on Wed.



Week 10: 3/29, 3/31

PROJECT GRAPHIC
Monday:
Critique project graphics one on one

Homework:
• Finish graphics

Wednesday:
• Project graphics due
• Critique project graphics

Homework:
This weekend please log into Lynda.com (you'll need to find the invitation I sent you), pay your 30 bucks and do this tutorial: "Flash CS4 Professional Essential Training" which consists of several short videos.

In order to understand this you will need to do more than just watch the videos. Download the exercise files by clicking on the tab at the top of the tutorial page
[[image:file/view/Picture_290.png width="572" height="328"]]
Try out the things they're showing you in Flash. This can take you anywhere from two to several hours, depending on your commitment to learning. You can do it once, or divide it up.

In this tutorial you can skip:
#2 Drawing in Flash
#8 Working with Bones
#9 Working with 3D elements

Please note that I will assume all of you have done this tutorial by class time on Monday. If you haven't, you will be left behind.


Week 12:

Monday:
• Finish critiquing final print graphics
• Make a simple website in Flash


NOLS photos


Homework:
• Continue with Lynda tutorial "Creating a First Web Site with Flash CS4 Professional", only doing numbers 0-3 (ending before video section)
• In Illustrator, design a simple three page website, similar to what was shown in class and attached above.

Now, upload your slide show to your MSU AFS server space


What is your AFS space? Called the MSU Andrews File Server (AFS), this is your personal online server space, and every student has one. You only need your MSU login and password to access it. (You cannot upload a Soundslides project directly to your Wiki, a Wordpress blog, Facebook or any other type of commercial domain. It must be uploaded directly to a personal server space (like AFS or your own domain that you may have purchased for your own website) that you can access and then from there embedded into your wiki.

You can upload to your AFS server two ways, depending on whether you are ON campus of OFF campus:

(Here are some helpful links beyond the instructions below if you need them, including how to use Netfiles for accessing AFS if you like: http://techbase.msu.edu/article.asp?id=2468#s53070)

How to upload to AFS from ON campus:

  1. Select “Connect to server” from the “Go” menu in the Finder.
  2. Type in the address afs.msu.edu
  3. Enter you MSU mail ID and password
  4. Click on your MSU mail name to open your personal AFS space.
  5. Find the folder called "web"
  6. Go to your Flash document: select File/Publish, which will create two new documents in your Flash project folder, one with a .swf designation and the other .html. Drag both files into the "Web" folder in your AFS space
  7. Now, test your Flash project in a browser! There are two URLs you can type in to see it and both will work. The only difference between them is one has the word "user" in it and the other uses the ~ symbol instead.

So my Nols site would be written like this: https://www.msu.edu/user/gudek/nols.html

Or you can substitute "user" for the ~ symbol, which would look like this: https://www.msu.edu/~gudek/nols.html

How to upload when OFF campus:

If you are going to upload your final Soundslides project from off campus, you will not be able to access your AFS folder using "Go", so you will need to use what's called FTP software. But all it does is access your AFS space, after which you perform the same steps from #5 above, under How to upload to AFS from ON Campus"

FTP, which stands for "File Transfer Protocol", is free and there are different ones available for the Mac and for the PC. I prefer to use Fetch for the Mac, and show below how that works.

Download free FTP software for uploading files to your AFS space:

I explain how to upload using Fetch below. For more information on uploading to AFS using Fetch and Filezilla, go to:
Uploading files to your AFS space: Read section, "Using FTP"

Filezilla is recommended for the PC, and here is a tutorial for that: How to use Filezilla to upload to the web


How to upload to Fetch for the Macintosh:

  1. With both Fetch and Filezilla, you will need to log into your personal AFS space (what these FTP softwares refer to as the "host"):
    Host name: afs.msu.edu
    User name: MSU NetID
    Password: ••••••

    Here is a screen shot of Fetch:

    Picture_288.png
    Picture_288.png


  2. You will now be inside of your AFS space.
    NOTE! EVERYTHING FROM THIS POINT ON IS IDENTICAL TO THE SECTION ABOVE FOR UPLOADING ON CAMPUS.
  3. Find the folder called "web"
  4. Drag the folder called "publish _to_web" (inside your Soundslides project folder) into the "web" folder in your AFS space.
  5. You will want to rename the "publish _to_web" folder something that reflects what your slide show is about. In my case, since it was about my family, I renamed it "gudes" by dragging across the words "publish _to_web" and typing it. Make sure it is one word or if multiple words, you will need to use the underscore character to link the words together.
  6. Now, test your slide show in a browser! There are two URLs you can type in to see it and both will work. The only difference between them is one has the word "user" in it and the other uses the ~ symbol instead.

http://msu.edu.user/your msu mail ID/name of soundslides folder in AFS/ (the one you renamed from "publish_to_web")

So my Gude family video would be written like this: https://www.msu.edu/user/gudek/gudes/

http://msu.edu/~your msu mail ID/name of soundslides folder in AFS/ (the one you renamed from "publish_to_web")

So my Gude family video would be written like this: https://www.msu.edu/~gudek/gudes/


FINALLY: TEST YOUR LINK, THEN UPLOAD TO ANGEL AND PLACE ON YOUR WIKI PAGE


Wednesday:
• Look at various kinds of motion graphics, including those from last semester:
How to storyboard a motion graphic.

Homework:
• Flash tutorial 2





Week 13–14: 3/22-4/23

WORK ON FINAL PROJECT GRAPHICS

Submit outline, Week 11
(page name: Final project outline)


Week 15: 4/26

CRITIQUE PROJECTS