Animated Gps Batmobile Icon
by aarrgghh in Craft > Digital Graphics
25890 Views, 56 Favorites, 0 Comments
Animated Gps Batmobile Icon
{NOTICE} the custom vehicle icons that i make freely available on my website are not for resale. {/NOTICE}
owners of the garmin nuvi line of gps navigation devices can create their own personal vehicle icons to supplement or replace the vehicles that ship with the unit. i've had mine (a nuvi 350) for over a year and the moment that i learned that i could craft my own custom vehicle i knew i had to have my very own batmobile!
the process can be broken down to two basic steps: 1) creating the source images and 2) combining the images into a single file that can be converted into the file format the nuvi uses for the icon.
unlike other gps units which use a single static image of the rear of the vehicle, the nuvi uses an image array to generate an animated icon that can be viewed from 360 degrees. it really doesn't matter how you create the source images: you could draw them and scan them in or create them in a paint program. for this exercise i'm going to show you how i used photographs of a model car to make the icon. i've also used 3d models to create other icons.
owners of the garmin nuvi line of gps navigation devices can create their own personal vehicle icons to supplement or replace the vehicles that ship with the unit. i've had mine (a nuvi 350) for over a year and the moment that i learned that i could craft my own custom vehicle i knew i had to have my very own batmobile!
the process can be broken down to two basic steps: 1) creating the source images and 2) combining the images into a single file that can be converted into the file format the nuvi uses for the icon.
unlike other gps units which use a single static image of the rear of the vehicle, the nuvi uses an image array to generate an animated icon that can be viewed from 360 degrees. it really doesn't matter how you create the source images: you could draw them and scan them in or create them in a paint program. for this exercise i'm going to show you how i used photographs of a model car to make the icon. i've also used 3d models to create other icons.
Choosing Our Vehicle
for this project, even with nearly 70 years of different batmobiles to choose from, the choice was actually quite simple: the version that debuted in february 1950, if only because i just happen to already have a die-cast replica that i bought for $6 on naked impulse at my local rite aid last summer.
The Icon Resource File
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 80x80 pixel perspective stacked on a row of 36 70x70 pixel overhead views of the vehicle on a 2880x150 pixel sheet.
the accompanying sample image is a detail of an actual png created by custom modder mad mike for his own nuvi vehicle. both the image and finished icon files can be freely downloaded from techmods.net.
the accompanying sample image is a detail of an actual png created by custom modder mad mike for his own nuvi vehicle. both the image and finished icon files can be freely downloaded from techmods.net.
Making Our Turntable
since i don't have any fancy photo studio equipment, i cut a turntable from a cardboard box with a compass and marked lightly in pencil 10 degree intervals along its circumference. i then mounted the batmobile on the turntable with a twist tie around the front axle. the turntable itself was mounted on a box by a flathead nail through its center.
but the most important piece of equipment is a sturdy tripod, because you absolutely don't want your camera moving during shooting.
but the most important piece of equipment is a sturdy tripod, because you absolutely don't want your camera moving during shooting.
Taking the Photos
for the perspective images, you must start from the rear of the vehicle, taking a snapshot for every 10 degree turn of the platter clockwise. for the overheads, you must start with the vehicle pointing due north.
as you can see from these unretouched photos, my lighting setup was less than ideal. ordinary 60w room lighting, plus a closely positioned artist's lamp, couldn't produce strong enough light, and put an unappealing dull brown cast on everything. i think i initially nixed using the camera's flash as too strong but i must have changed my mind for the overhead session. note how the cast is less intense in the overhead shot.
also note the addition of an second smaller cardboard platter under the vehicle, cut from a somewhat brighter cardboard.
but as long as the light sources themselves were positioned where i wanted them, i could, with the magic of photoshop, "fix it in post", as they say in the film trade. for tips on lighting, which is outside the scope of this instructable, i would recommend googling "studio lighting techniques".
this is where it would have been nice to have one of those slick little pc-controlled lightboxes or turntables. at least they're cheaper than ponies! in any case a device like that would have made the next step much much simpler.
as you can see from these unretouched photos, my lighting setup was less than ideal. ordinary 60w room lighting, plus a closely positioned artist's lamp, couldn't produce strong enough light, and put an unappealing dull brown cast on everything. i think i initially nixed using the camera's flash as too strong but i must have changed my mind for the overhead session. note how the cast is less intense in the overhead shot.
also note the addition of an second smaller cardboard platter under the vehicle, cut from a somewhat brighter cardboard.
but as long as the light sources themselves were positioned where i wanted them, i could, with the magic of photoshop, "fix it in post", as they say in the film trade. for tips on lighting, which is outside the scope of this instructable, i would recommend googling "studio lighting techniques".
this is where it would have been nice to have one of those slick little pc-controlled lightboxes or turntables. at least they're cheaper than ponies! in any case a device like that would have made the next step much much simpler.
Unadulterated Gruntwork
now the real fun begins --
for the festivities we need a paint or image editor that at minimum supports both layers and transparency. i use photoshop.
i painted out the background of each image by creating a mask channel for the layer and painting black it where the image channel needed to be transparent. (we could simply use the eraser tool on the image channel itself, but painting in the mask channel gives us room for correcting mistakes and tweaking at any point in the process.)
rinse and repeat 36 times. do the same for the overheads.
once all of the backgrounds were painted out, i imported all the images into a single file. you may need to do some nudging here and there to make sure all the layers are aligned.
{update} i forgot to mention one big labor-saving step -- for users of adobe imageready. you can import multiple files simultaneously into one document as separate layers. you can't do that in photoshop (at least in cs). just select file menu > import > folder as frames ...
after importing, select file menu > edit in photoshop to take the file straight into photoshop. {/update}
i cropped the image to a square (in this case 400x400) large enough accommodate all the layers, then saved the file. i did the same for the overheads at 350x350.
for the festivities we need a paint or image editor that at minimum supports both layers and transparency. i use photoshop.
i painted out the background of each image by creating a mask channel for the layer and painting black it where the image channel needed to be transparent. (we could simply use the eraser tool on the image channel itself, but painting in the mask channel gives us room for correcting mistakes and tweaking at any point in the process.)
rinse and repeat 36 times. do the same for the overheads.
once all of the backgrounds were painted out, i imported all the images into a single file. you may need to do some nudging here and there to make sure all the layers are aligned.
{update} i forgot to mention one big labor-saving step -- for users of adobe imageready. you can import multiple files simultaneously into one document as separate layers. you can't do that in photoshop (at least in cs). just select file menu > import > folder as frames ...
after importing, select file menu > edit in photoshop to take the file straight into photoshop. {/update}
i cropped the image to a square (in this case 400x400) large enough accommodate all the layers, then saved the file. i did the same for the overheads at 350x350.
Arranging the Array
{update} i recently wrote 2 scripts that take care of most of this labor; see step 10 of my followup instructable for making icons using 3d programs. {/update}
the document width ("canvas size") was increased from 400 to 14400 pixels (36x), then the layers nudged rightward. to save wear and tear on my arrow keys and my index finger and my brain, i recorded a simple macro ("actions" in photoshop) to move selected layers 400 pixels to the right. all the layers to be moved were locked together. once a layer is placed, it is unlocked from the rest, allowing it to be left in place while the rest continue on their merry way.
once the layers were all in place, they were merged into a single layer and saved. the process was repeated in a second file for the overhead shots.
the document height of the perspective file was increased from 400 to 750 pixels to accomodate the overhead shots. to help position the overheads, i selected their transparent areas and made a mask channel which i pasted into the perspective document as a new channel. i then pasted the overheads into the perspective document. by turning on the mask channel for the overheads i was able to use its red overlay as a guide to nudge overheads into their proper place.
the perspective and overhead layers were then merged in order to color-correct all the images simultaneously.
the document width ("canvas size") was increased from 400 to 14400 pixels (36x), then the layers nudged rightward. to save wear and tear on my arrow keys and my index finger and my brain, i recorded a simple macro ("actions" in photoshop) to move selected layers 400 pixels to the right. all the layers to be moved were locked together. once a layer is placed, it is unlocked from the rest, allowing it to be left in place while the rest continue on their merry way.
once the layers were all in place, they were merged into a single layer and saved. the process was repeated in a second file for the overhead shots.
the document height of the perspective file was increased from 400 to 750 pixels to accomodate the overhead shots. to help position the overheads, i selected their transparent areas and made a mask channel which i pasted into the perspective document as a new channel. i then pasted the overheads into the perspective document. by turning on the mask channel for the overheads i was able to use its red overlay as a guide to nudge overheads into their proper place.
the perspective and overhead layers were then merged in order to color-correct all the images simultaneously.
Color-correcting & Adding Halo
by now things get easier and faster. as far as clean-up and color-correcting goes, the gamma distribution (levels) was tweaked to remove the brown cast, brighten the image and increase contrast. the color saturation was also boosted for more intense colors. at 80x80 pixels i wanted to see a car and not a dark smudge.
the file was reduced to its final dimensions (2880x150) and sharpened.
a new layer was added beneath the image, and i used the mask channel to fill and stroke a yellow halo. while not necessary for the icon to work, a halo help increase its visibility. a new mask channel was created to accomodate the halo.
a new layer was added on top of everything in which i put a red grid (80x80 on top, 70x70 below), as a guide to check that the vehicles and their haloes stayed within their respective bounds. any overlap will be visible on the edges of the icon.
when done, i hid the grid and saved the file.
the file was reduced to its final dimensions (2880x150) and sharpened.
a new layer was added beneath the image, and i used the mask channel to fill and stroke a yellow halo. while not necessary for the icon to work, a halo help increase its visibility. a new mask channel was created to accomodate the halo.
a new layer was added on top of everything in which i put a red grid (80x80 on top, 70x70 below), as a guide to check that the vehicles and their haloes stayed within their respective bounds. any overlap will be visible on the edges of the icon.
when done, i hid the grid and saved the file.
Converting to Png
of course no project with this many steps is without its unforseen obstacles. for the present there is only one conversion utility -- modder ezran's web-based png2srf at techmods.net -- available for getting the png into the specialized garmin format. unfortunately it has an issue with photoshop-generated pngs, which presents problems with transparency.
to get around this problem i exported the photoshop file as a png and imported it into another graphics program that doesn't have an issue with png2srf. for the pc you can use paint.net; mac users can use seashore. after importing you need to add a new empty layer above the artwork before exporting back out as the final png.
another niggling detail can leave unprofessional-looking edge artifacts on your icon. photoshop is best suited to deal with that problem, which should be your last chore before saving the file as a png for import into paint.net or seashore.
UPDATE: seashore does not resolve the edge artifacts issue. disregard any references to this program. paint.net is the only program i know that fixes the problem.
to get around this problem i exported the photoshop file as a png and imported it into another graphics program that doesn't have an issue with png2srf. for the pc you can use paint.net; mac users can use seashore. after importing you need to add a new empty layer above the artwork before exporting back out as the final png.
another niggling detail can leave unprofessional-looking edge artifacts on your icon. photoshop is best suited to deal with that problem, which should be your last chore before saving the file as a png for import into paint.net or seashore.
UPDATE: seashore does not resolve the edge artifacts issue. disregard any references to this program. paint.net is the only program i know that fixes the problem.
Ensuring Clean Edges
at the end of step 7, create a new layer underneath everything and fill it with black.
merge all layers.
load the mask channel as a selection.
create a new layer mask
although you can't really tell, what you've done is created a new edge, antialiased (blended) with black, which solves our edge problem.
merge all layers.
load the mask channel as a selection.
create a new layer mask
although you can't really tell, what you've done is created a new edge, antialiased (blended) with black, which solves our edge problem.
Converting to Srf
to convert the png into a nuvi icon (.srf), point your browser to techmods.net's nuvi utilities page and scroll down to png2srf.
click "choose file" and navigate the file browser to your newly minted png (which you should have completed in step 8).
click "convert it!" to upload your file. your new icon file (.srf) should be in your default download folder after a minute or two. it will be named "converted_0123456789.srf". rename it to something more useful.
click "choose file" and navigate the file browser to your newly minted png (which you should have completed in step 8).
click "convert it!" to upload your file. your new icon file (.srf) should be in your default download folder after a minute or two. it will be named "converted_0123456789.srf". rename it to something more useful.
Upload the Icon to the Nuvi
connect the nuvi into your computer.
once the nuvi mounts, copy your brand new custom icon to the folder:
garmin/vehicle/
dismount and disconnect the nuvi from your computer.
boot up the nuvi.
once booted, go to "settings" and then "map"
click the "vehicle change" button.
your brand new custom icon will now be available on the vehicle selection screen.
the finished 1950s batmobile icon is freely downloadable from the site of its original february post on my blog.
once the nuvi mounts, copy your brand new custom icon to the folder:
garmin/vehicle/
dismount and disconnect the nuvi from your computer.
boot up the nuvi.
once booted, go to "settings" and then "map"
click the "vehicle change" button.
your brand new custom icon will now be available on the vehicle selection screen.
the finished 1950s batmobile icon is freely downloadable from the site of its original february post on my blog.
Other Icons
{NOTICE} the custom vehicle icons that i make freely available on my website are not for resale. {/NOTICE}
oh, and did i mention that i also have corgi's 1940s-era batmobile ... ?
and, like its younger brother, the finished 1940s batmobile icon is freely downloadable from the site of its original february post on my blog.
other icons i've create include:
2005 "tumbler" batmobile
1967 "speed racer" mach 5
1966 tv batmobile
the beatles' yellow submarine
4 star trek shuttlecraft
star wars' darth vader tie fighter
tron lightcycles
oh, and did i mention that i also have corgi's 1940s-era batmobile ... ?
and, like its younger brother, the finished 1940s batmobile icon is freely downloadable from the site of its original february post on my blog.
other icons i've create include:
2005 "tumbler" batmobile
1967 "speed racer" mach 5
1966 tv batmobile
the beatles' yellow submarine
4 star trek shuttlecraft
star wars' darth vader tie fighter
tron lightcycles