Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing Book #4: Behind The Scenes

If you’re a graphic designer, you will often have to work with off-the-shelf material created by others — for instance, combining ready-to-use fonts with images from a photographer or stock website. Also, you’ll often have to follow the branding already developed by someone else. It’s OK; it’s a part of the job, and you shouldn’t be bothered by it.

But the part of a project that almost every graphic designer likes and is proud of the most is something that you can do from scratch, something that you have control over and can sign off on confidently: illustration. It’s why I love illustration projects so much. You can show your individuality in every detail and create every stroke of the artwork, trusting your vision and fully exercising your skills.

Further Reading on SmashingMag:

Given this love of mine, it’s no surprise that I took on illustration duties for the Smashing Book #43 without hesitation, despite it being quite a large and lengthy project (20 illustrations). I pulled myself together and started working, promising to myself that no matter how hard it turned out to be, I would find the time and internal resources to complete the project.

I’m very keen on the traditional way of drawing — by hand, using paper, pencil, watercolors and so on. Of course, I’m not against using computers when necessary — especially nowadays, when we have drawing tablets and pens and all of that other digital stuff that mimics hand-drawn work. But it seems to me that there is still no substitute for the charm of a well thought out and elaborate handmade drawing.

My process for transforming illustrations into vector files is a little complicated and sometimes long, but it’s the only way to capture my drawings down to the smallest details. Retracing every line of the illustration as a curve using the Pen tool (in Adobe Illustrator, in my case), I am able to really feel every line and make the drawing as close to perfect as possible.

I began each of the 20 illustrations with many ugly sketches, trying to grab hold of an idea. I’m not able to think first and draw after. The two processes are one for me: I draw while thinking. I’ll waste piles of paper and use any surface at hand to capture an idea that suddenly comes to me. Reviewing the sketches now, I’m intrigued by the evolution of the ideas and the birth of the characters.

Looking for ideas. (View large version5)
(View large version7)
The evolution of a character from start to finish. (View large version9)Then, I made detailed drawings in pencil, which became the prototypes of the vector images. The more developed the drawing, the easier it was to create a vector image. When the pencil drawings were ready, I scanned or photographed them, and then painted with the usual brushes in Photoshop. These were the prototypes that I submitted for approval.

To color the sketches, I’ll choose one of the basic brushes with a sharp edge and just paint over the scanned image on a new layer. “Multiply” mode is on for this layer to make the texture of the drawing visible. Then, I’ll create one more layer for shadows (with “Multiply” mode enabled again).

Adding color to the sketch. (View large version11)This is a fast and easy way to estimate the color spectrum of the final illustrations (I’ll sometimes do several color sketches). I sent the colored sketches to the Smashing team for approval of the direction and concept of the illustrations.

The colored sketches retain a kind of watercolor effect. I love that this quality can be achieved so easily.

The colored sketches. (View large version13)Once the sketches are approved, I start the most important part of the work. I paste each scanned pencil drawing into an Illustrator file and trace it. I’ll put the pencilled prototype on the bottom layer and lock it. Then, I’ll look at my illustration carefully and divide it in my mind into several areas, creating a separate layer for each area. Working with layers is very convenient if the image is complicated and has many small details.

(View large version15)You can lock or hide layers that you are not working on to focus on the areas that you are. From the screenshot below, it is obvious that every kite will have layers and that the background will have several layers. I also separated each animal into different layers; for example, one layer for the body, one for the head (usually including the eyes and nose) and one for the limbs (legs, wings and so on).

Creating separate layers. (View large version17)There is no trick to tracing an image by hand. Just take the Pen tool and trace the contours of the sketch. I usually choose a bright color to mark off the contours well. The process is boring, but once you’re skilled at it, it doesn’t take much time. It can almost be meditative, sitting and calmly tracing element after element as your thoughts drift away.

The outlining process. (View large version19)I’ll usually use the Live Paint Bucket tool to divide a shape into several color areas. I draw lines that will be the borders between colors, and then select the group of shapes and enable the Live Paint Bucket tool . By clicking on each shape with the tool, I can assign a unique color to it. By the way, if you use colors from the swatches, you can find the appropriate tool by clicking the left and right arrows.

Using the Live Paint Bucket tool. (View large version21)If an element of the illustration doesn’t have a defined shape and needs a bit of improvisation, then I’ll use the Blob brush . Working with this brush on a drawing tablet is a real pleasure.

You can configure the settings of the Blob brush by double-clicking in the Tools panel. I’ll usually set it to the biggest brush to make the pressure of the pen as sensitive as possible. With several assured brush strokes, I’ll draw the background and the bushes, using random colors according to my feeling and then choosing more appropriate colors later. I’ll also draw the branches of the bushes with the Blob brush. If I need to correct the shape, I’ll usually use the Erase tool.

Using the Blob Brush tool. (View large version23)Here’s a tip if you ever have to transform a regular line into a ribbon flapping in the wind. I’ll use the Width tool to make the stroke weight variable. Using this tool, select the dot on the line where the stroke weight is to be changed, and drag the auxiliary lines until the ribbon looks the way you want.

Creating a ribbon from a line with the Width tool. (View large version25)Now, the image is ready for coloring. Yes, it looks weird without colors. But you need just a few minutes to fill in the shapes and get the image close to being complete. To complete the kite image, I added some small flowers on the bushes with petals flying up into the wind (using the Blob brush). I also added shadows using Multiply mode.

The outlined and finished illustrations. (View large version27)The technical work was not the hardest part for me. I’ll often spend much more time on sketching and developing the ideas. Now that the Smashing Book #4 is complete, I can say that the most difficult part was devising a “plot” for each chapter title. When I got the plan for the book and read the titles, I was at a loss.

Some of the titles are quite conceptual, suggesting obvious metaphors. But others are concrete and related to code, and those were hard to illustrate (especially with cute animals). When my imagination gave up, the guys from the Smashing team were ready to pitch in some inspiring ideas. So, this creative project was genuinely collaborate, and I think we were on the same wavelength.


Smashing Book #43029, a new book for front-end designers and developers.

I believe both parties have taken only positive emotions from the project. Holding this hefty book now in my hands, I would have done some things differently — I’m never completely satisfied with my own work. Overall, though, I’m happy with the result.

So, enjoy the Smashing Book #43029. It contains so much useful stuff. (Believe me, I know.)

(al, il, ea)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30

↑ Back to top Tweet itShare on Facebook

Anna graduated from St. Petersburg State University with a Master degree in graphic design. During her studies she mainly focused on book and poster design. As graphic designer, Anna has worked on many different kinds of projects: from advertising campaigns for a pet retail chain to visual brand communication solutions for luxury boutiques. She also worked at a branding agency as an identity designer and illustrator. While illustration remains her first and only love, Anna is highly interested in interface and mobile applications design and currently works in the Russian branch of a big international IT company based in NY.

  1. 1

    Victor Camargo

    February 7, 2014 2:00 pm

    Really awesome. Just love it.

  2. 3

    A magnificent tutorial. Thanks for sharing!

  3. 5

    Wonderful work! If you love to stick to the traditional method of hand-drawing, perhaps you would like Wacom’s Inkling solution? It imports your pen strokes from paper directly into Illustrator, then you can edit/add to each stroke via the vector handles… Looking forward to seeing more of your work!

    • 6

      Anna Shuvalova

      February 11, 2014 9:43 pm

      Thank you, Nicole! Yes, I know about Wacom’s Inkling and I’ve tried it.
      You can easily get nice sketches using that, but as for me the pen could be more ergonomic and the Inkling’s ballpen isn’t good for all the types of drawings. But who knows, maybe my complaints are just because of the lack of practice…

  4. 7

    Amazing , I like it!

  5. 9

    I really enjoyed this article, thanks!

  6. 11

    William Bradley

    February 8, 2014 3:29 am

    I enjoyed reading this. I do ad design for a newspaper. Most of my work is with Photoshop and InDesign. I can barely function in Illustrator. This article shows me I need to take the time to learn.

    • 12

      Anna Shuvalova

      February 11, 2014 9:47 pm

      Thank you for reading! I also work with Photoshop and InDesign a lot but Illustrator is my love. I think it depends on what tools are better in your particular case. But I’m absolutely sure that Illustrator is very convenient and offers the best options when you work with vector objects. So I wish you good luck in your learning!

  7. 13

    Amazing article! Thanks! ;)

  8. 15

    Smashing, I love articles like this explaining narrow uses of specific tools in the Adobe suite. Anna, thank you for saving me about 10 hours this year with your Live Paint Bucket, Width and Blob Brush tips.

    • 16

      Anna Shuvalova

      February 11, 2014 9:49 pm

      Welcome, Dylan! Yes, I know this feeling of discovering a new useful tool. And regrets about the hours you’ve lost not using it before…

  9. 17

    Love it. I’m always so curious how others approach digital illustration.

    These look extremely time consuming, though, and I’m always curious how people invoice this kind of work. How many hours do you think one of these illustrations takes from start to finish, and can you bill per hour appropriately?

    • 18

      Anna Shuvalova

      February 11, 2014 9:51 pm

      Oh, you rose one of the hardest issue for a designer. It’s hard to estimate one illustration: it depends on how detailed it was and how difficult it was to find the idea. In rough I planned to spend about 8-9 hours per illustration from start to finish. But it was impossible to count hours because I was given several months for the task and didn’t work regularly. It’s better to tell the price for the whole project in such cases instead of counting hours.

      • 19

        I was asking myself the same question. Especially because I tend to lose myself in the work and tend to spend more time on a project I like, such as illustrations.

        I always ask myself how much I should ask for some projects, and I find it to be the most difficult issue in the freelancing area :)

        Anyway, I truly love the illustrations, and presenting the progress of this awesome piece, it boosts my motivation!

  10. 20

    theres a typo in your “about me” at the bottom. It says your a man.
    Nice article

  11. 23

    Thanks for sharing your design process Anna! You do great work, and it is always super helpful to see a behind-the-scenes look of how something is created.

  12. 25

    It looks like I found my motivation boost :)

  13. 26

    Superb… Thanks for sharing :)

  14. 27

    Really awesome. Amazing and nice concept Just love it.

  15. 28

    Nice job Anna

  16. 29

    Great work. I myself tend to get very impatient while tracing, and I have yet to come even close to “being efficient” but I simply love the usage of colors and illustration that you’ve done. I would buy this book simply for the illustrations, but of course it’s an amazing read as well!!

    Great job! Truly an inspiration.


  17. 31

    Really awesome – thanks a lot for spreading your great work and the process behind the scenes!

  18. 32

    Waaw, Its amazing!
    Thanks :)

  19. 33

    I am glad I’m across, this is very useful for me. Actually I’m looking for this kind of guides which can help me to re-design my website. I really love the content features of the book. Thank you for sharing. Great work!

  20. 34

    Shivakummar Kosana

    February 19, 2014 10:18 am

    Amazing work, A very nice illustration you made and choosing the right colors subject to the concept that gives a life to illustrations. Looking forward to seeing more of your post.

  21. 35

    Thanks for this article! I’m totally inspired!

  22. 36

    Hi Anna, such a wounderful examples with demonstation is really great. The examples/samples you pick is very similar to what a visual designer used to do in his/her day today activity. This will give boost for sure. Keep it up good work.


  23. 37

    This article is really great. I am now learning drawing in my spare time and I am not working on web-design for a long time. Thank you for sharing with us such good ideas and experience. Absolutely,I will continue to focus on your new work.

  24. 38

    Such an awesome article and great work! Thank you for inspiration!

  25. 39

    I’m a graphic designer who’s trying to beef up my illustration skills. What type of tablet/stylus do you prefer to use?

  26. 40

    I’ve just recently discovered the website and through exploring discovered this article. You art work is fantastic, but I am most impressed with your colouring. Do you have any tips or recommend any tutorials that inspired your colour selection?

  27. 41

    Carol Cooper

    June 4, 2014 4:32 pm

    Great article and lovely work Anna!

    Your last comment about never being completely satisfied with your own work rang true with me, as I’m sure it did with many artists. I read that Leonardo Da Vinci said: “Art is never finished, only abandoned”… so you are in good company!


↑ Back to top