Flash
Animating the bottle.
This step is entirely optional. You do not have to convert the bottle into flash. You could instead simply make the bottle a static image and place it within the layout that way. But if you have flash, and want to give the design an extra boost, you can follow this step.
The goal of this step is to take our bottle design, and animate the water by giving it a realistic ripple effect. I'm not the greatest flash coder, so I used Google to search for a water effect tutorial. I found this link which explained how to do it perfectly. I simply followed the steps while importing the images below into flash in their own layers:
This image is the basis of the flash document. It contains everything except for the vertical "ParadiseVodka" text, which we will add in flash. The height x width of this image is 626x246. This will be the dimensions of the flash document we create.
This contains only the water, or only the part of the bottle that we want the ripple effect applied to. Notice that it does not include the swimmer's head! This is because it wouldn't make sense for that part to ripple, since it is above the water.
This is a cutout of only the swimmer's head. This will be placed on a layer above the ripple effect layer.
These are the 3 images that we will import into flash. Also note that they are PNG files.
The end result will look like this:
Download the source file here. Open it up in Flash and examine how the layers are structured. Use it in conjunction with the water effect tutorial located here.
Once completed, we will take this flash and insert it into the layout with HTML and CSS.