Page 1 of 3 123 LastLast
Results 1 to 25 of 53
  1. #1

    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

  2. #2
    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

  3. #3
    Hi Amalia, thanks a lot for the suggestion.

  4. #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.

  5. #5
    Im happy you think its useful

  6. #6
    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. #7
    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

  8. #8
    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. #9
    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

  10. #10
    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. #11
    Join Date
    May 2007
    Location
    Pearl of the Orient Sea
    Posts
    18
    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. #12
    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.

  13. #13
    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!

  14. #14
    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

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

  15. #15
    Very nice. Thanks for that sergiosuanez. They are really good

  16. #16
    Join Date
    Dec 2006
    Location
    Toronto
    Posts
    19
    Very nice, I was thinking myself that I should have some sort of mascot.

  17. #17
    YOu are welcome

  18. #18
    very nice really interesting too

  19. #19
    Join Date
    Nov 2003
    Location
    Philippines
    Posts
    24
    Super awesome! Very nice indeed!
    Creative Web Standards Designs (XHTML/CSS)
    Weevox Studios
    A Web Designer's Blog

  20. #20
    thanks man, thats amazing work thnx for sharing

  21. #21
    Truly helpful and amazing.. Thanks a lot sergiosuanez I was after this tutorial and I got it

  22. #22
    Join Date
    Aug 2004
    Location
    Ontario, Canada
    Posts
    10
    Very impressive! Glad to see some content on mascot design.

  23. #23
    WOw! The tut is great and your work too!


  24. #24
    Amazing stuff!
    thanks for the share!

  25. #25
    very nice mascots i am going to add u plz accept.

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •