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.
Associated Surgical & Medical Specialists, LLC
Liquid layout, javascript enhancement, dynamically generated menu items
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:
As a service company, I opted to pursue a “mechanics patch” theme with the logo.
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.
Display products and specs from our print catalog onlineAlladin 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.
