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