In this article we are going to see some general questions about mascots 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?
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 designing s character 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 design mascots 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:
It’s more comfortable because you don’t have to pay much attention to little details. When you reduce the size, imperfections are deleted.
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:
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).
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.
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:
What does the company do?
Who are their competitors?
What do they want to communicate?
The audience to which is destined?
There are no formulas… 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…
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.
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).
Last edited by the_pm; 05-16-2007 at 09:55 AM.
Reason: sorry, I forgot to read the guiline for posting tutorials
Your mascot designs are truly amazing. Very impressive work!
I recommend you show it to more viewers - just by opening a thread in the general Web Design and Content section, so that more people have the chance to see what you are in.
I kinda have a question and I hope you answer it.
in your designs I see darker and lighters areas giving the kind of a 3D effect.
usually dodge and burn tools are used for this.
but of course the layer or at least the overlay layer will not be any more vector or scalable.
Is there a way to add such effect and stay scalable?
finally, I am good at drawing such moscots by hand "black and white drafts"
then I trace them well using illustrator to get vector shapes.
but I mess things up to go further with coloring and adding effects, do you have any suggesstions,
hi,thanks for your good information about mascot.
i am researching about graphics in virtual reality,virtual world.
knowing about mascot in web az a virtual world can help me,if I want to know more about these attractive graphical element on web what should I do?
can you tell me thw name of some books or article about these?
thanks you alot if you could help me