Ilias Sounas’ Condomunity Member Illustration Tutorial

Today we’re starting a new series on condomunity.com about the “condomunity member“. It’s basically a character design tutorial like many others out there – just that I wanted it to be more like an illustration and possibly also an rss icon. I’ve picked 5 illustrators to hand in an artwork in their own typical style.

This condomunity member character tutorial is done by 29 years old greek illustrator and 2d animator, Ilias Sounas. The article covers some of his methods of creating characters and illustrations mainly in Adobe’s Illustrator and a short interview and overview of his work.

Notes

This tutorial was largely created with Illustrator CS3 and some small bits in Photoshop CS3. Some very handy Illustrator shortcuts can be found here.

Written by Ilias Sounas

Here’s a brief tutorial about how I created the RSS icon with my funny little condomunity member character. Though the final icon is a web file like .png, .jpg or .gif, I designed the character in Adobe Illustrator in vector, as it’s far easier to draw than Photoshop.

Sketching the Character in Photoshop

As with most of my designs, I started drawing a rough pencil sketch, which I redesigned roughly in Photoshop using my beloved Wacom pen. The only thing I had to take into account here was the fact that the final icon should fit exactly into a square, because its final dimensions would be a square like 120px by 120px or 80×80 and similar.
I saved my rough as a plain jpg and then I opened it in Illustrator. In order to have it as a guide layer, I locked the layer as a template by double clicking the layer and checking the “Template” option and setting “Dim Images to: 50%”. That way, my sketch was dimmed so it was easier to draw on top layers. In addition, the template layers can’t be printed in case you send the .ai (adobe illustrator) file for printing.

Organize Layers in Illustrator

In a new layer, I added a rectangle to limit my icon to a square and then I started drawing the basic outline of my character using the Pen Tool in a new layer named “Character”. There was no need to have a fill and I just applied a thin black stroke, so the rough was still visible below. This makes tracing easier, since the fills prevents me from seeing the rough sketch at the bottom. In general, I always organize my shapes in appropriately named layers, so everything is tidy and easily accessible without wasting time.

Shapes

Some shapes were designed separately (hands & wings for example) and I did save some time by duplicating the first (right) wing, then I used the Reflection Tool to mirror it and set it as a left wing. This tool can save a lot of time as I don’t have to redraw everything in my illustrations. But don’t overuse it as everything will look as a copy/paste style and that’s very boring.

The Cloud

As for the cloud, I drew some circles (in stroke always, no fill) overlapping each other using the Circle Tool (for perfect circles just hold “Shift” while dragging). Then I selected them all and merged them down to one shape by clicking the “Add to shape area” button (the very left in the first row) in Pathfinder palette (Menu> Window> Pathfinder). After that I pressed the Expand Button at the right of Pathfinder palette to remove all the paths for once and all. The final outline shaped the cloud path.

Coloring the Character

After drawing all the basic shapes, it was time to add the first colours. I had decided to have my character in a strokeless look, so I started filling the paths with flat colours removing any stroke. In this step, picking the exact colours is not important, as I tried to get a rough idea and have some good combinations. Since I wanted to create a happy illustration, I decided to use vibrant colours. In my opinion nothing beats a smiling blue condom!Tip: vibrant, vivid colours have usually no black at all and the saturation is high (like over 80%).

Applying Shades to Breathe Life into the Character

Flat colours didn’t do it for this character, so it was time to add shades. Using the Pen Tool once again I drew an open path with a stroke only for the shade shape over the main body taking care to exceed the body’s shape limits (otherwise it can’t be divided). With both paths selected (body and line) I used the “Divide” option from the familiar Pathfinder palette, so the body was divided into two new paths. Using the Pathfinder’s options, the final paths are always get grouped. In order to select the shade area I picked the Direct Selection Tool (the white arrow) and applied a darker colour. That way I didn’t have to break the group. Anyway, the very same shading technique was applied to the rest of the shapes too (hands, wings etc.).

Working with Masks

Masks are powerful features in Illustrator that allow to hide parts of shapes we don’t want to be visible in the illustration like the teeth in the character’s mouth. After duplicating the mouth shape and setting it as the top path in the layer’s stack order (Menu> Object> Arrange> Send to Front), I selected the copies of the “teeth” and the “mouth” and from the context menu (right click on the document) I chose “Make Clipping Mask”. This way the teeth and the tongue fit exactly into the mouth shape.

Applying the Gradient and Gloss

The condom character was almost done but I wanted a more interesting version. Gradients were applied in various parts to give more depth to the character and using the Pen Tool I designed some shapes representing glossy spots. These spots were curved shapes filled with lighter colours than the main shapes. For example, the condom’s shining spot was filled with a very light blue colour. The condom was finished and it was time to add the RSS icon logo, which I had to create from scratch.

Putting up an RSS Icon

But the Illustrator tools make this an easy task. I drew three circles aligned at the same centre with a heavy weight stroke. Using the Direct Selection Tool (the white arrow from the toolbar), I selected the bottom and left point of the first two circles and deleted them. The remaining lines shaped the basic logo (the first circle turned to a fill representing the dot).

Step 2

To finish the icon I designed a square using the Rounded Rectangle Tool and applied a subtle orange gradient. For the glossy part, I duplicated the main square (Ctrl+C, Ctrl+F to paste at the same position in front), drew an overlapping circle and having selected both shapes I chose the “Intersect” option in the Pathfinder palette. The remaining shape was filled with white, its transparency was lowered to a small amount (about 45% but you can experiment with this) and its blending mode was changed to “Overlay” (using the Transparency palette). This way the icon gets a shining new look.

Finishing the Character Up

Everything’s done. I selected everything (Ctrl+A) and turned them into a group (Ctrl+G), so it’s easier to move and handle it. I created some smaller duplicates and checked their appearance via View/Pixel Preview (Ctrl+Alt+Y). This option helped me to check if the icon is clear in pixel version at smaller sizes and make any corrections for best results.

Exporting the Character

Finally the character was exported via File/Save for Web & Devices as a transparent .png at different sizes. By exporting two different versions I created an animated gif version in Photoshop, too (1. RSS icon/2. “Feed me”).

The Illustration as a Whole

Apart from the icon I used the main condom character as the focus for an expanded composition. I did a rough in Photoshop, then I started creating the background in Illustrator as I did before with the main character.

The Background

There’s no need to explain everything again since the same procedure I mentioned thoroughly before applies to most of the elements. Nevertheless, the star burst behind the character needs some special attention.

Step 1

First I created a circle and a few-pointed star (use as many points you like), which I aligned perfectly through the Align palette. Selecting both I used the “Intersect shape area” option in Pathfinder palette. In the remaining shape I selected all the inner points and from the right-click menu I chose “Average” at both Axes. This way all the points were concentrated into a single point in the centre of the star creating the burst effect.

Step 2

I applied a warm gradient to the background and used the star in “Overlay mode” (Transparency palette) to blend better with the background’s colour. Having set the main background colour, it was easier now to draw the rest of my elements and pick up strong colour combinations, so the elements could pop up from the composition.

Finishing the Illustration Up

Since the main theme is condoms I created a happy environment full of love, and added flying condoms and strange creatures in vivid colours (as most of the condom boxes have vivid colour, too). To enhance the overall message I used some simple typography to promote the Condomunity.com website.

That’s it! Hope you like it :)

About Ilias Sounas

Condomunity: How did you start illustrating?

Ilias Sounas: I used to draw mainly fantasy art in school but I never thought of being an illustrator until a few years ago, when I stopped my History & Philosophy studies to teach myself everything about digital arts from scratch. At that time I had no computer experience at all.

Glamour, fashion look is definitely my main style, though I like to experiment with different approaches. I also like animation and I’m the creator of two multi-recognized animations in Flash: ”The Circle of Life” & “Space Alone”. In general my professional field ranges from illustrations/fresh characters to animation/motion graphics along with some basic web design.

Condomunity: 3 pieces of your work you’re proud of?

High Gaze
Multi-layered composition in Photoshop using Lucia Acosta’s face (model from Spain). All elements were designed in Illustrator while the final composition took place in Photoshop. The design was used as an illustration for Extreme Brands’ bag, a fashion store in Greece.

Happy Characters
Various characters created in Illustrator (colour correction & texturing in Photoshop). This illustration was used as a cover illustration for “Grafistas+web design” greek magazine.