Results 1 to 25 of 53
Thread: Designing mascots for websites
-
05-15-2007, 04:11 PM #1WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
Designing mascots for websites
http://www.sosnewbie.com/imagenes/ma...scotas_web.jpg
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.
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:
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.
http://www.sosnewbie.com/imagenes/ma...oporcion01.jpg
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
http://www.sosnewbie.com/imagenes/ma...oporcion02.jpg
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…
http://www.sosnewbie.com/imagenes/ma...oporcion03.jpg
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:
http://www.sosnewbie.com/imagenes/ma..._de_lineas.jpg
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).
Cheers.
SergioLast edited by the_pm; 05-16-2007 at 09:55 AM. Reason: sorry, I forgot to read the guiline for posting tutorials
-
05-16-2007, 08:25 AM #2Junior Guru
- Join Date
- Mar 2007
- Posts
- 178
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.
Cheers,
Amalia
-
05-16-2007, 09:51 AM #3WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
Hi Amalia, thanks a lot for the suggestion.
-
05-17-2007, 04:07 PM #4New Member
- Join Date
- May 2007
- Posts
- 4
Thanks for that tutorial, it was real usefull. Well not yet, but it makes me think that I should design own mascot and when I do that I surely read this tutorial couple of times, before designing.
-
05-17-2007, 05:34 PM #5WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
Im happy you think its useful
-
05-18-2007, 04:51 PM #6Newbie
- Join Date
- May 2007
- Posts
- 13
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,
thanks
-
05-18-2007, 04:56 PM #7Web Hosting Master
- Join Date
- Nov 2003
- Location
- Newport Beach, CA
- Posts
- 2,923
I can't even begin to tell you how much I wish I had the talent you have doing these. I've said that before in another thread, I know, but you simply do fantastic artwork
Show your reciprocal links on your website. eReferrer
-
05-25-2007, 07:03 AM #8WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
Hello Maco, for the scalable issue there is 2 options:
- Doing vectors, instead using dodge and burn tool I suggest using layer modes (screen for highlights and multiply for shadows), it gives you more control over the shading
- Working at high res, I usually do bitmaps at 7000x7000 px, so you can print reasonably big.
Take a look to this videotutorial regarding photoshop shading
Regarding the inking there is 2 choices again:
- Digital inking, here is a tutorial I think could be helpfull for digital inking
- Digital cleaning here is a tutorial I think could be helpfull for digital cleaning. Notice the penciller did a excelent work, if you are not so clean maybe is better the previous choice.
Thanks a lot for your kind words Fastnoc, much appreciated
-
05-28-2007, 06:26 AM #9Newbie
- Join Date
- May 2007
- Location
- Pearl of the Orient Sea
- Posts
- 18
Is it possible to you to design a mascott in vector? I'm mean fully vectored mascott? Thanks
-
05-28-2007, 06:28 AM #10WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
Yes of course, I have lot of vector work in my portfolio, its just I get almost the same quality as bitmaps (but more time consuming), some examples:
http://www.sosfactory.com/images/imagenes/fu01.jpg
http://www.sosfactory.com/images/imagenes/mayhem2.jpg
http://www.sosfactory.com/images/imagenes/buzz.jpg
-
05-28-2007, 06:57 AM #11Newbie
- Join Date
- May 2007
- Location
- Pearl of the Orient Sea
- Posts
- 18
-
06-08-2007, 07:14 PM #12Junior Guru Wannabe
- Join Date
- Feb 2005
- Location
- Auckland, New Zealand
- Posts
- 98
Hey you're the guy at dA! I really like your work. Thanks for the tutorial.
-
06-08-2007, 07:47 PM #13Web Hosting Master
- Join Date
- Apr 2007
- Location
- United Kingdom
- Posts
- 1,861
They look great! I know where i'll be heading when I need something like that done!
-
06-08-2007, 08:20 PM #14WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
-
06-09-2007, 06:19 AM #15Newbie
- Join Date
- Dec 2006
- Posts
- 11
Very nice. Thanks for that sergiosuanez. They are really good
-
06-28-2007, 05:43 PM #16Newbie
- Join Date
- Dec 2006
- Location
- Toronto
- Posts
- 19
Very nice, I was thinking myself that I should have some sort of mascot.
-
06-28-2007, 05:50 PM #17WHT Addict
- Join Date
- Apr 2004
- Location
- Spain
- Posts
- 114
YOu are welcome
-
08-30-2007, 06:49 AM #18WHT Addict
- Join Date
- May 2007
- Posts
- 112
very nice really interesting too
-
09-10-2007, 08:50 AM #19Newbie
- Join Date
- Nov 2003
- Location
- Philippines
- Posts
- 24
Super awesome! Very nice indeed!
-
11-14-2007, 01:55 PM #20Newbie
- Join Date
- Dec 2005
- Posts
- 12
thanks man, thats amazing work thnx for sharing
-
11-27-2007, 04:52 PM #21New Member
- Join Date
- Oct 2007
- Posts
- 4
Truly helpful and amazing.. Thanks a lot sergiosuanez I was after this tutorial and I got it
-
11-30-2007, 08:09 PM #22Newbie
- Join Date
- Aug 2004
- Location
- Ontario, Canada
- Posts
- 10
Very impressive! Glad to see some content on mascot design.
-
02-26-2008, 03:54 PM #23Newbie
- Join Date
- Feb 2008
- Posts
- 11
WOw! The tut is great and your work too!
-
02-26-2008, 06:30 PM #24Newbie
- Join Date
- Sep 2003
- Posts
- 6
Amazing stuff!
thanks for the share!
-
03-22-2008, 03:56 PM #25Newbie
- Join Date
- Jan 2008
- Posts
- 15
very nice mascots i am going to add u plz accept.