Crystal's Adventures in Webdev Land » animation

Schroeder Bros. Construction, Inc.

Crys — Fri, 13 Apr 2007 17:06:17 +0000

This one might just be the best design I’ve ever done. It’s certainly one of the top ones. And they made it really easy to make the site for them. They do amazing work and gave me excellent photos to work from. If I was building a house, I’d want them to do it. And I’m not just saying that because they were clients. Go take a look at some of the gorgeous woodwork in the gallery.

Website: Custom Homes and Condos – Schroeder Bros. Construction, Inc of Pewaukee, WI

Details: Fixed width site with repeating background. All of the textures used in the site are sampled from client-supplied photos from their homes, including the background /bracketing texture. Summer of ’2007.

Banners:

Precision Screw Thread Corp.

Crys — Fri, 12 Jan 2007 18:18:34 +0000

I’ve done a lot of industrial and manufacturing sites. Most of them are very cut and dried, get it done as fast as you can, we want it to look as plain as you can and still get our information across. That’s not a value judgment, just a constraint that you usually have to work under with certain industries.

Precision Screw Thread stands out from their industry for their recognition that “functional” does not have to equal “ugly”. I had a lot of fun putting this one together.

Precision Screw Thread, Inc.

The initial landing page for the site was conceived as an abstracted display panel from one of the threading machines and evolved into what you see on the page now. We wanted to showcase the short movie but avoid the typical “trash splash” intro that trips up a lot of sites. This display panel instead brings together the site’s navigation and news from the company blog to make it easy for users to get where they want to go on the site (I was outvoted on making the movie start playing immediately. Sorry visitors, you’ll have to hit stop instead of start).

The internal pages carry through the theme and the navigation from the intro page. We wanted to add a little motion so I animated the starburst behind the logo in the upper left so that it glows and rotates on mouseover.

RHH Foam Systems

Crys — Tue, 11 Apr 2006 17:54:56 +0000

Here’s a fun one.

RHH Foam Systems – spray foam insulation

The spray nozzle at the top of this site is animated, but on a long delay to avoid annoying users. I created the animation using frame-by-frame cel-style techniques in Photoshop and ImageReady entirely through photo manipulation. The spray foam behind the navigation is entirely a digital creation with a photo used only to enhance the texture.

Lithograhics.com

Crys — Fri, 28 Oct 2005 13:50:45 +0000

This is a site worth visiting. I’m pretty happy with how it turned out. The brief for Lithographics included a small book that they print and use for promotions and my task was to keep the website in line with that book while still giving them a dynamic — in both design and technical terms — site that would stand out from the competition and convey the quality of their print work despite being a non-print medium.

I wrote all the code and markup for this site, with the exception of the reference desk, which I heavily modified from an application written in-house by another programmer at the company, and I created all the banner ads using single-frame cel animation techniques in Photoshop and ImageReady. I also converted all the photos from press-ready to web-ready with an eye to making them look the way they looked after coming off the press, rather than just making them look like digital photos. (I was very successful at that, if that tells you anything about the exceptional quality of the print-work that Lithographics does).

Lithographics, Inc. – Quality Printing, Superior Production

When I did the site in 2005 it had a different look for each of the sections; looks like they liked the lightbulb so much they had the agency that hosts the site change all the sections to match that. Here are mockups of two of those other two sections:

Banners:

Code3Co Animated Banners

Crys — Wed, 31 Aug 2005 00:12:58 +0000

I used traditional (some would say “old-fashioned”) frame-by-frame animation to create these banners, in Photoshop and ImageReady, rather than relying on ‘tweening or simple program-created fades and slides. That gave me a lot of freedom with how the individual elements of the ad interacted with each other.

When I created these, I didn’t intend them to be a display of different types of cartoon physics. Nonetheless, they each typify a different aspect of animation that is a pitfall for many new animators, and that can cause your viewers to feel uneasy looking at your animation if you aren’t careful.

Object Resistance: Watch the logo as the slogan moves left in the banner above. For three frames, the logo compresses and then releases. This slight compression tells the viewer that these two elements are on the same plane, next to each other, that one is pushing the other. You have to spell out this kind of contact in your animations if you want to avoid a feeling of unconnected elements randomly floating in space. Viewers can tell instinctually when an object behaves in a way they’re not expecting even if they can’t pinpoint what exactly is wrong with it.

Bouncing: The number one unconscious expectation of a bounce is bounceback. The element needs to overshoot its original position. Watch the logo to the left. See how it goes up a few pixels above its original position, with compression, and then comes back down? Most objects in real space have this characteristic. If you leave it out, your object will look like it’s somehow connected to the space it bounced into (in this case, the bottom of the ad).

Spinning: I could write a book on spinning graphics and what to watch out for if you are using them.I’ll just list a couple things here. First off, remember that your element has a back. When the object spins, you should not see two copies of the front or you will break the 3D illusion. You can remedy this quickly by flipping the element and performing the same steps as you did with the unflipped element to account for the back. Second, lighting. If you are using a 3D program to create your spinning element, you don’t need to worry about this if you set the light source, but all flat animations require you to pay strict attention to propagating your light sources.

RHH Foam Systems

Twilight Games

Crys — Tue, 09 Sep 2003 19:26:21 +0000

This site is no longer available, but here’s a screenshot and one of the animated banners I did for the site.