Pages

Space Ship - next step: shading

The next step in the creation process is the shading. Let's start giving the silhouette some volume, defining the layers of the ship (which parts are on top of others, which ones cast shadows, which ones get light, etc.).


Note:
The interpolate extension is sensitive to the selection of the objects. The first selected images will be below the second image. 

It's a very helpful extension and if you have not used it in the past, this is a good time to start playing with it. 


For the best possible results keep use a duplicate of a shape as your target shape and alter the nodes (without adding new ones or deleting nodes). As long as the two shapes are that similar the interpolate works great. 

Note:
If the interpolation starts to go 'round' and 'curves' the lines, make sure you set the interpolation method to 1 in ther interpolate popup.

You can also go wild by interpolating totally different shapes for some rather interesting results. 



The more complex your shapes are the more chaotic the interpolation will turn out. Play with the extension and see what happens. 

Let's head back to our space ship design (before I get off track completely and start writing about something different altogether).

Creating these assets keep in mind that you can reuse elements that look good for other ships later on.

Assembled back into the starting shape it will look something like this but there are lot's of other variations possible with just those 6 shapes.



Now it's up to you to fire up Inkscape, copy, interpolate, shade, break, design and have fun!

Chris Hildenbrand

2D game artist, pixelpusher, vector bender, face turner for over thirty years. I worked on more games than I can remember... The most recent release is "Super Crossbar Challenge" for iOS (Android coming soon) with Shattered Box, Fredbear Games and PlayPlayFun.

16 comments:

  1. interesting tutorial !
    i was expecting the shading is done with gradients
    but obviously the method with interpolation is easier on the processor

    sadly i must say the first part is not very clear in illustrating the method
    the shaded part is hardly visible and then the tutorial gets lost in elaborating what interpolation can do with shapes (i found that part confusing as the tut is called shading)

    ReplyDelete
    Replies
    1. Good point,, Espermaschine. I will look at the tutorial again tonight and might split it into a shading - more in depth and a decoration section with a small tutorial on the interpolation as a separate entry.

      Delete
  2. Tnx for the tutorial but its so difficult to do it.A video tuto will be more interesting. PLZ and tnx again :)

    ReplyDelete
    Replies
    1. I am not a big fan of video tutorials - I find most of them useless as I tend to just need one small hint [not the 20 minutes around it] and then usually miss the crucial bit.
      Saying that, I will give video a try and see if I can get something decent across as a lot of readers did request it in the past. It just comes down to time, me learning to make a good video and the question whether or not it will be more helpful.

      Delete
  3. Thanks for the great trick Chris! Interpolate in this manner is exactly what I have been looking for, I never even considered using it for layered items to create a gradient!

    I did not find the explanation difficult to follow, if you open up your Inkscape and try the steps on some random shapes you get it working pretty quick.

    I will point out two things that tripped me up for a second since I tried it using shapes first:
    1. There is a reason it under "generate from path", it only works if both shapes have been converted to paths using Path-Object_To_Path.
    2. Both parts need to be different colors or different shades of same color (I only add this idiocy because I followed your tutorial word for word and since you never say change second wings color I didn't the first go around and interpolation is invisible :))

    ReplyDelete
    Replies
    1. Thanks, I will rework this post / tutorial and will make sure to add your points.

      Delete
  4. I really like your works here. what you do here is more than arts and i hope you will allowed for me to use some of your work in my game ((if i could make a game ^^)).

    ReplyDelete
    Replies
    1. Sure... that's what the blog is about... Enabling you to create the artwork for your own game.

      Delete
  5. Wow, that's really cool..
    Where you learn art for game programming?

    ReplyDelete
    Replies
    1. I am self-taught. I started doing game art on a c64 before there was any proper training to teach you the skills... and I just kept on going... :)

      Delete
    2. This comment has been removed by the author.

      Delete
  6. Thanks for this tutorial! I just made my first ship for my space shooter game, and I am *so* happy with how it turned out! I ran into the same issues that TheRedAxe did, and I didn't think to check comments until now, but I was able to figure out the color issue from the pictures, and the first one from it being in the Path menu. :)

    The other issue I ran into (in case it helps someone else) is that you have to turn off the stroke before interpolating. :)

    Anyway, thank you so much! I'm a programmer, and I'm trying to teach myself some of the graphics/art side, and this was the most helpful tutorial I have found!

    ReplyDelete
  7. Hi. Thanks so much for the tutorial! I am however running into a little creativity block. I creating most of my space ship although It looks empty and I'm not sure what else to put. Could you give me some suggestions? Here's what it looks like so far. http://prntscr.com/fuhmr1

    ReplyDelete
    Replies
    1. Hi... I took your design and made a quick makeover and posted it on the blog. I hope the added info and the reference is helpful.

      Delete
  8. Wow, dude. Thanks for sharing. I learned a lot!

    ReplyDelete