Introduction: Animated Gps Batmobile Icon

Picture of 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.

Step 1: Choosing Our Vehicle

Picture of 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.

Step 2: The Icon Resource File

Picture of 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.

Step 3: Making Our Turntable

Picture of 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.

Step 4: Taking the Photos

Picture of 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.

Step 5: Unadulterated Gruntwork

Picture of 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.

Step 6: Arranging the Array

Picture of 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.

Step 7: Color-correcting & Adding Halo

Picture of 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.

Step 8: Converting to Png

Picture of 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.

Step 9: Ensuring Clean Edges

Picture of 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.

Step 10: Converting to Srf

Picture of 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.

Step 11: Upload the Icon to the Nuvi

Picture of 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.

Step 12: Other Icons

Picture of 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

Comments

Foaly7 (author)2009-03-17

Dude, you could make any icon with this using other toy objects (dragons, horses, videogame characters, animals other than horses, etc.)

Naxess (author)2008-12-19

Thanks! Finally got rid of that massive blue arrow that blocked out street names :D

kamikaze001 (author)Naxess2008-12-19

True :D

freerunnin1 (author)2008-11-20

gr8 instructable, by the way... does ani 1 know how to play music or videos on a garmin nuvi 2oow? plz message me if u have the answer.

FireBAT (author)2008-07-16

Excellent Instructable! My stupid tablet computer with Streets&Trips; 2007 finally stopped working, so I bought a Garmin Nuvi 200. yesterday. The first thing I installed on it was the Batmobile! Thanks for allowing others to have it, and keep up the great work!

coldheart (author)2008-05-11

i want to make the hellraiser box for mine ;0

camerasforeyes (author)2008-05-06

Nice to take the time.. If you work for an ad agency though then hats off to your lateral thinking!

aarrgghh (author)2008-05-03

i see my generosity is not to go unpunished:

Garmin Nuvi Batmobile Icon

i've just sent in an infringement notice to ebay.

WingDings (author)aarrgghh2008-05-05

Wow. Some people really suck, eh?

What would be awesome is if you could do a 3-D of a Light Cycle from Tron. That would be pretty Kick-A. (If you don't know what a light cycle is, search it on wikipedia)

matt_sawyers (author)2008-05-01

my first thought was "superman!" :p

fwjs28 (author)2008-05-01

what if u did this with pics of urself...it would be cool to make it looked like ur walking while u move....hmmmmmm...makesd me wonder.......

leebryuk (author)2008-05-01

That was pretty cool. I always wondered how someone might go about doing that. Well explained and illustrated. I could see a small market opening up for selling customized vehicle characters to owners.

aarrgghh (author)2008-04-30

for those who want to make their own, as far as vehicle choices go, from my experience, the best choices seem to be vehicles that are somewhat boxy. vehicles that are long and low or that are tall and narrow will look tiny relative to a more cube-shaped vehicle that can more efficiently fill the small 80x80 space alloted to it.

chunkyblamm (author)2008-04-30

this is awesome! im doing this for my nuvi 660, theres just one small question of what ill make mine. possibilities seem endless. hmmmm

aarrgghh (author)chunkyblamm2008-04-30

i'd say you've already got a great icon going on there!

LinuxH4x0r (author)2008-04-30

Cool! I wish i had a gps....... Great job!

caitlinsdad (author)2008-04-30

That is great! You should have made the batcopter, batmobile or not, it looks like you are blocking the grid and traffic ain't going nowhere. You'll have to get the commissioner to fix your ticket.:)

Labot2001 (author)2008-04-30

Awesome job!

Now all I need is a DeLorean...

Ward_Nox (author)2008-04-30

My dad has a garmin i wonder what icon i should make for him

About This Instructable

23,485views

55favorites

License:

More by aarrgghh:animated gps batmobile icon 2.0: the 3d wayanimated gps batmobile icon
Add instructable to: