Petshark Studios   Haikoo Cards
Previous pencil to digital Next


Traditional to Digital

This project's objective was to produce a set of digital images for my website. I wrote a "chatbot" which is an online program that carries on a conversation by collecting sentences and analyzing them, then sending back replies. The chatbot was to represent my mermaid "mascot", named haikoo. I wanted to have a picture of the mermaid which changed to suit her mood, so I needed clear, simple pictures of her in various emotional states, such as happy, sad, angry, amused, pensive etc.

The technique is to draw the character on paper, scan the image, then trace it in color using Adobe Illustrator. Illustrator is unlike PhotoShop in that it makes images out of large, curved, flat shapes instead of coloring millions of tiny squares (pixels). It is especially good at "cartoony" characters and shapes. In fact, most of the cartoon graphics you see on toys and dolls and cereal boxes etc. are done in Illustrator.

I drew 10 drawings of Haikoo showing different emotions. This is one of them, a sort of "neutral" emotion.

This is part of the scanned image in Illustrator. It sits on a layer above the Illustrator shapes.

Here is a closeup showing the outlines of some of the Illustrator shapes. They are composed of curves, marked by control points which are used to fine-tune the shape of each curve. In this picture, you can see the actual pixels in the scanned image. You make the shapes by setting a background color, and/or line color, then tracing over the image with the mouse. Illustrator creates a shape which roughly follows the mouses path. Then you adjust the shape itself.

This is what the shapes look like without the pencil sketch. Each one may have a fill color, a border line in a different color, and sometimes a gradient color which is a smooth blend from one color to another. Haikoos blushing cheeks are each, separate shapes with a gradient from skin-color to blush color.

Here is the Illustrator drawing alone. Now you see only the colored shapes, their border lines and gradients.

After the image is traced and adjusted, We export it to PhotoShop. Two things happen here. It gets translated into a "bit mapped" image, that is, a grid of colored pixels, not curved shapes anymore, and we want a transparent background so we can put her in a setting. In PhotoShop, transparent areas are shown as a grey and white checkerboard.

After I spent so much effort making my online images, I wanted to do something else with them so I decided to produce a set of cards featuring haikoo in various settings, with some funny quotes. To do this, I made a large PhotoShop document with 9 backgrounds, onto which I placed my mermaid images and the text of the quotes. Here is what the backgrounds looked like before the figures were added.

Here, the figures get placed one by one in each background. Most of them have drop-shadow effects to make them float over the background, and one (the lower left corner) has a red glow effect.

Last, we use PhotoShop text layers to add the text. This project came full circle from traditional pencil sketches, to digital images, and finally back out as a printed page.

Previous Next