The following is an excerpt from Chris Georgenes’ Pushing Pixels. Pushing Pixels is the real-world guide to developing dynamic and fun content from conception to deployment. Here, Chris, a renowned Flash expert, demonstrates the importance of designing exciting and interesting backgrounds.
I’ve always treated my backgrounds as another character. Backgrounds should have a unique style and personality that compliments the characters. Backgrounds can also help provide a unique look and feel for the entire animation. For these reasons I typically put as much thought into the background design as I do the character design.
The entire background image for this project was drawn using Flash’s vector drawing tools. This allowed me to scale it to any size I needed without a loss in quality. I kept the image relatively simple by using the Rectangle tool and fill colors without outlines. Ultimately I wanted the background to provide some visual contrast with the character and as it was here, the character might get a little lost in all the flat bright colors. Professor Needs will eventually be placed in between the chair and the desk and it would be nice if there was some color contrast between him and his surroundings.
Here’s an exploded view of how the background layers were built. The desk is in its own layer above the chair and the rest of the office is on the bottom layer. The Professor Needs character symbol will be added to a fourth layer in between the desk and the chair. I only drew the back chair support because we never see any more detail than this.
The next step was to add texture and to do this meant bringing the image into Adobe Photoshop. From Flash I exported the background to PNG format by going to File > Export Image…
Select Full Document Size from the Include drop-down menu to crop the image to the stage size. The Colors drop-down provides 8, 24 and 32 bit options. The Background setting provides the choice between an opaque or transparent background and the Smooth checkbox will antialias the image if checked.
Open the exported PNG file in Adobe Photoshop and then duplicate the Background layer by pressing Command + J. With the duplicate layer selected go to Filters > Artistic > Smudge Stick.
Set the Stroke Length to 0. Move the Highlight Area to a value of 5 and set the Intensity to 1. Click OK and then set the layer opacity to 50%. This tones the overall filter down a bit. To help it blend even more with the original background layer below it, set the Blend Mode to Overlay. Click OK.
Set the Blend Mode of this layer to Overlay so it blends with the original layer below it. Overlay blends in a way that makes light areas lighter and dark areas darker.
The result of the blending is a little too saturated. Lower the Opacity of the top layer to 50% to soften the overall strength of the Overlay blend mode. As you can see, the Smudge Stick filter combined with the Overlay Blend Mode and transparency creates a subtle texture as if the image was drawn on rough paper. But this effect for this project was a little too subtle.
It’s time to add some real texture to the background. These are two texture images from my folder collection. Similar textures can be found online but you can easily create them yourself by crumpling up paper, taking a photo of it and bringing the photo into Photoshop to add contrast and possibly some color. You don’t even need a professional DSLR camera to shoot the image as most smartphones come with quality cameras built in. I recommend shooting the textured images outside on a sunny day as the sun provides a perfect source of natural light.
Open the first texture in Photoshop and paste it into the background file in a layer above the background layers. With the texture layer selected, apply the Divide blend mode. The Divide blend mode simply divides the color of the pixel values between the image in the layer and the image in the layer below it. The end result blends the texture image with the background image as seen below.
The background is starting to take shape. We have a pretty nice texture added to it but for me it’s just a little bit too distracting due to its contrast. The easiest way to remove some of the contrast of the texture is to lower the opacity of its layer. Using the Opacity slider I adjusted the amount of opacity to about 30%. Your texture and amount of opacity may differ based on your design preference.
Adding a single texture may be plenty in most cases, but for this project I added the second texture for an even richer look to the backgrounds. After opening the second texture image, copy and paste it into the background layer. This time select Color Burn from the blend mode drop-down menu. The Color Burn mode darkens the layer below it while inverting and then dividing it based on the results. The more dark present in the bottom layer, the more it blends with them. This produces a very dark and rich effect.
The Color Burn produced a very dark and rich effect with the texture. Adjusting the opacity of the layer helped balance the texture evenly throughout the image. Now the background has a rich texture giving it a lot more character and interest. The rich textures will provide a great backdrop to the vector character when brought back into Flash. Save the image as a PNG from Photoshop so it can be imported into Flash.
Excerpt from Pushing Pixels: Secret Weapons for the Modern Flash Animator by Chris Georgenes. © 2012 Taylor & Francis Group. All Rights Reserved. Pushing Pixels can be purchased Amazon.com, BN.com, and wherever fine books can be found.