SOSFactory Blog

Choose your language / Elige tu idioma:

In this article we are going to see some general questions about mascot design for websites: composition, lines weight, file formats, styles and color schemes… You will notice that during the text there will be several links to other pages where every topic is explained in more detail.

If you have any doubts about this article, just ask and we will add it

Where are we going to use our mascot design?

This is the key question to start designing our character; it’s different to design one to include it in a website as a logo than to do it for a big scale printing.

Usually clients give us an area in the site where we have to make the character fit, so we have to leave some space for the rest of the modeling.

I suggest you to never start your character design without knowing where is it going to be put. If it’s possible, make a screenshot of the website and print it; use it to create the first sketches. Otherwise you may encounter some surprises.

Format, size and resolution

When we do mascot design for websites if I can choose I prefer to use bitmaps to vectors; it’s quicker and more comfortable if you have a Wacom. Generally I use bitmaps of less than 7000 x 7000px, depending on the computer you have you will be able to allow you to work with higher or lower sizes.

Bitmaps: the size matters. Sometimes, even though we design for websites, the use for printing isn’t discarded, for example merchandising. That’s why when you will deliver a design of 200 x 200px it’s better to do it in the biggest size possible, and then scale it to the final size for two reasons:

1. It’s more comfortable because you don’t have to pay much attention to little details. When you reduce the size, imperfections are deleted.
2. You can charge extra money for the high resolution file, or offer it as an extra service as we do here in Sosfactory.

This is the general rule for choosing the format:

1. Bitmaps: for presentation in monitor (web or multimedia) or printing up to 60 x 60cm at the maximum quality (300dpi) or 120 x 120cm at medium quality (150dpi).
2. Vectors: for maximum quality printing at more than 60 x 60cm.

For the resolution, use 72dpi for web or multimedia and 300dpi for maximum quality printing. If you use 150dpi, the print will have medium quality.

Concept

This is the more complex creative phase; we have to get the most information we possibly can about the company that hired us. To achieve this, the best thing we can do is to create a briefing or at least ask some questions like:

1. What does the company do?
2. Who are their competitors?
3. What do they want to communicate?
4. The audience to which is destined?

There are no magic tips… you just have to study the company and wait for the magic to arise, after that it will be question of technique at the time of shaping the concept. Here you will find some techniques in order to encourage creativity.

Design proportions, character’s pose and silhouette

Proportions are very important when designing for a website. Imagine that in the header of that website we just have 100px height… If we design a very thin mascot, at that size it will hardly be visible and we’ll loose all the face details. And the face is the main part.

That’s why in Sosfactory we almost always use the cartoon style when we design for a website. A character with normal proportions will work for a Marvel cover, but it will hardly work at 100px height, at least in a normal pose… The pose is also very important, it has to adapt to the space they give us. Take a look at these two images we designed for Lootbunny

The first one is much more dynamic and interesting, but we used more space to the wide… to adjust to the space we had we changed the pose slightly, but it lost all the charm. In this case, the best thing to do is to cut the image; doing this we get to take advantage of the maximum possible space, and also the character looks bigger…

As you can see, it looks much more attractive.

Lines: weight, color and style

The lines weight is the thickness of the lines we use while drawing. We can use many different line weights in one design; the general rule is: use the thicker lines for the general areas; while you enter into details, start diminishing the weight.

Let’s see a couple of examples:

Example A: We have a thin line, without any weight differences. Also take a look at the colored line. the result is much more smooth, because it makes the color interior more important. I suggest doing this when you have to use the character at small scales.

Example B: The line is thicker, there are weight differences and also the line remains black. The result is more impressive. The problem when using this style at small scales is that the line “drowns” the volume; at more line weight, less color interior, this way you will hardly obtain a good volume.

There’s little too say about the line style, there are as many styles as drawers out there… it can be rounded, sharp, thin, thick, variable, monotone… whatever you choose, try it to be coherent in the whole design.

One thing you should never do is using pencil shading which is so typical in comics, mainly in the oldest ones (at the present time, the shading job is left more and more into the hands of the painter), doing this you will only get to ruin your image when you scale it.

If you want to learn more about this, visit the post about different line weights with Photoshop.

Color: schemes and style

Before deciding the color scheme, ask them to show you the backdrop where they are going to use it, also ask if they prefer any color scheme in particular… generally they will tell you to use their corporative colors.

If you are a novice, this color scheme selector can help you; even though you can always use some images you like and take samples to create your own, customized color library.

The same applies to styles; there are as many of them as artists or public to whom is destined. Think about the sensation that you want to transmit.

Example A: hard brushes, contrast between shades and lights, saturated colors give more sensation of aggressiveness… this would be great for a teenager public.

Example B: soft brushes, little contrast between shadows and lights, pastel colors; this gives a warmer sensation… this would be used for a childish public.

If you are an advanced Photoshop user you might already know how to change the color schemes of a finished design, if you don’t, it’s always useful to make a color sketch before the final design, that way if there are any corrections to do (there are always corrections to do), you will save a lot of time.

Final image optimization

There’s a quite simple rule: if they are smooth colors, it’s better to save for web in GIF format, if there are degraded colors the best thing to do would be use JPG format (60% of quality should be enough).

For further details, I recommend you to take a look at the post about website images optimization.