3 Seconds to Impress

Switching to Word Press: Pros and Cons

2011-05-14T08:44:00.000-07:00

In the last two months, I've explored switching my entire site over to Word Press. Below are two pics of my site currently, and the WordPress version of my site for comparison. I will also post some of the pros and cons I've experienced about the process. If you are new and are thinking about looking at it, this may be for you. At the moment, the Word Press version of my site can be viewed here...

http://randolfdimalanta.com/wordpress/

And here is a screenshot of the WordPress site I'm building, as well as a snapshot of my current site. The Word Press site is already pretty clean (The image with the red chrome bricks).

In teaching a web portfolio class for non web people, I've always recommended a simple method for designing websites, some of which can be found on this blog, and I knew about Word Press many years prior, but I never really got a grasp on how to install it, which for me, at the time was confusing. Perhaps the most confusing part was installing a database on your server. If I couldn't understand it, I don't think my students, who (a majority of them) were not web designers wouldn't understand it either. In a class of 30 beginners, that would tough to lead.

Nowadays however, depending on which hosting you choose, you can now bypass all of this, and if you look at the Admin Panel provided for you by your host, there is a single button you press that will install a database and Word Press for you. Once I got this up and running, I saw how easy it was and its been fun ever since.

In short, when it comes to Word Press sites, there seems to be more pros than cons and some that I've had about using it. Let's start with the cons because they aren't many:

Learning Curve: Word Press is free to install and use, the only price is that you have to learn how to use it. This can be done with a teacher, but seriously, there is so much to do and adjust that you have to spend time learning it on your own, so you can get the look you want.
Virus Posts: About a week into using Word Press, I started to get robot spam who would put posts on my Word Press pages. At first, I saw two or three a week, and after a short amount of time, I started seeing ten or more. Not cool. To fix this, I disabled comments on my pages, and I downloaded the latest version of Word Press and this helped out a lot. Its seems that WP is so popular that it had become a nice target for virus writers...bad.
Learning Curve II: Depending on the theme you choose, steps to posting large images on sliders may not be so easy. I found this out through trial and error. If you use a free template, it may be hard. I ended up buying one and it was easier.
Free Theme Links: On some free WP themes offered on the internet, there are sponsored links found in the footer. I tried removing some of these, and because these links sponsored the template I was using and it was prohibited to remove, when I tried to remove the links, my entire Word Press theme crashed. I couldn't even logon anymore. Not cool. To fix the damage, I simply replaced the entire theme folder with a backup and I was up and running again in about 5 minutes. This was the worst feeling ever and it prompted me to invest in a professionally designed WP template. I ended up buying a WP template from themeforest.net

And the Pros:

So Many Themes: I bought one for 40 bucks from Themeforest.net. Be sure you choose one for its features, and most importantly, for its support. If you have a question, you should be able to send a message, logon to a forum to get an answer. Some of these theme writers seemed angry. Not cool.
I used Striking Theme by Kaptinlin.
So Much Site Variety: In the theme mentioned above, you adjust colors fonts and where things are placed by moving sliders around and through control panels.
Upload Anywhere: I like the fact that you can update your site from any computer. You don't have to use an FTP program or Dreamweaver.
Design: In our field, design is crucial to how you are perceived. In WP, since the design is fixed for you, you'll have an easier time creating something professional. Change and adjust things of course according to your style, but this part is already done for you.
Homepage Variety: I'm a big fan of the main homepage image. It sets the tone for your site and its should be large enough to make an impression. I found so many templates on WP that have sliders, so now, you can show a variety main homepage images, and some of these are animated using JS - this is cool as it adds to the impression you can make on a person.
Everything is adjustable: This can make you crazy because of all the choices you have. Just be sure that the template you choose is the one you want. Start here for first.
Switch Skins: If you want to change the look and feel of your site, buy a new template or change your current skin. WP will remember your settings, and you can easily switch to another skin.
New Pages: Are easily created. You can post pictures, videos, anything.
Drop Down Menus: A featured I was looking for in order to keep my homepage clean and uncluttered. This is hard to do if you don't know CSS. In WP, its a simple drag and drop system.
Easily Scannable: All of the pages in WP are easily scannable by search engines.
Up to Date Content: Google searches for content on the web that is the most current. If you maintain your WP site on a regular basis, then you are keeping it current, making it possible for Google to serve up your content during a search.
Its a valuable skill: Many companies are going down this route, so it might not be a bad idea to start your own WP site, so you can get used to the interface, maybe you can help a company maintain their own WP sites.
More Options = Creativity: Lastly, when I decided to switch to the Word Press format, it was apparent to me that you had more options available to you in the way we discussed, but it also opened up some creativity. All of a sudden, I had a flood of ideas: illustrations, tutorials, video video tutorials, animations, and interesting posts that I could include in this format.

And that's the lowdown on Word Press from me. Overall, the switch is good, and if you are thinking about a site, I encourage you to try it out.

Happy designing, and have fun with your Word Press sites.

Protected Mailto Command:

2011-03-12T01:57:00.000-08:00

I like Spam, especially in Musubi, but its not cool when you get it in your inbox. For many of us who maintain and design websites, the mailto command has been the main way to create a hotlink on our webpages. Wasn't it cool to click a link and have an email client open up, start a new message, and have your address already in the "To:" line? When I saw that, I thought it was a great way for clients to stay in contact with you.

The drawback, is that this "mailto" command and the email address associated with it, is harvested by robots, thus resulting in a flood of spam mail. Bad, very bad. So I started looking for possible solutions.

I recently tried this Javascript method that encrypts your email address and it can be found on this page below...

http://www.killersites.com/webDesignersHandbook/emailObscucator.htm

On Version 2, you'll have a crazy looking email address that looks like this...

mailto:you@e

It looks crazy, but this email address works just fine, you can copy and paste it in your HTML and it looks exactly like how your mailto command email would work. I know this isn't 100% foolproof, but it may help a little. The reason why it works is because the code removes the "@" symbol and encrypts the letters making it tough for a robot to figure out. At least that's the idea. I'm gonna give it a shot.

Remember too that a sure fire way to deflect spam is to use a hearty spam filter. The one in gmail works amazing for me. I get little or no junk mail at all.

Designing a Mobile Version of Your Website: The Easy Way

2011-03-01T00:18:00.000-08:00

These days, mobile devices are doing more and more, they can even access your website. If you website is not formatted to fit one of these mobile devices, the user will have to zoom in and out, and will have to scroll left right, up and down to get to your links. For some people, this is fine, but not for YOU!   You want to make it easier for mobile users to access your content.  

In this tutorial (perhaps the shortest tutorial ever), we'll set up a mobile homepage, we'll add resize code (explained below), and finally, we'll add a "detect and redirect" line of code to your main homepage that will detect if the user is on a mobile device (iPhone, Android or Windows Phone), if they are one of these, the code will redirect them to your new mobile sight, where they will have an easier time accessing your content.   

This is intended for intermediate HTML users (you have to know where the is at, and you should have access to Photoshop and Dreamweaver. Happy designing to you! Good luck with your mobile site.  

Tip: For your "contact" hotspot, add the "mailto:" command, so that when people click it, the user's default email app will open up and will populate a message with your address. It should look like this...mailto:youremail@email.com. Be sure however to check the post after this regarding protecting your mailto command.

SETUP / DESIGN:
1. Make a folder in your site called “mobile”.

2. Create a 320 x 480 Photoshop File and design your mobile homepage however way you like. This size fits great on Android. On iPhone, the cutoff (fold) line is about 360 pixels down. Be sure nothing important is below this line, or iPhone users will be forced to scroll. Save this image out as a jpg into your mobile folder.

3. In Dreamweaver, embed this image, and center it. Add hotspots for your interactivity (select image > hotspots are in the lower left hand corner of your screen). Program your hotspots by linking them to any URL or any file. Save this html file as the "index" page of your mobile folder...almost done. 
= = = = = = = = = =

SIZING: 
On this new html page, paste the following into the head of your mobile website index page so that your design fits the android/iphone screen exactly. If you don't do this, your site will be small, and you will force visitors to your mobile site to zoom in. Not cool.

<;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

= = = = = = = = = = 

REDIRECTING: 
Last step...Paste the code below in the of your MAIN home/index page. Above your title is a good spot. This is the code that redirects users with Android or Iphone to your mobile site. Put your mobile URL on the "www.yourwebsite.com/mobile" line. This will redirect users to your new mobile site...that's about it. Good luck!

<script type="text/javascript">

if ((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/Android/i)) ||
(navigator.userAgent.match(/iPod/i)))
(navigator.userAgent.match(/Windows Phone OS 7/i)))
{
location.replace("http://www.yourwebsite.com/mobile");
}

</script>

YOU CAN ALSO VIEW THE TUTORIAL HERE >>
http://www.randolfdimalanta.com/mobile/mobile_tutorial.html

Sorry for the redirect, some of the post was not appearing on this blog. Shoot!

Using Twitter & Facebook to Generate Site Traffic

2009-12-27T23:50:00.000-08:00

So how does Twitter and Facebook play into this? If you are anything like me, you were probably skeptical. Here comes another technology fad thing.

I also didn't like the name..."Twitter"?, it sounds too cute, kinda girly I thought. Then, I see Oprah, Ellen and Ashton Kutcher using it...okay, definitely not for me. If you're a guy, maybe you can relate. Who needs this stuff?!

But... you can't deny its popularity. Its in the news every day, and so I decided to give it a try especially at the request of some of my students...and ha ha... I like it now, and here are the reasons why, beginning with the ability to increase site traffic...

1) Remember....Once you decide to put ads on your site, you understand that revenue from these ads is based on the amount of clicks your ads receive, which is directly related to the amount of traffic your site gets. If more people visit your site, then the likelihood of someone clicking increases too.

This is a great thing because from a creative standpoint, it encourages you to constantly update your site/blog, and it also encourages you to maintain high standards for your content. For example, if you are a creative, you will post good animations, well crafted drawings, thoughtful designs, sketches and blogposts.

So here's how you do it, but remember that everybody uses it differently. When you post new content on your site or blog. Simply send out a Twitter feed to let everyone know about it and that's it. If you are consistent in frequency and quality, people will come and visit. I have a group of people who follow my tweets and once in a while, I get new followers who watch for the type of content I post, they get notified (somehow) and they end up following. This is great.

The best thing, is that some followers have thousands of followers themselves, if these "whales" like your content, they'll link to you. This is how more and more people visit you and its quite a remarkable way to spread news.

Facebook works in the same way, and if you've been on it for quite a while, you've established a nice friend list comprised of many hundred individuals. Unlike Twitter, these are close colleagues and friends, who would check out the post out of pure interest and because it helps them out. They trust you and therefore are more likely to visit your post.

2) Since joining Twitter, I can't say enough about the inspiration I've received by following certain people, my blogposts have doubled in frequency since joining Twitter. The following tweets are my favorite and since I started following them, I never run out of topics to blog about. By following them, I'm constantly inspired professionally and personally. I used to follow lots of people, but after a while, you begin to filter the "junk". When you get a chance check these people out - its a great way to stay informed - here are my top 3:

http://twitter.com/3dm3
They post nice links to animation, featurettes, and video games all the time.
http://twitter.com/StrategyThought
Very thoughtful tweets on thinking strategically (about your profession and life).
http://twitter.com/AnimationMentor
A must have for every animation student.

Ads: Making Money on Your Creative Website

2009-12-16T23:43:00.000-08:00

Sounds interesting and tempting doesn't it? This post will cover how to use ads on your website. It will show you where to go, appropriate places to put them, and other benefits of placing ads on your site.

Let's not forget however, that your creative website, by nature, is created to make money already, your creative website shows off YOU and Your skills: your awesome sense of design, use of color, drawing and painting ability, and if you are an animation or game design major, your animations, level and concept designs. An employer will look at all of this, make an impression of you and will hire you if you fit the job…If you follow the advice I give you on this blog, the impression an employer has of you will be positive you'll get that job you want, or at least, a chance for a second interview. If many people wanting your skill visit your site, and feel that you can help them, then your website is making you money…you are building a clientele and your site is helping you. This is the primary way that your website will make money for you.

The second and third way, is based on ads placed on strategic areas on your site. I will tell you where I place these ads on my site, and the areas where I feel its a “No No”. There are many online ad programs you can use, but I use Google Asense because it seems to be the most common, Google is huge and dependable (so far) and I like the data you get when you use them, I'll explain that as well, but keep in mind too that there are many nonmonetary reasons to put ads on your site too.

For example, the ads you place on your site will be able to track the traffic your site gets. Through the Google Adsense, you will be able to see how many page impressions you have for the day, yesterday, the week, the month, the year, and you will also be able to see what the most popular pages are on your site, that's cool.

The best part I like the most, and its totally personal, is that since I have ads on my site, and I get paid for each click or page impression, I have to do my best to generate traffic. This means I have to continue to generate meaningful content, that people want to check out. This puts me in a state of constant creativity, I’m always posting cool stuff on my blog, and I’m constantly creating things like small animations, new paintings, tutorials and sketches and letting people know about it.

Let’s talk about where to place your ads, but let’s start with the bad news first….let’s start with the Don’ts.

Don’t place ads on your gallery or demo reel page…the pages that show off your work. This is totally tacky. Imagine slapping stickers on to a portfolio…that’s what you are doing when you put ads on the artful/design areas of your site. Stickers are good if you are a NASCAR driver, but you are not, you haven’t even started your career, so don’t do it. Also, don’t place ads on your contact page or bio page.

On the flip side, DO place ads on the commercial portions of your site, and the primary place I place ads is on my blog, and one, well designed, strategically placed ad on my homepage. I started putting ads on my homepage because I wanted to see how many people were visiting my site, at the time, it was getting roughly about 200 page impressions a day, doesn’t sound like much, but in about a week that’s over 1000, and almost 4000 page impressions a month. I figured, since Google Adsense, compensates for the amount of page impressions, I might as well give it a try. I was hesitant at first, but once the ad was up, I liked seeing the data arrive about my main homepage.

The part I was worried about the most, was that I just didn’t want to have a gawky ugly ad on my site that didn’t belong, so I designed it to be part of my homepage where it wouldn’t draw too much attention. The ads were terrible looking at first, but after about a month, the Google Ads figured out the best ads to place on my homepage, and started putting ads that are relevant to the content of the page. It was nice to start seeing ads for the Hellboy II DVD, anime, aniboom, Star Wars Toys and WACOM tablet ads (which are beautiful ads by the way), once in a while though, ugly ads show up, but that’s okay, ugly or not, the site still looks good.

Surprising to me however, was the activity my blog, “The Caged Tiger’s Templar” was receiving. This is a blog that I would keep for myself regardless of whether or not I have ads on it or not. I use it to log cool things I see on the internet that inspire me, like game and movie trailers, animation and visual effects examples, demo reels and tutorials, and after I post them, share these with my class. This is invaluable and I love it. The entire blog continues to grow with content that I like and am happy that other people other than my students are checking it out.

Since I update my blog all the time, Google will sense that the information is current and new, so it places it high on certain search queries. This is not always the case, but once in a while it does, and again it helps drive traffic to my site. After putting ads on my blog, I also realized that the page impressions on my blog, rivaled the page impressions to my homepage.

And the last thing, is Google Analytics, similar to Google Adsense, it gives you more information about the traffic of your site, like bounce rate, and what keywords people are typing in a search to find you. That’s amazing interesting information you should know about your site, its free and it’s a skill that makes you an invaluable asset to a company.

So there you have it, the reasons why you should place ads on your site, and the correct places to put them.

To begin, start by signing up for Google Adsense and follow the directions for placing ads on your site and blog. If you have a Blogspot account, navigate to your dashboard > page layout > and look for the Widgent called "Adsense". There, you will paste the code given to you after signing up with Google Adsense and you will be well under way.

So, personal question....You are probably wondering how much money I made doing this? To be honest, I wish I made more…as much as these guys who make thousands of dollars per week (Steve Pavlina), very inspiring, but for me, here’s a realistic number. When you reach your first 100 dollars, Google will cut you a check. It took about 2 years to reach that and am approaching a second check soon. I figure, the more I drive traffic to my site by producing great stuff, and by posting on my site, the things I like the most, it can’t go wrong. It can only grow.

I’m always on the lookout for ways to broaden my blog activity, not just to animation students and animators, this is a small niche, but to broaden my market and reach more people, I was prompted to design a blog, “3 Seconds to Impress” to help people like yourselves make effective sites. I wrote about placing ads on your site because many students have requested it. Hopefully this helps you out.

Just remember, that your site generates money all by itself, if you do this, without doing much and it grows on its own as long I add to it to make it grow. The next step for you, is to use Twitter and Facebook to drive traffic to your site.

Embedding Video Code on to an HTML Page

2009-11-30T23:58:00.000-08:00

This video tutorial covers how to embed video code on to an HTML page. It requires that you have some knowledge of Photoshop, Dreaweaver and HTML. If you don't, no worries, I cover it in the video.

These days, in order to save space and money, people elect to upload their videos / demo reels on to a site like Youtube or Vimeo, which is a process I highly recommend. Placing video embed code on to a blog or webpage is quite easy, its a simple copy and paste procedure, but sometimes, people want to have pictures or a design around it. This video tutorial shows you a quick way to do so.

Doing so enables you to:

Watch the clip full screen.
Saves server and hard drive space.
Can be viewed from any computer.
The sound quality is nice.

Gallery Design: Video Tutorial

2009-11-24T10:24:00.000-08:00

This is a video tutorial about how to create a Level 2 Gallery Page. The tutorial covers design, layer masks, and alignment in Photoshop, this is a way easy. A second tutorial programming this page will be created soon but be sure you review the previous tutorials about how to design a homepage and level 2 page, the links are below. If you have any questions, please let me know.

>> Designing a Homepage
>> Designing a Level 2 page.

FYI - Video tutorials can be monotonous at times, so in this tutorial, I didn't talk, and just left the internet radio on. Hopefully you can follow along.

Fire It Up!

Randolf

Level 2 Webpage Design Tutorial

2009-11-18T15:59:00.000-08:00

When designing second level pages for your site, its important that you maintain continuity and harmony, otherwise, people will get confused and leave. These pages are also the entry way to the main content of your site. This video tutorial shows you a process for designing level 2 pages for your website that look similar in design to a your existing homepage.

Be sure you watch the previous tutorial "Quick Homepage Design Technique" on how to design a homepage first before viewing this tutorial.

Designing the "Gallery Page" is the most difficult of all Level 2 page designs because of its complexity. This will be covered in a later tutorial.

This tutorial covers the following topics: design grid, typography, placement and color.

- - - - - - - -

Be sure you check out the previous tutorial:

A Quick Homepage Design Technique

Graphic Design Crashcourse: Introduction / Overview

2009-11-13T02:19:00.000-08:00

Before we begin, we have to talk about a few things. Mainly, some of the most important concepts in graphic design that you will use to enhance your site.

This will be the first part of many that will cover some of the basic concepts of graphic design needed to create an effective homepage design. Once you are familiar with these terms and concepts, you can use them to improve your design. The series will be broken down by topic, I'll describe each, provide my own insight into each and will provide you with examples to look at and compare.

NOTE: Just know that there is no substitute for getting formal training on design with an experienced instructor and experiencing a classroom critique of other designers. An experience like that makes you stronger and more critical as a designer. If you like this stuff and are serious about it, you should go to school to learn it. Its lots of fun. The items I highlight are simply the most common in my classes that have the greatest affect on creating a website.

Part 1: Purpose - What are you trying to say? Simplify Your Message >>

Part 2: Visual Heirarchy - Direct the viewer's eye, so things are clear.

Dominant
Subdominant
Subordinate

Part 3: Form - Make the viewer feel comfortable.

The Grid
Golden Rectangle
Rule of Thirds

Part 4: Harmony - Use color to convey an emotion and to keep everything together.

Repitition
Colors - Kuler
Eye Dropper Tool
Fonts I

Part 5: Contrast - Create visual vibrations in your design with these simple techniques.

Size and Scale
Color
Texture

Part 6: Usability - Let's make buttons.

Fonts II

- - - - - - - - - - -

If you found this helpful, be sure to check out:

Part I - Simplify Your Message >>

Graphic Design Crashcourse - Part 1: Simplify Your Message

2009-11-13T02:06:00.000-08:00

Remember that you only have but a few moments to make your impression on a website visitor, therefore, your message must be clear, not only will your website be easy to view and navigate, but from your standpoint, it will also be easier to design.

This is because the visual impression will be simple and focused, and will be judged primarily by the main image that happens to be on the homepage. You must decide what your homepage is going to say visually, and the purpose of your site.

For example, the students who have the task of making a website in my class, have chosen particular majors such as: animation, game design, visual effects, digital film and graphic design. Within animation and game design, the major can be broken down to another level, where students have to choose a focus, like modeling and texturing, responsible for conceptualizing and creating the assets to an animation or game, or they may be given the task of animation only. The website must immediately convey "the major".

In the ILM website example above, why did they choose that image? And who do you think they are trying to communicate with? Ask these same questions for your own site.

For graphic designers, I find that this is easy for them. They work from a visual medium and are well aware of composition and readability. They come up with lots of designs quickly, and therefore seem to have an easier time doing this. That's okay - go ahead and copy what they do.

Digital film, visual effects and graphic design students, must also narrow down their image to the "one" that best represents their work. One technique I see them do, is to take screen shots or still images of their movies. I found that this can be difficult at times because they usually have such a wide variety of work. A good solution for these students is if they have an aptitude for photography, a well designed photograph would suffice.

So decide, what you are and be familiar with the imagery used for the websites used in your industry. Do your best to emulate them and be sure you put your best work on your homepage.

That takes care of the visual part...

Now, ask yourself what you want this site to function as? If you are a wanting to design a creative website, you will want it to (these are the most common):

show your best work (15 - 20 pieces is average) in a gallery.
this includes a video demo reel.
let people know about you (bio or blog).
make it easy for people to contact you (contact).

This is a nice starting list for you, and if you haven't noticed it yet, it is also your beginning navigational elements. Start with these:

Demo Reel
Gallery
Bio
Contact

As a side note - I use my site to not only do the above mentioned items, but I also use it to connect to my webmail, facebook, animation highlights, and to many other websites I visit a lot. I wanted to make my site in such a way that it also makes my daily work easy.

So there you have it, let's recap:

Before you begin, decide your message and simplify it as best you can.
Decide on an image that best represents you and your work (this will be your main image other known as the "money shot")
Decide on your functionality (I've recommended a few)
What are the main links on your homepage,
Is there anything else that you would like to add to your site that would help you become more efficient.

Have a great time designing. Now its time for the fun part.

- - - - - - - - - - -

If you found this helpful, you may want to read the following related posts.

A Quick Homepage Design Technique.
A Note on Design
The Money Shot: Establishing a Main Image **
Visual Heirarchy **

** Coming Soon

A Note on Graphic Design

2009-11-05T23:55:00.000-08:00

Before we get too far with all the cool tips and tricks you are going to learn from this blog, it may the best time to talk about graphic design. Graphic design is the base for all that we are going to do here. I feel the need to write about it because for me, its a love hate relationship. I studied it in college and have an aptitude for it. I can arrange elements on "whatever" and I can make it look good, and I got better as I soaked up more experience. I like to design for large companies, but I LOVE to design for myself, like my own website, and even better, I LOVE teaching design and watching people get good results from what I share with them.

In college, I studied the craft of illustration. The people in this major were like me, we liked to draw, paint and animate, and from a distance, we made fun of the "graphic designers". "Ahhhh, they can't draw", we would say. They always wore nice clothes, were always in front of the computer and designed business cards that had small letters on it that we could barely even see. This wasn't me, and in college, you are naturally going to gravitate to like minded people such as yourself. I was an illustrator.

That was many many years ago, and since then, here's what I know (graphic designers, you are about to be honored here)...

All businesses, in order to make money, survive and flourish, have to sell. It doesn't matter what they sell, it could be the greatest thing ever invented...but here is the key, and I want you to remember this....

"If nobody knows about it, or how its going to help them...nobody is going to buy it".

In other words..."marketing".

Companies spend millions of dollars to staff their marketing departments. They have the responsibility making sure that everyone knows what Company A sells and how their product is going to help people. A good example of this are the Paul Rand logos at the bottom of this post. Do any of those logos look familiar? How many of these companies still use that same logo?

Marketing and branding is a simple but powerful idea that affects you in every way, every day. Companies know it and will continue to send out company messages to you...think about the following:

Have a Coke and a _______.
What is Target's logo?
What was the last pair of sneakers you bought? Why?
What colors represent Coke? Pepsi? Mountain Dew?
What colors does Tiger Woods wear when he plays golf?
Superbowl commercials.
What color is the Yahoo logo?
Why do people like driving Prius, Mercedes and Toyota.
What car do you drive today?
The most popular toy this holiday season is?
Why do you go to Starbucks (for the coffee drinkers)? What color is the Starbuck's logo and what color are their uniforms?

The list goes on and on, and each is a marketing decision, that contains a well crafted strategically delivered message that somehow crosses your senses: tv, radio, computer, cel phones, billboards, signs, and we even wear the messaging on our bodies - does anybody know why that Ed Hardy brand is so popular? Or why do ladies spend 400 dollars on a Coach purse (holy smokes! - I know those Coach people love this.) Its all around us, but companies need to be in front of our faces so that we are reminded of their existence, products and or services, and they plant reasons for us to buy.

As I'm writing this, I'm typing on a Mac Powerbook, using a Logitech Cordless Mouse and in a few minutes will take a break to play on my daughter's Nintendo DSi.

So where does graphic design come into play? They are the ones responsible for how everything looks and feels and how that message is delivered to you. They make sure it looks nice, appealing, and that the messaging is clear for the target audience. They are closely related to the company's ability to make loads of money and if things don't look nice, or aren't clear, a company is not going to have good results and will eventually tank.

By the way, graphic designers become art directors and therefore are responsible for hiring illustrators and animators like me. Like I said, they control the money. So I treat them pretty nice.

How does this relate to you? Remember that you are about to build your website... these days, one of the single most important marketing tools that you have as an independent creative individual. Whether you like it or not, you (and your name) are your own brand. You are the CEO of your own company, and this company is YOU.

Therefore, you have to market yourself professionally. You have to look good and your branding and messaging must be clear. This is evident and felt in the way you choose to present yourself through your website, and it includes the coordination of the following:

your use of color
your main image choice
your layout
font choice
word usage
usability
flow

Which is why I decided to put together this blog. Unlike our graphic design counterparts, animation, digital film, visual effects and game art majors don't study marketing design as a graphic designer would, so it is my intent to post many of these main points that graphic designers are familiar with so that you too can have an effective, aesthetically pleasing website that you are proud of and that will help generate money or opportunities. If you follow the tips and tricks I share in this blog, you could potentially have a site that looks as if a professional graphic designer created it.

So there it is, be nice to graphic designers. Their job is important. Their talents help drive marketing, which then helps drive the economy. Be kind to them and do good work while you are in their presence because they might be able to use your talents and skills one day.

Graphic designers of the world, we grovel at your feet.

A Quick Homepage Design Technique

2009-11-05T00:08:00.000-08:00

This tutorial, shows you how to create custom homepages from existing ones. For this to work, you need to flag and take screen snapshots of well designed sites. I usually stick with the large companies homepages because of their design and simplicity. In the examples here, I'll be using the Jaguar site and the Mini Cooper site.

I usually show this technique to people who aren't trained graphic designers and I find the results to be pretty cool. At first, it seems like copying, but once you replace the main imagery, logo and navigation with your own, it will look totally new. You are only borrowing the template and the general flow for where items are placed.

Quantity is the key to this exercise, the more designs you do, the options you'll have, which will eventually lead to a better decision as you narrow things down to your final design. I recommend designing 3 - 5 mockups to get you started.

I also like this technique because it requires little or no coding. Everything is visual and I find that people have lots of fun doing it.

Be sure you check out my next video about adding functionality and programming to this homepage.

This will be my first customized video for this blog, it turned out better than I had expected. Looking forward to making my next one soon. The backround music for this video tutorial was provided by my friend DJ Ilo.

Let's Begin!

3 Seconds to Impress

2009-10-30T15:03:00.000-07:00

For the last three years, I've taught a web design class where I help animation, game design, visual effects, and digital film students set up a website where in they can market their work. The class is essential and is now a requirement to graduate. The class is lots of fun to teach, its always different, there's always something new when it comes to the internet, and the product they make, which is personal, can help them generate opportunities for work or income.

These days instead of recruiters requesting to view demo reels (a video presentation of your best work) on CD's and DVD's, recruiters and art directors are requesting to see URL's and or websites. Its just the way things have been going, and now with mobile devices such as iPhones and Androids, they can look at your work from any where - even in the bathroom, now that's efficiency.

If you are reading this, you are probably interested in putting together your creative design website, and you probably have a few good reasons to have a site, this is awesome, but here are mine, perhaps some of our reasons match, and maybe some are new. There are many benefits/reasons to having a website of your own as an artist, animator or designer, here are the top reasons - the main one being last:

An art director can see your work through a gallery.
You could put more pieces in it (15-25) - Unlike a conventional portfolio that only holds what one could put in a case.
You can show a greater variety of pieces like concept sketches, color roughs and sketchbook pages...pieces that you wouldn't put in conventional portfolio, but in a web portfolio, its perfectly fine.
Sometimes art directors like to see how you arrived to a solution, showing a sketchbook is a direct way to show this.
You can show animation or video clips that you’ve created, which show your editing, timing, use of sound and presentation.
An art director or recruiter can learn about your interests if you keep a blog.
Its shows that you understand technology.
That you know how to present and market your work.
They can contact you easily through a "contact" page link.
A visitor to your site can see and interact with your work and contact from any computer any where in the world (this is cool, especially when people are contacting your from another country - it can be fun and eye opening).
And the last (and this can either be good or bad depending on how well you do), is that a visitor to your site can make a quick impression of you in about three seconds (thus the name of this blog).

In my experience in working with other web designers and usability experts, there is consensus that most of us on the internet, don't like to read. If you think about it, its true. Yes, we read here and there, and will read information that we are hunting for, but for the most part, humans are visual and tactile beings, which means that we like to see and do things, its how we learn, improve and get better, that's just how we are. This is a great thing if you understand and believe it, and here, we'll use it to our advantage in designing our website.

Imagine looking at a large web page with nothing but text, no colors, no thought to the design...boring right? People react more to images first before reading text and their eyes are scanning the page looking for something to click and or type.

So, when we visit your creative design website, in the first three seconds, we are going to make an impression of you and your work. We are not going to verbalize it but everything from what I know is done through feeling. Let me walk you through what happens in those three seconds, and as you read this, see if you can relate to it by visiting your next website. Pay attention to your first impressions and feeling upon entering a site. You already have assumptions about the site just from what you see from the homepage (more on this later).

Here's an example, when I visit your site, I am first going to be affected by your main image, which is the largest image on the homepage. This image and the term I use for this image is called "The Money Shot". I know, I know, its a porn term too, you are going to have to research that on your own - "no money shots" of the other kind here, but I really don't want to call this anything else, because you really could relate this first image impression to money, let me explain. This main image is crucial because it sets the tone for your website. It should be your best work. It’s the first piece we see, and its also the last one we remember upon leaving your site...this is key.

Also, in those three seconds, I have an idea of your sense and level of design. I can sense this by how you choose to display your main image, the colors you use around it, if it is clear and navigable, the typeface that you choose (there are some no no's here - a blogpost on this soon), and usability - can I get to things easily once I enter?

In about three seconds, I (the visitor to your site) will choose to either explore your work and learn more about you, or leave. These days, recruiters and art directors are so busy, that they are appreciative of the fact that you put the time into your design to make it clear, quick and easy to use.

When visitors to your site leave, you lose:

Potential opportunities for work.
Money
Return visits.
Your reputation might get damaged too.

On the topic of "3 Seconds", do you ever notice those "loading" graphics when you enter a website. For those non-web designers, that's called a preloader, and it’s a graphic that lets you know that something (usually a Flash graphic - Flash is an application used to create animations and presentations on the web) is loading up before it plays. Usually this is also accompanied by a "Skip Intro" button right. And I'm sure lots of people have worked hard on their intros, but can you tell me about how long people will wait for that "Loading" screen?

I ask my students all the time, and they almost always skip it. Me included. I'm telling you, people browse and scan the internet, and our impatience makes us move on to the next thing, its easy to do with a click of a mouse and we can't wait. This is one of the main reasons why I choose not to design in Flash as much.

In teaching this web-design class for non-web designers, I found it to be easy and fast to show someone how to put up a site without the use of Flash (a steep learning curve), but instead to just use Photoshop and basic Dreamweaver tools. It’s way easier, faster, easier to organize and keep track of, and it’s not unusual to have Flash designers switch. For these guys, I usually recommend for them to establish a design in Photoshop first, make sure the usability is nice, tight and clear, and then translate it to a Flash design.

Another option is to have a bumper page at the beginning of your site, where you give visitors to your site the option to either choose the HTML or Flash version of your site.

So, now you know why this blog exists. "3 Seconds" is all you have to make an impression, and on the internet, it is so true. Every design recommendation I offer you will always be from this "3 Second" standpoint, and therefore your choice to implement it or not, is a business decision. When it comes to your website, you are the captain of your own ship, the general of your own arm, and the CEO of "Place your name here" Incorporated.

Do your best, keep your eyes open to cool designs, and have fun. I wish you the be – of luck, thanks for reading and if this blog has helped you, let me know. I really would like to hear from you.

Until the next post...happy designing.

Placing Video Embed Code

2009-10-27T13:29:00.000-07:00

The Assassin's Creed Trailer came out this week, and unlike the game, this trailer features live action footage. The interpretation is incredible. I think is so cool. They really should make a full movie. I would pay to see this.

In this example, we copied the embed code associated with a Youtube video and pasted it on to a blog post. The process is quite easy and I also recommend that as you post a video or picture, that you also write a small sentence or two about lending your opinion about the piece. Having both and image and text work together to make an engaging presentation.

Here are some images to help you with the process...

Copy the embed code from Youtube here:

Then, under Posting > Edit HTML Tab > paste the copied Youtube code. As seen below:

The Creative Blog: An Enhancement to any Website

2009-10-27T01:50:00.000-07:00

I've had my website since 1999, and if I could do it all over again, I would simply make a blog, because it is easy to put together, you can update it from anywhere, you can post everything a website can do, like words, pictures, video and people can contact you through it. I'm pretty sure I could make it work as my main website, as I've seen many people do it. But that's not what happened...I have a regular website that I've designed in Photoshop and Dreamweaver but keep a Creative Blog as an enhancement to my site.

For those of you who have never designed before, and if you are wanting quick web presence, then a blog would be a smart decision for the reasons I mentioned. I've recommended this option for many instructors and they like the option. Designers, animators or game designers, will want a main website to showcase their work, and we'll get to that later, but before we do, a good move for you is to create a "creative blog" that will be an enhancement to your future site.

A blog can be about anything and I have many (yes, I went overboard and was hooked on the idea for a while - but I've calmed down a lot), I've used them to keep notes on images and videos I see on the internet to help me with research, another keeps track of my football scores, I post animation curriculum and my favorite...I use one as a source of creative inspiration for me and my students.

This is the blog that I maintain on a weekly basis and I love it, there are lots of funs things on it that inspire me and that I like to show my students:

http://randolfs.blogspot.com/

YOU will use your creative blog in this way...when you see something cool on the internet (which is pretty often), if it inspires you to make great work, if its funny, if it energizes you, if you think its a good example of great design or animation, maybe its an artist you admire, maybe its a cool website, you will post it on this blog. When you post it, it will be available to you for as long as you have the blog, and you will find great enjoyment watching it grow as you add posts and layers of inspiration to it. It is a great feeling and it gets better when you find that somebody out there finds what you are posting helpful and inspirational too. Its awesome, its simple, it spreads love and you can do it.

Some other benefits to creating a "Creative Blog":

It shows that you are in tune with your industry.
That you keep current.
It shows initiative on your part for learning a new technology.
Many professionals in your industry keep blogs.
These same professionals check one another's blogs.
It shows your interests (me, I like robots and awesome demo reels).
You can showcase works in progress, like sketchbook work.
Or current pieces that you like, but won't necessarily place in an online gallery.
Its dynamic, constantly changing and growing, where as your main website might not change as much.
Posts are automatically archived so you can look at the later (sometimes years later).
It can be easily organized with the use of labels.
Oh yeah, and did I mention that its FREE?

There are many blog formats out there, but the one I am most familiar with and the one I pitch most often is Blogger. I do so because of:

An easy interface (super easy to use)
From a design standpoint, the templates are nice and clean (this is huge).
Its owned by Google (Its still the number one search engine, and is not going anywhere).
You can customize the colors to make it feel like it is part of your main website.
You can place ads on it (we'll talk about this later - I heard Wordpress doesn't allow ads).

So go ahead, let's start by establishing webpresence by creating a blog for you. Start first by signing up for a google account. Or logon to the official blogger website, I think they are same thing.

Once you logon, establish a name for your blog, as well as a URL name. For example, my blog is called randolfs.blogspot.com, but my blog title is, "The Caged Tiger's Templar". Its nice if your blog title is somewhat creative. I usually play with word combinations to help me brainstorm great titles, so pull up Thesaurus.com to help you generate more options or keep a friend's email or phone number handy so you can run ideas by them. Don't worry if you don't find a cool name or URL, you can always change it later.

The next lesson, will be about how to customize your blog, and some of the best practices I put into place about posting images, text and videos on a blog. Save the webaddress to your blog, and we'll connect it to your homepage (this will be another lecture).

Good luck and have fun putting together your creative blog, if you have any questions, send them my way.

Do your best and have fun.

Introduction

2009-10-27T01:11:00.001-07:00

I'm an animation instructor and I enjoy what I do, but before animating however, my background was in graphic design and illustration. I've been a lead corporate webdesigner for a Fortune 500 company for many years, I've had the pleasure of working with IBM Usability Groups in designing various sites, and I've freelanced for a variety of companies of various sizes.

In my journeys, I've worked with many talented marketing and design groups to help companies establish web presence, nowadays we all know that it is a crucial marketing tool, and most importantly, as a designer, I've experienced the joys and pitfalls of effective design pertaining to a website. I learned how large corporations use their sites to market themselves and how they make money.

Design and marketing go hand in hand, but for many of us wanting to establish web presence, design is not an expertise and it makes a huge difference. Welcome aboard! This blog will address some of the essentials of putting together your own creative website. It will cover the elements of putting together a great first impression for a visitor to your site within the first 3 seconds, this includes, design, color, usability, maintaining your site, blogs, using the site as marketing tool to showcase your work, posting demo reels, and later on, the use of ads and twitter to generate revenue from your site.

At the college I teach at, many instructors and students who are non design majors want to put together a website. The instructors want to use it to showcase their work, keep in contact with students and to make themselves more marketable. Let's face it, education is using the online medium more and more and so the marketable teachers are the ones who have some kind of online teaching experience. Many classes are solely taught online. We teach and encourage our students to put together a website so they can market their work, shouldn't the teacher know how to do this as well? If you are a teacher who is need of some kind of webpresence, never fear, this blog will help you out.

For my students, many of them have studied animation and game design for many years. They really haven't studied design in a way that a graphic design student has. So I show them the essentials and help them make kickbutt websites that will help them land jobs that they want.

I hope you will find this information helpful. Be sure to subscribe so you are updated of new posts so let's get started. My first post will be about putting together...

Creative Blogs

Changing Gears

2009-10-21T11:39:00.000-07:00

This blog, had served its purpose in helping me to achieve my MFA in Computer Animation. It has been over a year since my completion of the program. Things are going well. I continue to teach animation, everyone is healthy and all is clear.

The focus of this blog will be shifting towards the subject matter of creating and maintaining blogs, and websites. I teach this subject matter in a class, and having a blog like this will be an invaluable resource.

I'm currently working on my first post about the benefits of having a blog in the next week or so.

60 FPS : Final Animation

2008-09-29T23:43:00.000-07:00

60 FPS from randolfd on Vimeo.

Here is the final animation. Thanks to everyone who made this project a success. I wish all of you continued health and prosperity. I'm going to rest a bit, and after resting, will work on a new animation soon (perhaps "The Final Task" sequel).

Until next time...

Randolf Dimalanta

Mission Accomplished

2008-09-20T22:05:00.001-07:00

As of Thursday Sept. 18. I finally passed the MFA Thesis Defense portion in order to achieve my degree. I'm currently making final changes to my animation and blog. Once they are completed in the next couple of days, I will post the link here.

Thanks to everyone for your support.

Randolf

Checking In

2008-09-14T22:45:00.001-07:00

I haven't posted in awhile. Things are going well. The animation is as complete as it can be, my document is almost done, just a few citations to update, and just an upload to the blog site that presents my animation curriculum.

I'm excited that the end is near (fingers crossed), I'm not done yet and will work like crazy to finish things off by Tuesday, with enough to put together a simple powerpoint presentation by Wednesday.

Thanks to all of you for your support and encouragement. Here we go.

Woo Hoo.

Randolf

60 FPS: Week 16 - 90% complete.

2008-08-06T11:46:00.000-07:00

60 FPS: 90 percent complete from randolfd on Vimeo.

60 fps: Week 13 Animatic

2008-07-05T10:05:00.000-07:00

Almost done. I'm planning to go over the phoneme shapes for Ollie's mouth in the beginning and end of the animation. Check previous post for other changes left to do.

60 fps: Week 11 Animatic

2008-06-15T10:59:00.000-07:00

Here is the latest animatic. I added more background noise, new end ollie shot, and a smoother reporter opening. Lots more stuff to do however during the next coming weeks.

Tone down room tone. Too loud. 6/24
First Ollie shot (betta performances you see)audio pops in dialogue (final cut).6/24
Ollie 2 (Check Phonemes). Check beginning and “Expert”
Ollie 3 (Both of these movements) Check tangents (smoother throughout.) 6/24
Reporter to Blue Guy “Body Language” Check Phonemes
Blue Guy Head, check tangents for smoothness at the end.
Sound for smoothness during box jumps (swooshes)
Ollie (after cowboy) shakespeare gesture, before hand goes on chin.
Analyze the situation you see (move mouth more).
Reporter: Can you give us an example? Smooth out tangents.
Ollie smooth Mouth tangents.
Ollie smooth head tangents “Mother No”
Check Rig Creators
Refine acknowledgements list.

"Acting for Animation" Icebreakers

2008-06-10T12:33:00.000-07:00

Introductions: Students interview each other for 10 minutes, and introduce each other.
"The Greatest Thing": Students get into groups. One person comes in and pitches the greatest thing he has ever seen. The others in the group act accordingly once they find out what that thing is.

"Poker Face" : Students are dealt Texas Hold Em hands. Once they see their cards, they have to make a face that is opposite of what they normally would express if they were to see this hand in a real game. The intensity must also be expressed.

I Love You Honey: Everyone sits in a circle, one person is in the middle. The person in the middle approaches a person and says "I Love You Honey", and the person must respond (without laughing), "I love you too, but I just can't smile". If the person laughs, they are IT.

Murder

King and Slave

Guess Who's Coming to Dinner.

Adjective Marathon

Moods Game

Waiting For The Bus.

Pokerface

Palm Tree, Elephant, Giraffe

Freeze with Props or Without

2 Line Vocabulary

Baby I love you honey

Questions Only

Week 10.5 : 60 fps Animatic V.2

2008-06-07T12:08:00.003-07:00

60 fps Animatic Week 10.2 from randolfd on Vimeo.

Update Clock Model

Reporter Opening Shot

"Integral Part" - Eyes are disappearing.
"Animated Production"
"And of course fear"
"Mood and personality"
"Free character rigs

Refine Ollie phonemes.

Ollie "step out I say, step out!" - Fix hix when looking into the camera.

Reporter Lip Sync "What would you say is the most important thing to remember."

Igor :

Looser Wrists on "Castle Door","Mahagony"

Drink Box -

Move faster when reporter says "happy", its too floaty.

Reporter:

Animate and Render "Interesting"

Cowboy-

Smother arcs during first surprise.
Same Ambition everybody else does.
Flick wrist: head down to the beach.
Remove movement to the right during "You know, its totally cool"
Knod head more "you know what I'm saying dude" for exaggeration.

Reporter

add lip movement "I see what you mean"

Ollie

Moves back to fast "what do you feel is the most important part"

Ollie: Crazy kind of Olive Loaf

Break wrists
Add height to body.
Smooth out head arc during "Balogne"

Reporter:

Follow through on "Give us an example"

Ollie: Last Mother No

Fix jaw, his teeth are coming out.
Lip sync on "you see"
"Talking to mother on the telephone"
Remove smile from first mother no.
Switch rez of body "completely different"
Open mouth on inhale "spoken to my mother in quite some time"
Lock eyes after "stuffing food in her purse"

Ollie: Last mother no.

Move mouth.

Week 10 : 60 fps Animatic

2008-06-03T23:56:00.001-07:00

60 fps Animatic : Week 10 from randolfd on Vimeo.

Week 9 60 fps : Animatic

2008-05-31T19:01:00.000-07:00

60 fps: Week 8 Updated Animatic

2008-05-27T22:04:00.000-07:00

60 fps: Animatic Week 8 from randolfd on Vimeo.

360. I may have to record or edit the beginning reporter monologue track. "It brings aniamated characters come to life" doesn't make sense".

Add roomtone.

Change BG image of Ollie to split laughing and crying.

Ollie 1

1930. Clean up phonemes throughout entire clip.

Reporter 2.

"Important Thing to Remember". His chin goes into his chest.

2743. Ollie phonemes

Igor Clip.

Add organ music.
Add door creek.

Igor performance:

Look up when he leaves.
Hold CMon 12 frames.
Watch Arcs in Arms.

Blueguy

Keep eyebrows moving.
Land on identifiable eyebrow emotions. Angry and happy.
Look into camera to show off.
Add finishing movement.

Box

"Hard to get emotions" Add plateau or moving hold.
Add head knods to let reporter know he's listening.
Jumping Noise.
Landing Noise
Sad Noise.

TRex

Hickup or Scream "get out of here" sound

Cowboy

Eastwood whistle while walking, transitions to interview.
5716 - hitch in hands.
5810 - "Americano" look into the screen sooner.
5860 - Fix hand that goes into his chest.
5948 - "Beach" flick wrist faster and shorten movement.

Ollie 6009

Close mouth
Begin with him looking to our left.
After talented, have him knod 6084.
6178- Neck flings back too fast.

Ollie 6796

Crazy kind of Olive Loaf.
L. Phoneme
Break wrists
Eyes look up.

Guitarbite Clip

In Final Cut move to the left.

Final Ollie

"Telephone" blink 2 x.
Gearchange. "Sometime"7529.
7567 -"Cracks a Joke" Bigger eyes. Rounder Eyebrows to get happy surprise.
7590 - Close gap in mouth.
7843 - Gearchange to happy confident (same pose as beginning of clip) in order to contrast and set off last "MOTHER NO!" emotion.

Mother No Block In : Week 8

2008-05-23T18:34:00.000-07:00

Curriculum Blog Posted

2008-05-20T16:17:00.000-07:00

This is still in the works. I'm going to populate this on a weekly basis, but it looks like its going to work for the time being.

The reason for the blog format was because of the ease of its formatting features, ability to post video clips, and the ability for students to respond and and for me to leave feedback.

http://animateemotion.blogspot.com/

Week 7 : 60 fps Animatic

2008-05-17T22:54:00.001-07:00

"60 fps" Animatic Week 7 from randolfd on Vimeo.

Week 6 : Animatic Update

2008-05-12T12:40:00.001-07:00

60 fps : Animatic Week 6 Update from randolfd on Vimeo.

Week 5 : Shot Updates

2008-05-02T23:54:00.000-07:00

This week, I blocked in the beginning Ollie shots and fixed the reporter's eyebrows. The eyebrows are now used sparingly, specifically during accents and at the end of sentences.

60 fps : Week 5 Update from randolfd on Vimeo.

61 Minutes : Animatic 4

2008-04-26T15:09:00.000-07:00

61 Minutes Animatic Week 4 from randolfd on Vimeo.

"61 Minutes" Animatic Version 3

2008-04-19T16:19:00.000-07:00

60 Minutes Parody : Animatic No. 3 from randolfd on Vimeo.

This is the latest animatic. Things to work on still....

61 Minutes Opening Graphic
Igor lighting is too harsh.
Translucent face on reporter during Mother scene.
Missing body on Ollie at the end. Not sure why this happened...check reference file.
Phonemes for reporter and main actors.

Posing Images

2008-04-12T17:02:00.000-07:00

These are the images I plan to use for the "posing" section of my animation.

"61 Minutes" Revised Animatic 2

2008-04-09T22:09:00.000-07:00

61 Minutes Animatic 2 from randolfd on Vimeo.

"60 Minute" Animatic Parody

2008-04-04T18:50:00.000-07:00

"60 Minutes" Animatic Parody on Emotion from randolfd on Vimeo.

This is an animatic for what I had in mind for my final animation. Its strings along various animations completed for my thesis and its a parody on the show "60 Minutes".

"60 Minutes : Bob Dylan" Format Styling.

2008-03-26T17:49:00.001-07:00

So, I'm putting together my script for the final MFA animation, which is going to be a newsreel 60 Minutes inspired style. I came across this format that fits what I had in mind. I liked it because it shows a clip, then an interview close up. It then cuts to the interviewer to show reaction.

Final Document Setup & Visual Aid Advice

2008-03-20T10:12:00.000-07:00

Final Document Setup:
a. Title page
b. Abstract
c. Title page
d. Copyright page
e. Committee and Department Head signatures page
f. Dedication (optional)
g. Acknowledgements (optional but recommended)
h. Table of Contents
i. List of Tables (if 4 or more tables are in text)
j. List of Figures (if 4 or more figures are in text)

Settin up Your Visual Aids

Website Architecture II : Flow Chart

2008-03-13T22:37:00.001-07:00

Website Architecture

2008-03-13T22:16:00.000-07:00

I. INTRODUCTION:
The intro will be in HTML, but for the approving committee, it may begin as a Word Document, which will the then proceed to the actual website.

Overview of the Inquiry
Statement of Intent
Acknowledgments.

II. CURRICULUM

i. Animating Emotion Overview

ii. “12 Principles of Animation” Overview - How is it used in this presentation?

iii. Animation Process - Keyframing, Positioning, Timing, Detail and Refinement

iv. Importance of Feedback and how it relates to this project.

A. Animation Exercises (11 total). Each exercise will include the following.

1) Assignment Description

2) Lecture and Lessons

a. Video Tutorials or HTML
b. Things to watch out for (This is based on my observations and my findings of conducting the exercise myself.
c. Purpose of this exercise.
d. Show example of the exercise.

3. Pre – Planning

a. Understanding the scene and scene analysis. (Some questions include):

What is happening in this scene?
What is the purpose of this scene?
What happened to each character before and after this scene?
What is each character's state of mind

b. Gesture - What body positions is your character going to
display in order to convey the appropriate mood for the
scene.

c. Intensity - At what intensity are these gestures occurring?
Can the intensity be adjusted to enhance the scene?

d. Research

Video reference – Personally film, or view video resources to serve as reference for movement and timing in your animation.
Use the step feature of your computer program to be familiar with frame count.
Still Imagery or Mirrors - Use a mirror and or a digital camera to capture the emotion in your face.

e. Sketching

Gesture - Sketch the body positions and expression, use this as a frame of reference when you begin animating.
Placement - Where are the characters placed in the shot in order to convey the mood clearly?

4. Animation -
The animation process for each exercise is the same, and will be featured it a higher level within the site. This page can serve as a resource for the animation process.

a. Posing and breakdown. Using your sketches and video reference. Block in your poses using the "bookend" technique, and explain how this is done in each exercise.

b. Adjust timing and positioning

c. Add keyframes for:

Anticipation
Arcs

d. Add Overlapping Action and Followthrough.

e. Refinement

Apply moving holds
Using the Graph Editor.

5. Evaluation -
A separate section on "evaluation" will be written and presented prior to the presentation of the exercises in the curriculum. A link will be available for students to read this section. Show your animated clip to a peer to get feedback from them.

Personal evaluation can be achieved by answering the following questions.

Is emotion clearly communicated in the scene through the characters? How can it be improved?
Can anything be exaggerated?
Can anything be simplified?
Can we infer a deeper understanding of the character in the scene?

6. Tips and Tricks

Advice from professional animators.
Common pitfalls for each assignment and workarounds.

III. 60.2 Seconds "How to Run Off a Cliff With Style",
An Animated Newsreel : by Randolf Dimalanta
I will be animating this next quarter and is used as an example of what can be done utilizing the techniques presented in this thesis presentation.

Format: This will be done in a Quicktime movie file. Or it will be uploaded to a free online server, where the animation could be embedded within an HTML . A nice site that fits right into this presentation is Aniboom.com

IV. Animation and tutorial gallery:

All of the animations, as well all of the tutorial found in the curriculum will be presented on a single HTML page.

Format: Mostly quicktime movies or they will be uploaded to a free server where they will be embedded.

V. CONCLUSION

References

VI. FURTHER STUDY & Other Resources

Resources
Bibliography
Categorized Websites
Animator Websites
Links to Laban Motion Analysis
Link to Ed Hooks site
Link to Aniboom Site and other Animation Sites
Video Reference Sites

Week 9 Check-in

2008-03-09T23:44:00.000-07:00

I had to submit an assignment which lists the things I still need to do to complete my thesis presentation. I thought I'd post it as a reminder for myself.

While studying illustration in college, I had an instructor who had a great way of critiquing. When it was my turn in the critique, she would look at it, appear to analyze it and would ask me, “So Randolf, what do you think?”. Its at that point, that I tear into myself, and list 15 things that I did wrong, and that I could improve. When I was done, she would agree with everything I’ve said and would say, “Yes, you are correct!” – that’s when I get depressed – “I suck”, I silently say to myself. She finishes off the critique by prioritizing the things I had mentioned that were wrong in my illustration. This technique really works well and is useful as it gives me a good place to start and improve.

Many years after the fact, I asked her about that and she said that we (the students), during a critique, will be much harder on ourselves than she could ever be. The trick however, is to train the student to be at that point where they are able to be critical of their work because they begin to see their work in the way their audience does, but doing so takes perseverance and patience from the instructor and takes years to accomplish. In this assignment, we are doing the same thing, and are beginning to view our thesis with a fine tooth-comb. I already know that I have to proof read my presentation more so than I’ve already done, but here are other things I need to work on regarding its content:

For the MFA Computer Animation thesis, we have to put together a final animation, one that supports our findings and that serves as an example of the high caliber work we are capable of. Last quarter, a recommendation came from an instructor, encouraging me to weave my animation examples together into a documentary style animation about emotion. At the time, they seemed disparate and by putting them together, my presentation will be stronger for viewers of my thesis. The new piece would serve as an example of what could be done by doing my exercises. This week, I’m realizing that I have not mentioned or included this newly integrated animation into my thesis presentation. Not only must it be included, but I should also use the piece to highlight certain points in presented in my curriculum.

Corresponding to Ed Hooks this week, made me realize that the topic of Laban Motion Analysis is too broad to cover in a single section of my thesis. I could however point out a single aspect of it that I had found useful. One aspect of Laban Motion Analysis I found helpful is its technique of identifying the intensity of a particular gesture. As a reviewer for my thesis, I would be interested in seeing how I would teach “intensity training” (for lack of a better term) in the curriculum. I have a couple ideas of exercises that I’m currently using with a class this quarter, and hoping to include it as a preplanning tool for one of the posing exercises mentioned in my curriculum.

The mention of posing exercises for the animator also brings to mind the topic of gesture. I’ld like to locate sources and references on the topic to make my point stronger. I plan to reference Glen Vilppu’s Drawing Manual, Bridgman’s Life Drawing Anatomy Manual, and John Vanderpoh’s Guide to Lifedrawing, all of these texts are standard texts in an animation studio. Referencing these books will make my topic on gesture stronger, now I just have to sit and sift through the pages of thse texts. I’m confident I will find what I’m looking for.

As we move into week 10 and 11, in addition to writing my thesis presentation, I need to come up with a working script for the animation I mentioned earlier. In order to meet my graduationdeadline, production will need to begin next quarter, which means that a script will have to be completed by the end of THIS quarter (Um, that’s in two weeks). Currently, I have an idea that my documentary styling will be following the look and feel of the news show “60 Minutes”. To begin, I found a great example on youtube.com that has the styling and formatting I want. You can watch it here.

Lots of stuff to do, and it doesn’t help that relatives come into town. They are a nice distraction, and I would separate themselves from them in order to complete the work, but these are “high ranking” relatives like my Mom, Dad and Brother and its not that often I spend time with them. Plus, I don’t want them getting angry, so I have to make sure they are okay (Filipino parents are sensitive you know, or at least mine are). I have found open windows in which to work and by this Tuesday, everyone will be on a flight back to the West Coast. I hope to press the gas and move quickly and efficiently this week to prepare for next quarter. For some reason, I don’t feel worried and it stems from the confidence I’m getting back from my leg healing. I’m on both feet, and am only using one crutch.

Woohoo!

"60 Minutes" Style Production Example

2008-03-08T11:20:00.000-08:00

To integrate my animations into one cohesive production, I am following the recommendations of my instructor to create a documentary style presentation. It would require that I have another character to act as the host, who is interviewing the various characters in my animations. For a while, I thought about the show "60 Minutes" and how that was a good example of a news documentary style that many people are used to seeing. I like how it beging, and how the dialogue track integrates with the footage. There are a lot of options to try, and I may just try all of them for variety.

Working Bibliography : References

2008-03-03T00:52:00.000-08:00

"Empathy." The American Heritage® Stedman's Medical Dictionary. Houghton Mifflin Company. 02 Jun. 2007. .

"Emotion." The American Heritage® Dictionary of the English Language, Fourth Edition. Houghton Mifflin Company, 2004. 03 Jun. 2007. .

Hooks, Ed. "Acting for Animators". Portsmouth, NH. Heinemann Press. 2000.

Jones, Chuck. “Extremes and In-Betweens: A Career in Animation”. 2003.

Lasseter, John. Principles of Traditional Animation Applied to 3D Computer Animation. July 1987. Computer Graphics, pp. 35-44, 21:4. 03 June 2007.

Mayerson, Mark. Mayerson on Animation. 2006. Blogger.com. 09 May, 2007.

Thomas, Frank and Ollie Johnston. "The Illusion of Life: Disney Animation". New York, Hyperion. 1981.

Thomas, Frank and Ollie Johnston. The 12 Principles of Animation. 2002. FrankAndOllie.com. AWN. 03 June 2007. http://frankanollie.com/PhysicalAnimation.html

Whitaker, Harold and John Halas. “Timing for Animation”. Burlington, MA. Focal Press. 2004.

ANIMATION WEBSITES:
The following websites have been used as inspiration for the workshop component of the thesis. These animators, if not already, will be contacted to provide feedback and input on this project.

Animation Mentor
http://www.animationmentor.com/

Bright, Rocky
http://www.thingamatoon.com

Christen, Simon
http://www.simonchristen.com/

Haas, John-Dennis
http://www.jeandenis.net/

Harris, Mark:
http://www.markcharris.com/

Jeffers, Leif
http://www.leifjeffers.com/

Luera, Robin
http://www.melvinandi.com/

Navone, Victor
http://www.navone.org

Rosario, Nick
http://www.nickrosario.com/

Pascual, Ruel
http://www.ruelpascual.com/

Spline Doctors
http://www.splinedoctors.com/links/index.html

Tan, Melvin
http://www.melvin-tan.net/

Thesis Outline 030208:

2008-03-02T22:05:00.000-08:00

THESIS OUTLINE (revised 3/02/08)

”How to Run Off a Cliff With Style : Animating Emotion in Characters”
by Randolf Dimalanta

- - - - - - - - - - - - - - -

ABSTRACT:

1) Open with Frank Thomas and Ollied Johnston quotation, “Emotion…it is one of animation’s greatest strengths and certainly one of the most important aspects of this art for the young animator to study and master.

2) Introduce the reader to the importance of emotion in character animation.

3) Begin to define the project, what I intend to explore and how the presentation is broken up.

- - - - - - - - - - - - - - -

ACKNOWLEDGEMENTS

A project like this is never completed alone, and so this section is a thank you to the following people: Dori-Little Heck, Patricio Fernandez, Thomas Joule, Ron Wade, Carol Parenteau, Jacob Kaltenbach, Meryl Blau, Doug Glen, Rocky Bright, Brian Tinker, Christina Labrise, Gretchen Thomas, Lee Lanier, Ed Hooks, all my students who have been the guinea pigs for this experiment, and my family Angela, Aisa, Iman and Mayumi.

- - - - - - - - - - - - - - -

INTRODUCTION

1) State the importance of animating emotion in characters and how character drives story. Show examples of these.

2) Explain how story drives the animation industry through interesting characters.

3) Explain how learning these skills happens too late in the animation student’s training and that it should happen sooner.

4) State the purpose of this project, which is to develop an animation curriculum that teaches the intermediate animation student how to animate emotion.

- - - - - - - - - - - - - - -

OVERVIEW of the INQUIRY

1) Explain the order of the presentation which will begin by defining “emotion”, followed by an overview of the “12 Principles of Animation” and its importance to the animation industry, explain the current state of emotion animation and finally, mention the curriculum for the intermediate animation student, which is taught through a series of exercises, that covers pre-planning tips, advice from professionals, stage acting techniques, video tutorials and which is then followed by class discussion questions.

- - - - - - - - - - - - - - -

STATEMENT OF INTENT
Here I list the reasons why I am choosing to explore this inquiry, and how the inquiry is broken up.

Reasons:

1) Learning emotion animation rarely occurs at the intermediate level. By providing this curriculum, it exposes industry standard methods for animating emotion in CG characters, which results in better prepared students for entry into the field.

2) It is part of my value system to give back to the community, though teaching and by developing a website where anyone can access the information to better their skills.

3) It helps generate samples for my professional portfolio.

For clarity of presentation, the project will be divided into 5 parts.

PART I: “What is Emotion”
Define emotion and what it means in animation characters. Review influence of the Golden Age of Disney and Warner Bros. and their impact in the field. List 3 examples.

PART II: “Acting for Animators”
Focuses on the mechanics of movement and acting principles as it relates to the animation student. Items to be covered in this section include gesture, various acting techniques, and laban motion analysis. Mention “Acting for Animators” text by Ed Hooks.

PART III: “Importance of Pre-Planning”
Covers the importance of pre-planning for the animator. Subjects covered in this section include: Knowing the character, understanding the scene in relation to the story, posing, shooting and using video reference.

PART IV : “The Animation Workshop”
Begin by explaining the purpose of the curriculum and the importance of feedback and constant practice.

This section is the “ 11 Week Animation Workshop”.
Each exercise will include an assignment description, objectives, animated examples, background information and a process for how to begin. The lesson will end with tips and tricks from professionals, discussion questions, links to resources for further study and video tutorials for select exercises.

The animation exercises / assignments are:

1) 2 Bouncing Balls Animation
2) Drink Box Animation
3) Pose Sketching for Emotion (This is drawn by hand).
4) Create CG Poses that Convey an Emotion. (Same as above, but is now done on the computer).
5) Gear Change I (Animate a character experiencing two emotions).
6) Gear Change II (Animate a character experiencing 4 emotions) (2 weeks).
7) Animate a character pushing and pulling a heavy weight (2 weeks).
8) Character Monologue (2 weeks).

BONUS Assignment
Animate a character dialogue (2 characters)

PART V
This refers to the website component of the presentation. Prior to completion, this thesis project will be available for view online by anyone interested, specifically intermediate animation students, animation websites, and professional animators in the industry. Animation instructors can refer to the site as a resource for their classroom.

= = = = = = = = = = = = =

GUIDING RESEARCH QUESTIONS (Not included here, but was included with the thesis pitch):

1) How is emotion defined in animation and why is it important?
2) To what capacity is emotion animation taught in animation schools?
3) What has been said by working professionals about emotion?
4) What tips and tricks do animators have to share about emotion animation?
5) How can emotion be achieved in a character?
6) What are effective animation techniques?
7) What are some acting techniques that an animator can use?
8) How can this help the animation industry?
9) How can this be marketed?

= = = = = = = = = =

CONCLUSION:
Comments on further study
Laban Motion Analysis
Ed Hooks: Acting for Animators Workshop
Getting feedback regarding your work (I’m currently reviewing resources that could help with this).

= = = = = = = = = =

OUTLINE & THESIS CHAPTERS:

= = = = = = = = = =

REFERENCES:

Alternative Lesson Plan Assignments

2008-02-23T01:19:00.000-08:00

Below are alternate lesson plan assignments that incorporate the different levels Bloom's Taxonomy.

This assignment was challenging as it forced me to think outside of what I already knew. I learned a lot. I wasn't sure of the difference between "conventional" and "unconventional". I'm guessing the unconventional assignments were assignments that I normally wouldn't do because they seem out of place, but offered a differerent point of view for solving a problem. What do you guys think? If any assignments come up while you are reading, by all means, shoot them my way. Thanks in advance.

Randolf

= = = = = = = = = = = =

Lesson 2 : "The Animated Drink Box"
How do you achieve emotion in a character who has no facial features arms, or legs? In this lesson you will see that this is possible. By understanding what creates emotion in inanimate objects, you will have a better understanding how emotion is achieved in more complex characters. To practice doing so, you will be animating a pre-rigged drink box cg character. The objective is to animate the drink box so that he clearly conveys a series of emotions . You will be exploring the principles of animation and you will also learn effective methods for planning that will help get your point across. Let's begin.

Conventional Assignments:

1) Type a one paragraph synopsis of what your drinkbox is going to do in this animation. To begin, have your character show one emotion, then have him experience an event or problem (that occurs offscreen - is the easiest), and end by having the drinkbox react to this event. Show the viewer if he is successful or unsuccessful in solving the problem or after experiencing the event.

2) Storyboard the above story in 5 panels.

3) Practice keyframing in Maya by creating animations that show your drinkbox hopping in three different ways. The drink box should hop a minimum of five times and should travel.

4) The "principles of animation" are an integral part of this lesson. In four short separate animations, animate the drinkbox demonstrating the following animation principles:

squash and stretch
timing
ease in and ease out
overlapping action

5) Using the above storyboard as a guide, create an animation of your drinkbox showing an emotion, experiencing an event or problem, then have the drinkbox react to this event by shifting to another emotion.

Unconventional Assignments

1) Research animations online that feature inanimate objects expressing an emotion. Be prepared to share how these emotions were achieved. Which ones were effective and which ones were not?

2) Act out your scene in front of a video camera and use this footage as reference. Yes, you have to believe that you are the drink box. If you didn't have arms and legs, how would you convey the emotion, happy? sad?

3) Draw on paper your drink box in the following emotions:

sadness
happy
proud
dizzy
inquisitive.

4) On your computer, pose your drinkbox rig in the emotions listed above using the previous drawings as a guide. Use the bookend technique to hold these animations for one second (24 frames), then shift to another emotion.

5) Answer or provide your input to the following: What emotions were the easiest to create in the drinkbox? How did you achieve them? What emotions were difficult to achieve and how did you solve for this?

Essay Stucture

2008-02-21T10:20:00.000-08:00

All of us in school will eventually create an essay. Its a formal method of conveying an idea, analysis or defending a stance to an argument. We all need reminders, myself included so here are some tips. In any any essay, the basic structure is that you have a beginning, a middle an end. The image below explains these parts in greater detail followed by a series of guiding questions.

Steps in the Reaction Essay Process

Read or reread the text with specific questions in mind.
Jot down or pay attention to basic ideas, events, and names.
Identify and consider the most important ideas.

a. How do you feel about what was said?
b. Do you agree or disagree with the author?
c. Have you had any applicable experience?

Does the evidence in the article support the statements the writer made? Give examples; be specific.
What other sources agree or disagree with the major claim? (Find additional critiques.)

MIU Online Lectures. "Warrants and Arguments". Miami International University Online. 21 Feb. 2008.

Thesis Checkin - Tune Up

2008-02-17T23:38:00.001-08:00

At the beginning of the quarter it was essential, and halfway through the term, its a good idea to check directions again. For the most part, my direction has gotten more focused. I've added a slight change to my audience, which will affect how my thesis will be presented in the end. I have a couple of directions to explore regarding "Laban Motion Analysis", the theoretical acting component to my thesis and Ed Hooks' thoughts on "Laban Motion Analysis". Looking ahead, I'm thinking about refining and filling in the blanks for the exercises which make up my curriculum, and finally (and this makes me nervous...) is that I still have to plan an unexpected addition to the animation component of my thesis which I will explain below.

My major claim is that animating emotion can be taught to intermediate animation students, after this week, I've decided to change things a bit, I've decided to gear my presentation towards instructors as well. This seems obvious, but I didn't see it at first. This change came about while doing work for the "Teaching Methodologies" class with Michael Greene. I figured that I needed to include myself, acting as the animation instructor, as I will be using this specific curriculum for the classes I teach. In the class, I put together a list of objectives and a workable lesson plan that made me see how the exercises should be presented. I had not done so up to this point, and it would be best to begin putting this information together before the quarter ends. My main audience, the MFA approving body, are instructors as well, and one of things they will be watching out for, is how clear and well presented my curriculum is. This includes learning objectives, lesson plans, exercise descriptions, tips from professionals, video tutorials (for some) and a means to assess progress for the student. I have 10 other exercises to do this for, and if I can commit this to paper, I would feel much better.

A subject that came up last week was "Laban Motion Analysis". Developed at the turn of the century, this was a system which broke down movement for actors to four major states. Presently, ideas are included in acting classes for animators. One of the main proponents for this method is Ed Hooks. Hooks is the author for "Acting for Animators", the book which gave me the idea for this project, and has since acted as my guide. The book however, doesn't mention the Laban Method, and so an inquiry is in order. I hope to make contact with him early next week. Some of the driving questions regarding "Laban Motion Analysis" that will guide my research include: What is Laban Motion Analysis? How does it benefit actors? How can it benefit animators? How is this used in acting classes for animators? How can this information be simplified and edited so that it can be integrated into my curriculum?

One concern I had developed last quarter, was when my thesis was reviewed by my MFA thesis committee. It is still not clear, but I wasn't sure if people were in agreement of the development of a website to represent my curriculum, I also don't think they liked that my project didn't have a final animation to accompany the thesis, which is what usually happens. The input I got from my acting advisors, was that my idea was good. When my work was reviewed last quarter, my project consisted of examples from the animation exercises presented in my curriculum. This, as well as creating the website, seemed to be enough.

This was not the case. After my thesis was reviewed, someone made the comment that my animations were disparate and that something needed to be done to make it look like one piece and there were some in agreement. I had some help, and came up with the idea of stringing all of my animations into a "documentary" style presentation. Imagine a show like "60 Minutes", where the animated characters were being interviewed about the topic of emotion. These interviews would be strung in-between the different animated examples and would also have an interviewer or host who would guide these characters. The idea had merit, seemed fun to do and was feasible to complete within the timeframe.

To some extent, I agree to what was suggested. By putting this animation together in this way, it would serve as a good example for others as it unifies everything I have done. The extra animated footage would also feature the characters in different emotional states (I envision these to be quite entertaining). The hard part, is that since this idea came at the last minute, that I should be using this quarter to plan before executing the animations next quarter. This includes developing a simple script and a storyboard so that I have a better understanding of how the final animation is going to be put together. The sledding accident which broke my leg didn't help and its been frustrating, but things are getting better. So in my schedule I hope to include time to put this together. I'm expected to begin animating and putting this together next quarter, otherwise I won't be able to finish in time for thesis defense.

Below is a tentative schedule for this quarter. I think everything explained (excluding the animation) above can be achieved, and once completed, would serve as a good base for the next two quarters. Mentally, I would like to have this work out of the way before I animate next quarter.

- - - - - - - - - - - - -

Week 7:
Send Ed Hooks inquiry
Develop learning objectives for exercises 1 and 3.
Research Laban Motion Analysis
Create Script for final animation.
Research and make contact with USC animation group.

Week 8:
Develop learning objectives for exercises 4 and 5.
Research Laban Motion Analysis
Review professional animator interviews and note where information will be placed.
Garner script feedback.

Week 9:
Refine Laban Motion Analysis
Develop learning objectives for exercises 6 and 7.
Storyboard script for final animation.
Cite 2D and Lifedrawing Examples
Gesture Research

Week 10:
Develop learning objectives for exercises 8 and 9.
Refine storyboard script for final animation.
Work on thesis rough.
Eyes Research

Week 11:
Develop learning objectives for exercises 10 and 11.
Submit thesis rough.

MLA Style: Theses Published and Unpublished

2008-02-10T21:09:00.000-08:00

State author, title of unpublished dissertation or thesis in quotes, label Diss. or MA thesis, name of university, and year.

Elmendorf, James. "The Military and the Mall: Society and Culture in Long Beach, California." BA thesis. Hampshire College, 1995.

Jackson, Marjorie. "The Oboe: A Study of Its Development and Use." Diss. Columbia U, 1962.

Underline title if dissertation is published:

Chan, Marjorie K.M. Fuzhou Phonology: A Non-Linear Analysis of Tone and Stress. Diss. U of Washington, 1985.

Gregory, T.R. The C-Value Enigma. PhD thesis. U. of Guelph, ON, 2002.

MLA Style: Weblogs and Blogs

2008-02-09T18:30:00.000-08:00

Last Name, First. "Title of Entry." Weblog Entry. Title of Weblog. Date Posted. Date Accessed (URL).

Example:
Romano, Lou. "Phoenix." Lou Romano. Feb. 1, 2008. 9 Feb. 2008. <http://louromano.blogspot.com>

To cite an archived weblog entry, navigate to the archived source and provide the exactURL to the post:
Hawhee, Debra. "Hail, Speech!" Weblog entry. Blogos. 30 April 2007. 23 May 2007 <http://dhawhee.blogs.com/d_hawhee/2007/04/index.html>

Other examples of citing digital sources can be found on the OWL Purdue site here:
http://owl.english.purdue.edu/owl/resource/557/09/

MLA Style: Interviews

2008-02-09T18:27:00.000-08:00

MLA Citation for Professional Interviews:
Interviewee's last name, First name and Initial. "Title of the interview (if given)." Interview (if untitled) with interviewer's name (if pertinent). Day, month, year, edition (if radio, TV, or periodical). Publication location: Publishing company, year (if given). Page numbers (if given).

example (Use this one):
Last Name of interviewee, First Name. "Animating Emotion Interview". Randolf Dimalanta. 10 Oct. 2007.

example:
Lansbury, Angela. Interview. Off-Camera: Conversations with the Makers of Prime-Time Television. By Richard Levinson and William Link. New York: Plume-NAL, 1986.

Curriculum Split

2008-02-05T10:12:00.000-08:00

While reading for my thesis writing class, I thought about the curriculum that was developing. Currently, its a series of 9 exercises. This group is directed to the intermediate animation student, and in order to ensure that students were able to follow the final the final assignments, the beginning assignments were designed to review keyframing, posing and the Maya workflow for completing animation.

I thought about developing a second curriculum that was geared towards someone more advanced. This curriculum would not include the bouncing ball, walk or run cycle, but instead will begin with posing exercises or various gear change exercises.

Robert Cagne's 9 Events of Instruction

2008-02-04T04:24:00.000-08:00

1. Gain attention (Stimuli activates receptors)
2. Inform learners of objectives (Creates level of expectation for learning)
3. Stimulate recall of prior learning (Retrieval and activation of short-term memory)
4. Present the content (Selective perception of content)
5. Provide "learning guidance" (Semantic encoding for storage long-term memory)
6. Elicit performance (Responds to questions to enhance encoding and verification)
7. Provide feedback (Reinforcement and assessment of correct performance)
8. Assess performance (Retrieval and reinforcement of content as final evaluation)
9. Enhance retention and transfer to the job (Retrieval and generalization of learned skill to new situation)

Thanks Drew for the info. I plan to implement these in my class this week.

Preplanning Concept

2008-01-28T01:15:00.000-08:00

Emotion is integral to any character animation endeavor. Without it, there is no connection with the audience and the story suffers. When I started the thesis process, I noticed that there weren’t many resources available for animators in the subject of emotion. There were some books on animating facial features, which I found to be too technical. The closest resource I had found was Ed Hook’s text, “Acting for Animators”. It touched on the deeper aspects of conveying emotion in characters and its connection with the audience. Other than these texts, one would experience this type of instruction inside the industry, where new animators, upon entering a company, will usually undergo a training session where emotion and the proprietary software are covered. Many animators working in the industry have become university instructors where they introduce many of these concepts to students. A good example of this is a website called Animationmentor.com, a private online animation school, where animation students from all over the world take 6 – 10 week classes and learn from professional instructors from Pixar and Dreamworks. The site is popular and many students after taking the course, are recruited to work in the industry. The instruction is only available to a select few, and although it is impossible to get first hand instruction from professional animators, I believe that engaging in these exercises, is a good first step.

For my project, I thought it would benefit everyone by researching the most important aspects of animating character emotion, the exercises to help enhance this and to turn into a curriculum that could be introduced to intermediate animation students. The idea, is that if students were introduced to these concepts while in school, when they graduate, they would have experienced methods, learned concepts and would have examples to demonstrate their understanding and which they could use as part of their professional demo reel. The end result is that these students would be more prepared to take on complicated animation tasks such as animating emotion.

As part of my research, I sent out a questionnaire to professional animators in order to get a better understanding of how emotion is seen and achieved in the industry. The questionnaire was comprised of twenty questions covering education history, mentors, animating workflow techniques, animating emotion and tips and tricks for students. Eleven animators responded and this week, I reviewed all of them to see if I could find a new direction or gap in animating emotion that I have not seen. I noticed something profound. It seems simple, but I think if I focus on it, that it could help students achieve greater results. What I found was that there is a great deal of preliminary cognitive work that has to be done before any animation is started. Simply put, it requires observation and questioning, the conscious implementation of both could make the act of animating emotion simpler.

In almost all of the interviews, when asked to provide a resource that had helped them animate emotion, “observation” came up in over half of the questionnaires. This seemed obvious at first, but it’s the basic task for all artists, all artists must be aware of the world in the way he understands in order to interpret that into a visual expression. In this case, its an animated performance. This includes careful observation of people and objects from life. It also means shooting video reference, and scrubbing through animation clips or movies. Another resource they found essential was the ability to act in front of a camera or mirror. This takes initiative from the student and it places the student in a situation where he has to “feel” the emotion in a character.

Other questions that helped to animate emotion include: What is the state of mind of the character? And what happened to this character in the previous scene? What happens to the character in the following scene? How does this scene play into the overall scheme of the animation? Almost all of the professional animators before working on a scene would ask the above. Once these questions were answered, the animator would have information to add to the scene and could then move to the next step. In this, to solve for emotion the animator proceeds to creating a series of poses in the character that help to convey the story. These poses must be clear enough that even in silhouette form, they would still be readable. These can be drawn then translated on to the CG character, or it can be applied to the CG character directly.

These questions provide clarity into the process. In reading about this, I wondered if there was a way to integrate some sort of exercise where the student would have to consider the state of mind or any previous histories of the character. These can be made up, but I wonder if the implementation of this will make the final performance more engaging and rich. I see this as being an addition to my animation exercises, where every exercise has a section called “Preplanning”. This gives additional value for the user.

In these interviews, we could conclude that “Preplanning” was key to creating great emotion in characters. Professional animators do this naturally as part of their practice. It saves them time, the approval process is smoother and they get a better performance. I see this “Preplanning” as a feature in the presentation of my curriculum. In it, we ask students before animating, to take the time to think of a couple of things before animating. This includes knowing the state of mind of the character, the scene before and after, shooting reference and formalizing clear poses. From experience, I know that some students take the time to preplan, but most do not, and if they do, I have not come across any resources that mention the most effective ways of doing this. Doing so would create better results for the student.

Gesture Animation

2008-01-25T21:44:00.000-08:00

I thought about this topic as a new direction to my thesis, and it focuses on gesture, and or gesture drawing for animation. Not sure how this would be interlaced throughout the project, but I do find a correlation as gesture relates significantly to emotion. Below is a description followed by an example of gesture animation I found on youtube.

My topic is gesture animation. Gesture drawing is a type of drawing done quickly in life drawing classes where the student must capture the figure's pose and proportion in a rhythmic fashion so as to appear fluid. These quick drawings, on a deeper level, can also capture the feeling or emotion of the pose being displayed. One of the concepts of gesture drawing, is that this preliminary gesture drawing is the foundation for what could be a final rendered drawing. At this stage, the drawing could be created in such a way that it exaggerates the pose at hand, which then exaggerates the feeling or emotion being expressed by the model. The concept to remember is: more exaggeration equals more emotion. An intermediate student having taken a number of life drawing classes would understand this, and I believe that relating this knowledge or experience to the student's task of animating CG characters would help the student at the initial posing and keyframing stage. Before animating a CG character, a animator must plan out the main poses of the animation through various keyframes in the animation. If the student understands that through exaggerated gestures emotion is achieved, then the student will have an easier time achieving emotion in computer generated characters.

Curriculum Class Description & Competencies

2008-01-20T11:21:00.001-08:00

Below is a class description for the curriculum I'm developing. One thing to consider is if I have to create variations of the curriculum. I'm thinking about developing one for advanced students, one that does not contain the beginning exercises such as the bouncing ball or walk cycle.

------------

Animating Emotion in CG Characters

This course introduces intermediate animation students to ideas and practices in animating emotion in CG characters. The student will be animating prexisting character rigs and will begin by exploring the animation principles, will then move to pantomime exercises, and will conclude by having the student animate a character monologue/dialogue. Various pre-planning techniques will be reviewed and suggested before every exercise to expand learning.

Course Competencies:
Upon successful completion of the course, the student should be able to:

Demonstrate keyframe animation in Maya.
Become familiar with industry standard exercises to demonstrate emotion in characters.
Become familiar with various pre-planning processes to enhance emotion in characters.
Create animation samples that demonstrate emotion animation.

Broken Leg

2008-01-20T11:15:00.001-08:00

Experienced a sledding accident this New Year's Eve and broke my leg. I've been in recovery the last four weeks and will post thoughts regarding my recovery on my other blog here:

http://randolfs.blogspot.com/

It's good to be back. Below is a snapshot of my leg the during the first week of the break

Assignment 17 : Santa Final Render

2007-12-14T20:25:00.001-08:00

Here is the final render of "Santa, I Know Him".

Santa, I Know Him from randolfd on Vimeo.

Assignment 16 : "Guitarbite" Final Animation

2007-12-14T16:25:00.000-08:00

AC/DC Monologue Extended from randolfd on Vimeo.
I'm not sure yet about the background color, but it works for now. Enjoy!

Assignment 15 : Test Render

2007-12-12T20:16:00.001-08:00

For this piece, I wanted an ominous feel to add to the story, but in the end, after the monologue, we switch to our brightly lit future nursing home...a little touch of contrast to brighten the piece.

Assignment 16 : Test Render

2007-12-12T20:13:00.001-08:00

This is my first pass at a simple environment and render for this scene. I wanted to suggest a department store in a simple way so the the characters stand out. I like how this looks so far.

Assignment 16 : Dialogue - Rough Blockin

2007-12-05T22:29:00.000-08:00

BBC Motion Gallery

2007-11-25T21:35:00.000-08:00

I colleague of mine forwarded a nice resource to me. It features showcases footage that animators can use as reference for their animations. One of the things I like the most, is that you can download the clips on to your desktop as quicktime movies, where you can step the frames for viewing. Check it by clicking the picture below!

Assignment 15: Push Pull Final Render II

2007-11-18T01:34:00.000-08:00

Assignment 15: Push Pull Final Render II from randolfd on Vimeo.

Assignment 14 : Gear Change II , 4 Emotion Final Render

2007-11-17T21:49:00.000-08:00

Assignment 14 : 4 Emotion, "Ghost Coin" from randolfd on Vimeo.

Assignment 16 : Character Monologue 1

2007-11-15T07:53:00.000-08:00

Below is a blocked in test of my monologue. I'm thinking about possible environments for background and came up with a few: a future nursing home, a hangar of star pilots, a park.

Assignment 15: Push Pull Final Render I

2007-11-12T11:00:00.000-08:00

This is almost done. In looking at this now, there are many things that still need fixing. These are listed below:

Place spotlights outside the door to simulate a delivery vehicle.
Flicker to the candle lights.
Remove some of the movements to simplify the action.
Sliding feet when he pulls.
Parent hand controls moving object.
Add a pizza logo texture to pizza box.

Assignment 15 UPDATE: Pushing & Pulling

2007-11-07T23:56:00.000-08:00

This animation is due this week and attached is my latest progress. The animation is turning out much longer than anticipated and I see many ares that can be smoothed out a great deal, using the graph editor, and I still have to refine the hand positioning.

I was able to block in the pizza, and a back turn. Its one of those things that you have to put away for a while so you can look at it objectively with fresh eyes in the morning.

Assignment 15: Lighting Test

2007-11-07T23:53:00.000-08:00

Before I conduct a final render on this animation, I thought I'd add lights to add to the mood. Of my various tests, I like these the most.

Assignment 15 : Animation & Music are the Same

2007-11-06T08:17:00.000-08:00

Regarding the Igor animation below, Dori, one of my advisors recommended I see animation and music as being the same. The sound clip offers a good example of this and its something to keep in mind when I work. Igor's travelling movements should be fast and his pulls should be slow, the concept is similar to what is demonstrated in the soundclip below. Both animation and music benefit a great deal with the addition of color (variety and contrast) to the overall composition.

Assignment 15 : Pushing and Pulling Animation Update

2007-11-04T20:25:00.000-08:00

Here is the latest. The animation is longer than I had originally expected, but I'm liking the way its looking, so I'm devoting one more week. I've adjusted the timing throughout. I need to animate the end and yes, I'm stil going with the pizza idea. Up to this point, I've gotten really familiar with the dope sheet. I hope to post the completed piece here once it is complete.

Things to Fix:

Slow the pulls and pushes to contrast his movement from one place to another.
Consider pushing with his back during the first push.
Too floaty in the beginning.
Open hands before grabs.
Adjust hands to hold the ring.
Too much head movement.
More frames during first jump.

Assignment 15 : Body Mechanics / Pushing Pulling Animatic

2007-10-23T18:39:00.000-07:00

Here's my first pass at this animation. Learning from the previous project, I need to stagger my timing more, by adding more slow movement to contrast with the quick movements. I'm also thinking about getting rid of the pizza idea and just having Igor run out of the door, but in looking at it again, I really like the payoff.

Assignment 15 : Body Mechanics / Pushing Pulling

2007-10-23T10:04:00.000-07:00

Assignment 15:
Animate a character engaged in a sport, or have him push or pull something.

Here is a storyboard breakdown of what I had planned.

Assignment 14 Update : 4 Emotion / Gear Change

2007-10-23T09:52:00.000-07:00

I learned a lot in this assignment. Technically, I got used to animating using the "bookend" technique, which places two of the same keyframes spaced about 12 frames apart. The action is placed in between in order to control the animation process.

I also learned the value of planning and simplicity. The ability to be able to break down the animation to its key components, enough to be able to count what you are wanting to animate on your hand, greatly simplifies the process and makes things clearer. Why do I need to write this? Because ambition gets the best of us. We want to do well, and therefore, doing more than what's expected, even though the intention is good, we lose sight of what we are trying to do.

Here's the latest. I think it plays a little fast, and I'd like to slow down the peak-through at the end.

Assignment 14 or 12 : Gear Change 2 or Animating 4 Emotions

2007-10-13T20:12:00.000-07:00

Animating 4 Emotions from randolfd on Vimeo.

This original assignment was to animate a second gearchange different from the first. In all of these assignments, its extremely easy to get too carried away, and to animate more than is needed. Its by far the most difficult thing to overcome that I think will get better through experience. The most simple way to prevent this is through planning.

For this assignment, instead of two emotions, the character is now experiencing 5 emotions: sadness, surprised, fear, inquisitiveness and happiness, followed by pain. I was too deep into the animation before I realized I had done too much. I think its a good example of the 4 emotion assignment that I am supposed to undertake in the next few weeks.

Some tips for this successful completion of this assignement:

Research:
Think of a funny incident that has happened to you, and act it out in front of a video camera. You will use this as reference, and you will watch it step by step so you can get a realistic idea of the timing involved, as well as little nuances in the acting that will give the performance variety and realism.

Planning:
Be sure you are clear which emotions are being portrayed, write these down and stick to them.

Stepping:
Pose your rig in the timeline, making sure that you hold each pose by placing two identical keyframes to hold the pose. 48 frames is a good duration for a pause. Shorter pauses should be 24 frames. These pauses act as periods in the performance which gives the viewer a split second to understand what is going on. In Maya, step these performance so you have a rough idea of timing.

To step your keyframes:
Shift + LC drag you mouse over the frames you want (they should be highlighted red) > RC > Tangents > Stepped.

Animating:
After posing, begin to animate the spine and center of gravity from one emotion to the next. In traditional stage drama, it is part of an actor's training to express oneself from the inside out. In animation, we'll do something similar, let's animate the spine and center of gravity first before doing the limbs and head. This technique adds a natural moving pause to your movement (moving pause link here).

After you have animated the spine, torso and center of gravity, begin to animate the limbs and head. In animating the arm, animate the upper arm first, followed by the elbow, then wrist rotation. At this point, you are animating follow through and overlapping animation, which will make your piece look more realistic.

At this point, its essential to remove the stepping from your playback so you have a better idea of how things are turning out.

Finishing Touches:
Be sure to check your work and seek feedback to improve our work. After more finishing touches, use the graph editor to smooth your animation and to refine your arcs.

Tip:
One thing to keep in mind while animating, is to add a variety of speeds in your animation. Mix fast movement with slow movement. This adds contrast and visual interest to your piece. A good example of this is explained in Victor Navone's blog on Animating 3 speeds.

Click the link below to explore more:
http://www.navone.org/blogger/2007/09/3-speeds.html

Animation Mentor

2007-09-22T05:46:00.000-07:00

Animationmentor.com is an online animation school taught by industry professionals. The demoreel featured on their site of student work from 2007 is exceptional. It shows what can be done through the animation of simple shapes and the implementation of basic animaiton principles.

http://www.animationmentor.com/index.cfm

Movement for Actors (Notes)

2007-09-21T14:48:00.000-07:00

I'm currently reviewing a book called "Movement for Actors" edited by Nicole Potter. I'm hoping to glean lots of information from the text and will place here in the entry what I feel could be used for animators.

“Movement for Actors” as described best by the quote on the reverse side of the book,

“The most complete survey to date of the available physical components of modern actor training. Invaluable.” George Morrison, President, The New Actors Works, Emeritus Professor SUNY-Purchase.

The book has a lot of great information regarding body movement and this translates emotion. It covers drama and stage techniques by Chekhov, Laban and even has a small section on the acting styles of Keaton and Chaplin.

I wanted to review the book to see if I could find anything that would help animators convey emotion in their characters. I found many of the techniques in the book to be drama, stage and dance centered. The descriptions of which were abstract and I wasn’t sure if an animator would find this information helpful. If an animator chooses, he or she could check the text out themselves.

I did however find a few sections interesting. They are listed below as well as my notes on for each section for further study.

Michael Chekhov (18):
An early 20th century actor originated the acting principles of stoccato and legato, contraction and expansion. The actor is to relax and to familiarize himself with how his entire body is reacting to these conditions. Exercises like this connect the mind to the body. In acting, if there is a disconnect, we have overacting or stiff performances.

Still Movement:
Even though there is no movement, if an actor feels the emotion from within, the emotion should radiate. The actor thus becomes a living shape. Here, pauses become loaded with emotion as suggested by the viewer’s imagination.

Character Archetypes:
When acting, think of the character archetype and the role that this character is in. Identify the core of the character first. Play this role first and add personality traits later. Like sculpting, you want to get the general proportions first, before going to fast into the detail.

These unique personality traits should come from your imagination and from your experiences as a human being.

As the character ask, “What Do I Want”, and pay attention to what the body says. Relax and pay attention to the impulses that arise. This could lead to gestures, more specifically, when rehearsed, core gestures. These should be practiced, and if you are animator, begin recording reference after you have practiced.

If one cannot get into the gesture, there may need to be an adjustment of the gesture itself, or the body is not sufficiently prepared form lack of research or stress.

BELIEVABILITY & EMOTIONAL CONNECTION:

Kinesthetic Awareness:
Be aware and act naturally to your surroundings, be aware of impulses or signals your body gives you. Be observant of what your hands do in any situation.

Sensory Awareness:
Your five senses will pick things up from the environment, what are they doing. By observant, you can put these nuances into a performance.

Proprioceptive Awareness:
Refers to the expression by the entire body, not just the hands and face. This section also talks about habits that we as actors get into and that we must break from in order to stay away from overacting (230).

RANGE & EXTERNAL CHARACTER DEVELOPMENT:

Posture and Gesture:
The actor should change from the floor up. Create movement from the hips and leg stance thinking that the body is the decoration. “We lie with our face and hands. We are the shape of our spine and our legs”. This quote is profound the idea actually helped me in animating my last assignment, but focusing on animating the core and spine first.

Tension:
Inevitably linked to posture. The link between your posture and the scene is imperative. An actor becomes great when he uses his posture to communicate in a scene. Exercise: How many poses can one do while washing dishes, or holding a fork?

Space and Shape:
As an actor, be mindful of your shape (silhouette) and your relation to the camera.

Rhythm:
Maxheadroom is an example of overaggerated dramatic rhythm. Exercise: While listening or reciting lines, try to establish a rhythm with your hand or an inanimate object. Establishing a rhythm creates a tempo that a viewer can follow (233).

Eye Head Relationships:
Drama in oriental cultures place a great emphasis on the eyes. Eyework must be practiced. A great example of this is Anthony Hopkins in Silence of the Lambs.

THEATRICAL STILLNESS:

As a society, there is an enduring fascination with stillness (27). It can express: calm, meditation, rigidity, exhaustion and or panic.

Think of stillness as pauses between the different emotions, this allows for the viewer to digest what is happening, it gives clarity and meaning to the performance to the relationships.

Adding pauses offers rest at the end of the thought and it permits the transitional moment to the next scene or line.

Too much stillness creates an uneasy effect.

TEACHING CHAPLIN HOW TO WALK:

Posture and Movement:
Difference between the two actors – Chaplin walked with is head aligned with his spine. Keaton, lead with his head. Subtle differences like this added to character. Running offered more insight and magnified the characters more.

Body Shape:
Chaplin was an ectomorph, someone characterized by seeming to be delicate or nervous. Our attention is drawn to their eyes, hands and feet.

Endomporphs: Larger, sluggish and powerful, where movement seems to come from within. Characters such as John Candy and Orson Welles are good examples of this.

Mesomorphs:
Keaton was of this body type, usually characterized by the “He – Man” archetype.

Both of these characters used their physiques to convey character. In the book it also pointed something that I believe could be important to an animator and that is that Chaplin moved in circular patterns.

In both cases, Keaton and Chaplin were masters at creating interesting silhouettes and shapes. From far away or long shots, the characters’ eyes and body forms would be readable.

Potter, Nicole. "Movement for Actors". New York. Allworth Press. 2002

FURTHER STUDY:
Rhythm in animation.

Example Demo Reel

2007-09-21T13:42:00.001-07:00

My instructor Yu-Ting posted his demo reel on Youtube. I liked how he showcases his rigging skills through screen captures, something I'm currently exploring. Thanks for posting.

The link to his demo reel is below:
http://www.youtube.com/watch?v=YzRLcPPdMis

Free Maya Character Rigs

2007-09-19T23:58:00.000-07:00

In order to complete the following exercises featured in this thesis, you will need a rigged character model that is capable of full body and facial movement. A good place to download a variety of character rigs can be found on the High End 3D site, it features free rigs to be used for animators of the following platforms: 3DS, Maya, XSI and Renderman. I've already tested the rigs below, some made the list and some did not, the ones below worked well. I also thought it might be helpful to post the two second tests of each rig to give users a better idea.

Please note that the following rigs have been reviewed under the Maya platform. Happy animating.

Basic Guy
by Tim Oberlander
homepage: http://www.timoberlander.com
download: http://www.highend3d.com/maya/downloads/character_rigs/Basic-Guy-4284.html

Basic Guy Test Animation from randolfd on Vimeo.

Chip
by: Anders Fray
http://www.AndersFray.com
http://www.highend3d.com/maya/downloads/character_rigs/Chip-4446.html

Chip Rig Animation Test from randolfd on Vimeo.

Andy Rig
By: Models and Rig by John Doublestein, Design by Craig Scheuermann, Textures by Ying-Chih Chen. Some rigging techniques inspired by Jason Schliefer, Aaron Holly, Javier Solsona, Michael Comet and Hamish McKenzie
http://www.highend3d.com/maya/downloads/character_rigs/The-Andy-Rig-4697.html

Andy Rig Test Animation from randolfd on Vimeo.

Max
by James Hunt
download: http://www.highend3d.com/maya/downloads/character_rigs/Max-for-Maya-4877.html

Max Rig Animation Test from randolfd on Vimeo.

Tiny
by Chad Vernon
homepage: www.chadvernon.com
download: http://www.highend3d.com/maya/downloads/character_rigs/Tiny-4578.html

Tiny Animation Rig Test from randolfd on Vimeo.

Packageman
Javier Solsana
homepage: http://www.rigging101.com
download: http://www.highend3d.com/maya/downloads/character_rigs/PackageMan-4688.html

Boris with Facial Rig
by James Stone
homepage: http://www.jamesstone.co.uk/
download: http://www.highend3d.com/maya/downloads/character_rigs/Boris-with-Facial-GUI-4659.html

Boris Rig Animation Test from randolfd on Vimeo.

T-Rex 1.0
ssnohv
download: http://www.highend3d.com/maya/downloads/character_rigs/T-Rex-ma-4606.html

Flour Sac Character
homepage: http://www.timoberlander.com
download: http://www.highend3d.com/maya/downloads/character_rigs/-Flour-Sack--Character-4330.html

Alexia with Face Controls
download: http://www.highend3d.com/maya/downloads/character_rigs/Alexia-Body-w-Adv-Facial-Controls-Rig-4570.html

Grasshopper 2.0
by Harun Aydin
homepage: http://www.vertigo.com.tr
download: http://www.highend3d.com/maya/downloads/character_rigs/Grasshopper-4561.html

Devil
by Model by Rahul Mehta -
Rig by Harshad Bari -
download : http://www.highend3d.com/maya/downloads/character_rigs/DEVIL-4457.html

Devil Test Rig from randolfd on Vimeo.

Moom
by Ramtin Ahmadi
download: http://www.highend3d.com/maya/downloads/character_rigs/MooM-version-3-4346.html

Ollie 1.5
homepage: http://www.jugglersanimation.com/
download : http://www.highend3d.com/maya/downloads/character_rigs/Ollie-4466.html

Ollie Rig Test from randolfd on Vimeo.

Generi "Blue Guy" Rig
by Andrew Silke
homepage: http://www.andrewsilke.com
download: http://www.highend3d.com/maya/downloads/character_rigs/Generi--Blue-guy--rig-4288.html

Lowman
homepage: http://www.animationapprentice.com
download: http://www.highend3d.com/maya/downloads/character_rigs/Lowman-rig-with-face-blendshapes-4304.html

Lowman Character Rig Test from randolfd on Vimeo.

Assignment 9 : Creating a Demoreel

2007-09-16T13:38:00.000-07:00

Assignment 9 : Demo Reel from randolfd on Vimeo.

Assignment 9:

Create a demo reel with your examples thus far. Some tips:
Start with your best work
Add music that is nonspecific, for the above track, I used Soundtrack Pro. Its a program that has lots of beats and instruments and anyone can create a track that is royalty free and unique.
Watch for timing and theme
When creating a professional reel, include playblasts and not fully rendered scenes. Make the viewer see only your animation and do not give them a reason to critique your texture and lighting.
In your demo reel, do not put the bouncing ball. It labels you "Student".

Thesis Part I Completion : Moving Forward

2007-09-16T12:56:00.000-07:00

I went through the quarter taking a character animation class, in which we engaged in exercises that when taken in sequence would eventually build skill in animating character emotion.

These were the exercises accomplished this quarter and have been posted in this blog:

bouncing ball
2 bouncing balls with differing weights
drink box
walk cycle
run cycle
pantomime
hip turn
one emotion
gear change - two emotions
creating a demo reel.

The question I encountered this week, is what should the next exercises be. In my thesis proposal, I had planned to do two major assignments that would be developed next quarter, dialogue with a single character, then dialogue between two characters.

I spoke to the animation instructor about it and he felt the dialogue exercises should be last, and that more should be done before being attempting dialogue. These exercises should be attempted below but in an 11 week it might be difficult to teach this to students. An alternative would be teach and develop a curriculum spanning 2 quarters (22 weeks).

another gear change assignment of different emotions (2 weeks).
an animation showing 4 emotions (these two would be blocked in pantomimes in the beginning) 3 weeks.
a body mechanics animation (ie. a character jumping off of a high place or picking up a heavy object). 1 week
Pantomime animation with 2 people. (1 week)
Dialogue animation assignment with 1 person. (2 weeks)
Dialogue animation assignment with 2 people (not sure if there's time for this one - 2 weeks).

These would be the animation assignments I have slated for next quarter.

As an example, please see Rebecca Perez' demo reel, it features many of the assignments mentioned above and its a good example of what I'm striving for. She's a Disney Animator (perhaps Dori knows her) and she accomplished these exercises through the Animation Mentor class.

http://www.wik-id.com/reb/AM/Class2/A12/ALLanims_sm.mov

and

http://www.wik-id.com/reb/AM/Class1/A12/AM_Class1_Anim_comp_sm.mov

I'm wondering what feels the best to you as far as which assignments to go forward with. What do you guys think?

Thanks,
Randolf

Assignment 8 : Gear Change II

2007-09-16T12:01:00.000-07:00

Assignment 8 : Gear Change Assignment from randolfd on Vimeo.
Critique:

Watch for the rotation of the hip. Adjust this to create a better line of action within the character's spine.
Get more of sway in the spine by animating the root, and having the rest of the body overlap, followed by head sway and arms.
Get more of the "jacked up" in the main keyposes and do not don distort the figure too much.

Observations / Things to watch out for from the rest of the class:

When animating overlap, animate the spine, head then arms. Hide these layers so can focus on each individually.
When animating emotion, make sure we see the character realize the event..pause...then have the charater react.
Watch for twinning in poses.
Add moving holds. In poses where there could be a definite pause, other parts of the body should move as well.
Add more anticipation.
Make sure silhouettes are readable.
Animate the scene for emotion, not just movement.
The hardest task is to simplify the action to its essential elements. Animating a 22 second animation in a week will make for a weak animated piece.
The character is always looking for or thinking of something.

Shaun Freeman Site

2007-09-05T18:46:00.000-07:00

Animator Shaun Freeman has a nice page full of animation tips and tricks. Definitely worth checking if you'd like to improve your work. Below is a sample of some of the topics he discusses.

http://www.shaunfreeman.com/animating_tips/index.htm

Using live reference.
Moving holds
Animating to the camera
Animation Flowcharts
Refing your work (I liked this one a lot)
Characterization
Blocking in Dialogue

Thanks for posting Shaun.

MIDTERM : Run Cycle

2007-09-04T22:51:00.000-07:00

Igor Run Cycle from randolfd and Vimeo.

This assignment was given week 5, almost like an animation test. Students had two hours to complete the assignment.

Assignment 9 : Movie Pose Sketching Assignment

2007-09-04T00:53:00.000-07:00

In this assignment, the student is to watch movies from various genres and is to sketch/capture the poses that make the scene work. The best movies to watch for this assignment are your 1920's silent films as their performances were based on body language clarity, timing and form. Below are some examples:

Assignment 6 : Hip Turn

2007-09-02T18:32:00.000-07:00

Animated Hip Turn from randolfd and Vimeo.

List of Emotions

2007-09-01T22:49:00.000-07:00

Happy
Angry
Sad
Surprised
Excited
Anxious
Inquisitive
Embarrassed
Drunk
Confused
Sick
Tired
Loved
Daydreamy
Rage
Depressed
Irritated
Constipated
Inspired
Annoyed
Disturbed
Bossy
Groggy

Assignment 8 :: Gear Change

2007-09-01T22:43:00.000-07:00

Animate a character showing one emotion, have him experience an event or conflict at which point he shifts to another emotion.

Due next week, stepped key pose of this assignment.

The example below is great example.

Assignment 2 : Animating Differences in Weight

2007-09-01T21:51:00.000-07:00

Animating 2 Different Weights from randolfd and Vimeo.

In this assignment,we were to animate two balls to show differences in weight, and material. There's a little hitch / blur effect that occurs twice, once at the end of the first ball's bounce and second, when the big ball scares the small ball. I gotta check out the graph editor.

Assignment 7 : Animating One Emotion CRITIQUE

2007-09-01T12:42:00.000-07:00

Animating One Emotion: Magrite Gout from randolfd and Vimeo.

Below is a critique from Samir Patel from Rhythm and Hues and Ruel Pascual for this exercise. The video is posted in this blog using vimeo. Let's see how things go as I'd like to post my animation examples on this blog for further viewing.

Watch the pose distortion. Although this is good for exaggeration, be careful that you don't the bend the character so much that its out of character.
Keep movement simple. In my animation, there are two poses, one to recognize the foot, and one to show emotion of the pain. The way I have it makes both poses unclear.
Don't animate too much upper body or else won't see the foot.
Incorporate a pause between these two poses so the audience can see them (the gesture and the pose).
Use both hands to hold leg.
Watch plant foot, establish balance.
Establish a rhythm in the foot growth similar to a heart, instead of slowing growing. Adding a heart beat throb would emulate what happens in the body.

Below are were other comments/critiques to note when doing this assignment.

Be sure the pose and silhouette reads clearly.
Pay attention to overlapping action and follow through to prevent jerky movement.
Establish the general movement and timing for the main shape. In may cases its the ball that is the root of the character. Establish this timing and everything else (arms and legs) should follow.
What is the goal of the character? This leads to action.
Ease In and Ease Outs and be sure to lock IKs.
Break the movements down into sections and add pauses so that each movement is clear for the viewer.
Be sure character has balance.
Watch for broken or contorted poses which change the character.
Always time the root of your character first.
Watch for twinning in the poses.
Push C and S curves in the poses. Whenever you have a spine moving straight up and down, you will always have stiff animation.
Don't be afraid to exaggerate, you can always pull it back.
Add "drag" in the limbs or face.
Everythng in the body must move....moving hold.

Assignment 7 : Animating One Emotion

2007-08-29T22:13:00.000-07:00

Homework: One Emotion Exercise
A pantomime exercise! No dialog and no moving cameras.
Animate a character showing one emotion
Use the Magritte character rig, props are okay
4 seconds max in 24 fps... make it straight and to the point
Make sure you go through the steps. Pose to Pose.
Quicktimes due beginning of class.

"Remember what Ed Hooks said about adreneline moment... that character will remember that moment forever.
Think of an emotion and figure out how to express that emotion in a few poses well 4 seconds.
You can use minimal props if you have too. Remember the example I said last week? a biker wining a race and raising his hands with joy."

"He's gonna remember that race forever. Think of a very fond memory (emotion) that you can use for the animation." - Ruel

Assignment Week 6: Pantomime & Hip Turn

2007-08-29T08:39:00.001-07:00

Had problems with my foot last week, so I'm behind in these assignments. Feeling much better this week...here we go.

Assignment 1:
Take Magritte (Ruel's rigged character), pose him expressing 6 different emotions, step it and publish it as a quicktime. Watch for exaggeration, silhouette clarity and expressiveness of emotion. Ruel's notes on this assignment are below and can be see by following this link

2.The Animation Process of Pose to Pose
The quickest and most efficient way to animate!
-Thumbnailing your ideas, scene, emotions, or shot
-Act it out... shoot video reference
-Block in Key Poses (storytelling poses) in Stepped Key Tangents
-Block in Breakdown Keys
-Check for Arcs, Timing, Beats, Phrasing
-Convert to Linear Keys
-Adjust Timing and Spacing
-Convert to Spline Keys
-Clean up animation from the Inside/Out...
-Start with the root, hips, spine, neck, head, shoulder, arms, hands, legs, feet.
-Lock down IKs, Timing, Ease In/Ease Outs, Moving Holds, Arcs, Overlap, Secondary Action,
Check for Twinning Poses
-Animate Facial Poses or Lip Sync Animation
-Start with Eyes, Eye Brows, Mouth, Tongue, Cheeks, Nose, Ears, Hair

Assignment 2:
Use the moon character rig, and animate the hip and legs doing a 180 degree turn. Things to watch out for modify the step poses/positioning used in the walk cycle, weight shift, foot placement, arcs and hip positioning (x and z). Ruel's notes on this assignment are below:

-Does it have weight?
-Moving Holds
-Anticipation
-Root/Center of mass action
-Contact Pose, Passing Pose, Push Off Pose
-Arcs
-Clean Silhouette

More information about weight shifts, moving holds and anticipation can be found here:
http://www.visualfulfillment.com/index.php?option=com_content&task=view&id=195&Itemid=34

Terms of the week:

-Timing
-Arcs
-Contact Pose
-Down Pose
-Passing Pose
-Push Off Pose
-Up Pose
-Twisting of Spine
-Overlap
-Slow in Slow Out
-Stride Length
-Beginning and End Pose
-Loop

Thesis Title : How to run off a cliff with style: Teaching emotion and empathy in character animation

2007-08-29T08:27:00.000-07:00

After sending out the industry questions yesterday, I realized that I had to revisit my thesis title. The title as of today is:

How to run off a cliff with style: Teaching emotion and empathy in character animation

Wording is very important as it sets the tone for the project, and I realized that I was missing "empathy" in the title. Key definitions are below:

Empathy

1. Direct identification with, understanding of, and vicarious experience of another person's situation, feelings, and motives.
2. The projection of one's own feelings or emotional state onto an object or animal.

"empathy." The American Heritage® Stedman's Medical Dictionary. Houghton Mifflin Company. 02 Jun. 2007. <Dictionary.com http://dictionary.reference.com/browse/empathy>.

Emotion

1. A mental state that arises spontaneously rather than through conscious effort and is often accompanied by physiological changes; a feeling: the emotions of joy, sorrow, reverence, hate, and love.

"emotion." The American Heritage® Dictionary of the English Language, Fourth Edition. Houghton Mifflin Company, 2004. 03 Jun. 2007. <Dictionary.com http://dictionary.reference.com/browse/emotion>.

The Birds Have Flown : Industry Questions Sent Out

2007-08-29T08:10:00.000-07:00

I sent out industry questionnaires last night to about 10 animators. The questions are below. The participating animators thus far are noted in the links section with an asterisk...Thanks guys for sharing your work and for helping me with my project.

There are 26 questions total. Many are fast and all are geared for a general overview of professional practices in the industry regarding animation character emotion.

Background:

* Where did you study animation? And how long have you been animating?

* Where do you currently work as an animator?

* What is your primary animation platform? And which software do you use most often?

* What props, toys or objects do you have around your work area to help with inspiration?

* Is there an animation that you have worked on that you are most proud of? Why?

Influence:

* Do you have a favorite animator that you continually draw inspiration from?

* In learning animation, do you have a favorite animation exercise that you consider invaluable? Please describe.

* What are your top 3 favorite animation DVD's? And what reasons do you have to make them the top of your list?

* Mickey Mouse or Bugs Bunny? If neither, who?

Industry Questions:

* Do you specialize in a particular type of animation (i.e. character, realistic, inanimate objects, animals, visual effects shots)?

* How much footage do you choose to work on at any one time (if you are able to choose), and how long do you give yourself to work on this footage?

* Animation is a complex process, what types of questions do you ask yourself in order to clarify what you are about to animate?

* After the above has been established, how do you go about animating?

* Which is your primary software, and is there a feature inherent in the software that you are using that you just love and that you cannot live without? What does it do?

* In what ways do you see the animation industry changing?

* What is the most difficult part of animation?

* What do you love most about what you do?

Animating Emotion:

* How important is emotion to your animations?

* Is there a technique or habit that you employ that helps ensure great emotion animation?

* Have you ever animated something, only to find that people felt something else other than what you had originally intended?

* Have you found a resource that has helped you in become better at animating character emotion?

Advice to Students:

* What is the biggest downfall students make when it comes to presenting their portfolio/demo reel?

* What is the biggest downfall students make when it comes to animating character emotion?

* What type of advice would you give students to improve their abilities in animating character emotion?

* The animation process is long and tedious, and its not unusual for the mind to wander. What do you do stay awake, sharp and focused on your work?

* In order to continue further study on the subject, would you recommend another animator who you know would be interested and available to answer these questions?

Interview with animators Bobby Beck, Shaun Kelly and Carlos Baena

2007-08-28T20:09:00.000-07:00

A great interview conducted by Tim Fornica of some of the best animators in the industry. The interview took place at SIGGRAPH 2007. They talk about their website which helps promote and teaches character animation (Animationmentor.com) as well as their experiences in the industry.

If you are aspiring animator, its well worth your time. The interview can be watched by clicking the link below. Thanks Tim for posting!

http://one.revver.com/watch/369585/flv/affiliate/77944

Animator Link Update

2007-08-23T19:24:00.000-07:00

Just updated the links you see to the right.

These animators have inspired this project. I just sent out general inquiries to all of them to see if they would be available to answer a few questions about their animations.

Lots of fantastic work to the right by artists and animators with "dope fresh" skills.

Enjoy!

Week 5 : Walk Cycle Animation Critique

2007-08-10T17:03:00.000-07:00

Today, we critiqued our walk cycles. Looked as if I didn't follow directions. I appreciated the honesty in order to acquire the tough skin. Below were common mistakes regarding the assignment, critiques for my assignment, and the midterm assignment, where the students were to animate a character run cycle in class. I think my midterm walk cycle of Igor turned out much better.

Walk cycle Critique Part I

Class Dailies, things to watch out for:
Common pitfalls and things to watch out for in this exercise.

Hitches in the root. Linear keys for smoothing.
Contact Pose – Straighter leg in front, bend in back foot so heel can raise.
Weight pose – back leg should be lifted. Toe of the ground. Bend spine here. Lift head to compensate spine bend.
No rotation in shoulder except in passing pose. For the most part it stays straight.
Weight shift on to supporting leg in passing pose.
Take Off pose Push toes to kick character higher.
Richard Williams pgs. 166
Clean up root. Push it up during pass pose and move it down on the weight pose.
Pat attention to bend in the spine.
Remember Overlap. Root first, then torso follows, then head. Segmented Delay.
Watch Sliding in Z axis of heel.
Use Controls to relax the hands. Not spread.
Contact Pose = Gate : Be sure this is an equilateral triangle.

For my animation:
Contact Pose – Straight Leg – Bend Back Leg.
Arc Arms
Take off pose more height
Pass Pose watch pointed Toe
Angle of head
Weight Pose – bent back leg.

MIDTERM
Animate a character walk in class. The students have a choice of a rigged character. They are to animate the character utilizing Rodri Torres’ website as a guide and they have two hours to complete it. The site can be found here:

here:http://rodri.aniguild.com/tuto_run/run_en.php

Blue Guy "Generi Rig" : by Andrew Silke

2007-08-05T15:35:00.000-07:00

If you'd like to give animating emotion a shot, there are numerous free character rigs on the Highend 3D site. A very nice rig is the one by Andrew Silke and it features a pretty cool control system that is both visual and intuititve. Thanks guys for posting this online.

You can check the site by clicking the link below.

http://www.andrewsilke.com/generi_rig/generi_rig.html

Facial Features and Expression : by David Kalwick

2007-08-04T23:40:00.000-07:00

This week I conducted research on techniques and methods for a properly rigged face. This is important as it enables the animator to achieve emotion. The focus of my thesis however (and its something I still debate about), is not technical. Studying the nuances of a rig in order to manipulate the mesh could be an entire thesis on its own, we really don't have much time to cover the major platforms and therefore will only focus on the nontechnical, but practical aspects of generating emotion in characters, that can be used across all platforms including 2D animation.

i came across David Kalwick's book, "Animating Facial Features and Expressions". I thought it would be a nice place to start. I wanted to see how an expert who models and animates in CG and also, how he presents and executes the process for animating emotion. It is written for the intermediate to advanced level student, the same group that my thesis is targeted towards. The information is helpful and after reading it, I thought about perhaps putting together a class where this book would be the central text. I originally picked up the book in order to conduct research on properly rigged face and found other things that were quite helpful.

The book is divided logically, into three parts.

Part I:
Describes facial anatomy, muscles, the skull and most importantly, general proportions. Now I teach life drawing on a regular basis at the school and some of the tips he shares in order to remember facial proportion is quite clever. I also learned new terminology about the skull that I had not learned. These were:

Nasion : The area between the eyes, above the nasal bone.
Supraorbital Margin : I usually called these the orbitals, but now I have a name for the top brow ridge.
Infraorbital Margin : The bottom ridge of the eye socket.
Mental Protuberance : The part of the chin that sticks forward.

(I'm writing these down because we will be identify these in lifedrawing class on Monday.)

He also discussed the use of forensics' use of 3D to solve crimes, and talked about he difference between the male and female skull. The female skull is narrower, rounder at the top, its shorter, the chin and mandible is rounded, the supraorbital margin is not as large, and the cheek bones are not as large as a male's (zygomatic process).

The section continues with the nuances of the each facial feature, and describes how the muscles are manipulated. In conclusion, its important to know the muscles of the face so that an animator will know what point in the mesh to manipulate in order to achieve a realistic emotion.

This section has potential to be extremely technical, but its written in way that is easy to scan and understand, again its well written for his target audience.

Part II :
Talks about emotion and expression. More specifically, he talks about features such as the mouth (the foundation of the expression), the eyes and brows (used as modifiers) are used to create emotion. This section is filled with snapshots and illustrations that help to convey his idea.

Part III:
Is the the most technical part of the book. Here he discusses lip syncing, phonemes, recording dialogue, morphing, blendshapes (in both 3D Studio and Maya - Oh yeah, he's brave here, but he did it), animating spines, bones, correct pivot points, lattices, clusters, lots of stuff.

The best part about this section is that it includes appendices for 36 common emotions. These illustrations are charted out so they are easy to scan, and included with this is a basic shape breakdown and feature position suggestion in order to achieve that particular emotion, and covers a wide range from realistic to cartoon styles. I can see this being a really nice comprehensive guide on animating facial anatomy.

The book comes with also comes with a CD ROM that includes templates, movies about facial anatomy and animating the face.

Now, should I include information like this in my thesis? He's basically broken down the process from the structural aspects of emotion (skeletal and muscles) and demonstrates how these are formed and animated in CG. He's also created it so that it is a form of reference. Mine is similar but focuses more on acting methods.

At this point, including technical information about a properly rigged face, may be too much. I'll definitely point to this book as a main reference for setting up a facial rig in Maya and or Studio, or perhaps we just highlight the most common techniques in animating expression, like for example, sticking to diagrams of common expressions that animators can use as an online guide.

In conclusion, I was impressed with how the book was laid out, organized and how it presented the entire process of animating the face from anatomy to CG in a simple to understand reference.

Kalwick, David. "Animating Facial Features & Expressions". Boston, Massachusetts. Charles River Media. 2006