Now, we all know that After Effects is cool. So, if you don’t want to keep hearing it, you should probably stop reading. Otherwise, read on my friend…

Despite after effects being a “Compositing” software, it is constantly being pushed to new limits by creative geniuses all over the world. One of those geniuses is a small studio based out of San Francisco, CA known as Tiny Inventions. They are most famous for their short film “Something Left, Something Taken“. For this film, Max and Ru (The creatives behind the company) developed a new type of character animation in After Effects that is unparalleled. Although this may be expected in certain animation softwares… *cough *ToonBoom *cough, it was never expected in AE.

I was so impressed with their animations that I emailed the specialist that built the Rigg (Sean McBride). Not only did he answer a lot of the questions I had on how it was done, but he actually sent me an After Effects project file containing part of a rigg. This post contains some of the ins and outs of how it was done and why it’s so FREAKING COOL!

THE RIGG

Joints for this rigg were made using puppet pin points. The puppet pin tool in After Effects is a lot like the Puppet Warp tool in Photoshop, except it can be animated. The points should be placed at the joints of the character (Each limb is a separate Photoshop Layer imported into After Effects). Now the points can be linked to Nulls and parented to each other so that everything moves in reference to each other; i.e. you move the hand and the rest of the arm follows while still staying connected to the torso at the shoulder. Targets were made to replace the nulls and converted to guide layers so that they would not be visible when rendered.

The mouth of this puppet rigg was animated in a nested comp. Different words would be made into complex animations. Those animations could be called from the main comp in two ways:

1. Using Layer Markers
2. Linking the time or a nested comp to the rotation of a solid or null

GOING DEEPER

Just like above, we can use Layer Markers to call other actions, such as mouth movements for lip syncing. I could create a series of words, such as “hello”, “fire”, or “Get to the Chopper!” From the main comp, I can listen to the audio and call any word I want at anytime. Here’s an example of what the project looks like:

To make things even easier, we can take out audio clip into Premiere Pro and Analyze Speech. It should automatically make a guess as to what you the audio is saying and add a Layer Marker to each word at the right time. When you export this audio file from Premiere it also exports the Metadata (the data that carries the markers (or “Cue Points). When this is brought into After Effects the Layer Markers can be copied to any layer of your choice using this AE script: rd_CopyMarkers. Now the metadata has created several actions. For example, the Layer Marker “Immediately” can now be animated and called/triggered.

I learned a lot from this project and I hope this will encourage everyone to keep experimenting with your software of choice. Push it to the limit!

Here are some of the resources I used for this project. Thanks to each and every one of these creative geniuses. You’re like the first person to try a parachute; Insane but Brave:

• Dan Ebberts – He is a wiz when it comes to JavaScript in After Effects. Super nice too, I emailed him with questions and he instantly emailed back!
• Tiny Inventions – Their blog for Something Left, Something Taken is very in-depth
• Sean McBride – He is the one who built and animated the Riggs for Something Left, Something Taken. Great guy too; emailed me and AE project file!

STEP 1 - Find a Texture
Look around and find something that you think would make a nice texture. Some ideas include old paper, a chunk of wood, fabric, JP’s new boot, etc. The more creative the better.

STEP 2 - Scan
Scan your texture in. The typical settings I use are: 300 dpi, RGB and .jpeg format.

STEP 3- Contrast
Open up your scanned image in Photoshop and follow these steps to create some good contrast for Illustrator to pick up:

• Depending on how you’ll be using the image, you may want to turn your image into greyscale.

• Adjust both the black and white levels to knock back the mid tones and simplify the texture. (find this setting in image > adjustment > levels)

• Crop any unnecessary elements

STEP 4 – Live Trace Open up your image in illustrator. Follow these steps:

• Live trace your image

• Select the Lettering preset to knock out the background

• Adjust the min area and threshold to add more or less detail (Found in top toolbar. 200 and 1px is a common setting I use)

• Expand your image, and your done!

We’ve been working with a client to on a site that requires a separate mobile experience that has the same overall functionality. In doing so, we’ve taken the original site we designed and developed, and applied some mobile guidelines to the content to make sure it is a good user experience. Working with their mobile styleguide, I researched some other tools and topics as a way to learn more about best practices around mobile design.

Some overall mobile takeaways are:

-Elevate important content

-Think top down

-Make usage easy & obvious

-Be succinct

-Use UI elements consistently

-Make buttons fingertip size (about 44 x 44px is a good start)

-Use / Integrate the features on the device

LiveView app:

Here is a free app out I found that allows you to simply view your iOS designs live on your iPad or iPhone while designing them. You can tether it over wifi to your Mac and interact with your designs to make sure you have the right scale for both retina and standard displays.

http://www.zambetti.com/projects/liveview/

To use it, download the app to your machine and to your iOS device from the app store.

Once installed, open LiveView on your device and on your computer to sync them over wifi.

Once it sees your device on the network, select it to begin in the Dialogue Screen. The “Interactive” check box to the left allows you use your device to select and control certain elements on your computer.

If you want to hide the rectangle while designing, hit (command + h) and LiveView will continue broadcasting while hidden.

If you have a device with a retina display, you can toggle the size of the viewing area accordingly up in the menu under “View.”

Mobile Resources / Links:

iOS Human Interface Guidelines

http://bit.ly/d02Heg

Touch Gesture Reference Guide 
This is a great illustrated resource for all interactions on a mobile device.

http://www.lukew.com/ff/entry.asp?1071

DevRocket

This plugin for Photoshop might save designers and developers time putting an app together as it handles exporting of multiple file sizes for different displays, generates all icon sizes needed for an app, and has some other great features. Might be worth looking into on an upcoming project.

http://devrocket.uiparade.com/index.html

iPad & iPhone GUI PSD

I’m sure you’ve seen this one, but Teehan + Lax put together a few amazingly detailed PSDs that are free to download and start designing around.

http://www.teehanlax.com/blog/ipad-gui-psd-retina-display/

Once you finally get everything setup for your own device, there are plenty of additional steps to get everything setup for your testers’ devices. In-short, this process entails:

• Acquiring the Device ID for each of your testers (this app helps)
• Adding unique Device IDs to the Apple provisioning portal (step-by-step guide)
• Create the App ID (or use a wildcard App ID)
• Ensuring you have a non-expired Distribution Certificate installed in your Keychain (step-by-step video)
• Create an Ad Hoc Provisioning Profile (step-by-step video)
• Create & send your testers a Distribution Provisioning Profile
• Teach your testers how to add the provisioning profile
• Create a special Distribution Build
• Send the .ipa to your testers via ftp, Dropbox, etc.
• Teach your testers how to install the ipa on their device via iTunes
• Alternatively, consider setting up OTA (Over the AIR) distribution through your own web server (step-by-step video)

If that sounds like a lot, it’s because it is! Thankfully: TestFlight to the rescue!

TestFlight doesn’t get you completely out of all of this, but it definitely reduces the pain, and all for the price of FREE.

First off, you have to Invite Testers by clicking the big green button on your TestFlight dash. You can either type in their e-mail address on this screen, or just copy your recruitment link and let them sign up themselves up however they’d like. Signing up for an account is free and takes about 2 minutes. The process looks like this:

This easy-to-follow one-time setup process that each of your users must go through accomplishes the following:

1. You were given their Device ID (with no confusing work on their part)
2. They installed the provisioning profile needed by TestFlight
3. A TestFlight “app” was installed on the device (it’s actually a web app)
4. Their device is now linked to your team for incredibly easy over-the-air distribution

The setup screen for AutoPilot couldn’t be easier, and it even integrates the TestFlight SDK (which provides additional tracking information) into your app with just a few clicks.

You will now be able to use TestFlight’s awesome sweet of ready-to-go services to track things such as: who installed which versions of your build on what devices, crash reports, feedback collection, track play sessions (slightly buggy), and more.

Thanks to TestFlight, Unity, & AutoPilot, distributing builds to my testers now takes me, quite literally, the click of a button!

Developing computer applications is a difficult job, especially for the web.  It’s a mix of science, art, and magic to make the machine function in the way you want, especially across multiple browsers and under tight deadlines.  On top of everything, the technology is changing so fast it feels like a full time job just trying to keep on top of the latest developments.

One thing that is easy to forget amidst all of the attention that must be paid to specific technologies is that there is a lot of personal development that needs to continually happen in order to become and remain effective developers.  Fortunately, there are quite a few smart people out there with significant experience who can analyze and communicate the lessons they have learned through their careers, and one of the computer industry’s most recommended sources is the book “The Pragmatic Programmer”.

This book is written by two men with a ton of experience developing applications, and they have written this book to share the lessons they have learned, and we can use these lessons to increase our effectiveness as developers.  Also, despite the fact that this is focused primarily on developers, I think people in other areas can learn valuable lessons as well.  There is far too much useful information in this book for me to cover all of it in a single entry, so I will probably cover more of it in future entries, so keep a look out.  Also, there is a lot more detailed information in the book itself, so I highly recommend getting the book and reading it several times.

Introduction

Two of the most important tips/thoughts when approaching our work are:

#1: Care About Your Craft

#2: Think! About Your Work

With every project we do, we need to care about doing it the best that we can.  We should try to keep up with technology so we can use the best tools available to us, and we should make sure that we are cutting corners as little as possible (let’s be realistic, sometimes it can’t be avoided).  Care about the small stuff even, because that will help you to care about the larger stuff.

Also, think about what you are doing, constantly, while you are actively doing it.  Don’t wait until a code review to look things over, or until the end of the project, keep actively evaluating the decisions you are making and the work you are doing while you are working and see if there are ways you can make improvements.  Try not to get stuck in auto-pilot.

Personal development of this sort is a continuous process…none of us will ever be the best that we can be, there is always room for improvement.  Especially with a subject which is constantly changing, like web development.  So, always be alert to becoming stagnant and thinking that you don’t have anything to learn…always be willing to try something new and evaluate the usefulness of technologies that you have been using for years.  Perhaps there is something better out there, or just the act of learning something different will help you to use an older technology or process in a better and more effective way.

Section 1: The Cat Ate My Source Code

We work with many complex technologies, and generally under pretty tight deadlines, so no matter how careful we are, there are bound to be problems once in a while.  The real question is, how do we handle them?  We can either try to pass the buck and blame someone/something else, or we can accept that we made a mistake and make it right.  Other times, we may be asked to do something that may not be possible, or at least not realistic for the budget.  In both of these types of situations we should use the same sort of response, which leads us to the next tip:

#3: Provide Options, Don’t Make Lame Excuses

This is something that we talk about once in a while, but it’s always good to keep in mind.  When an issue comes up, instead of placing blame or just saying something can’t be done, we need to think about what CAN be done.  If there is an error, don’t make excuses, find a way to fix it.  If a client asks for something you consider unreasonable, think about what you can do that is reasonable.  Provide a solution.  Before you speak up, stop and think about what you are going to say and filter out anything that isn’t providing a solution.

Section 2: Software Entropy

Entropy is a term for the amount of disorder in a system, and it definitely applies to software systems as much as it does to physical systems.  Over time, projects start out nice and clean, and then under the pressure of meeting deadlines things start to get sloppy.  Corners start to get cut, and mistakes become more likely.  You may notice some ugliness but you just ignore it because you have to get something done…we’ve all been there.  However, once you let one bit of mess into the system, even more will get added.

The authors tell a story about a study that was done in a large city where in some neighborhoods you could find one building in pristine shape and then right next to it would be a building covered in graffiti with all of the windows broken, in complete disrepair.  The researchers found that what caused the much faster decline of some buildings was a single broken window.  If a broken window was left unfixed, it invited people to do even more damage and rest of the building would go down hill very quickly.

#4: Don’t Live With Broken Windows

The same problems can happen with software.  If you work on a project with some design flaws, poor coding, etc then it feels like it’s not as important to keep things clean and you may take more shortcuts which adds even more dirt.  On the other hand, the opposite is true as well.  If you start working on a project which is very well organized and has pristine code, you are going to work extra hard to not be the first one to mess it up.  So, it is very important to keep things clean and fix any sort of ugliness as soon as it is found.

Section 3: Stone Soup and Boiled Frogs

There are a couple of good stories and some really useful information in this section, so I definitely recommend reading it, but I just want to go over a couple of what I thought were the most important points.  The first one is:

#5 Be a Catalyst for Change

If you see something that could be improved, whether some business or development process, or something regarding development of a project, be a catalyst to make that change.  If people are resistant, then there are some good strategies outline in the book that you can use, like starting the process yourself because people are more likely to join an ongoing success than get involved at the beginning.

 #6: Remember the Big Picture

Another issue that can come up is that we get so focused on one little thing that we are working on that we lose sight of everything else around us.  Lots of small problems can pile up and become a large mess because we simply weren’t aware.

Section 4: Good-Enough Software

When developing software, and especially websites in many respects, it can be difficult to determine how good a project needs to be.  Of course we always want what we do to be as good as possible, but there are always trade-offs.  Making our work “good enough” doesn’t mean low quality, sloppy code, or not putting effort into it, but instead has more to do with involving the client in decisions about how good things need to be.

#7: Make Quality a Requirements Issue

With the myriad web browsers available, we can’t support all of them, so we need to define what is good enough.  Generally we do this in some form as a part of our scopes, we outline which browsers we support so we can focus on making the experience as good as possible for people using those browsers.  Different clients have different requirements for what is good enough in this case.  Similar issues pop up in terms of implementing client designs, does what we need to create have to match the PSD files pixel perfect, which might be more difficult to update in the future, or are they willing to trade some slight visual differences between the PSD files and the end product in order to have something managed by a CMS or more flexible for the future?

Section 5: Your Knowledge Portfolio

This is best summed up in a direct quote from the book:

“Your knowledge and experience are your most important professional assets.  Unfortunately, they are expiring assets.”

This is especially true in web development, since there are constantly new technologies coming out and clients are always asking about some new trend.  We have to keep aware of the technology in order to stay relevant.  There are some key elements to build your portfolio, which are covered in more detail in the book, the most important I feel are:

- invest regularly

- diversify: “The more technologies you are comfortable with, the better you will be able to adjust to change.”

Both of these points go together, in that you should be investing regularly, but not just in a single topic.  Read about new stuff in books, magazines, and on the internet.  Try learning new programming languages and new technologies.  All of these things work together in many different ways to make you a better developer.  Take something like Ruby on Rails, with the sort of work we do it is unlikely that we will be doing a ton of work in Ruby on Rails, but if we learn how to work with it we may see some different ways we can approach the other work we do in more traditional languages.  And, if suddenly all of our clients want us to use Ruby on Rails then we are in a much better position to respond to change.

#8: Invest Regularly in Your Knowledge Portfolio

However, we don’t want to just jump on any new technology that comes along just because it’s new:

#9: Critically Analyze What You Read and Hear

Section 6: Communicate!

Communication is a huge deal, especially since we are working with clients, so we need to constantly be working on improving.  There is a lot of good info in this section so make sure to read it, but there are some especially good bits.  It’s important to know what you want to say.  Before a meeting or call, then think about whether it might be good to jot down any ideas you want to communicate, and plan for how you can get them across.  And, think about who the audience is because you might need to communicate things differently if you are talking to a project manager versus talking to another developer.  And don’t forget to listen.  You may have something important to say, but communication needs to go both ways.

#10: It’s Both What You Say and The Way you Say It

Section 7: The Evils of Duplication

#11: DRY – Don’t Repeat Yourself

Duplication is bad, we all know it but often we lose sight of avoiding it.  One of the main benefits of a technology like CSS is to avoid duplication, it allows us to express the styling of elements on a page in one place, so we don’t have a lot of duplicated width attributes or font size attributes throughout our HTML.  I think we all are aware of the importance of avoiding duplication, but it is always good to have a reminder.  Plus, there are some forms of duplication that we might not always recognize.  This topic is definitely covered in more depth in the book, including multiple types of duplication so go through and read the book.

One big form of duplication is interdeveloper duplication, basically where different developers end up writing the same code.  Probably the two biggest reasons behind this is that perhaps the developers are working on different projects and aren’t aware of what the other person has done, or that there hasn’t been enough care taken to make the code easily reusable so a developer chooses to write his/her own code even though something else may already be available.

#12: Make It Easy To Reuse

It is important to have some sort of code library that people can reuse code or contribute new code easily, so we can avoid this type of duplication.  Essentially, “foster an environment where it’s easier to find and reuse existing stuff than to write it yourself.”

Section 8: Orthogonality

Orthogonality is a term that comes from geometry, and what it basically means in software development is to keep code independent of other code.  Keep clear lines between the different types or purposes of code so things can be cleanly separated.  A simple way of thinking about is, “Two or more things are orthogonal if changes in one do not affect any of the others.” If you are developing a frontend web application that handles a bunch of logic and integrates with Facebook and Twitter, then keep all of those things separated out from the others.  If you need to post something to a user’s Facebook wall then keep that logic separate from the logic that responds to the UI (ie a button press).  That way if the Facebook API changes (never!) then all you have to do is update the Facebook code, you don’t have to risk changing the UI logic as well.  Or if the client decides to add another button to do the same sort of thing (Get Hotmail It’s Free), you don’t have to add duplicate logic for updating Facebook (and violate the DRY principle), you just call the existing code.  All of this works together to make a better product at the end.  A quote from the book says it best, “Once you learn to apply the principle of orthogonality directly, you’ll notice an immediate improvement in the quality of systems you produce.”

#13: Eliminate Effects Between Unrelated Things

This will lead to improvements in both productivity and reduced risk.

Section 9: Reversibility

#14: There Are No Final Decisions

I think this topic hits pretty close to home for us due to the nature of the type of work we do.  We often run into situations where decisions get made and then are reversed later, so it is important for us to make things as flexible and as easily reversible as possible.  Quite a few of the topics covered lead to code that is more reversible, but it still is important to keep the concept in mind as we’re making decisions.  Especially, instead of making assumptions and writing code that is completely based on that assumption and will require significant work if the assumption ends up being wrong, we should do our best to think about what the possible outcomes are and what solution might be able to handle the highest percentage of those outcomes.

Section 10: Tracer Bullets

Sometimes we get projects that stretch the boundaries of our knowledge because they either use new technologies that are untested, or they push the limit of existing technologies to the point of whether we don’t always know the best approach immediately, and in these cases it can be useful to use a “tracer bullet” approach to projects.  For anyone who doesn’t know, a tracer bullet is a type of bullet that leaves a visible trail behind it as it flies so the shooter can see exactly what path the bullet is traveling, particularly at night.

#15: Use Tracer Bullets to Find the Target

How this applies to software development is that it is “something that gets us from a requirement to some aspect of the final system quickly, visibly, and repeatedly.”  What you do is build out bits of the structure at a time so that you can evaluate how things are coming and adjust quickly with as little work as possible if you need to.

Think of it like building a freeway, you plan out the route you want it to take and then start building the road.  If you have a lot of information about the terrain and you know that there aren’t any problems then you can build the freeway section by section, working on the lanes at once.  However, perhaps for some reason you are unsure if the terrain is right for a road, with the tracer bullet approach you would build out one lane from start to finish before building out the rest of the lanes.  That way, if something happens and you need to change the path then you only need to fix one lane instead of all of them.  Then once you have reached the end and you know you have a valid route, then you can build out the rest with much less risk.

In software development, it means that instead of trying to build all of the functionality for the entire project at once, you build out the project with limited functionality to a point where it is usable, and then start adding it the rest of the functionality piece by piece.  The benefits behind this approach are:

- Users get to see something early, and see if they made mistakes in the initial design

- Developers build structure to work in: once that initial framework is done then it’s easier for developers to add more pieces of functionality

- You always have something to demo

- You have a better feel for progress

Tracer bullets don’t always hit their target, but they provide quick feedback to enable moving onto the target much easier than other approaches, on the right projects.

Conclusion

There is a lot more of the book I have yet to cover, so that will possibly (probably) come in a future entry, so keep an eye out for an update.  Also, keep in mind that this sort of information isn’t the sort of thing that you can hear/read once and get it and not ever revisit it again.  This is the sort of thing that you need to constantly keep in front of you and try to follow at all times, so please go and get the book and read it, and keep your own notes in front of you where you will be reminded of these principles while you work.

Framing

Wide shots -  Wide shots answer the first question of where are we?  And if not the first shot, is usually close the front.  The first couple minutes of Wall E are all wide shots giving us the full context of the story.

Closer wide - A wee bit closer than ultra wide shots.  we just need to see the characters and what they’re doing.  not the big picture.  If it’s too wide we can’t see who it is.  to close and we can’t see where they are.

Medium shot - It’s a little more intimate but not too intimate. It’s a work horse of a shot. Usually full body.

Close up - Getting even more intimate.  The close up tells us the important stuff we need to understand for furthering the story.  if your viewer needs to see something you will force them to see it clearly for they can’t be trusted.

Extreme close up - Good for really important information or emotional impact on faces.  This could mean its more intimate or it could be so tight that it can feel a bit detached.

Angles

Camera angles can make us feel emotions.  Emotions are nice.

Eye-level shots imply little conflict as that’s the same height as we see the world day-to-day.

Low level shots help say there is a lot of conflict and gives you a feeling of intimidation.

Looking down on your subject can diminish them and give you a feeling of confidence.

Birds eye view takes us out of the scene and detaches us from the world we are in.

Movement

The way a camera moves will help give us even more emotion in our scene.  We all know this even if you havn’t thought about it.  It’s the difference between watching a fight scene with smooth sweeping shots around the fighters and one with shaky handheld shots.  The first will be more epic and dreamy where the as second will feel more edgy and stressful.  No matter what the camera should move in relation to something,  either a character or an object.  It needs a reason to move in other words.   Otherwise it can be a distraction.

Moving down lets you sink into the scene/story becoming a part of this world.

Moving up to reveal the bigger picture and help put your character into context.

Moving in can create a feeling of change  or emphasize something particularly important.

Zooming changes the audiences perception of the character.  Zooming in can be more meditative, more focused on the what’s happening inside your character.  Zooming out takes you out of this intimacy and puts them in context.  Or it can show their isolation, real or felt within.

Hand held can create great tension, a subtle level of anxiety.

Pan shots and Dolly shots are usually motivated by the subject to follow them.  or can be used to transfer focus from one subject to another.

This scene from Barry Lyndon is just great.  Kinda has it all and the camera takes on the emotional journey with the characters.

Other things to think about

Editing

Don’t cut from same frame size to same frame size too often.
Use same lenses and distances in angles and reverse angles.
Don’t jump the axis line. 180 degree rule.
Cutting on motion can help.
Use your shot for what it has been shot for.

“If it’s a good movie, the sound could go off and the audience would still have a perfectly clear idea of what was going on.” - Alfred Hitchcock

Fireworks provides some control over alpha channels in PNG-8, but overall, the format is still far too limiting for images with photographic elements, colors and alpha channels. The result is that we often end up using PNG-32 images, even though file size can be enormous.

Complexity in any image can bloat file size. Reducing complexity in a PNG-32 involves any number of the following: reducing total number of colors, reducing total levels of alpha, and reducing graininess. Adobe provides us with no control over these things in the export options, but when file size is critical, there are some tricks we can use. This can be slightly involved depending on the image, but I’ve created a Photoshop action:

here

…that starts you out with a lot to work with.

Here is the original example image we are going to work with. It is 270k exported from the Export for Web panel. Maybe I’m old fashioned, but that seems huge for such a small image. We’re going to try to reduce it down to under 130k.

Take the example image, and run the action on it. In your file, you will find a few new things:

1. An Accumulated layer with the partially opaque pixels built up to complete opaqueness.
2. An Isolated layer containing only the pixels that were originally completely opaque.
3. The original alpha saved into a channel.

The first thing that should jump out at you is the complexity that was revealed from the buildup of the semi-transparent shadows. Even pixels that are very near complete opacity have RGB values. This is one of the problems with Photoshop PNG-32 export, as this complexity bloats your file, and isn’t even detectable to the human eye with the alpha channel applied, which is why it was unknowingly left in.

From here, there are a number of ways you can deal with reducing complexity. Since every image is different, there’s no way to make a Photoshop action that could work well for every image. It is up to you to decide what techniques to use, how much complexity reduction to apply, and possibly figure out new ways to deal with it. It may seem like a lot of steps at first, but once you understand the concept, it becomes pretty easy. We’re going to do the following to give you an idea of what results can be obtained.

1. Posterize the pixels that were completely opaque
2. Remove unnecessary pixels
3. Posterize RGB channels of semi-transparent pixels
4. Posterize alpha and reapply it to semi-transparent pixels

POSTERIZE OPAQUE PIXELS

It is good to apply different complexity reduction to the fully opaque pixels, because a stronger reduction can be used that would cause banding (the undesired effect of posterization) to occur in your shadows. This depends on the type of image. You may want to apply different levels of reduction to different areas of this layer. Gradients need more levels, but also reduce to smaller file size than photographic areas.

1. Select the Isolated layer
2. Select Image > Adjustments > Posterize
3. Adjust the slider to where the complexity reduction becomes mostly unnoticeable.

REMOVE UNNECESSARY PIXELS

This process removes pixel data that is sometimes present, but unseen in areas that are nearly, but not completely transparent.

1. Duplicate the alpha channel created by our action, by right-clicking on it in the channels panel and selecting Duplicate Channel.
2. Select/show the new alpha channel, and hide the original one.
3. Image > Adjustments > Threshold
4. Drag the slider so the highlights in the preview only cover where you expect semi-transparency to be visible.
5. Select the Accumulated layer
6. Select > Inverse
7. Edit > Delete

POSTERIZE RGB CHANNELS OF SEMI-TRANSPARENT PIXELS

Apply a complexity reduction to the RGB channels of the semi-transparent areas with the Posterize image adjustment.

1. Select the Accumulated layer
2. Select Image > Adjustments > Posterize
3. Adjust the slider to where the banding becomes mostly unnoticeable.

POSTERIZE THE ALPHA CHANNEL AND REAPPLY TO SEMI-TRANSPARENT PIXELS

1. Select the alpha channel created by the action in the channels panel.
2. Select Image > Adjustments > Posterize.
3. Drag the slider until the banding becomes mostly unnoticeable.
4. Command click alpha the channel in the channels panel.
5. Select > Inverse.
6. Select the RGB channels.
7. Select the Accumulated layer.
9. Edit > Delete.

Now, turn off the background layer, use Export for Web and Devices as you would normally to save the image back out, and look at the file size of the output.

This may take a few tries to get the hang of, and to get the image exactly how you need it for your application. Depending on the amount of complexity reduction you apply, you can end up with an image that is under half of its original file size.

An optional form of complexity reduction that can be substituted for the above steps, is to apply indexed color mode to individual layers. That requires duplicating each layer into a separate file, and back into the working file, but will allow you to dither, and have control over the colors that are used.

After you are finished with this process, I recommend using Ping, by ParaMac Software to further compress your image.

Click here to watch the video that went along with this presentation: Motion Graphics Demonstration

In the advertising industry, Motion Graphics is an incredible driving force. Here at Seven2, our Motion Graphics and Film work has increased like crazy in the past year. We can only assume that the same is happening to studios and agencies in NYC and LA. Looking to make a move into Motion Graphics? Could be a smart move! Here are some things to help you decide…

WHAT DOES A MOTION GRAPHICS DESIGNER DO?

Try to think of Motion Graphics as a big ‘Ol Hamburger:

It is comprised of four tasty components; Design, Animation, Compositing, and Editing. Design is the foundation of all MG work. Animations are cool but without great designs you just have a mess. Animation is like the secret sauce, it adds that extra twang! *Note: Compositing is the art of taking various visual assets from different sources and layering them together in such a way that they seem like they are all part of the same scene. This is done in film all the time. The  Graphic-Design-Equivalent would be a Photomontage.

HOW MUCH DOES A MOTION GRAPHICS DESIGNER MAKE?

There is definitely a high demand for Motion Graphics in the design community. It’s rare to watch a commercial these days and not see some form of 3D-Animated text flying across your TV/Computer screen. Money is a big concern when thinking of your future (especially in this economy), but Motion Graphics Design is definitely doing as good as the next creative staff position. Check out this “Motion Graphics Design Census“. It is full of great MG info, such as: How much MG Designers make and what software MD Designers use most.

IS MOTION GRAPHICS RIGHT FOR ME?

There are pros and cons to every job out there. MG Design is no exception. Here are few things to think about:

PROS:

1. Job availability: Since there is a high demand for Motion Graphics in the Advertising Industry, there are many great jobs out there. Also, MG is a craft that dips into many other industries as well, including the film industry.
2. Promotion: Even if you don’t want to become a Motion Graphics Designer, having a basic knowledge of video is an invaluable tool for promoting yourself and your work. The popularity of YouTube and Vimeo videos embedded on simple WordPress sites is only getting greater!
3. Easy to Learn: Motion Graphics primarily uses Adobe After Effects. Fortunately, this is one the easiest softwares to learn… period. When it comes to After Effects I learned all that I know from online tutorials. The best of which all can be found on this site: Video Copilot. As far as animation and design principles, those are a little harder to teach yourself.

CONS:

1. File size: As a designer, you are probably used to files that are under 100 MB. For video, it is not uncommon to work on a project that is is just under 100 GB! This can be very demanding of your machine which encourages you to find ways to increase your production workflow and organization.
2. Rendering: When you finish a video project, you are ready to export it. It’s just like exporting a PNG from photoshop, only instead you are exporting 5,000 PNGs at once. As you can imagine, this can take a very long time. Just like Photoshop or Illustrator, adding things like Blurs or 3D effects can take a long time to process. Part of being a good Motion Graphics Designer is knowing the best ways to take advantage of your computer and to know it’s limits.
3. Communication (This is not so much a con as it is some advice): When you are working on complex animations it is even more important that you are effectively communicating with your creative director or client. If you do not, you may be in for a tough revisions process. Imagine having to replace an image in one of your design files… Now, imagine having to do the same thing to multiple spots of  a 3-minute video. The smallest change can create a lot of work for you and the rest of your teammates.

RESOURCES:

Here is a collection of Motion Graphics Resources that help me to this day:

• Tutorial Sites
  -Video Copilot
  -AE Tuts
  -Creative Cow
• Blogging & More Sites
  - Motionographer
  -Greyscale Gorilla
• Inspiration Sites
  -Vimeo
  -Buck
  -MK12
  -Brandon Wall
  -YouTube
  -FreddieW
  -Corridor Digital
  -My Demo Reel  
  -Salesman Buck!
  -Blur Studios
• Sounds (For the Professors):
  -Sound Snap
  -Sound Rangers
  -FreePlay Music 

Thanks to everyone at SFCC for having me! I enjoyed speaking to you about Motion Graphics and I hope all this info helps you in your future endeavors!

Peace from all of us at Seven2 Interactive!

Lets start by drawing a simple box, I usually use a 2pt stroke and hold shift to draw a even square. Duplicate those to make a even grid for yourself.

At this point you’ll want to group all of this together.

If you don’t, you’ll end up with this hot mess:

Also I tend to make sure to copy this to another layer and set it to be semi transparent and lock it. This is so have a flat grid to go off of later to line up you’re shapes. So at this point, make sure your grid is selected and apply Extrude & Bevel (Effect > 3D > Extrude & Bevil)

You’ll want to make sure Preview is checked to see your changes visually. Now here is time saver. I used to adjust the 3D position numbers on my own until I got something that looked right, silly me… Up at the top their is a drop-down labeled as Position, and apparently you can select different Isometric views. For this lets select Isometric Top. You’ll notice if you have Preview checked that it made a grid of extruded 3D walls for you. Since we just want a grid to go off of we want to adjust the Extrude Depth option to 0pt. You’ll notice now that it’s angled right but is just a grid now.

At this point you can use your grids to help layout your shapes that you want to use. I won’t get into to much detail on creating design elements for the sake of time but here is a quick example:

As you can see you’ll want to try and think in the sense of extruding 2D to 3D as the name implies, but even still you can end up with some pretty cool results if you take the time to learn how to work this way. If you want to go back in and edit the extrude depth or angle you can use the Appearance panel and click on the 3D Extrude & Bevil option and you can readjust from there.

Here is a rough example of some things I created using this technique.

Digital sketching has always been something I try to improve, whether it is quality, speed or both. At Seven2, I get a lot of practice and the particular challenges of sketching makes it one of my favorite tasks. For this article, I’ve decided to share a few of my favorite techniques. This is in not intended to be an exhaustive list because… well that would be boring.

HOTKEYS

I work with many graphics applications, including Illustrator, Flash, Photoshop and Blender. If I tried to memorize all the HotKeys, my brain would explode. These are the most common keys I use while sketching, not counting Cmd+Z.

Resize Brush= Ctrl+Opt+LeftMouse (drag left/right)

Rotate Canvas= R Key

Hand= H Key

Zoom= Z Key then LeftMouse (drag left/right)

Opacity= Type a number while using a brush

Shift+B= Select next tool (Shift can be used with any tool)

UNDERRATED SHIFT

Sometimes it seems like the Command or Option Keys gets all the attention. When it comes to sketching, Shift is probably one of my most often used keys because it allows me to draw perfectly straight lines.

Hold Shift while drawing a line, and it will constrain to the axis.

Hold Shift while tapping two endpoints, and a straight line will be drawn between them.

SMOOTH CURVES

Sometimes getting the right curve is difficult to freehand. This is where tracing a vector comes in handy. Create your vector path with a pen or shape tool, then Ctrl+LeftMouse click on the path to bring up a menu. Select ‘Stroke Path’. Enabling/Disabling ‘Simulate Pressure’ will give very different results.

DARKER DARKS

While sketching, I don’t worry too much about the consistency or darkness of my lines. When the shape is completed, I will usually copy the layer several times and merge them together. Sometimes I will thicken the lines with a blackened glow, but that tends to destroy the line quality.

FINAL NOTE

Sketching is an important part of the creative process; work as quickly as possible to keep the imagery interesting, lively and fresh. Don’t get too bogged down in details, those are refined during production.