Crys Odenkirk

Lithograhics.com

Posted on October 28, 2005 by Crys

Lithographics.com

Lithographics, Inc. – Quality Printing, Superior Production

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.

Each section of the site had its own photo. Here are mockups of two of those other two sections:

Banners:
lithographics468x60static

lithographics

lithographics120x90static

Code3Co Animated Banners

Posted on August 30, 2005 by Crys

Logo and Web Design

Code3co.com

Logo

As a service company, I opted to pursue a “mechanics patch” theme with the logo.

Animated Banner Ads For Code3Co

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.

Code 3 Co

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.

Code 3 Co 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.

Alladin Plastics Line Online Catalog

Posted on June 24, 2005 by Crys

Display products and specs from our print catalog online

Alladin Plastics wanted to make the product information from their print catalog available online, and they wanted to be able to update it themselves without having us make the changes every time a new catalog was printed.

To make this possible I built them a content management system from the ground up in php, tailored to the information that each product required. There’s also a section where they can maintain other information, such as the shipping and ordering pages, and upload the new covers for the font page.

Obsidian LARP Quickstart – Portfolio Entry

Posted on August 31, 2004 by Crys

Obsidian Live Action Quickstart Layout and Illustrations

Obsidian Live Action Quickstart RPG.net entry | Available at Drive Thru RPG | Character Sheets

I created the art, graphics, photo illustrations and logo for the Obsidian Quick Start, as well as doing the typography and layout for both the quickstart and the character sheet.

I did two different photo shoots that coincided with playtests of the system (most of the people pictured here are also playtesters). I approached the illustrations as still shots for a story that would play out across the book and continue into other media.

That meant starting with the outline of a story and a whole cast of particular characters. My production list looked more like a script breakdown than a photo shoot: I broke props and costumes down by scene and scheduled people accordingly.

I also did the layout and other graphic elements in the Quickstart, including the type treatment, the page ornaments, and the cover and character sheet.

Scroll down to see more illustrations and some notes from the shoots.

I like to use uncommon angles in my work, and to get right into the middle of the action.

One sequence involves a character being chased down and beaten by cultists, and to get the proper feel for that, I laid down with a camera and had them “attack” me (that’s me on the ground in the first picture). That gave the images a sense of brutality and intimidation, and immediately put the viewer in sympathy for the victim.

Here’s a few images from that sequence. Final images would have been cut out from the background as you see above.

Quickstart Illustrations

Posted on August 31, 2004 by Crys

We need post-apocalyptic demonic horror/sci-fi photo-based illustrations

For the Obsidian Live Action Quickstart, I did two different photo shoots that coincided with playtests of the new system (most of the people pictured here are also playtesters). I approached the illustrations as still shots for a story that would play out across the book and continue into other media.

I also did the layout and other graphic elements in the Quickstart, including the type treatment, the page ornaments, and the cover and character sheet.

Scroll down to see more illustrations and some notes from the shoots.

Note: Text blurred to protect copyright. If you want a copy of the Quickstart, you can get it from Drive Thru RPG.