Sean Monahan

Previously I discussed the process of implementing a custom chrome in Adobe AIR, with this post I’ll delve into how I created the assets I used in Beer Near Here Desktop. In particular I’ll discuss how I acquired all the beer glass images necessary to create the loading animation for Beer Near Here Desktop.

What You’ll Need

To get the beer glass image I used 7 pieces of equipment:

1. A beer
2. A beer glass
3. A coaster (this is optional)
4. Some (cheapie shop) lighting equipment
5. A large piece of white paper and something to prop it up
6. A camera
7. A siphon

Photographing

The setup was to fill the glass with beer and place it and the coaster on the sheet of paper.  The paper was then propped up (I used a wine bottle), turning it into a backdrop.  The lights were setup so I could get some highlights.  The paper being white is important here because I wanted the glass to be transparent and white lends itself to becoming transparent better than say, black.

Once had the scene setup I placed my camera on a tripod and framed the shot I wanted.  It really helps here to have a camera with a manual focus option and to triple check your focus unless you want to drink a few beers through a siphon.  It wasn’t very enjoyable.  Additionally, you’ll want to do this on a stable surface as the goal is to never move the cup at all.

With the stage set I snapped a pic of the full beer glass and then put the siphon in the beer and sucked out a little bit of beer and removed the siphon from the frame.  Rinse and repeat until the glass is empty.  After you have all your images it’s time to get them into Photoshop.

Masking

With your images in Photoshop it’s time to create some masks so we can knockout the beer glass and coaster. One of the nice things about this is that, for the shape we are masking (the beer glass), all of these images are essentially the same thanks to the tripod. So take your time with your masking technique of choice and make a really good mask on one of the images and then copy and paste it into all the other images. You’ll end up with something like this:

Once I had all my images masked I collected them into a single layered file, one image per frame, and cropped the image down to just the glass. This is a good point to save your work.

The next thing to do is add some transparency the to progressively more empty images of the glass. To do this I merged each of my layers with an empty layer. This has the effect of eliminating the mask used to knockout the glass producing a flat image with transparency where the mask was. I then created a new layer mask for each layer and used a brush set to about 25% opacity and 25% hardness to slowly paint over the areas where one would expect to be able to see through the beer glass. I found it helpful to make a screen cap of my desktop and throw it in under all the layers so I could see if the transparency looked good against it.

Creating all these transparencies for the glass is quite time consuming but in the end it creates a very nice effect. Be sure to save the layered file as a PSD so you can come back to it later if need be. At this point you have all your assets and now it’s time to make a decision about how to use them. In my case one of my goals with Beer Near Here Desktop was to create a completely Flex-based solution. Specifically, I wanted the animation I created with the beer glass to be done with Flex so I exported all of the layers out as individual 24-bit PNGs (preserving the nice transparency I worked so hard at creating) and imported them into my Flex project.

These PNGs look great but they also now account for the bulk of BNHD’s file size. An alternative approach is to import the layered PSD into Flash, create the animation there and then import the resultant SWF into your Flex project. This will almost certainly result in a smaller size for the app, which is ideal unless you have other goals like I did.