2D Game Art for Programmers: More fun with gradients...

"Life is too short to make bad art."

## Sunday, October 16, 2011

### 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.
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.
The same approach works the same with far more complex elements. It's a matter of seeing the 'building blocks'.

Get the source art (svg file) of this tutorial for
USD 3.00

#### 12 comments:

1. MoonlightRain October 17, 2011 at 3:32 PM

   Thanks for the tutorial.
   It's easy to understand and very useful for a cant-draw-even-if-my-life-is-depended-on-it game programer like me. :)
   Hopes there's a lot more coming. If you can do some fantasy theme background how-to, I'd be eternally grateful.

   Reply Delete
2. SpriteAttack October 17, 2011 at 4:18 PM

   Thanks for the feedback... and I am sure I could give the fantasy topic a try...

   Reply Delete
3. Thomas March 6, 2012 at 1:32 AM

   You are really good with Inkscape.
   It is soo simple, but most don't even realize this. You make it easy.
   Thanks!

   Reply Delete
4. DiverDownDesigns March 6, 2012 at 11:17 AM

   It would be nice if you could tell us what colors you use :) Thanks
   -DiverDown

   Reply Delete
   Replies
   1. Chris Hildenbrand March 8, 2012 at 2:42 PM

      I am doing on better... I am giving the source files away... not totally free but for less than a cup of coffee... ;)

      Delete
   2. DiverDownDesigns March 12, 2012 at 2:38 PM

      I'm glad you are charging a fee...your art is amazing! Now for that scuba diver :)
      Seriously, your art is very, very good and I hope a lot of people buy your packs.

      Delete
   Reply
5. LeonardDeveloper (Thermo-Apps) March 18, 2012 at 12:37 AM

   Love the way we can buy these now!, I bought a few chris!, I'd love some more animation tutorials like the stuff you do for DBA!,
   Thanks,
   Jack

   Reply Delete
   Replies
   1. Chris Hildenbrand March 21, 2012 at 10:14 AM

      thanks, Jack... I am working on another animation tutorial... but am a little backlogged and got some work to do as well as have fun with tutorials... :)

      Delete
   Reply
6. Bart August 19, 2012 at 4:46 PM

   I had one problem with the gradient of the first rectangle (water) changing colour together with the gradient of the duplicated rectangle (ground). I found the solution here: http://inkscape-forum.andreas-s.net/topic/115631. When you duplicate the rectangle, you have to (with the second rectangle selected), select the "linear gradient" symbol in the Fill and Stroke window and then click the "duplicate" button. Then, when you Edit the gradient, only the duplicate object is changed.

   Reply Delete
7. benjamin805 September 29, 2012 at 1:48 PM

   Here is my attempt at this tutorial, it's not exactly right, but it's a start for me. These tuts are cool, i'm learning to be creative.
   http://i46.photobucket.com/albums/f135/inthe805/fish.png

   Reply Delete
8. benjamin805 September 29, 2012 at 1:50 PM

   Here is a screen shot of a game i'm working on.
   http://i46.photobucket.com/albums/f135/inthe805/game_zpsb989c4e9.jpg

   Reply Delete
9. CaptainKraft June 16, 2013 at 6:29 AM

   I am working my way through the tutorials and just finished this one today. I am pretty impressed with what came out. Check it out here if you want to see it: http://t.co/Fsw5jwBdfU
   There was one thing that I had trouble with and maybe you can help me out a bit. When I created the anemone I had a ton of separate shapes. What is the easiest way to alter the colors when you have so many separate pieces?

   Reply Delete

Add comment
Load more...

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)