This chapter is from the book
This chapter is from the book
This chapter is from the book
Motion Within a Collage
Finally, to bring these "print" collages to life on the web, incorporate an animated gif into the layout of your collage. Don't add an animated gif out to the side of your collage. Instead, pick an element that's already in your collage, and then animate it.
First, design your layout to include an element that would look good animated. At mesoa.com, for example, they chose to animate the screen of a television set (Figure 04.09). The television set is collaged in Photoshop along with the rest of the layout.
Figure 04.09. mesoa.com
After you complete the collage, select the area you want to animate. In this case, the area is not the entire television, but just the screen. Animate that square area in a gif animation program, using whatever series of frames you like, and then save it as a gif. Next, cut up your original collage into squares, saving each square as a gif or jpeg.
There are two ways to call this collage into your web page. The old-school way is to use tables. This gets tricky, because your tiny animation square has to fit in with the rest of the collage, so you have to mind your splicing to make sure it does. A better solution is to use CSS layers. Put the entire collage, including the unanimated TV screen section, on one layer. Then put the animated gif on a top layer, positioning it absolutely so that it fits properly in the overall design.
The final effect brings an otherwise static image to life. Again, use this sparingly. The degree to which your visitor's attention is drawn to the animation is also the degree to which his attention is drawn away from the rest of the page.
The Lo-Fi Grunge Style of web design requires guesswork, experimentation, and a willingness to spend some time in Photoshop. Lo-fi grunge sites might seem loose and fun, but they are by no means haphazardly created. Knowing about brushes, scanlines, and tiling backgrounds can start you on your way to lo-fi grunge greatness. And if you're already skilled at this type of Carsonesque distressed print work, taking your talent to the web is simply a matter of course.