[2D Game Art for Programmers] - tutorials for free graphic tools inkscape and gimp

Discussion in 'Feedback Requests' started by DayDream, Oct 12, 2011.

  1. DayDream

    Indie Author

    Joined:
    Nov 17, 2004
    Messages:
    278
    Likes Received:
    0
    Hi guys...

    I just can't not do it... it must be in the genes... even after taking time off from game art I felt the urge to do something... and I would love to hear your feedback on this idea: a series of tutorials for inkscape, gimp and the likes for 'non-artists' - working with basic shapes to 'construct' art elements rather than freehand drawing them.

    Introduction:

    Creating your own art work is a necessity for most independent developers. Due to the budget restraints or in a lot of cases the complete lack of a budget a lot of young indie game developer can't afford to hire an artist or buy art assets.
    With the help of free software like gimp, inkscape or milkshape (just to mention a few) combined with a basic understanding of art creation pretty much anyone can create impressive and professional looking results.

    I will try to start with some basic ideas and exercises to improve this kind of understanding. All of the examples will be based on free software. The workflow will be similar if you work with different software like Adobe Illustrator, Adobe PhotoShop, CorelDraw or others. I will try to mention the different approaches for those software packages. With the vast variety of software available at the moment and the sheer endless amount of our art creation tools and techniques it is impossible to cover everything but I will try to keep my examples basic enough to work with the software of your choice.

    Let me start by clarifying some common believes when it comes to creating game at.

    "I need expensive software tools to create truly professional game art."
    No, you don't! There is a huge amount of free tools available that offer a true alternative. Gimp is one of the most well-known examples in the 2D realm as well as Blender in 3D field.
    For the full time game artist upgrading your tools to ' industry standards' makes sense. Especially when collaborating with others using standard file format makes sharing and exchanging art a lot easier.

    "Buying an expensive tool will automatically create better art."
    No, it won't. It's always the artist creating the art that makes it great. Given the simplest tools like pen and paper a good artist can still create stunning pieces, while the most sophisticated tools still need a good artist to create something special.

    "I can't do art. I can't even draw a stick figure."

    Yes, you can. This is where modern computers to come in and allow you to create good game art without having a graphic arts degree.

    "My game is good as it is. I don't need art."
    Yes, you do. The independent game market is getting larger and larger and is attracting a lot more attention than it used to a few years back. In order to stand out your game should be the whole deal - have a great game play as well as rewarding and consistent visuals and matching sound and music.


    Common hurdles

    High Expectations:
    One of the main problems facing independent developers are the expectations they have themselves. For single developers or small studios it is close to impossible to create AAA games match the quality of big studios. You should try and aim for the stars. Making games is all about that. Do the best you can and constantly push your limits and improve your skills...
    but thinking realistically and adjusting your expectations to your abilities and your budget is a big step towards creating the best game you can create.

    Defining a theme:
    A lot of the time game creation happens with a spark. We have an idea of how the game playing might work and start creating. Creating very concrete in game art in the early stages of development can often lead to problems as the game evolves during development.
    It usually helps to create a working game engine/ core gameplay before starting on the actual art work. Once you know how the game plays it's a lot easier to find a visual theme that encompasses the whole game.

    Consistency:
    Creating a consistent look and feel is a key element in creating a good gaming experience. It starts with the icon, the splash screen and goes all the way through to the game over screen. The most common mistakes are:
    - the overuse of fonts - stick to 2 or 3 for the whole game UI [unless the font is used in images as lettering for shops/ packaging/ etc.]
    - drastic changes in light and contrast - keep screens on a similar level - you can progress through the colour realm - usually starting out less colourful and getting more colourful for boss/ epic scenes
    - photoshop effects - they are fun but a lot of 'artist' think the more you use the better the image will be... My suggestion is limit your use of fx to a few and keep reusing and variating them
    - lighting - look at your screens and imagine the light sources needed to create the highlights, shadows of your ingame/ ui elements... It's scary how often you find lights being randomly used for objects that appear on the same screen

    Losing focus:
    It is only easy to get carried away with your art work as well as game play or coding. We all tend to focus on those elements we like to do while neglecting those we don't. A good example is generally the menu system/ UI. These usually are implemented at a late stage in the development with motivation at a low point. Yet they are one of the first things the player gets to see and they can greatly define the look and feel of the game.


    [​IMG]

    [​IMG]


    [​IMG]
     
    #1 DayDream, Oct 12, 2011
    Last edited: Oct 12, 2011
  2. DayDream

    Indie Author

    Joined:
    Nov 17, 2004
    Messages:
    278
    Likes Received:
    0
  3. DayDream

    Indie Author

    Joined:
    Nov 17, 2004
    Messages:
    278
    Likes Received:
    0
    [​IMG]

    [​IMG]

    Note:
    The gradient tool also allows for a change in alpha / transparency of the fill. The target in a new fill gets set to 0% alpha. Change it to full visibility in the RGB tap.

    PS.:
    Just to try the simplicity of the tutorials I rebuild the inkscape samples with a free ipad application and got to nearly identical results. So for those guys out there who prefer to keep it mobile - it should still work [with slightly different commands and minor twists in the workflow]. The same principles will work with Adobe Illustrator or Corel Draw. The tools might be called differently but the result should be very similar.

    [​IMG]

    [​IMG]
     
  4. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    Inspiring. Glad to see you back again Chris.
     
  5. vbovio

    vbovio New Member

    Joined:
    Jun 8, 2009
    Messages:
    87
    Likes Received:
    0
    awesome tutorials, thanks a lot Chris!
     
  6. rioka

    rioka New Member

    Joined:
    Aug 23, 2005
    Messages:
    275
    Likes Received:
    0
    Good stuff! And it's good to see you back again. C:
     
  7. GolfHacker

    GolfHacker Member

    Joined:
    Oct 4, 2006
    Messages:
    1,073
    Likes Received:
    0
    That's very useful stuff! Thanks a bunch!

    If you're taking requests, I would love to see a tutorial about how you would take a pencil drawing/sketch, scan it in, and convert it to clean vector line art. I do this constantly, and I'm sure there's got to be a quicker and easier way than how I currently do it.
     
  8. rioka

    rioka New Member

    Joined:
    Aug 23, 2005
    Messages:
    275
    Likes Received:
    0
    The fastest way: Inkling. Draw on paper and export as vector or bmp images to Illustrator, Sketchbook Pro or Photoshop. Layers also included! This is just going to roll out by Wacom this month. $199USD. Other than that, I would answer but I'm curious to see if there's another way myself. :waits for DayDreams answer:

     
    #8 rioka, Oct 14, 2011
    Last edited by a moderator: Sep 19, 2015
  9. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    Just went on the Christmas list. Sadly, I don't think my scribbling will improve any... but I want one just the same.
     
  10. tolik

    Original Member

    Joined:
    Sep 20, 2004
    Messages:
    1,407
    Likes Received:
    0
    [2D Game Art for Programmers] tutorials for free graphic tools inkscape and gimp: find someone who will do art for you and focus on programming
     
  11. Jack Norton

    Indie Author

    Joined:
    Jul 28, 2004
    Messages:
    5,130
    Likes Received:
    0
    Welcome back tolik, we missed your sarcasm posts! :D
    p.s. where have you been all this time ?
     
  12. tolik

    Original Member

    Joined:
    Sep 20, 2004
    Messages:
    1,407
    Likes Received:
    0
    Just released a couple top grossing titles on android and ipad and finishing a new AAA title.
     
    #12 tolik, Oct 14, 2011
    Last edited: Oct 15, 2011
  13. RichHW

    RichHW New Member

    Joined:
    Oct 15, 2009
    Messages:
    85
    Likes Received:
    0
    Then you woke up ;)
     
  14. DayDream

    Indie Author

    Joined:
    Nov 17, 2004
    Messages:
    278
    Likes Received:
    0
    That's the kind of arrogant answer that really DOESN'T help those indie developers out there who want to do their own art and can't afford an artist... All I asked for is some feedback on the setup of these tutorial and if they would be considered helpful - not some smartass replies...

    @golfhacker - I will reply in a bit... sidelined at the moment...
     
    #14 DayDream, Oct 14, 2011
    Last edited: Oct 14, 2011
  15. j0d1

    j0d1 New Member

    Joined:
    Jul 19, 2011
    Messages:
    64
    Likes Received:
    0
    Added to my bookmarks.
    That tells everything.
    The layout of the tutorial is effective; the comments are helpful.
    Really good job!
    I'm not a fan of the art style though but that doesn't change the quality of your tutorials.
    If you could show other styles, that would be great.
     
  16. tolik

    Original Member

    Joined:
    Sep 20, 2004
    Messages:
    1,407
    Likes Received:
    0
    Haha, caught ya. Check out my sig.

    The tutorial is really great, I haven't seen anything that simple and detailed covering both cute vector characters, tile sets, objects, environment and even the general artwork. I'd use the art you've created to create a playable demo. I'll recommend this tutorial to everyone who does crappy art. I suggest to post it to Gamasutra, I'm sure you'll get expert blogger + featured for that (if you don't have it already).
     
  17. Addictive 247

    Indie Author

    Joined:
    Jul 27, 2004
    Messages:
    394
    Likes Received:
    0
    Have to agree with everyone - these tutorials are fantastic!
    As I have no artistic talent at all in terms of designing graphics I would welcome more tutorials with the same kind of simple to follow steps.

    Great work - thank you
     
  18. Jamie W

    Original Member Indie Author

    Joined:
    Apr 16, 2006
    Messages:
    1,211
    Likes Received:
    0
    Agreed, great stuff Chris. Must have a good natter sometime. Cheers, Jamie.
     
  19. DayDream

    Indie Author

    Joined:
    Nov 17, 2004
    Messages:
    278
    Likes Received:
    0
    Thanks, guys... I am glad you like them... I am having a lot of fun doing them and I decided to keep the tutorials in one easy to maintain spot.

    http://2dgameartforprogrammers.blogspot.com/

    More fun with gradients...
    Let's take the gradient fill to the next level and work with colour and alpha to create a simple underwater background.

    [​IMG]

    [​IMG]

    Hint:
    Use the 'Page Up' and 'Page Down' key to adjust the order of objects [e.g. place the sea anemones in the mid ground behind the light rays.]


    I would like to add more life to the underwater scene and create some fish. The basic principle when adding 'real' elements to a vector scene is to look at the shapes and 'deconstruct' them into basic elements like the circle, square, rectangle or ellipse.

    I usually do a quick google image search for a reference image to get a better idea what I am going to create. In this case the 'yellow reef fish' search came up with a nice yellow longnose butterfly fish.
    It works great as the main body is kind of squarish and the front has a triangular shape.

    [​IMG]


    The same approach works the same with far more complex elements. It's a matter of seeing the 'building blocks'.
     
    #19 DayDream, Oct 16, 2011
    Last edited: Oct 16, 2011
  20. Elder

    Elder New Member

    Joined:
    Jul 6, 2007
    Messages:
    143
    Likes Received:
    0
    Impressive tutorials DayDream! Hey, I hope your health is fine, I saw on SpriteAttack you took a long break. Take care, I miss working with you.
     

Share This Page

  • About Indie Gamer

    When the original Dexterity Forums closed in 2004, Indie Gamer was born and a diverse community has grown out of a passion for creating great games. Here you will find over 10 years of in-depth discussion on game design, the business of game development, and marketing/sales. Indie Gamer also provides a friendly place to meet up with other Developers, Artists, Composers and Writers.
  • Buy us a beer!

    Indie Gamer is delicately held together by a single poor bastard who thankfully gets help from various community volunteers. If you frequent this site or have found value in something you've learned here, help keep the site running by donating a few dollars (for beer of course)!

    Sure, I'll Buy You a Beer