Tutorial – How I make the DIY Kindle leather case

This post has moved to http://highonglue.com/tutorial-how-i-make-the-diy-kindle-leather-case/


Leather Choice

For the main part of the Kindle case (the front and back) you can use 3.6mm thick leather. Anything that’s thicker than 2.5mm will work fine but an extra mm makes the whole case much more rigid and heavy.

Use a standard A4 sheet of paper as a template – I found that the size works great for the Kindle 3.

The main leather cut


Continue reading Tutorial – How I make the DIY Kindle leather case


CSS transitions with delay & 3D transforms for WebKit

CSS3 experiment for WebKit

Have you seen those “meta info” sections that are often under blog posts? All sorts of info about the author, a permalink and something about the post categories… I thought it would be cool to put that into a small “info” button instead of always displaying the whole lot.

This is a pure CSS/HTML version of what can easily be turned into a cross browser info button using JS, images and some CSS.

Check out the cool transition effect when you hover over the info button on the lower right corner!

The main work for the animation is done by the following CSS:

details {
-webkit-perspective: 100; /*for 3D transform*/

/*info header*/

details summary {
-webkit-transition-property: width margin-left;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0.3s;

/*info header hover*/

details:hover summary {
-webkit-transition-delay: 0s;

/*info body */

details address {
-webkit-transition-property: -webkit-transform opacity;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition-duration: 0.3s;
-webkit-transition-delay: 0s;
-webkit-transform: rotateX(85deg);
-webkit-transform-origin: 100% 100%;

details:hover address {
-webkit-transform: rotateX(0deg);
-webkit-transition-delay: 0.2s;

Have a look at the source to find out more about how it’s done and feel free to tweak it or use it.

A note for mobile browsers (iPhone/iPad/iPod Touch): The hover event is not supported by the touch interface. To use this for the mobile Safari browsers, you’ll have to start the CSS transitions using JavaScript.

BTW: this is only for WebKit and tested in Safari 4 on Mac. It’s work in progress and not meant to be the 100% optimized and tested solution.

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


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
Download .bmp


When I was playing with today’s photo I decided against the normal HDR route with Photomatix and tried to just mask the relevant parts out. The 3 images I used were these:

parts of the DRI "enjoy"

By adding the 2 extra exposures to the main image with a few simple masks, I was able to make the inside of the can visible which would’ve been hard to achieve with normal lights and cameras.

The final result is my photo for today:
Enjoy 111/365

Tomorrow is our flight to Melbourne, so I gotta make this short and start to pack now. If someone needs a more detailed description of how to combine photos like these, you can contact me through my website and I’ll see what I can do to help out.

Remove or Deactivate Western Digital My Passport Virtual CD “SmartWare”

Western Digital MyPassport

After my iOmega backup drive failed recently, I had to go out and get a new one. Since I’m trying to save some money I decided to go for a simple (USB only) Western Digital drive.

After plugging it in, it greeted me with a “virtual CD” drive with some additional software. Since I’m not going to use it, I was searching for a way to disable that. I found this page on their site. The VCD Manager lets you deactivate the extra drive (or reactivate it if you really need it). And while you’re on that site, you might want to check out their firmware update too.

Hope this helps

Flash CS4 crashes on OSX – could be a font related problem

Font Book on OSX

I spent some time this morning guessing why my .fla file (created in CS3) constantly crashes my version of CS4 in Snow Leopard. After the 10th crash (and repairing permissions and deleting preferences), I had a closer look at the crash report. It said something about com.apple.main-thread and some vaguely font related things…

Now I’m not an expert in crash reports but I had a look in my font list (using Font Book – which can be found in the Applications folder) and there were a few issues (duplicate entries and one or two corrupt font files). After fixing those issues by removing duplicates and deactivating corrupt files, I could start Flash, edit the file and publish it as usual.

Hopefully someone with similar problems will find this helpful.