How To Add Your Own Car To Your TomTom

After years without any navigation and my hopeless sense of direction, I decided to finally get a GPS for the car. And since I love playing with new gadgets (who doesn’t???), I decided to use my girlfriend’s car as an icon. This is a quick guide how to get your car on your TomTom using a photo and some basic Photoshop.
There are many custom cursors around, but many of them didn’t look quite right on my device so I put together this example.

Taking the photo

I used a 21mm lens on my Pentax K200D. It works with pretty much anything though because the final result will be a tiny icon. Just make sure to take the photo from the centre and pick an angle where you can see the rear wheels. I slightly overexposed my shot to get the wheels in properly, and not end up with a huge black spot under the car.

This is what I worked with:
Raw Photo

Photoshop

Open the photo in Photoshop and straighten it (if necessary). A good way of straightening would be to use the ruler tool to get the angle of rotation. Another way would be the crop tool. Whichever method you prefer, it’s good to start with a fairly straight image.

Hint: Do all your editing on the original size photo. It’ll make the end-result a lot crisper and nicer looking.

Once your car is straight, add a mask. I use the pen tool to add a path which I later turn into a selection. Drawing the mask manually generally gives you a better result even if it might take a little bit longer.

Copy and paste the car onto its own layer (without the background).

Crop & Resize

The final image will have to be square, so take the crop tool to crop the image to a square format, leaving some room on either side of the car.

Now you’re ready to resize the image to its final size of 80×80 pixels:
Screen shot 2010-03-23 at (23 Mar) 12.38.55 PM

Hint: If you convert the car layer to a Smart Object, you’ll be able to edit the full size car photo later.

Background and Transparency

The TomTom device doesn’t understand alpha channels so it uses 100% red (#FF0000 or 255,0,0) for transparency. Create a blank layer under the car layer and fill it with red. Now the problem is, that it’s still anti-aliased. Depending on your cars colour, that might be visible on your TomTom. To work around that, you need to make sure that there is only pure red around the car:

Select the Magic Wand tool and set the following options:
Tolerance: 0
Anti-Alias: off
Contiguous: on
Sample all layers: on

Now click on the red area to select the red. Invert the mask (Command+Shift+I on a Mac) and with the red layer selected, press delete. You got rid of all the anti-aliased shades of red around the car. This leads to another small issue: you’re left with transparency which needs to be filled. I got the best results when filling the area with a neutral grey (128,128,128). To do so, create a layer at the bottom and fill it with grey. This will fill all the gaps and make the edge of your car look smooth on the TomTom!

Final Touches

Since you resized your car a lot, it probably got slightly blurred. Use the sharpen filter on the car layer to make it look crisp and realistic (you might have to fade it a little bit so that it’s not as strong).

Now that your image is done, all you have to do is save as BMP (24 bit) and connect your TomTom to the computer in order to copy the file to the /art/cars folder and it’ll become available in your preferences!

Here’s my final cursor:
put your own car in your navi!

And a freebie for you to download: A kids Ferrari
kids-ferrari
Download .bmp

Advertisements

Published by

attilaacs

I've always been interested in all kinds of art because I felt the need to express myself in many different ways. I paint, draw, create 3D models, motion graphics & designs of all sorts, play guitar, love photography and whatever else is in between... I was born in Hungary and lived in Hungary, Germany, Australia and the UK for a number of years. I speak German, English and a little Hungarian (I'm working on improving that one again!).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s