This article was published on October 2, 2014

Designer passport: One cat’s animated adventure in paris


Designer passport: One cat’s animated adventure in paris

In this monthly series, we take an opportunity to spotlight great designers from around the world. Each month, Designer Passport brings you a new piece of art by a graphic artist we love, along with a step-by-step guide on how you can create it (or something equally awesome) yourself.  This post was originally published on the Shutterstock blog and has been reprinted with permission.


Graphic designer Charlotte Smith studied both type and graphic design in Paris, where she also works and lives. Inspired by soft colors and cozy atmospheres, her main interests lie in hand lettering, papercraft and illustration. For her Designer Passport piece, Smith decided the best way to capture the vibrancy of her city was as an animated GIF. Read on for her thought process and full tutorial.

static.squarespace
(Click to see animation)

“I’ve always lived in Paris, and I love its atmosphere and the energy it gives off,” says Smith. “My favorite time of day is that moment when you go from light to dark in summer, and you get a whole range of beautiful lights and colors that emerge on the buildings. The lampposts in the street also light up all at once, and it becomes even more magical. Add to that the hustle and bustle that you can see from each lit-up window as you pass by, and you’ve got the perfect Parisian scene. I wanted to be able to translate that into an illustration, but an animated GIF was more to the point. I imagined the view I wish I had from my window when I look out. And this is it.”

Step 1

The first thing we need to do is to create a patchwork of pictures to obtain the perfect night scene. I’ve chosen these two: the roofs on the first one are detailed enough, and in order to add that extra Parisian flair, I had to add in the Eiffel Tower with a nice textured sky.

Paris1

We are now going to create a new file at 180 x 240mm, then remove the parts of the images that we do not want to reproduce in our scene. Use the lasso tool to delete the selected areas that we don’t need.

The sky isn’t long enough to fill the length, so in order to keep its texture quality, select an area that you want to stretch with the rectangular selection tool, then go to Edit > Content-Aware Scale and stretch it to the size you want.

paris2

Step 2

Now that we have our basic image, it’s always easier for the next steps to draw a quick sketch of it. This will serve as a guide when we’re drawing over our image. Create a new layer (cmd+shift+N) and start drawing. It’s pretty straightforward for this part; just draw over your picture by using the brush tool, and select the colors with the eyedropper.

Tip: To change your brush size without having to go to the menu each time, hold down ctrl+alt and move your mouse from left to right to choose your width. Also, when using the brush tool, you can directly access the eyedropper tool by pressing alt.

It’s easier to start with the details first, then create a new layer that will go underneath for the color fillings. Start with the building, then the Eiffel Tower and finish with the sky. The sketch that you’ve drawn will come in handy to see the progress of your image, and to show you if you’ve missed any spots. I wanted to keep a sketch look for this piece so I used a brush I downloaded here.

paris3
Once your scene is drawn, create a new layer and use the gradient tool — make sure it’s set to “From Color to Transparent” — and go from the bottom to the first quarter of the sky. In the layer style, select Color Overlay and choose a very dark blue. Set the blending mode to Multiply.

paris4
Once the illustration is complete, you can start animating. For this, you’ll need to download a free plug-in by going to ( Windows > Extensions > Adobe Exchange). Type AnimDessin2 in the search bar and download the one by Stephane Baril. You should then be able to find it in (Windows > Extensions > AnimDessin2). It will open a menu at the bottom.
paris5
Start by creating a new timeline. All the static elements that you’ve drawn will already be placed on the timeline (this is why naming layers is crucial). This plug-in is for making frame-by-frame animations; however, here we are going to use the buildings as a background and animate individual parts of the scene. The size of layers on the timeline corresponds to the length of time they will appear.

paris6

Step 4

First, we’re going to create the cat animations. In another file, I have broken down and illustrated a cat’s running movement, with each stage on a different layer. Place your timeline guide wherever you would like the cat to start running.

paris7
Here’s what these individual cat drawings look like overlaid on one another. If drawing isn’t your forte, here’s a collection of cat silhouettes that you can modify to get a similar result.

paris8
(Click to see animation)

Now create a new video group and name it “cat.” This will create a layer folder in your layer panel and also in the timeline panel. Place your first cat in the scene, then create a new frame and place the second. In order to help place the cat at the right spot to create realistic movement, you can use the “onion skin,” which will show you a ghost image of where the previous cat is placed. (I recommend you hide the night-scene effect that we created above while you use the onion skin.

paris9
Do the same for the remaining images of the cat, creating a different layer for each movement. Create the cat’s shadow by making a new video group (call it “cat shadow”) and, following the movements, make as many layers as there are for the cat itself. Play around with the opacity levels of your brush strokes.

paris10

Step 5

Place your timeline guide where the cat passes by the first window. Create a new video group and name it “window 1.” Using your brush tool, fill in the windowpanes of the first window with a very light yellow. Once this is done, set the blending mode to “hard light.”

paris11

In your animdessin2 panel, create a new frame in the “window 1” group and resize it so that it’s the same length as the first. Repeat the steps from the first layer by filling in the windowpanes with the light yellow, then setting the blending mode to “hard light.” Do this another two times. This will create 4 images that are not quite the same as each other, to give us that shaky effect for our light.

Duplicate these four layers until you reach the end of your timeline. Do the same for your second and third window, remembering to place your timeline guide where the cat passes by.

paris12

Step 6

Add an extra glow to each window by creating a new video group (call it “window glow”) for each one, and by lowering your brush stroke to approx 10 percent and painting around the window. As before, make four different layers and duplicate them to the end of your timeline. You can also create another video group for the lights that reflect on the cat each time it passes by a window.

paris13

Step 7

For the Eiffel Tower, the light glow is done in the same way as for the windows. For the shining lights, create a new video group (“Eiffel lights”) and make four different layers with lights placed in different places on each layer. Again, duplicate them until the end.

To add an extra glow, go into the Layer Style and select “Inner Glow” (opacity 20 percent/noise 40 percent). Also select “Color Overlay” and use a light yellow. Finally, select “Outer Glow” and use an orange with 75 percent opacity and 15 percent noise. You can create a style with this and also use it on the row of lights hanging from the roof.

paris12

Step 8

For the sky, create another video group and name it “stars1.” Draw stars and duplicate them to the end of the timeline. Now lower the opacity of the second layer to 70 percent, the third to 40 percent, and so on, until it’s at 0 percent, then go back up from 0 percent to 30 percent and do the reverse. Create another video group (“stars2”) and draw another set of stars, different from the first ones. This time, do the opposite for the opacity — start at 0 percent and go up to 100 percent, then go back down. This means that when one set of stars is at 0 percent, the other is at 100 percent.

paris13

Step 9

To have a quick look at your animation as you go on, either press the play button on the animdessin2 panel or simply use your spacebar to start and stop the view. To save your GIF, press cmd+alt+shift+S. Choose GIF (not jpg) and you can get a preview of your work before saving. Et voila! C’est complet!

To download the images used in this piece, click on the images below:

pariseiffeltower
Eiffel Tower by Ekaterina Pokrovsky

paris15
Paris Rooftops by Andrea Izzotti

Get the TNW newsletter

Get the most important tech news in your inbox each week.