Mascot design for webs is one of my specialties, in the last few years I’ve been designing dozens of corporative characters for webs. Clients are usually very satisfied with the design, but they don’t know how to make the most out of it.

Sometimes they have to use them at very small sizes, sometimes they are not well fitted in the context, very often they modify the design with disastrous results, usually they are too agressive with the compression of the image… and in many cases they don’t make a real usage of the designs.

Points you should have in consideration to make the most out of your mascot design.

• First of all, consider if you really need a mascot design. Is it adecuate for your public objective?
• Program your web in order to make the most out of your character design.
• Remember: the bigger you show the illustration (within reasonable limits) the nicer it will look.
• Leave margins around the illustration, let the design breathe.
• Make the mascot interact with the rest of the web, be creative.
• Apply your corporative colors to your mascot.
• Design a versatile mascot, this way you can use it for banners, avatars, T-shirts, or your "about" page.
• Choose a concept that matches your corporative values.
• Optimize the weight of the illustration, save it as JPG at 60%.
• If you have to make later modifications, ask the author of the design.
• Order your designs in high resolution (till 7000×7000px) or in vectorial format. This way you can print any size you need.
• Watch if your design fits the basic principles when it comes to design a mascot.

Characteristics of a good mascot design

• Memorable, it must cause impact.
• Easy to remember, it must remain etched in the memory of the observer.
• It must be unique, and easy to discriminate from the competitors
• Attractive, the character must be attractive for our target public.
• Iconic, the character must represent the corporative values of the brand.
• Functional, it must work in banners, in the headline of the web, in the logo.

Effective ways to integrate the designs of the characters in the web.

The use of the mascot integrated in the logotype is the most common way to integrate the character. This way we associate the character with the brand, it´s one of the most effective ways to use a mascot.

We can integrate the mascot very effectively by using it as an icon or integrating it in the buttons. We can use it in the "over" state of our buttons and animate it in Flash:

One of the most effective ways consists of using the illustration all the wide of the web. You sacrifice a lot of space but you get a great visual impact. John Cow’s web was a good example of this, too bad they are reducing more and more the size of the illustration instead of optimizing the remaining space.

We don’t really need to use the mascot in the headline of the web, we can use it to highlight certain elements of the design:

To finish, some banners with character designs:

It’s time to write a tutorial on vector illustration. In this post I’ll explain the process I followed at the time of designing by order (from SOSFactory) the mascot in vector format for Twisted Monkey Studios, producers of horror films.

www.twistedmonkeystudios.com

Ingredients :

1. Paper and pencil.
2. Scanner.
3. Photoshop.
4. Illustrator.
5. Silhouette (a plug-in for Illustrator).
6. Basic concepts of Photoshop and Illustrator.
7. A lot of patience.
8. Optional : Digitizer tablet.

Briefing

The first thing to do is to know our client. This is why we have a tool called Briefing, which is a series of key questions to assist you in understanding the company and its requirements. Nonetheless, it can be done in a more or less formal way.

In this case we’re going to design a character for a horror movies producer. The requirement was a monkey as the mascot, the catch being that it was not to be your typical nice monkey. So we came up with the idea of making its clothes include a straight jacket and for it to have a knife with blood… lots of blood! It had to look nice, yet intriguing at the same time.

Traditional Drawing and Photoshop Retouches

I always advice you to start any design the traditional way, with a paper and pencil, especially if it’s an illustration. As good as your Wacom tablet may be, it’ll never be as accurate as a conventional pencil.

Traditional Drawing. The image at the bottom left is my pencil sketch, I commence drawing with a red pencil, and when I’m satisfied with the results I remark the lines with a graphite pencil (bottom right). As you may notice, it is more of a sketch than a finished drawing. Unfortunately my line quality isn’t as good as some comics professionals, but fret not about that because this is why we have a computer! The important thing is to have the concepts well assimilated, and to apply them to the character we want to design.

Traditional drawing on the left, photoshop retouches on the right.

Photoshop Retouches. When I get something decent as a start point, I scan it to Photoshop and start to move things around, play with the facial expressions, the pose and various other elements of the design … until I get something I like (image below).

Take a look at how the character evolves during the process. If you don’t have a very clear perception of what you want to do it’s always better to start with just about anything and then retouch it until you get what you’re looking for. And don’t get disheartened if you can’t get it at the first attempt, it’s common for such a thing to happen.

Evolution of the personality of our character

Cleaning and Inking in Photoshop

Cleaning. I already have the base for the character, now with my digitizer tablet I start to clean the sketch in Photoshop, assigning different line weights as I go on (explanation below).

Cleaning with the digitizer tablet on the left, Inking with Photoshop on the right

Inking. The next step is to ink our character (above right image), the first thing is that it’s critical to use a very high resolution (5000×5000 pixels) for several reasons :

1. It’s more comfortable to work with.
2. If later on in the process we decide to reduce the design, smaller mistakes wont be visible.
3. If the work is the same, preferably let’s do it at a higher resolution so it is print ready.
4. While vectorizing, the design would acquire accurate lines.

We have 3 types of lines (take a look to the final inking below) :

1. Contour : the bigger lines.
2. Area delimitators : for instance, the inferior limit of the jacket, medium thickness lines.
3. Internal lines : the lines that mark the cheek, they are the most thin ones.
4. Transition lines : they start as the contour and then get in to the design. We start by making it thick and then thiner as it progresses, as noticed on the line in the chin.

What we shouldn’t do :

1. Make shadows with lines: it would merely make the design messy.
2. Create extremely thick lines without any variation in thickness.
3. Have internal lines too long: the purpose of these lines is to mark volume, you have to create them in a subtle way. It is meant to serve as a guide for when you color.
4. Draw straight lines : if you look closely, all the lines are slightly curved.
5. Have small areas: ensure that your volumes are as big as possible, otherwise when the time comes to color you wont have sufficient space and it will end up staying flat.

Final inking, it’s very important to modulate the lines correctly.

To get the final inking we have various options:

1. If you’re a drawing professional the best thing to do is to use your pencil lines, then simply clean them up in Photoshop. VIDEO TUTORIAL: Photoshop digital inking 1
2. If like me, your hand-drawn lines are not very good, we ink the sketch with Photoshop’s vector tools. VIDEO TUTORIAL:Photoshop digital inking 2, if you’re not well versed with the pen tool it would be advisable to take a loot at this tutorial on Photoshop basic digital drawing.

Vectorizing with Silhouette for Illustrator

The first thing you need is the plug-in itself, Silhouette for Illustrator, you can download Silhouette here. On successfully downloading, decompress it with Winzip and put the file "SilhouettePlugIn.aip" in the plugins folder of Illustrator. Once inside the program you only need to make the silhouette palette visible (Window > Show Shilouette tool settings).

Then save your design from within Photoshop to the TIFF format (without transparency) and open it in Illustrator.

Then download the VIDEO TUTORIAL where I explain how to vectorize with Silhouette. Here is a screenshot of the parameters I use :

Now that we have our design vectorized we can edit it until the lines are perfect. I normally add a contour from Illustrator to give a sensation of balance to the design.

*** Note: when you add a contour though Photoshop it ends up rounding the borders, this doesn’t respect the angular details while Illustrator does. Depending on the sensation you wish to give your design you can use one or the other.

*** Note 2: I’m sure by now you’d be wondering … why have I used Photoshop to ink the bitmaps only to vectorize it later? Wouldn’t it have been better to use Illustrator from the get go? Thruthfully, it’s a personal choice, and here are the reasons for mine :

1. I personally find inking in Photoshop more comfortable and quick, Illustrator exhausts me.
2. If you have a digitizer tablet when using bitmaps you can paint or erase the lines by hand, which saves you a lot of time in the long run.

Asigning plain colors, gradient and volumes

Plain colors. Now that we have our vector inking, if you take a look the options in Silhouette, they are chosen to give us a black silhouette, and a bunch of white pieces on top. Now we only have to fill each white area with the color we want, I usually use medium tones, not too dark or too light. Here’s the color palette I’ve used.

Plain colors

Adding gradients. We have to create gradients of at least two differentiable colors, one dark and one light, but not extremely contrasting because we’ll add lights and shades later on. For now don’t pay too much attention to the gradient direction, we’re just choosing the color tones, later on we’ll orientate them to give coherence to the illumination.

Gradient colors

Cutting the areas. As you have seen the gradient areas are too ample to get good illumination effects. So we have to cut these big areas in to smaller volumes (take a look to the image below).

Later we retouch the gradient colors to try to get a coherent illumination. There’s a basic thumb rule that’s very important : next to a dark color there’s always a light color.

I’ve prepared a small VIDEO TUTORIAL to show you how it’s done, download it here.

Gradient colors with the areas cut in to smaller volumes

Adding shadows and lights

Shadows. We’ll create a layer and set its blend mode to Multiply. This way we have all the shadow vectors grouped together. IMPORTANT : if you make the shadows in the Normal blend mode you’ll have to adjust the vectors a lot so you don’t cover the black lines, this is why we use the Multiply blend mode. This mode makes the layer transparent on top of the black color.

We simply pick a similar color (sometimes I use gradient colors as well) to the one in the background and we make small vectors to mark the areas in the shadows.

Animation so you appreciate the shadows.

Lights. In this case it’s not essential to use different layer modes, although you can always use the < strong >Screen blend mode to get lighter tones. Observe the animation below, first I make a soft illumination and later I add some strong light retouches in order to reinforce the contours.

Final Retouches

Now we only need to add blood in industrial quantities. For this I used the free Gomedia vectors (if you use them in your design do put a link back to their site, you have to be thankful right!). The blood is added in a layer above all the others, but below the right eye, in the Multiply blend mode.

www.twistedmonkeystudios.com

Observe that in the post I link to other tutorials or artices that cover the different phases of the process. Although I know that in such a complex tutorial I might have forgotten to explain quite a handful of concepts, if you do still somehow have any doubt just comment it, I’ll try to answer it as soon as I can and I’ll add it to the tutorial.

Hello guys, I was hired again by PSDTuts to write another tutorial, this time completelly FREE.

YOU CAN READ THE TUTORIAL HERE

In this article Im going to talk about my workflow used to design mascots for websites. This process in this article was described in real time as I created the designs. Let’s look at this more closely.

Hello buddies, looks like I was really busy during the last month, as you noticed I dont post too much latelly, but its because I was working in the biggest and more detailed tutorial I have ever write, PSDTuts hired me to write a tutorial about mascot design in Photoshop.

The tuto explain all the steps at time to design a mascot, from the skechts to the final rendering in Photoshop, this time explaining a new color technique, the use of history brush, the fusion mode layers … and much more.

This tutorial is for the PLUS PSDTuts section, but dont worry, for just 9US$ month (22US$ 3 months) you have access to the tutorial and files (including the final design, it worth 600US$).

Just a little support for this guys, keeping in mind the quality of the content and the price they paid to get a exclusive design for PSDTuts readers.

Outcome

This is the final design, you can download some free wallpapers doing click in every image

Hello Newbies!! You already noticed SOSNewbie is not updated latelly, the main reason is because my workload (Im sleeping 5h per day one week ago) but there is another one… I was working the most complex tutorial about mascot and logo design I never did, I spent lot of time doing this tutorial like guest writer for Smashingmagazine.

Here is a sneak peak:

I did a step by step tutorial to show how I usually draw my character designs

And another capture of how I color my mascot designs

Here is the outcome

You can see the whole tutorial here: Drunken Monkey Photoshop Tutorial in Smashingmagazine, by SOSNewbie

I hope you like it!!!
Sergio

To see the video just click on the image.

Here is the last step when designing mascots for websites. I did this color job just to do this video, so its a short version, I usually spend around 3h per mascot design when I work from sosfactory, but this would be too long, impossible to edit, maybe in the future

If you have any doubt, or suggestion, please just leave a comment and I will reply as soon as possible.

]]>