Spriteattack's Art tutorials

178101213

Comments

  • Braydon_SFXBraydon_SFX Member, Sous Chef, Bowlboy Sidekick Posts: 9,273
    Yay!
  • TesseractEngineTesseractEngine Member Posts: 180
    Yours are some of the best vector game art tuts out there, Chris! Looking forward to seeing more.
  • SpriteAttackSpriteAttack Member Posts: 524
    This tutorial started out with some illustration request and I got a little carried away with the facial expressions I could add to a simple bomb. I thought I might just share the fun and turn it into a tutorial.

    Like most of my tutorials this one starts with basic shapes - circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts.

    image

    image

    With the basic elements in place it's a matter of working out the expressions you are after... Adding different mouth shapes, squinting or enlarging the eyes.


    I hope you enjoyed this as much as I did - and believe me I really missed doing tutorial art and writing these little posts.

    As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256x256, 128x128, 96x96 and 64x64 pixels to be used freely in your projects.

    Download Emotional Explosives ZIP
    http://opengameart.org/sites/all/modules/pubdlcnt/pubdlcnt.php?file=http://opengameart.org/sites/default/files/Emotional_Explosives.zip&nid=12179
  • carlblanchetcarlblanchet Member Posts: 755
    Another great tutorial! Thanks Chris! :)
  • Braydon_SFXBraydon_SFX Member, Sous Chef, Bowlboy Sidekick Posts: 9,273
    Awesome as always, Chris! Thanks for another great tutorial!
  • TesseractEngineTesseractEngine Member Posts: 180
    Brilliant stuff! The final bomb variants are just ace!

    Hmm, sudden hankering to make a game about bombs, now... ;)
  • SpriteAttackSpriteAttack Member Posts: 524
    @TesseractEngine - go for it ;)
  • SpriteAttackSpriteAttack Member Posts: 524
    edited September 2012
    Here's something close to my heart. Ever since doing the art for HeliAttack 2 and 3 back in 2003 and 2005 I fell in love with helicopters. They just make great game assets.

    image

    Back then it was all pixeled and took what seemed like forever to create. In the game there were a few helicopters with limited variations.

    Creating a similar object in vectors allows for easier manipulation and variations. It also makes animations a lot easier and more flexible.

    This tutorial looks a little bit more complex than the previous posts - but I tried to break it down into easy steps and simple shapes. I hope it worked.

    Note:
    As with all the tutorials prior I use squares and circles and deform them rather then 'hand-draw' the shapes. With the body of the Apache-style helicopter it might be easier to 'just draw' the shape with the straight lines tool rather than place squares and modify them later - but it takes a little more skill to get the shape right that way.

    image

    image

    Note:
    Now you have a basic and recognizable helicopter. It's a good point to save and continue with a new file to give you a base shape to go back to when creating variations.

    The next step is adding details (guns, missiles, rocket launchers, etc.) and then add depth to the helicopter by adding some highlights and shadows.

    image

    I use basic shapes in light and dark colours - in this case white and black - with transparency to shade the object. This allows for easy changes to the base colour (e.g. an army green or a bright red for an enemy object) without having to redo the shading.

    Note:
    If you want softer shadows and lights use a more yellowish tone for the highlight and a dark brown or dark purple for the shadows.

    image

    image

    Here's a version scaled down to something resembling an iphone (lo-res) ingame size:
    image

    I hope the complexity of helicopter didn't scare you off and you enjoyed the tutorial. In the end it's just another bunch of simple shapes combined to form something bigger.



    As promised another free bit of art to make up for the long time between posts. Enjoy!

    Get the source art (svg file) of this tutorial for FREE:
    http://opengameart.org/sites/all/modules/pubdlcnt/pubdlcnt.php?file=http://opengameart.org/sites/default/files/tutorial_helicopter_art.zip&nid=12184
    [Download inkscape SVG file in ZIP archive]
  • WTDeveloperWTDeveloper Member Posts: 352
    great work!!!
    thanks
  • gyroscopegyroscope I am here.Member, Sous Chef, PRO Posts: 6,598

    Terrific stuff; top-notch, thanks as well. :-)

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain http://spidergriffin.wix.com/alphaghostapps

  • SpriteAttackSpriteAttack Member Posts: 524
    In the last post I mentioned that it's fairly easy to modify the basics and create variations once you have the core shape down.

    As requested by some here is a modification tutorial bringing the Apache more in line with the helicopter used in the HeliAttack3 screengrab at the top of the last post.

    Instead of the usual start with a simple shape I take the helicopter from the last tutorial.

    Note:
    You can download it for free at the bottom of the previous post.
    http://2dgameartforprogrammers.blogspot.com.au/2012/09/apache-helicopter.html

    image

    image

    image

    Note:
    Keep the guns and missiles separated when exporting your art. Add them as separate objects attached the the base shape in your game engine to allow flexible use (e.g. firing and rotation for aiming).

    image

    image

    Here are the two helicopters side by side in the scaled down size.

    I hope this shed some light on how quickly you can reuse and modify vector elements and create new assets for you game or illustration needs from existing images.
  • Cee3pee0Cee3pee0 Member, PRO Posts: 194
    SpriteAttack, dont know if ive said this already but i just wanted say a big "thank you!" all of your tutorials have been super inspirational and educational. Thanks again!
  • Braydon_SFXBraydon_SFX Member, Sous Chef, Bowlboy Sidekick Posts: 9,273
    Awesome! Thanks, Chris!
  • SpriteAttackSpriteAttack Member Posts: 524
    @Cee3peeO - thanks... and no worries, mate... I really enjoy writing these...
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    Just awesome as always!!! Thank you!!
    ---
    Benjamin
  • Cee3pee0Cee3pee0 Member, PRO Posts: 194
    edited September 2012
    You make it look so easy!
  • Braydon_SFXBraydon_SFX Member, Sous Chef, Bowlboy Sidekick Posts: 9,273
    I survived the helicopter! Not hard once you see it's a bunch of shapes put together.
  • mrpacogpmrpacogp Member Posts: 400
    edited November 2012
    I have readed all of this thread and got one question... yeah one more time xD
    When you created a project, do it on document with background? you delete the background on inkscape to export it to gamesalad?
    Anyone got interpolate working under macosx inkscape version? a tuto?
  • RPRP Member Posts: 1,990
    This tutorial started out with some illustration request and I got a little carried away with the facial expressions I could add to a simple bomb. I thought I might just share the fun and turn it into a tutorial.

    Like most of my tutorials this one starts with basic shapes - circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts.

    image

    image

    With the basic elements in place it's a matter of working out the expressions you are after... Adding different mouth shapes, squinting or enlarging the eyes.


    I hope you enjoyed this as much as I did - and believe me I really missed doing tutorial art and writing these little posts.

    As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256x256, 128x128, 96x96 and 64x64 pixels to be used freely in your projects.

    Download Emotional Explosives ZIP
    http://opengameart.org/sites/all/modules/pubdlcnt/pubdlcnt.php?file=http://opengameart.org/sites/default/files/Emotional_Explosives.zip&nid=12179
    Hey! It's a cartoon version of me! lol! Nice stockpile there @SpriteAttack!
  • jamie_cjamie_c ImagineLabs.rocks Member, PRO Posts: 5,772
    Hi @SpriteAttack, you mention above writing a book? Are you going through a publisher or are you self publishing? If you don't mind my asking. I've got a couple books I'd like to write someday and am curious of your experiences so far.

    Jamie
  • mrpacogpmrpacogp Member Posts: 400
    edited November 2012
    Its impressive that thread, thank you for all of your tutos ^^
    I want to ask another thing, how can i move objects from one project to other?, or have to save all from same template?
    I dont know if i have explained correctly.
    I want to create things, like plants, and save into one svg.
    How can i import that objects into other svg? only can with bmp...
  • SpriteAttackSpriteAttack Member Posts: 524
    @jamie_c - book project is on hold due to lack of time... so no experience yet... ;)

    @mrpacogp - simplest thing is always copy and paste from one inkscape document to the next...
  • mrpacogpmrpacogp Member Posts: 400
    I have to save as .svg and then import from the next.
    If i do c&p then i got a bitmap image.. or you say to copy and paste another way?
  • SpriteAttackSpriteAttack Member Posts: 524
    If you select a bunch of vector shapes in one inkscape document, copy them, go to the other document and paste, you should still have vector shapes.
  • mrpacogpmrpacogp Member Posts: 400
    I have Inkscape for Macosx.
    I open a document, select a group of vectors, select edit and then copy.
    Go to other document opened, edit paste, and then i got bitmap with the vectors..
  • LeonardDeveloperLeonardDeveloper Member Posts: 4,630
    You have to change the file from .bmp first... As far as I'm aware
  • mrpacogpmrpacogp Member Posts: 400
    I have some problems in my inkscape i think...
    Cant do a simple radial gradient w/o make all transparent and cant copy and paste a simple svg, i have to do import way...
  • SpriteAttackSpriteAttack Member Posts: 524
    @mrpacogp - sorry... PC-guy... no idea why the mac version would work differently....
  • mrpacogpmrpacogp Member Posts: 400
    edited November 2012
    Thank you very much SpriteAttack for all your support.
    At this time i`m working to have my own alphabet, w/o your support maybe never try it.
    Now i`m trying to copy a object from one layer to other and got one bmp too!! looking what i`m doing bad :P
    Thank you very much!!

    ....
    and google its the solution maybe..
    "
    Re: Duplicate to another layer?


    druban wrote:better overall to use duplicate and move to another layer with keyboard shortcuts or the menus...

    Note that 'Edit > Duplicate' and 'Edit > Copy', 'Edit > Paste' commands differ slightly.

    When working with Inkscape on a Mac I would strongly recommend to change the X11/Xquartz preferences because this conflict between Inkscape and Xquartz also affects commands where 'Duplicate' can't be used instead (in the Path Effect editor, for example, or when copy&pasting between different Inkscape documents, or when pasting style or size).
    "


    And for another people using Inkscape under macosx, its recommended to install "command Line Tools" under preferences on Xcode to get Interpolate working before try it to do it with term....
    http://i398.photobucket.com/albums/pp67/pacogp/XQuartz-clipboard-preferences.png
Sign In or Register to comment.