Thursday, January 31, 2013

How to use Photoshop CS6 to erase unwanted photo background

So I just learned how to use Photoshop CS6 to erase unwanted photo background today, which brought me a great sense of achievement. haha~
For those who lack the drawing skill as I do, I am going to demonstrate how I erased the photo background through Phtoshop CS6.

Step 1: Go to IUWare (http://iuware.iu.edu/Windows) and download the Adobe CS6 package. It's completely free for IU students. 


Step 2: Open the images in Photoshop. Click on "File" and select "Open" to open the images you want. 

In my case, I am going to erase the background of the following pictures, so I will open all of them in Photoshop. But today, I am only going to demonstrate how I erase the background based on the third image.



Step 3: Right click on the "Quick selection tool" on the left-side tool bar and change it into "Magic Wand Tool". 





Step 4: Click on the unwanted white background. 
Use "shift" key to select all the noncontinuous white parts at once. The parts being successfully selected will have dotted delineation. Zoom in the picture for parts that are hard to click on.


Step 5: Go to Menu bar and click on "Select", and the choose "Inverse". 

Now you will see the Eiffel tower has dotted delineation instead.


Step 6: Click on the "Add a mask" icon on the bottom right. 
Now you will notice the background has been removed.
Also in the layer column, there is a layer mask thumbnail. The black part means the part you don't want and the white part means the part you want to keep.



Finally, after finish adjusting the color of your image, save the image as a PNG or JPEG (if you are not creating your infographic in Photoshop) and we are good to go!!


 This is how I created the first section of my infographic. Hope you find this post helpful~






Sunday, January 27, 2013

My infographic storyboard

Here is the initial planning and wireframing of my infographic.
I have also created a prezi slide as my storyboard to demonstrate the logic behind all my design decisions.


Knowledge map for F.Y.I. major project

Janet, Fallon and I are designing the Personal Learning Networks webquest project together as a team. We call ourselves "F.Y.I.- Facilitate Your Ideation".
Here is our knowledge map for the major project proposal.


Friday, January 25, 2013

Week 4: Representation for our major project


Our group is going to design a webquest for learning how to  incorporate  "personal learning network" into instruction. The target audience is  a group of IU preservice teachers who are learning how to use computer in education. 

Based on the readings and Dr. G's lecture on imagery and representation, here are some considerations about the representation for our project.
  1. Graphic organizers: considering the purpose of this project is to teach preservice teachers how to incorporate personal learning networks, one of the potential graphic organizers we may use is a flow chart that help learners visualize the instructional design process. 
  2. Accuracy: Personal learning network (PLN) is a very concrete idea. It refers to websites such as Facebook, Twitters etc. I think, in terms of giving PLN examples, we may use more accurate, figurative pictures to illustrate our points. However, in terms of understanding the whole idea, some abstract images may be included. 
  3. Clarity: the learners will have basic understanding about PLN prior to our instruction, so they are not considered totally novice in this circumstance. Therefore, clarity of our representation may not be high. 
  4.  Learner involvement: the nature of a webquest instructional design requires learners' high involvement. The level of understanding the learners need to achieve should enable them to design PLN instructional activities independently. This will also meet Bloom's taxonomy of cognitive levels "synthesis". 


Tutorial session: Infographics-Planning and Wireframing

  • Web designer vs web developer: very creative example of how to use infographic to present comparative information. Helpful to my infographic assignment. 
  • wireframing:
    • Title
    • Intro paragraph
    • Other information sections
  • Determining what to visualize
    • Infographic is journalism meshed together with design . You are taking research and data, and displaying it in a way that is accessible to a larger audience.
    • Citing information.
    • Generate questions pertaining to the central topic
    • See if the illustration answer our question
  • Two principles for inforgraphic dumbers:
    • Is the data interesting to the audience
    • Can the subject be easier, or more fully understood, via imagery than plain text?
  • Use excel spread sheet to organize your data
    • Overview-sections (table of content)
    • Different tabs for different sections
    • Give each section a title
  • Find stories in your data:
    • Find out the interesting facts from your data
  • Choosing the right visualization (charts I hadn't considered in the past) 
    • Bubble chart
    • Timelines
    • venn diagram
    • Pictograph
    • Relationship diagrams
    • Glyphs
  • Planning dimension:
    • Where? Blog, textbook…?
    • Photoshhop--width: 850; height:5000 (crop it later)
  • On photoshop, use transparent rectangle (or any other shapes)to create your wireframes. 

Monday, January 21, 2013

Week 3: Imagery and Media

Big words: 

  1. Value
  2. Hue
  3. Monochromatic color combination
  4. Complementary color combination
  5. Analogous color combination
  6. Triadic color combination
  7. Dominance --> determined by value and hue
  8. balance
  9. grids
  10. typography
  11. composition
  12. layout
  13. alignment 
  14. proximity



Analyzing value and dominance
  1. what are the lightest structures in display?
  2. Divide them into two more levels of gray values
  3. Are the appropriate elements dominant? 
  4. Is the layout balanced? 
  5. If one element needs to be adjusted, what will the impact be on everything else? 

Typology: 
  1. Text has to be Visible, legible, readable. 
  2. Visibility: 
    • size
    • contrast
    • interference
    • occlusion
  3. Legibility (letter forms): 
    • letter spacing
    • character shapes (image resolution)
    • contrast
    • interference
  4. Readability: 
    • Line length: ideal-2/3 and 1/3 of a standard page width; no scrolling or wall-to-wall text 
    • Letter forms: lowercase letters are easier to read
    • Typeface: Book faces (serif or sans-serif) for texts; display or italic faces for short titles or labels. 
    • justification: ragged right
  5. text as visuals: 
    • The gray value of your text has to be moderate
    • Factors influencing the value: typeface, point size, 
    • You can make your text "shout" through typeface selection, point size, boldness, italics, and color.
    • Typefaces convey affective meaning through metaphor and through common use

Questions to ask: 
  1. Need further clarification on how to analyze the dominance and balance. 
  2. Produce a value analysis and a grid diagram for your assigned website. (where?) 

My Infographic Topics

1. Do you need fish oil? 

Last December, I was choosing nutrition supplements for my grandpa who has heart disease, and therefore I learned that choosing a nutrition supplement is not as easy as you imagine. You need to select the best product for yourself based on your own health condition, nutrition intake, age, gender etc. Taking in the wrong dosage or wrong kinds of supplement might otherwise cause negative effect on your health. It took me such a long long time to do research on this topic since I didn't want to jeopardize my grandpa's health but the information on the internet was terribly complicated. Therefore, I would like to try creating an Infographic about fish oil, telling people

1. who need fish oil?
2. What are the benefits for taking fish oil?
3. How much dosage you need to intake based on your own conditions?
4. How do you choose a safe fish oil product?


2. Travelling to France or Scotland, which one is better? 

My boyfriend and I are planning on a one-week trip to Europe this summer break. So far, we have two options in mind, France and Scotland. It will also be very interesting to me to do some research on the tourism information about these two countries and create an Infographic showing the pros and cons between these two options. Possible categories for comparison would be:

1. Expense
2. Fun things to do
     (1) Natural landscapes
     (2) Cultural landscapes (music, festivals, architectures, etc.)
     (3) Museums
     (4) Night life
3. lodging and accommodations
4. Foods


This is so far I got. Both topics are very interesting to me, but I guess I like my second topic more than my first one. People who are reading my blog, please give me some suggestions on which topic I should choose and what information I should further include. Thanks~