How to make Quality Graphics

Discussion in 'Developer Services and Trade' started by pcmaster, Dec 6, 2009.

  1. hardcoregamer

    hardcoregamer Well-Known Member

    Sep 20, 2009
    749
    0
    0
    Making iPhone games
    touchArcade
    To be a good artist, you should have experience from taking art classes, own a quality art/graphics design program, have the talent for it, work at it, and have imagination. All of this and more will be covered in my book, in stores Tuesday, "Hardcoregamer's Guide To Be A Great Artist".
     
  2. RankoSao

    RankoSao Well-Known Member

    Nov 7, 2009
    1,487
    0
    0
    College Student
    State of Hysteria
    i AM good at writing things, but its hard for me to get started. That has nothing to do with what im doing now,though. Thank you for the insight and encuragement :)
     
  3. da shiz wiz 19

    da shiz wiz 19 Well-Known Member

    Sep 24, 2009
    7,318
    9
    0
    HEY!
    I believe you've got some work to do? :p
     
  4. RankoSao

    RankoSao Well-Known Member

    Nov 7, 2009
    1,487
    0
    0
    College Student
    State of Hysteria
    Oh yes, lots of it!
     
  5. mobile1up

    mobile1up Well-Known Member

    Nov 6, 2008
    754
    0
    16
    Technical Director
    Munich, Germany
    not 100% true - MSPaint works well for pixel art - and its fast.

    to load a sprite into photoshop to make a small pixel change; is slow and very cumbersome. typically; develop using illustrator/photoshop - then scale down to the sprites you need and touch up using MSPaint. this is of course; if your using a pixel based presentation engine (framebuffer) - if your using openGL and want the hardware to do the scaling for you; you can ignore the pixel art concept.

    using illustrator / photoshop gives you vector art; great for marketing - high resolution versions etc.. but in the game itself; you may only need pixel art.
     
  6. Frand

    Frand Well-Known Member

    Maybe the discussion should be steered toward technical tricks and things to be mindful of when creating graphics? After all, game graphics benefit greatly from an artist with a technical understanding as well as an eye for design.

    Also, good graphics require an understanding of the device and the input method.

    So let me throw up a few random thoughts from here and there:

    - Pick a palette! Many games suffer visually from an artist thinking only about individual elements and making each one of them look good. Think of a color theme per level, a color theme for menus and think how each affects the mood of the game.
    There is a world of hues to experiment with, and Adobe's Kuler is a fun tool for that.

    - When working with high-resolution (or vector) source art, remember what your target resolution is. Don't waste time with intricate details if they're lost or smudged when scaled down. Particularly outlines on any elements should be added after the element has been scaled to its final size to get proper clarity and contrast.

    - Black shadows and white light are boring. Tint your shading to give it personality - try blue-toned shadows and a key light with orange hues. See Biggs from Critter Crunch for example:
    [​IMG]

    - Quality in graphics is not just about the still images, it is also about animation. I won't dig into character animation at all, but remember that menus also create an impression with the users. Don't just jump from one menu screen to another, do it with a transition.

    - Remember that you are designing your UI for a touchscreen: Have all buttons provide visual feedback when pressed. Anything that the user can press should be at least a finger's width. Don't make the user scroll lists by clicking an arrow button when the users have grown to expect touch-drag lists with inertia. The most important thing in menus is not how cool they look, it's that they are clear and functional.

    And finally:

    - Read John K's blog before you do any character design. Read it.
     
  7. hardcoregamer

    hardcoregamer Well-Known Member

    Sep 20, 2009
    749
    0
    0
    Making iPhone games
    touchArcade
    It's true that Paint works well in certain situations, and it's the one I use. But if you want higher quality graphics like in PG and others, Photoshop would be a better choice.
     
  8. pcmaster

    pcmaster Well-Known Member

    Nov 18, 2009
    297
    0
    0
    Thank you so much. You gave me a ton of information there and it really helps.
     
  9. MidianGTX

    MidianGTX Well-Known Member

    Jun 16, 2009
    3,738
    10
    38
    That's narrowing down the term "higher quality" quite a lot.

    "Beat It!" has some incredible artwork and it was likely done in Paint or a very similar program:

    [​IMG]

    [​IMG]

    I'd call that higher quality.
     
  10. Emme

    Emme Active Member

    Apr 27, 2009
    33
    0
    0
    #30 Emme, Dec 7, 2009
    Last edited: Dec 7, 2009
    For sharp pixel art, I would use either Pixen, GraphicsGale, GrafX 2 or ProMotion.
    Or, if You still own it, Deluxe Paint on the Amiga Emulator.
    In our gamedev blog we regularly post development stories that deal with art, design and coding.
    Currently we have small snippets of the modeling/concept art part, but leave a comment and request topics and we will deal with them in future blog updates :)
     
  11. cuestaluis

    cuestaluis Member

    Nov 29, 2009
    6
    0
    0
    Illustrator/Designer
    Madrid
    hmm

    You can also make pixel-art in photoshop, with the pencil tool, and even export as transparent background PNGs. But then again, it's just a tool, and tools are just as good as the man behind them.

    The most important part in graphic development is always practice and research, without any of those, you're just lost. You must first understand what you are trying to draw to make it seem alive or real (not necessarily realistic).

    My advice would be to start simple, gain experience, then add details/more complex shading/etc. Practice copying your favorite characters/backgrounds, and try to understand how are they built, what are the basic shapes that compose them, then apply that to your own.
     
  12. Frand

    Frand Well-Known Member

    Amen. And I'd like to add, if you want to learn how to draw expressive characters, then please, don't copy from your favorite anime. "Anime character" is an oxymoron.

    Books for reference:
     
  13. Yffum

    Yffum Well-Known Member

    Oct 27, 2009
    214
    0
    0
    How so?

    I am an amateur artist lucky enough to have a dad with a copy of Adobe CS4. If you're a programmer that wants to make your own art, but not get too into it, I would definitely recommend vector. It's very forgiving and easy to manipulate. Plus, it'll look professional even if you're not that good. I attached an image of some easy vector art I made a while ago. Right now all I use is vector and everybody goes "Wow, that's amazing!" I always feel like I don't deserve that compliment though because vector art takes no skill whatsoever. It's just because I had access to an amazing application for vector art (Adobe Illustrator). I hope one day I'll be good at pixel art too.
     

    Attached Files:

  14. Flickitty

    Flickitty Well-Known Member

    Oct 14, 2009
    761
    1
    0
    iPhone Dev
    Vector makes it much easier to animate as well.

    However, you still need to have some skill in order to manipulate vector. It doesn't make someone 'look professional'. In fact, the quality of the imagery can quickly degrade if you aren't careful when using Vector.

    Your Octpous isn't an amazing image, but I can tell that there is a hint of skill behind it. I'd like to see how you would have made the image if you had drawn freehand with a pen.
     
  15. Frand

    Frand Well-Known Member

    A quick example, compare these:
    [​IMG]
    [​IMG]

    to these:
    [​IMG]
    [​IMG]

    Bugs communicates everything he is via gestures and facial expressions. Just one glance and you know exactly what he's feeling. This was the entire goal of the artists working at Disney and WB decades ago: delivering the characters via motion, postures (clearly readable silhouettes) and exaggerated facial expressions.

    Animation in Asia never figured this out beyond a superficial level, and instead emotions and situations are generally communicated iconically. Pride is exaggerated via godrays and star bursts, shame with a raincloud. Shot-to-shot the character's face can be illustrated in a chibi-style or realism, only to convey the "silliness" or "coolness" of the shot.

    Look at the range of emotions Bugs shows even in the two images above, and compare this to Naruto who pretty much looks like a boy scout no matter the situation.

    One of the reasons for the difference in character design is the focus on the eyes as the means of expression instead of the face as a whole in Asian cultures. No matter the reason, the end result is that anime characters are generally less developed, less expressive and less memorable. To prove a point, watch any Studio Ghibli movie, and try to describe the personality of any human lead character in any more detail than "he/she was the good guy".

    And no, this isn't an attack on Asian animation. Ghibli movies are masterpieces of animated storytelling. But for character design and really understanding what makes an appealing and expressive illustrated protagonist, anime and manga are poor references.

    I believe further discussion on this topic should also take place outside this thread :)
     
  16. Flickitty

    Flickitty Well-Known Member

    Oct 14, 2009
    761
    1
    0
    iPhone Dev
    I think you have a valid point. I personally prefer the OLD cartoons, dating back to the 20's and up until the mid 50's. Everything had character back then, especially in the 20's/30's.

    Sure, I enjoy newer cartoons too, including Spongebob, Invader Zim and Avatar: The Last Airbender (all Nicktoons, go figure). However, I try make my animations reflect the older styles- squash and stretch. I think Flickitty achieved this on some levels, but I'm still not 100% satisfied.

    If you make a new topic regarding character/animation, I'd contribute more to the discussion.
     
  17. mobile1up

    mobile1up Well-Known Member

    Nov 6, 2008
    754
    0
    16
    Technical Director
    Munich, Germany
    me too! in fact; we have another game in development with inspiration from the old cartoons - his opening comment to me was that he was a huge "chuck jones" fan. if you remember roadrunner and wile-coyote; your going to love our new game (we will post some info on it soon)
     
  18. pcmaster

    pcmaster Well-Known Member

    Nov 18, 2009
    297
    0
    0
    Yea that's what I think I'm going to do. Looks easy enough and I'm downloading ilistrator now. In Photoshop you can also enhance it with the fx.
     
  19. phonk

    phonk Well-Known Member

    Jul 13, 2009
    115
    0
    0
    #39 phonk, Dec 7, 2009
    Last edited: Dec 7, 2009
    The tool doesn't matter (though it's good to begin with adobe because it is the standard tool). A good (character) design depends on your imagination, a profound knowledge in aesthetics and some drawing skills: Just take a pencil and start drawing. A lot. Then, when you got a good design, scan it and vectorize in illustrator (don't ever use livetracing... learn to get used to the anchorpoint-tool/pencil).
    There are people who can get nice graphics (characters) directly in illustrator, but it's easier to draw some sketches manually, ink (if necessary.. it helps to get a clear reference while digitalizing), scan, vectorize + retouch/optimize and colorize in illustrator.

    EDIT: And listen to Frand's posts. A lot of good advice there. Drawing Manga will help beginners to get along with some basic technical stuff (get better lines etc), but it's not the best way to get good emotions. How ever, I always recommend to start drawing human anatomy (nude life drawing). It's the best way to understand proportions etc.
    If you are interested in conceptual artwork/graphics take a look at this site (especially the forums): http://conceptart.org/
     
  20. pcmaster

    pcmaster Well-Known Member

    Nov 18, 2009
    297
    0
    0
    yea but i heard ilistrator was the best tool for vector and i'll try the demo... i've been downloading the demo for 2 days from the adobe website and it just keeps restarting after its downloaded but says its not done where i download it to... i tryied a file from brothersoft and its downloading at 10kb/s ugh! i'll try downloading it in good old internet explorer yay in ie it's 300kb/s
     

Share This Page