Spriteattack's Art tutorials

17891113

Comments

  • SpriteAttackSpriteAttack Member Posts: 524
    edited December 2012
    A simple but very helpful tool that is often overlooked is the 'Align and Distribute'. It's the answer to a question I have been asked a few time 'How do you place your objects precisely in line?'.

    The tool can do a lot more than that by aligning not only objects but groups of objects.

    In order to 'kill two birds with one stone' I am going to use and explain the tool while creating a cute animal. What defines cuteness? Cute usually is achieved by more 'child-like' proportions - round shaped heads, big eyes, small nose, small body. Perfect for my favorite start of a tutorial: "Let's create a circle" - well in this case we create three.

    image

    Note:
    Users familiar with Adobe Illustrator or CorelDraw for example might ask why I bother with the duplication and rotation when it's already build in. You create one copy, rotate it and the next copy will be a repeated version and you can create the full circle of triangles that way.
    I find this way easier and more controlled when creating evenly spaced content for a circular shape.

    Let's give the lion some facial features. The mouth might like conplexe but really it's just an up-side-down Y and if the deforming of the circle looks too difficult you might try using 3 separate elliptical shapes to create the same effect.

    image

    I added another circle for the body, a deformed circle for the leg and the paw, duplicated them 3 times to create the legs and added a line with a deformed circle with a pointy edge for the tail. A simple (and in my opinion cute) little lion.

    With a little bit more detail (eyelids and eyebrows) it's easy to give the lion some features and create some variations.

    image

    Variations don't stop there. Taking the basic shapes, rearranging them and changing the colours you have a whole zoo at your fingertips.

    image

    I hope you enjoyed the tutorial and start playing around with the tools inkscape (and other vector tools) have to offer to create some magic.

    [and remember - if this seems too difficult, read my blog/ this post from the earlier postings onward. I am explaining a lot of the tools and techniques in earlier tutorials]
  • creativeappscreativeapps Member Posts: 1,770
    Lion expression looks like nerdy :-B lol. Thanks for sharing another useful tutorial.
  • UtopianGamesUtopianGames Member Posts: 5,692
    Brilliant tutorial again m8.

    Darren.
  • Braydon_SFXBraydon_SFX Member, Sous Chef, Bowlboy Sidekick Posts: 9,273
    Fabulous! Great tutorial!
  • tatiangtatiang Member, Sous Chef, PRO, Senior Sous-Chef Posts: 11,949
    Thanks for another great tutorial! I'm starting to get into Illustrator more and these are invaluable.

    New to GameSalad? (FAQs)   |   Tutorials   |   Templates   |   Greenleaf Games   |   Educator & Certified GameSalad User

  • LiosStudiosLiosStudios Member Posts: 53
    Inspired me so much thanks @SpriteAttack
  • SpriteAttackSpriteAttack Member Posts: 524
    I am glad you guys like it...thanks for the feedback - makes me want to sit down and write some more... Right away...
  • LeonardDeveloperLeonardDeveloper Member Posts: 4,630
    Do you know what would be really sleek, Some bitmap "grunge" tutorials ;)
  • davidsalomondavidsalomon Member Posts: 136
    Hey @SpriteAttack I can't run Inkscape in Mountain Lion, I already downloaded XQuartz and installed the package, but when I try to run Inkscape it asks me: "Where is X11?" and I have to select the X11 app, but no app was installed, just the package installation. Do you know what I have to do?
  • SpriteAttackSpriteAttack Member Posts: 524
    @davidsalomon - I am sorry, mate... But I don't have the slightest clue... I am a PC guy (never owned an apple computer),,,
  • davidsalomondavidsalomon Member Posts: 136
    @davidsalomon - I am sorry, mate... But I don't have the slightest clue... I am a PC guy (never owned an apple computer),,,
    No problem SpriteAttack! I managed to fix it! :)
    Hopefully I'll use it later to make some sprites for my game :)
  • CaptFinnCaptFinn Member Posts: 1,828
    edited January 2013
    My biggest issue is figuring out where to put the shades ot the things that assist with a depth. how many? not to many? not enough? It seems shading and depth is the major things that make a image look good to not. Im always sticking with flat images. And thats not healthy.
  • CaptFinnCaptFinn Member Posts: 1,828
    here is a example of my attempts.
  • PixelMetalPixelMetal Member Posts: 283
    edited January 2013
    here is a example of my attempts.
    With more rounded objects it doesn't hurt to have a gradient shading it darker along the edges. It looks like you've just added a highlight to the basic shapes, which is good, but adding some darker shading couldn't hurt and could be useful in more fully defining details.

    Like this:
    image


    Something I like to do sometimes is changing the colors of the outlines around objects, which can help to more easily define individual shapes:
    image


    It's also a HUGE help if you define a specific direction the light source is coming from. Even having a rough idea like, say, "above and between the camera and the actor" can be helpful as a starting point, and then you can add shadows/highlights that compliment that lighting position, then add a secondary light source, like a rim light, after you've defined your main light source.

    One light source (front, above & to the right, though the lighting on the face is different for clarity's sake):
    image

    Multiple light sources (key/background lights + local light from box:
    image


    Try to think about it as not a technical issue in how to do it, but as straight-up art that follows the rules all art uses with lighting. There's a good Wikipedia entry on basic 3-point lighting here: http://en.wikipedia.org/wiki/Three-point_lighting

    This gets off the shading topic a little, but if you're designing a character, maybe also think about doing a character sheet, which is just a set of sketches (detailed or not, up to you) for you to reference for things like poses, sizing of various pieces of the object/character, and can also be a good way to help define your character's personality through appearance and motion:
    image

  • CaptFinnCaptFinn Member Posts: 1,828
    ok now your making me jealous... the first image i did with photoimpact... I finished playing with inkscape and tried one of my characters there. this is what i did so far.
  • PixelMetalPixelMetal Member Posts: 283
    edited January 2013
    the first image i did with photoimpact... I finished playing with inkscape and tried one of my characters there. this is what i did so far.
    Maybe try moving the light around to the front of the character a bit more. Just having that slight edge highlight results in the character still looking pretty flat, and having the highlight slightly inset from the edge doesn't help give it shape.

    Some reference art that does what you're trying to achieve could be a good starting point for figuring out your shading. He looks kinda gumdrop-shaped to me, so I see something like a box of candy...maybe look at pictures of gumdrops and try to copy the way they look in a vector style? If that's what you're going for.

    image

    Research is good. Google is your friend.
  • CaptFinnCaptFinn Member Posts: 1,828
    then its working cause thats what he is... a gumdrop. its a lemon gumdrop against the lime gumdrop type game.
    thank you for the image. i like this image i just dont want the light coming off him so bright and dispersed

  • CaptFinnCaptFinn Member Posts: 1,828
    Here is where im at so far. But this is my first night using Inkscape. I some video tutorials. good ones.
  • CaptFinnCaptFinn Member Posts: 1,828
    some more playing around.
  • WTDeveloperWTDeveloper Member Posts: 352
    @FINNBOGG

    something like this?!?

    image
  • GS_MasterGS_Master Member Posts: 159
    Thank you soooo much this is the most useful thread ever!
  • GraphicWarehouseGraphicWarehouse Member Posts: 927
    edited January 2013
    I like to do a graphic warmup every morning and my sister liked this one so here it is:
    I don't know if you like it but it was a good warmup @FINBOGG
  • LeonardDeveloperLeonardDeveloper Member Posts: 4,630
    Well its lovely to see so many people helping out, Nice work @mjmdesign
  • CaptFinnCaptFinn Member Posts: 1,828
    wow you guys make me jealous.
  • GraphicWarehouseGraphicWarehouse Member Posts: 927
    I'd be happy to set up a menu scene of art if you like it
  • GrapeSodaGamesGrapeSodaGames Member Posts: 93
    @SpriteAttack Thanks for these great tutorials! You do a great job! Keep them coming! :)
  • sad26sad26 Member Posts: 30
    How do you make a doodle jump character
    I would really like to know
    all your tutorials or really great
    keep working on them
    they are really useful
Sign In or Register to comment.