How to Create Animated GIF in Photoshop

Tutorial: How to Create Animated GIF in Photoshop

& Posting the GIF to Tumblr blog

By: Susan Lei

The tutorial is completed! All the information in how to create the animated GIF is on the website. This tutorial is based on using Photoshop in creating an animation and animating graphics. The tutorial only contains screencaps of the program and other window screens. 

Features on the tutorial:

• Demo buttons available to view the animated GIF on a small window popup
• Quick links for number of steps on the side column on every individual documentation page (fixed position)
• A scroll-to-top link to go back to the top of the page (not interactive)
• A scroll-down link to the number of parts of the steps (not interactive)
• All sections are numbered in parts and steps in headers
• All parts are in bullet points
• Important text are highlighted in red color and bolded

Rubric & Learning Plan

Week 8:

Rubric: 

Lesson Plan for today's testing: [Step 1: How to download and convert the video file]

Scores: 1 - poor; 5 - excellent

Content (Amount of information, clarity of the content)
3 out of 5 - Lack of information and too short. Some information are missing. Content clarity is just right. Need to explain more such as how to copy & paste and where to type link.

Multimedia (Relevant images)
5 out of 5 - Good and relevant images of screencaps for the content discussed. The images are even marked with red borders to highlight important parts.

Mechanic (Errors, spelling)
5 out of 5 - No errors whatsoever. All links work.

Interactivity/Engagement (hands-on)
5 out of 5 - Based on a hands-on activity on working by themselves and looking at the tutorial at the same time.

Progress on Tutorial

Week 7:

Website for tutorial:
I have been working on the HTML webpage for my tutorial. I put everything in one page using a jQuery tabs. The tutorial content is so long that users might not want to keep scrolling to go to the content. So, I'm trying to add a ScrollTo code for sliding down to a part of the tutorial by clicking on a link list. This way, it's easier and faster to get to the point. So far, I can't seem to find one that works. I'm still researching for the code. I will also find a code for Back to the top of the page.

Tutorial:
I'm already 3/4 of the way done explaining on the tutorial. I finished up to the part on saving the animation. I'm going to continue adding extras and advanced animation part. I have hierarchy for organizing which parts are important. I have now put big headers for topics and bullet points to keep each part in order. I took a lot of screencaps for the tutorial and marked them in red borders to highlight important areas. I even have demos of the outcome of the animated GIF. I might need to review over the tutorial in the end to check if I need to fix or add anything.

Here's a sneak peek of how the html webpage looks like. I'm still doing some modifications to it, so it's only a rough look:

Research

Week 6: Research your final project online and develop a case study to present to class. Include your target audience, main form of instructional strategies, and a sample "similar" site, if possible.

I use Tumblr and make animated graphics for myself during spare time. On what I researched on Tumblr, animated gifs are popular and users like to post them.  Sometimes it's only for fun entertainment and interest. I am going to based on users who make animated graphics for Tumblr.

Why We Love Animated GIFs?
Here's a great article about why we love animated gifs. I agree about when some people are not interest in such animation, it is unavoidable. It's hard not to get attracted to the animation. (Source) These animated graphics are made of frames and animate repeatedly. Sometimes, animated graphics are made for advertising, so it's not only for entertainment. However, some animation can be annoying and marked as spam. The article says, "and yet animated GIFs that show just a few seconds of someone making a funny face repeatedly become exponentially more appealing to someone than a picture of the same person that did not move." I agree because an animation of a picture would be more interesting than a still image with no movement. A still image is boring, but an animation has more movement, meaning, and significance that make sense and attract the audience.

Target Audience:
It depends on the user making the animated graphic. What is the intended use and purpose? Is there a message the user is trying to say? When making these animated graphics, we should know who we are trying to target. (Source) Since making animated graphics are for fun, there might not have any message to communicate through. However, if the audience is interested in what the graphic is related to. The targetted audience are teenagers, young adults, and anyone who would like to learn how to create animated graphics/gifs. I assume this tutorial is for users who already know how to use the basic Photoshop. If not, I might teach a simple basic introduction to Photoshop.

Final Project Proposal

Tutorial: How to create animated gifs/graphics with Photoshop 
Week 5
I'm deciding on to just take screencaps of the program and discuss about it step by step on a page. If that does not work, I will use Captivate and make a video with audio instead.  I am just going to make a tutorial using screencaps and text. No Captivate. 

Content:
Making animated pictures through frames with Photoshop and turn them into gifs. Instead of creating animation with single images like a slideshow, we can make animated pictures with video files. When the animated graphic is made, it looks just like scenes from a video. We can turn the animated gif into looking just like straight from a video.

Media needed:
Photoshop, video file, browser, screen captures. audio? Adobe Captivate? 

Target Audience:
teenagers, young adults, ages 14+, anyone who wants to make animated gifs 

Flowchart pages: 
introduction, instruction step by step, conclusion of summary 

Optional add-ins (still in deciding):
How to create animated gif to post on Tumblr

---

[EDIT UPDATE 8/19/11]: added more for the tutorial

Tutorial with Captivate

Week 4:

Just finished the midterm in class. I have uploaded my demo online. My tutorial is about teaching users how to download a syllabus document file on Casabasa.com! (How to Download a Syllabus on Casabasa.com) The tutorial is made on Adobe Captivate with screen captures. I actually recorded my own voice and used it for the tutorial. I hope it will all tie up together when presenting. I hope I fulfilled all the requirements for this midterm project. I'm sure I added 3 interactions in the tutorial for users to make 3 clicks. I also hope that the tutorial is actually teaching users something. Check out the tutorial!


How to Download a Syllabus on Casabasa.com 

Edit: There are a few errors in the tutorial. I'm going to fix it and add some changes and then re-upload the tutorial again. I have uploaded the final version of the tutorial. I have fixed and made changed to the errors and mistakes. Everything should tie up neatly now with a beginning, middle, and end. Also, there are 3 interactions, the next button, the typing text area, the help widget, and the quiz.

9 Levels of Events Instruction

Week 3:

Today we learned about the 9 levels of events for instructional design concepts. They are really helpful.
 
Gagne's The Nine Events of Instruction

Level	Event
I	Gaining Attention (reception)
II	Informing learnings of the objective (expectancy)
III	Stimulating recall of prior knowledge (retrieval)
IV	Presenting stimulus (selective perception)
V	Providing learning guidance (semantic encoding)
VI	Eliciting performance (responding)
VII	Providing feedback (reinforcement)
VIII	Assessing performance (retrieval)
IX	Enhancing retention and transfer (generalization)

So for my short demo tutorial. I am going to teach students or users how to download the course syllabus from Casabasa website. It needs at least 3 interactions with clicking. Users are able to click on those for help and to continue. At the end, we are supposed to create a quiz. So I only made 3 questions with 2 multiple choices and 1 true or false questions. I made questions about the demo. I will be making a supporting web page soon for the demo.

e-Learning Principles

Week 2:

What I learned today was about the general e-Learning principles. They are really helpful. The principles are mostly about how to get users to click or let them notice. I understood the principles telling us to use images/graphics as well as text close to each other, and must be relevant so it won't confuse the users. It is best not to add a lot of interesting materials or flashy things because it distracts the users out of focusing on the main content. I agree because it's true!

• Signaling
• Dual mode
• Multimedia principle
• Contiguity principle
• Modality principle
• Redundancy principle 
• Coherence principle
• Personalization principle

Later, we learned about using the Adobe Captivate program. Right now, I'm still new at using this program. I want to learn how to make a teaching video/swf just like this tutorial example: Uploading Your Photos. It's a really good tutorial. I don't know how to create buttons to go next page or textboxes yet. Soon, I hope.

Multimedia in Learning

[MM3312 Computer-based Training] Summer Quarter 2011
Week 1: Research Multimedia in Learning

This week we are supposed to research how is the best ways to teach the benefits of using multimedia in learning applications. We pick 1 out of the 3 types of transfer of learning.

Transfer of Learning - the application of skills and knowledge learned in one context being applied in another context (Cormier & Hagman, 1987)
 

There are 3 types of multimedia Transfer of Learning:

1. Inform - teach them some information
2. Near transfer perform - like teaching a software and is step by step
3. Far transfer perform - there is no exact answers, but several possible solutions or performances that could be elicted, to help narrow your focus.