"Life is too short to make bad art."

Monday, September 17, 2012

Apache Helicopter

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. 

 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.  



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.


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. 



Here's a version scaled down  

to something resembling an 
iphone (lo-res) ingame size: 


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
Download inkscape SVG file in ZIP archive

Posted by at

35 comments:

  1. Sweet! Awesome tutorial, I've always had a hard time with vector vehicles.

    ReplyDelete

  2. Another fantastic tutorial! Thanks for taking the time to do these!

    ReplyDelete

  3. Amazing, thanks for your work

    ReplyDelete

  4. Absolutely brilliant as are all your tutorials, Thanks

    ReplyDelete

  5. Nice workflow, though I must say I would have preffered the style and colors of the pixel one.

    ReplyDelete
    Replies

    1. I do agree... it's a different feel... but the nice thing about the vector shape is the easy modification. I am working on an addition to the tutorial to show how easy it is to alter the look to match other styles.

      Delete

    2. Thats going to be really helpful - I think a tutorial based just upon changing the style would benefit many, as I know it would me.

      Delete

    3. I hope to hear from you soon!

      Delete
  6. Anonymous from NorwaySeptember 18, 2012 at 9:39 PM

    I am incredibly impressed with these tutorials, you make it seem so easy.
    Thank you so very much for taking your time in making them, they are a great help for me who love to play around with software like this, but am in the end not good at figuring this out on his own.

    So thanks again!

    ReplyDelete
    Replies

    1. No worries, mate... I am glad they work for you.

      Delete

  7. This looks amazing... What do you think about a gun/weapon tutorial and a plant/tree tutorial?

    ReplyDelete
    Replies

    1. Plants would be fun and there is a section in the next tutorial about some of it (grass, tree, dead tree).

      As for the guns - I wrote a tutorial for tuts+ a while back:
      http://vector.tutsplus.com/tutorials/illustration/quick-tip-how-to-create-a-classic-handgun-with-inkscape/
      Maybe that can be helpful.

      Delete

  8. I managed to finish my version - Never thought I could do it. ;)

    Thanks man!

    ReplyDelete

  9. Hi , i have a question if u can help me i know that maybe is a stupid question :$.. how i can "scaled down
    to something resembling an iphone (hi-res) ingame size" ..its mean how i can resize a image to use in a game iOS project and which is the correct size .. thanks!

    ReplyDelete
    Replies

    1. You export the images from inkscape to bitmap (http://2dgameartforprogrammers.blogspot.com.au/2012/02/working-with-bitmap-output-in-mind.html). Usually I go with a size that is 2x or more the final in-game asset size.

      I use a bitmap tool (gimpl, photoshop, etc.) to adjust the size and the dpi afterwards. I find it easier to do it with a program designed for handling bitmaps than try to get them just right in inkscapes export feature.

      Delete

    2. Really thanks u! .... ur tutorials are just awesome!, from Colombia :) :D!

      Delete

  10. nice.. really nice.. i'll try to create that...

    ReplyDelete

  11. Wow, from simple to incledible. I never think until this. Thank you for tutorial. It is my first time to visit :)

    ReplyDelete
    Replies

    1. I would suggest looking at the earlier/ earliest posts and read / 'work' your way to the current posts. :)

      Delete

  12. Chris Ineed Your help ;) "Convert the shading to the paths and adjust the nodes to stay inline with base shapes". I think that I understand it but I cant do it :( dont know how :( can you help me ? Just show me that option in inkscape on screenshot. Or put really short tuttorial how to do it ! Thanks a lot ! :) Awesome tutorial ! :)

    ReplyDelete
    Replies

    1. Maareks - sorry... It was poorly phrased by me... When you create the shading shapes they need to be converted to paths - Menu Path/ Object to Path (Shift+CTRL+C). This way eg. a rectangle becomes a path with 4 nodes (which can now be moved independently (with the edit nodes tool (F2)). Move the nodes of the shading shapes inside the main body. That way you just shade the helicopter (or parts of it) without overlapping the background.

      Delete

    2. Yeah Right ! Thank you Chris ! You are awesome ! Thanks for fast answer ;)

      Delete

  13. Good post. I have read so many articles or reviews on the topic of the blogger lovers however this post is genuinely a fastidious article, keep it up. Looking forward your new post.

    ReplyDelete

  14. Nice Work! Inkscape is a fantastic resource.

    ReplyDelete

  15. I thought making helicopters was easy. You did it like it was soo easy and simple. OMG! Great tutorial, btw! :)

    ReplyDelete
    Replies

    1. Indeed, and images certainly help to complete this one of the fantastic piece of work, bookmarked.

      Delete

  19. It reminds me my days of creating J2ME arcade games with Tiles images :)

    ReplyDelete

  20. Hey, I just wanted to congratulate you for the great artwork of HeliAttack. It was one of the things that I loved from that game (and now I want to play again) :)

    ReplyDelete
    Replies

    1. Thanks, I am glad you enjoyed the game... and as far as I know it's still up at miniclip.com (as well as hundreds of pirate game sites...) It was a lot of fun doing the art back them (besides the sometimes painful side effects of doing pixelart)...

      Delete

  21. Nice Tut. Hope my students will enjoy this!

    ReplyDelete

  22. OMG I remember playing a lot of time to that helicopter game 10 years ago! hahahaha

    ReplyDelete

Subscribe to: Post Comments (Atom)