Introduction: Animated Gps Batmobile Icon 2.0: the 3d Way
{NOTICE} the custom vehicle icons that i make freely available on my website are not for resale. {/NOTICE}
this is the long postponed second part to my previous instructable "animated gps batmobile icon". in that project i demonstrated how to create a custom vehicle icon for your garmin gps navigation device using photographs of a model car. in this project we'll instead use images generated from a 3d animation program. my program of choice is lightwave 3d, but you can use the same techniques in just about any other program, from freebies like blender, to entry level programs like poser and bryce, to high end programs like 3ds max and maya, just to name a few. i've decided to take the unusual course of demonstrating the project using both lightwave and poser side-by-side to compare and contrast methods, while trying to keep the instructions as generic as practical. i hope that this will be more helpful than confusing.
if you're already familiar with a 3d application, you've got a head start, because i'm not going to explain how to navigate the application or how to construct your model, which is way beyond the scope of this project. you'll have to consult your manual to find out where specific settings and dialog windows are.
this is about setting up your finished model on a virtual turntable, like the actual cardboard turntable we created in the previous instructable, and from there generating the image sequence you'll later assemble in an image editor like photoshop.
at the end of this instructable, once you've imported all the images into a single photoshop file, you'll have to work through steps 7 to 11 of the previous project to finish your icon.
this is the long postponed second part to my previous instructable "animated gps batmobile icon". in that project i demonstrated how to create a custom vehicle icon for your garmin gps navigation device using photographs of a model car. in this project we'll instead use images generated from a 3d animation program. my program of choice is lightwave 3d, but you can use the same techniques in just about any other program, from freebies like blender, to entry level programs like poser and bryce, to high end programs like 3ds max and maya, just to name a few. i've decided to take the unusual course of demonstrating the project using both lightwave and poser side-by-side to compare and contrast methods, while trying to keep the instructions as generic as practical. i hope that this will be more helpful than confusing.
if you're already familiar with a 3d application, you've got a head start, because i'm not going to explain how to navigate the application or how to construct your model, which is way beyond the scope of this project. you'll have to consult your manual to find out where specific settings and dialog windows are.
this is about setting up your finished model on a virtual turntable, like the actual cardboard turntable we created in the previous instructable, and from there generating the image sequence you'll later assemble in an image editor like photoshop.
at the end of this instructable, once you've imported all the images into a single photoshop file, you'll have to work through steps 7 to 11 of the previous project to finish your icon.
Step 1: Setting Up the Timeline
we'll need 36 images of the car from 360 degrees, so set up your animation for 36 frames.
LIGHTWAVE: programs like lightwave start numbering frames from 0, so the last frame will be frame 35.
POSER: programs like poser start at frame 1, so the last frame will be frame 36.
in both programs the animation timeline appears at the bottom of the main window where you can directly enter a value for the number of frames for the whole animation.
LIGHTWAVE: programs like lightwave start numbering frames from 0, so the last frame will be frame 35.
POSER: programs like poser start at frame 1, so the last frame will be frame 36.
in both programs the animation timeline appears at the bottom of the main window where you can directly enter a value for the number of frames for the whole animation.
Step 2: Setting the Document Size
i usually set the output image size to 400 x 400, and you should as well, since the photoshop stage of the project assumes that's the size of the images.
LIGHTWAVE: select the camera to edit its item properties and set the dimensions of your output.
POSER: first set the document window size, then set the render output dimensions.
LIGHTWAVE: select the camera to edit its item properties and set the dimensions of your output.
POSER: first set the document window size, then set the render output dimensions.
Step 3: Setting Up the Virtual Turntable
just as we did in the previous project, we need to create a turntable to mount the model on. any object will do, since we won't be rendering it in the final output.
LIGHTWAVE: we can use a special non-rendering multipurpose rudimentary object called a null.
POSER: in other programs that don't use nulls, like poser, we can substitute an object primitive, like a box or a ball, and hide it or make its surface or texture invisible, or scale it down small enough that your car model hides the primitive. use whatever strategy you like to keep it out of sight.
move the object to 0,0,0 if it isn't there already.
LIGHTWAVE: we can use a special non-rendering multipurpose rudimentary object called a null.
POSER: in other programs that don't use nulls, like poser, we can substitute an object primitive, like a box or a ball, and hide it or make its surface or texture invisible, or scale it down small enough that your car model hides the primitive. use whatever strategy you like to keep it out of sight.
move the object to 0,0,0 if it isn't there already.
Step 4: Animating the Virtual Turntable
move to the last frame. select your null or primitive if it isn't already selected.
set the object's spin rotation to 350 degrees clockwise, as seen from above the ground. most 3d programs differ in both spatial orientation and terminology.
LIGHTWAVE: that means setting a heading of 350 degrees.
POSER: that means setting a yRotate of -350 degrees.
play the animation to confirm that the object spins properly.
you may also need to set the object's keyframe interpolation to linear if your animation does not produce a regular movement of 10 degrees for each frame.
LIGHTWAVE: open the graph editor and select the "null.rotation.h" channel. set the "pre behavior", "post behavior" and "incoming curve" all to "linear" for both the first and last keyframes.
POSER: a linear rotation is produced by default. if need be, you can edit the keyframe interpolation in either the animation palette or the graph window.
set the object's spin rotation to 350 degrees clockwise, as seen from above the ground. most 3d programs differ in both spatial orientation and terminology.
LIGHTWAVE: that means setting a heading of 350 degrees.
POSER: that means setting a yRotate of -350 degrees.
play the animation to confirm that the object spins properly.
you may also need to set the object's keyframe interpolation to linear if your animation does not produce a regular movement of 10 degrees for each frame.
LIGHTWAVE: open the graph editor and select the "null.rotation.h" channel. set the "pre behavior", "post behavior" and "incoming curve" all to "linear" for both the first and last keyframes.
POSER: a linear rotation is produced by default. if need be, you can edit the keyframe interpolation in either the animation palette or the graph window.
Step 5: Positioning the Camera Using a Reference Background
now we need to position the camera, with the help of a reference shot of the gps screen. return to the first frame.
LIGHTWAVE: open the scene effects:compositing dialog to import the reference image as a background. then open the display options to select the image as a "camera view background". then change the main window to "camera view" to see the background.
select the camera. open the motion options dialog and change the "target" to the null. this will keep the camera pointed at the null no matter where it's moved; note that you'll no longer be able to manually rotate it.
make sure the camera is positioned at 0 on the x axis. raise or lower the camera until the grid lines of the ground plane (turn them on if you haven't already) and the grid lines in the reference image are reasonably aligned.
POSER: import the reference image as a background, where it will appear automatically. select the main camera and use the "point at..." object dialog to aim it at the box primitive.
but positioning poser's camera and aligning the grids are a bit trickier than in lightwave since the camera's zero point is offset from the center of the camera -- you'll have to manually position it. and since you can still rotate the camera while it's aimed at the box, you'll need to manually rotate it in order to adjust it as it is moved. (see snapshot of camera parameter window.)
LIGHTWAVE: open the scene effects:compositing dialog to import the reference image as a background. then open the display options to select the image as a "camera view background". then change the main window to "camera view" to see the background.
select the camera. open the motion options dialog and change the "target" to the null. this will keep the camera pointed at the null no matter where it's moved; note that you'll no longer be able to manually rotate it.
make sure the camera is positioned at 0 on the x axis. raise or lower the camera until the grid lines of the ground plane (turn them on if you haven't already) and the grid lines in the reference image are reasonably aligned.
POSER: import the reference image as a background, where it will appear automatically. select the main camera and use the "point at..." object dialog to aim it at the box primitive.
but positioning poser's camera and aligning the grids are a bit trickier than in lightwave since the camera's zero point is offset from the center of the camera -- you'll have to manually position it. and since you can still rotate the camera while it's aimed at the box, you'll need to manually rotate it in order to adjust it as it is moved. (see snapshot of camera parameter window.)
Step 6: Importing the Vehicle Model
now that the preliminaries are over, we can import our vehicle model.
the model must be imported since neither lightwave layout, where the animation and special effects take place, nor poser, are model makers. you can make your model in lightwave modeler (which i used to create the batmobile), or any other modeler that exports files in formats your animator can read. or you can download free or commercial models from sites like turbosquid, renderosity, daz3d and foundation 3d, to name just a few.
after importing, the model may need to be resized, relocated and/or reoriented. make sure the model's center is over the virtual turntable, and lies completely within the camera window. the model must be "on the ground" with its back facing the camera.
LIGHTWAVE: open the model's motion options dialog and select the null as its parent.
POSER: open the model's properties window, click "set parent" and select the box from the object list. you then may also want to select the box, open its properties window and uncheck the visibility options.
play the animation to check that the vehicle is properly parented to the virtual turntable, rotates with it and lies completely within the camera window throughout all frames of the animation.
the model must be imported since neither lightwave layout, where the animation and special effects take place, nor poser, are model makers. you can make your model in lightwave modeler (which i used to create the batmobile), or any other modeler that exports files in formats your animator can read. or you can download free or commercial models from sites like turbosquid, renderosity, daz3d and foundation 3d, to name just a few.
after importing, the model may need to be resized, relocated and/or reoriented. make sure the model's center is over the virtual turntable, and lies completely within the camera window. the model must be "on the ground" with its back facing the camera.
LIGHTWAVE: open the model's motion options dialog and select the null as its parent.
POSER: open the model's properties window, click "set parent" and select the box from the object list. you then may also want to select the box, open its properties window and uncheck the visibility options.
play the animation to check that the vehicle is properly parented to the virtual turntable, rotates with it and lies completely within the camera window throughout all frames of the animation.
Step 7: Lights
i'm not going to say much about lighting since a proper exposition on studio lighting technique is beyond the scope of this project and it all boils down to taste in the end. but a good start would place a relatively bright key light generally in front of the model and a relatively dim fill light in back, opposite the key light. the combination should be bright enough to display white whites and crisp colors.
since the final icon size will be only 80 x 80 pixels, you should focus on bringing out the details in the model, which means not making the highlights so bright that they wash out the details, nor making the shadows so dark that they hide them.
try to position your lights to maximize the number of details that get both some light and some shadow.
it's a good idea to render test shots of the model from various angles, since lighting that looks great from one angle might look weak from another angle. you'll have to find the placement for your lights that works reasonably well from most angles throughout the entire animation. be prepared to invest enough time to get the best lighting.
since the final icon size will be only 80 x 80 pixels, you should focus on bringing out the details in the model, which means not making the highlights so bright that they wash out the details, nor making the shadows so dark that they hide them.
try to position your lights to maximize the number of details that get both some light and some shadow.
it's a good idea to render test shots of the model from various angles, since lighting that looks great from one angle might look weak from another angle. you'll have to find the placement for your lights that works reasonably well from most angles throughout the entire animation. be prepared to invest enough time to get the best lighting.
Step 8: Render Time
at this point your turntable is hidden and spins properly (clockwise, 10 degrees per frame), your model is mounted on it, and your lighting arrangement makes the model look like a million bucks. now it's time to render those frames, which you'll save as an image sequence in photoshop format. don't forget to either hide, disable or clear the background reference image before you do.
LIGHTWAVE: select the camera and open its edit properties dialog. turn on antialiasing, which blends edge pixels so that they look smooth and not jagged. then open the render options dialog and enter "0" for "render first frame" and "35" for "render last frame". check "save rgb" of "type" "lw_pshop32(.psd)" and click "rgb files" to open the file browser to select or create a new folder to save the images in. then start your render.
POSER: select "make movie" from the animation menu and select "image files" as the format. click "make movie" and use the file browser to select or create a new folder to save the images in. save the file "type" as "photoshop: uncompressed" then click "save" to start your render.
some tips:
tip #1: if your program supports ambient occlusion, use it to enhance the details in your model. it fills corners, crannies and crevices with shadow.
tip #2: if you're going to create or modify your own model, exaggerate the thickness of edges and heighten the details on surfaces.
tip #3: to render a quickie preview of your animation, reduce the output file dimensions to 200 x 200 pixels and save it as a movie instead of an image sequence.
LIGHTWAVE: select the camera and open its edit properties dialog. turn on antialiasing, which blends edge pixels so that they look smooth and not jagged. then open the render options dialog and enter "0" for "render first frame" and "35" for "render last frame". check "save rgb" of "type" "lw_pshop32(.psd)" and click "rgb files" to open the file browser to select or create a new folder to save the images in. then start your render.
POSER: select "make movie" from the animation menu and select "image files" as the format. click "make movie" and use the file browser to select or create a new folder to save the images in. save the file "type" as "photoshop: uncompressed" then click "save" to start your render.
some tips:
tip #1: if your program supports ambient occlusion, use it to enhance the details in your model. it fills corners, crannies and crevices with shadow.
tip #2: if you're going to create or modify your own model, exaggerate the thickness of edges and heighten the details on surfaces.
tip #3: to render a quickie preview of your animation, reduce the output file dimensions to 200 x 200 pixels and save it as a movie instead of an image sequence.
Step 9: Overhead Renders
we also need to produce a 36 image sequence of the model from directly overhead.
LIGHTWAVE: add a new camera to the scene at 0,0,0. open the camera's item preferences and set the output dimensions to 350 x 350 pixels. open the camera's motion options dialog and set its target to the null. adjust the camera height until the model fits inside the render region. play the animation to make sure the model is inside the render region throughout the animation. you'll also want to turn off the current light set and create a new set of lights specifically for the overhead images. rename the output files and render these to a different folder.
POSER: set the camera view to "top". adjust the camera distance until the model fits inside the camera window. play the animation to make sure the model is inside the camera window throughout the animation. turn off the current light set and create a new set specifically for the overheads. set the render dimensions to 350 x 350 pixels. rename the output files and render these to a different folder.
LIGHTWAVE: add a new camera to the scene at 0,0,0. open the camera's item preferences and set the output dimensions to 350 x 350 pixels. open the camera's motion options dialog and set its target to the null. adjust the camera height until the model fits inside the render region. play the animation to make sure the model is inside the render region throughout the animation. you'll also want to turn off the current light set and create a new set of lights specifically for the overhead images. rename the output files and render these to a different folder.
POSER: set the camera view to "top". adjust the camera distance until the model fits inside the camera window. play the animation to make sure the model is inside the camera window throughout the animation. turn off the current light set and create a new set specifically for the overheads. set the render dimensions to 350 x 350 pixels. rename the output files and render these to a different folder.
Step 10: Some Assembly Required
for those of you without photoshop or any image editor that doesn't offer batch processing or scripting, this part of the project will be very tedious.
the resource file that the nuvi uses for the vehicle icon is converted from a particularly laid out png file (a format popularized for its support of alpha transparency). the png consists of a row of 36 80 x 80 pixel perspective views stacked on a row of 36 70 x 70 pixel overhead views of the vehicle on a 2880 x 150 pixel sheet. you can look at this smart car png as an example. you can also look at this simple grid template for the layout.
you need to place your 36 perspective and 36 overhead finished renders in this specific arrangement: for 36 400 x 400 perspective and 36 350 x 350 overhead images the initial layout will be 14400 x 750 pixels.
i wrote 2 scripts that take care of most of this labor; the first prompts you for a folder and opens all the files within as layers in a new document, then distributes all the layers evenly across its width; the second script extracts the alpha mask channels from all the files in a folder and does the same with them. the scripts work with photoshop cs and later.
place the scripts in the "presets/scripts" subfolder in adobe photoshop cs' application folder. restart photoshop. select file menu > scripts > "assemble rgb layers!" select the folder containing the perspective renders. when finished, you should have a single strip of all the perspective renders. save the file under a new name and close it. relaunch "assemble rgb layers!" with the overhead renders and save the file.
open the new perspective strip and increase the canvas height to 750 pixels with the "anchor" in the upper left corner. select the entire overhead strip, paste it into the perspective document and move it flush with the left edge of the document. merge the layers. save and close the files. repeat the assembly process with the "assemble alpha masks!" script.
select the entire alpha document and copy it. open the perspective file and create a new channel in the channels window, then paste the alpha into it. select the rgb channel. load the new alpha channel as a selection. add a layer mask with "reveal selection". save the file.
you should now have a 14400 x 750 pixel file that, like the smart car png, consists of all the perspective and overhead shots on a single transparent layer. so you can now move on to steps 7 to 11 of the previous project to finish your icon.
the resource file that the nuvi uses for the vehicle icon is converted from a particularly laid out png file (a format popularized for its support of alpha transparency). the png consists of a row of 36 80 x 80 pixel perspective views stacked on a row of 36 70 x 70 pixel overhead views of the vehicle on a 2880 x 150 pixel sheet. you can look at this smart car png as an example. you can also look at this simple grid template for the layout.
you need to place your 36 perspective and 36 overhead finished renders in this specific arrangement: for 36 400 x 400 perspective and 36 350 x 350 overhead images the initial layout will be 14400 x 750 pixels.
i wrote 2 scripts that take care of most of this labor; the first prompts you for a folder and opens all the files within as layers in a new document, then distributes all the layers evenly across its width; the second script extracts the alpha mask channels from all the files in a folder and does the same with them. the scripts work with photoshop cs and later.
place the scripts in the "presets/scripts" subfolder in adobe photoshop cs' application folder. restart photoshop. select file menu > scripts > "assemble rgb layers!" select the folder containing the perspective renders. when finished, you should have a single strip of all the perspective renders. save the file under a new name and close it. relaunch "assemble rgb layers!" with the overhead renders and save the file.
open the new perspective strip and increase the canvas height to 750 pixels with the "anchor" in the upper left corner. select the entire overhead strip, paste it into the perspective document and move it flush with the left edge of the document. merge the layers. save and close the files. repeat the assembly process with the "assemble alpha masks!" script.
select the entire alpha document and copy it. open the perspective file and create a new channel in the channels window, then paste the alpha into it. select the rgb channel. load the new alpha channel as a selection. add a layer mask with "reveal selection". save the file.
you should now have a 14400 x 750 pixel file that, like the smart car png, consists of all the perspective and overhead shots on a single transparent layer. so you can now move on to steps 7 to 11 of the previous project to finish your icon.
