Spriteattack's Art tutorials

1568101113

Comments

  • kristof_andersonkristof_anderson Member Posts: 14
    I didnt quite understand that
  • SpriteAttackSpriteAttack Member Posts: 524
    @kristof - in adobe illustrator the conversion from a shape to an editable path is done via a right click on the object and the 'Make Compound Path' option.

    After a not quite so smooth start into the new year - with health problems [starting to really get annoyed with those] and my work laptop dying on me [thanks to a dead graphics card] - I am finally back in the swing of things and working through the wish list of tutorials I received.

    Here's one from a reader of my blog - a cartoon cactus - which happens to be an extra element I created for my BlockBuddies Cowboy Bundle.

    image

    image

    Enjoy!
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    Nice tutorial!! Thx much for all tutorials. Hope more tutorials coming soon :)

    Between: Your block buddies are really cool. Love them!
    ---
    Benjamin
  • beefy_clyrobeefy_clyro Member Posts: 5,390
    Hey Chris.

    Hope you're feeling better, doesn't sound good! Im glad you're still doing the tutorials, these are great, thought you had given up on them.

    Cheers
  • ultimaultima Member, PRO Posts: 1,207
    edited January 2012
    wow this is really great... way to dig up a good post and revive good content... @ Benjamin_m5 everything applies in illustrator the same way... the way you work with vectors... that is... like slick zero said... tools just have different names.

    @spiritattack can you pm me with your rate?
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    @ultima Yeah. i know that. But why say you that to me?! I haven't Illustartor =)
    ---
    Benjamin
  • SpriteAttackSpriteAttack Member Posts: 524
    @beefy - I wouldn't give up on them... or the stupid neural muscular disease that is progressively making my life a little harder... ;) too much fun to be had... and someone has to keep up the good taste in art around these forums... ;)
  • ultimaultima Member, PRO Posts: 1,207
    lol i must be tripping... i thought you said can you make tutorial for illustrator... it's someone else.
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    @ultima ;) no problem
  • kristof_andersonkristof_anderson Member Posts: 14
    @spriteattack Thanks alot and i wish yo well with your health.
  • JakeMorJakeMor Member, PRO Posts: 136
    edited January 2012
    All of this leaves me one question... why the f*ck HASN'T this been made a sticky lol?
  • SlickZeroSlickZero Houston, TexasMember, Sous Chef Posts: 2,870
  • WTDeveloperWTDeveloper Member Posts: 352
    Hey SpriteAttack
    Your Tutorials are the Best, but can you please make a Tutorial on how to create a Cool Menu for your Game????
  • LeonardDeveloperLeonardDeveloper Member Posts: 4,630
    Dear @Spriteattack,
    I make this post because I am unable to find a way to contact you, I really need to contact you.. Extremely! :) So if you could drop me an email at thermoapps@gmail.com that would be great! :)
    -------
    If anyone else knows how to contact SA please tell me! ;)
  • SpriteAttackSpriteAttack Member Posts: 524
    @ shmuley95 - good question - was supposed to happen a long, long time ago :)

    @WTDelveloper - it's in the pipeline - let me catch up on work [just got back after 2 weeks without computer or internet (felt good)]... :)

    @Leonard - email sent.
  • beefy_clyrobeefy_clyro Member Posts: 5,390
    Good to see you back Chris, i miss your presence around here
  • WTDeveloperWTDeveloper Member Posts: 352
    Hey SpriteAttack,

    that are great news. I hope you feel better.
    WTDeveloper
  • SpriteAttackSpriteAttack Member Posts: 524
    edited February 2012
    Here's one request I have read a few times now: 'How do you make a character with outlines?'. It's not much different from any other character creations you just add a little more difficulty and a few problems to work around.

    The main problems I see with a lot illustrations using outlines are: a) the inconsistent line weight (different thickness of the stroke for different elements on the screen). It's a little more complicated and takes some thought to design the screen balanced. My advice is to keep it either keep it all at the same thickness or use a thicker brush for all the focus elements (eg. characters, logo, UI elements) and create the background with a thinner stroke. b) the colouring of stroke vs. the colour of the shape. c) the line weight does not correspond with the illustration. You might have noticed it in comic books, illustrations or animated cartoons - the stroke is not consistent in thickness. It starts thinner, goes thick and ends thin again giving it more of a brush feeling. If it's done right it really enhances the image but it's a time-consuming art. Simply using tools in Adobe Illustrator or Corel Draw to create dynamic brushes usual ends up looking wrong.

    All those problems aside. Let's start with something simple.In this tutorial we will do a little piglet with a plain black stroke that stays consistent throughout the elements. In one of the next tutorials I will cover more complex and modified outlines.

    image

    The last two steps show one of the main problems with outlines - the overlapping of elements creates lines we don't want to see. You could just combine the snout and the head. Simply making it one object would result in problems animating it afterwards. This becomes even more visible in arms and legs. I prefer just adding shapes to cover those overlaps.

    image

    The tail might not the usual corkscrew design you see in a lot of pig illustrations - it was one of those cases of thinking you know how it looks versus the way it looks. In the end I checked on Google images [the best invention since sliced bread] and had a look at real piglets and found this cute little tail more appropriate.

    image

    And the last step - I forgot to add it to the tutorial pages - (remember I am fresh off the vacation) is a cover shape for the legs to join them with the body.

    I hope you enjoyed this tutorial. Get out inkscape and start creating!
  • EatingMyHatEatingMyHat Member Posts: 1,246
    I got to say that this is the most useful threads for me (a non-artist). Thanks for sharing!


    Follow Eating My Hat on Facebook and the Blog
    Check out my templates in the GS Marketplace or at the store
  • SpriteAttackSpriteAttack Member Posts: 524
    @EatingMyHat - Thanks. I am glad it's helpful to non-artists... Rather than share a few unconnected bits of free art I think it's more helpful to enable 'artisticly challenged' members of the forum to create decent art of their own...
  • EatingMyHatEatingMyHat Member Posts: 1,246
    @SpriteAttack Just look at my Bombs Away template (http://marketplace.gamesalad.com/#category=13&product=1042) the ground is based on your tutorial :)
    I didn't even had Inkscape on my MBA before this thread.


    Follow Eating My Hat on Facebook and the Blog
    Check out my templates in the GS Marketplace or at the store
  • App SurgeApp Surge Member Posts: 651
    edited February 2012
    @SpriteAttack I keep on seeing a vision... It's something about a menu.... There's some art involved... A menu art tutorial maybe?
    Keep up the great work :)
  • SpriteAttackSpriteAttack Member Posts: 524
    @redsky - wow... you got fortune telling skills, mate... It's in the pipeline... I have 3 UI styles ready... just need to do the writing... ;)
  • SpriteAttackSpriteAttack Member Posts: 524
    This is a tutorial requested by one of the readers on how to create a building made of brick. In order to clarify what he meant I quickly created this one and wrote up the tutorial to explain the steps.

    There are a few problem when adding pattern added to a shape. You have to make sure it's seamless (it tiles properly horizontally and vertically). You have to make sure it scales well with your object (too much detail might be lost in a smaller view and too little detail will look boring) and you need to make sure it matches the illustration style (a bitmap photo in a vector illustration might cause serious inconsistency in the look and feel).

    image

    This is a brick building. We all recognise the pattern but it looks boring because the blocks are too big and too even. It's also not the best design for a house.

    Let's get started with a bunch of rectangles and build a more interesting looking house and then add the nicer brick pattern to it.

    image

    So... We got a simple yet decent looking house...

    image

    put into a row with varying colours it looks rather nice. It's open to a lot of designs now (e.g. you could add wood boards as a pattern and place it in Scandinavia.).


    For now we are after bricks so let's add some pattern.

    image

    When creating a pattern always try and look at the larger project rather than the one element you are working on. Will you need to reuse the pattern? Will there be colour variations? Do I need to make it scalable? You can save a lot of time and repetitive work if you keep those questions in mind. Work with e.g. transparent elements for shaders rather than tinted variation of the base colour or convert your lines into paths to allow for a proper scaling.

    I hope you enjoyed the tutorial as much as I did creating it. Have a great day and keep your creativity flowing.

  • CannonFodderCannonFodder Member Posts: 230
    Another fantastic set of tutorials, thanks SpriteAttack
  • MoebiusMoebius Member Posts: 194
    edited February 2012
    great tutorial, and yes I will keep my creativity flowing ;)
  • patapplepatapple Member Posts: 873
    wow....amazing tutorial!! can I request a tutorial?? can you do a tutorial on "how to do an asphalt background"??? thank you very much
  • LeonardDeveloperLeonardDeveloper Member Posts: 4,630
    @spriteattack
    I would love if you made a webinar! :D Or some video tutorials...
    _____________________________________________________________________________
    Thermo-Apps Website
    Thermo-Apps.com
    Independent Game Developers 3rd Party Marketplace
    Gravity Bounce Is On the app store!
    Cheers,
    J. Leonard
Sign In or Register to comment.