Project Week 1: Reference Images

After many nights of slaving over computer screens, trying to discover the intricacies of the human body and the Easter Island head, I came up with these (rather horrible) reference images:

There is a reason why I am in Animation instead of Drawing.

As you can see, they aren't the greatest. Their purpose is to give me a decent foundation to build the beginning of the character, which they will try their hardest to do. Once I get the foundation down, I can modify it free-form to make it look good.

I have more information pertaining to my character: he is an alien scout that landed on Easter Island and began to take the shape of the denizens he saw: the heads of the Moai statues and the bodies of rich corporate executives on vacation. He isn't actually wearing a suit, it's his skin. He has a larger upper section than lower section, relatively stubby legs, and hands with only 3 fingers. Why does he only have 3 fingers? Because hands are REALLY hard to draw.

I will post more next Friday, after I hopefully have his model finished.

First Quarter Project Planning

As a junior in e-Comm, the time has come for me to begin my first project.  As my first post regarding it, this will include my outline that I will follow.

My idea for the project is to model and rig a character in Maya, in addition to some basic lighting and rendering in mental ray. I do not plan on texturing the character, as I am afraid time constraints would limit my ability to do so.  At this point, I believe the character will be an Easter Island head with a normally proportioned human body wearing a suit.  Provided below are some images that inspired that idea, as well as my outline and schedule for the project.

(Images from learningthenow.com)

Character Reference Drawing (Due Friday, August 29th)
Create a reference image of the body and head of character (2 hrs)
Include top, side, and front view (2~3 hrs)
Blog: All of the reference images

Character Modeling (Due Friday, September 5th)
Watch Lynda Playlist: "Modeling a Character in Maya" (Done)
Create head (~1.5 hrs)
Create body/clothing (2 hrs)
Create hands (1 hr)
Blog: Simple renders of the individual parts


Character Rigging (Due Friday, September 12th)
Watch Lynda Playlist: "Character Rigging in Maya" (~5 hrs)
Create body skeleton (1.5 hrs)
Create facial skeleton (1.5 hrs)
Blog: Images of the skeleton system

Character Shading (Due Friday, September 19th)
Watch Lynda Playlist: "Creating Textures and Shaders in Maya" (~4 hrs)
Create shader for skin
Create shader for clothing
Blog: Images of model with shaders

Lighting (Due Friday, September 26th)
Watch Lynda Playlist: "Lighting and Rendering in mental ray" (5 hrs)
Set up lights (3~4 hrs)
Blog: Various renders of lighting

Mental ray Render (Due Wednesday, October 1st)
Create a few test renders (~2 hrs)
Final render (~1 hr)
Blog: Test setting renders, final render

Chronicling the Creation of Some Volumetric Light

    Recently, I created an introduction sequence of sorts with 3D volumetric lighting in After Effects by using a tutorial from Video Copilot (you can find the tutorial here).  It was a fairly simple project, primarily focusing on using adjustment layers to modify the composition and using null objects being tracked by lights to create the illusion of 3D lighting.  I'm quite happy with the end result, which you can find at the bottom of this post if you don't feel like reading my ramblings on the creative process.

     This is how I began my project.  A simple pre-composed text layer containing my spirit font, Futura, and a grey solid to represent the floor.  I changed them to 3D objects so I could rotate them, and then added a 2D black solid background.


    After that, I added a point light and a null object, and set the light to track the null object, which let me control how the light shined through the letters.  I then made a white solid and used the ellipse tool to cut a circle out, and created an adjustment layer with the CC Fast Blur effect to create the blurring around the light source.

    I then added some "smoke" to the scene by creating some solids with a Fractal Noise effect on them, making an ellipse, creating a Solid Composite effect on the layer, and setting it to the Screen blending mode.  I also set the floor and light to the Screen blending mode, so that they would all be visible even if they were laying on top of each other.  I also began to play with color curves at this point, giving the smoke and light a slight reddish-orange tint.  I then duplicated the smoke layer twice more and gave them each a different size and distance from the camera.

     Though it's hard to tell due to the small image size on this post, I then duplicated the text layer twice and gave them a Bevel Alpha effect to create more depth.  I also began to give the smoke clouds some animation, keyframing the evolution of them so that they would swirl around in the background.

    After all of this, it was mostly just polishing.  I continued to play with the color correction, giving the scene a deeper, more orange hue.  I also changed the mask feathering on the light source, so that it blended into the smoke clouds, rather than being like a large spotlight shining through.  I also added a camera rotation to the scene, to show how the light shines through the letters at different angles.  After that, I rendered it out and felt awfully good about myself.

    All in all, I really enjoyed this project.  I definitely enjoyed learning about 3D lighting in After Effects, and I also learned more about how adjustment layers work.  (Also, I indirectly found out how to make a decent smoke cloud.  So score on that, as well.)  I think the hardest part of the tutorial was just playing around the the smoke clouds and light source to get them to look well together, because the actual lighting aspect was fairly easy.  My favorite part was working on the Fractal Noise effect, trying to find a good smoky look for it.  I feel as though the settings I ended up with look pretty good, if I do say so myself.  I'm very happy with my final product, with my only major complaint being that it looks like the type is floating above the floor.  However, I couldn't fix that without changing the font, and given how I love Futura that was not an option.  Still, that's a pretty minor issue, and I still enjoy the end result.

Responsive Web Design

    Responsive web design is the practice of making websites that are easy to view across all devices, be it tablets, desktops, or phones.  This is important because it reduces the cost to maintaining only one site (instead of separate mobile and desktop sites), because of the rising use of mobile devices, and because it enhances user experience.  Responsive web design can be achieved through use of media queries, CSS declarations that can alter the style sheet based on the device being used to view it.  One aspect of these media queries are breakpoints, which change the layout once a certain browser width has been reached.  For an example of responsive web design, I found the Boston Globe's website (http://www.bostonglobe.com/).

    This is the main page displayed on a desktop monitor.  The font and images are large, and there's even an ad in the upper right.  The navigation bar at the top covers all the categories of the paper in addition to a search bar.  There are three main columns, one for major stories to the left, another for smaller stories to the right, and one for the ad and tweets from their Twitter on the right.  The content spans across the entire page, and it makes use of all of the space it has.

    This is the main page displaying as it would on a tablet.  Notice how the entire right column with the ad and tweets has been removed to save space.  Only the columns with stories remain.  The font and images are smaller, but still easily readable, and are the main focus of the smaller view.  The navigation bar has been reduced to only three main tabs with sub-tabs and the search bar to save screen space.  The main focus of the content is still the stories, but it is made even more evident in this view due to the lack of the right column.

    This is the main page displaying as it would on a mobile phone.  At this point, due to the lack of screen space, there is only one column with the major stories.  The text and images have been shrunk quite a bit, but are still readable (maybe with a BIT of work).  The navigation bar has been condensed even further, with only two main tabs and the search bar becoming a button that you need to push, rather than a text field.  The main content (and pretty much the only content) on this page are the main stories, which are the primary focus of the site.  As such, even though the layout is much smaller, the point of the site still manages to be put across.

The Plausible Impossible

      There are many examples of the plausible impossible throughout Disney's work, but the clip showing Donald's rather hungry cousin Gus Goose visiting is absolutely rife with them.  Below are 5 examples from the clip, with explanations covering the plausibility, yet impossibility of the events shown.

Gus showing some corn who's boss

      In this example, we see Gus devouring some corn in a manner similar to typing on a typewriter (with accompanying sound effects).  This is plausible in that Gus is clearly a master in the art of eating, with this being his preferred method of dispatching corn.  Although, even if he could destroy that corn with such speed, it most definitely wouldn't make such a sound effect.  This is the cartoon world, however, and sound effects seem to accompany everything without anybody being alarmed.  So, even though in our world this would be quite a sight, in the cartoon world it's simply common nature.

Gus showing some coffee who's boss

     In this example, we see Gus absorbing coffee through bread not unlike mercury rising through a thermometer (also with accompanying sound effects).  This is plausible in that bread is absorbent in reality.  However, bread most definitely does not absorb liquids in such a manner, and (again) it definitely doesn't have sound effects.  Again, though, the cartoon world has it's own set of rules, so liquids operate differently.  If it wants to go straight up through a loaf of bread, then it will go straight up through a loaf of bread.

Gus showing some peas who's boss

      In this example, we see Gus luring a battalion of peas across the dining room table into his mouth, by inhaling very deeply through a straw.  This is plausible in that sucking through a straw will generate suction which will pull things closer.  However, the necessary suction needed to attract the peas from across a table would be far higher than your everyday goose could manage.  In addition, they would not be able to curve and veer wildly like a snake slithering about.  But, in the cartoon world inanimate objects can inherit animate qualities at the drop of a hat.  Peas being pulled across a table in an elaborate routine is child's play.

Gus showing a sandwich who's boss

      In this example, we see Gus shortly after he completely obliterated a gargantuan sandwich by shuffling it into his mouth like a deck of cards.  This is plausible in that a suitable amount of food being shoved down your throat at once will have a difficult time finding its way down your windpipe.  However, it most definitely would not extend your throat like an accordion (with even more accompanying sound effects) until your gulp it down.  (You would just choke to death, which is far from the most noble of deaths.)  This is (yet again) a cartoon, though, and that food will take its sweet time traveling to your stomach until you urge it along.  What would normally be a horribly undignified demise is changed to a comical moment due to this abandonment of the laws of nature.

Gus showing some spaghetti who's boss

      In this example, we see Gus masterfully knitting spaghetti into a sock before ending its noodle-y existence.  This is plausible in that spaghetti is very yarn-like, being very thin and stringy.  However, in reality, spaghetti would be a horrible knitting material, as it is far too weak and is not capable of being pulled tightly together (though I cannot speak from experience, this is purely theory).  In his cartoon existence, though, Gus is more than capable of weaving socks better than your grandmother using incredibly impractical material.  Anything can be used to make anything, as long as you put the right spin on it.

Illustrator Web Design Part 2 - Return of the Vector

     I searched and found two very nice looking vector-based web designs, the ones at http://www.mobilestatistics.com and http://www.digitalpodge.co.uk/2009/.  The first is for a website that points out many statistics about the sale of mobile phones (especially smartphones) and portrays them in entertaining little graphs.  I like the grid design of the site, and I like the cooler, tamer colors in the background.  The colors, along with the solid looking font, achieve the look of a graph very well.  The site being made in Illustrator helps it have its "crisp", clean appearance, no matter how large the browser window is.  The second site is for an annual meeting of designers in Britain.  I like its simple, structured design which seems very clear.  The cell-based design of the homepage makes it look organized, and the colors mesh very well together.  Again, Illustrator contributes to it having its  smooth and clean appearance.

Illustrator Web Design

    Illustrator seems to be very useful for web design, as it allows you to save elements, edit what you've already created, and optimize your workspace.  If you set the color mode to RGB, disable the artboard and page tiling, and place a web browser window that has been emptied in Photoshop, you can use that as a canvas to design on.  You can set everything to pixels and set the keyboard increment to .5 px, which can be used to fix blurriness on lines and sharp objects.  You can save master symbols used for the GUI and design to edit later, and can create entire new symbol libraries.  You can do the same with textures and swatches, as well.  Because of how vector graphics work, you can edit what you have already placed very easily, whereas in Photoshop such a process could be quite difficult.  You can format and wrap text very easily using Illustrator, and also use paragraph and character styles to further modify text.  Illustrator also lets you customize your workspace, which can speed up the design process.