hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : Designing mascots for websites
Reply

Forum Jump

Designing mascots for websites

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
WHT Addict
 
Join Date: Apr 2004
Location: Spain
Posts: 104

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.
Sergio


Last edited by the_pm; 05-16-2007 at 09:55 AM. Reason: sorry, I forgot to read the guiline for posting tutorials


Sponsored Links
  #2  
Old
WHT Addict
 
Join Date: Mar 2007
Posts: 170
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

  #3  
Old
WHT Addict
 
Join Date: Apr 2004
Location: Spain
Posts: 104
Hi Amalia, thanks a lot for the suggestion.

Sponsored Links
  #4  
Old
New Member
 
Join Date: May 2007
Posts: 3
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.

  #5  
Old
WHT Addict
 
Join Date: Apr 2004
Location: Spain
Posts: 104
Im happy you think its useful

  #6  
Old
Newbie
 
Join Date: May 2007
Posts: 12
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

  #7  
Old
Web Hosting Master
 
Join Date: Nov 2003
Location: Newport Beach, CA
Posts: 2,920
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

  #8  
Old
WHT Addict
 
Join Date: Apr 2004
Location: Spain
Posts: 104
Quote:
Originally Posted by MacoDesigns View Post
I kinda have a question and I hope you answer it.
Hello Maco, for the scalable issue there is 2 options:
  1. 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
  2. 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:
  1. Digital inking, here is a tutorial I think could be helpfull for digital inking
  2. 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

  #9  
Old
Newbie
 
Join Date: May 2007
Location: Pearl of the Orient Sea
Posts: 15
Is it possible to you to design a mascott in vector? I'm mean fully vectored mascott? Thanks

  #10  
Old
WHT Addict
 
Join Date: Apr 2004
Location: Spain
Posts: 104
Quote:
Originally Posted by CreativeFantasy View Post
Is it possible to you to design a mascott in vector? I'm mean fully vectored mascott? Thanks
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

  #11  
Old
Newbie
 
Join Date: May 2007
Location: Pearl of the Orient Sea
Posts: 15
Quote:
Originally Posted by sergiosuanez View Post
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
@sergiosuanez Thanks

  #12  
Old
Junior Guru Wannabe
 
Join Date: Feb 2005
Location: Auckland, New Zealand
Posts: 97
Hey you're the guy at dA! I really like your work. Thanks for the tutorial.

  #13  
Old
Premium Member
 
Join Date: Apr 2007
Location: United Kingdom
Posts: 1,663
They look great! I know where i'll be heading when I need something like that done!

  #14  
Old
WHT Addict
 
Join Date: Apr 2004
Location: Spain
Posts: 104
Quote:
Originally Posted by hanyo View Post
Hey you're the guy at dA! I really like your work. Thanks for the tutorial.
Yes, I am

Quote:
They look great! I know where i'll be heading when I need something like that done!
You are welcome

  #15  
Old
Newbie
 
Join Date: Dec 2006
Posts: 10
Very nice. Thanks for that sergiosuanez. They are really good

Reply

Related posts from TheWhir.com
Title Type Date Posted
Designer-Focused Website Builder Webydo Closes $7 Million Funding Round Web Hosting News 2014-06-24 12:11:52
AWS Most Popular Host Among Alexa's Top 100,000 Websites: Infographic Web Hosting News 2014-02-03 15:43:02
Hulk Hogan Takes Down Web Hosting Mascots in New Hostamania Video Web Hosting News 2013-11-25 15:24:10
Hulk Hogan Steps Out of the Ring and into the Data Center with Hostamania Launch Web Hosting News 2013-10-04 15:28:56
Apache Market Share Dips Slightly in June Netcraft Web Server Survey Web Hosting News 2013-06-06 13:40:21


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?