Would love a tutorial for "shading"... I started doing some of my own artwork, but kinda gave up because I can not figure out when/how to do the various shadings like what you do. Without the shading it all looks bland & flat.. Any tips?
@arkonllf - For what? The mario style guy? I have not written that one yet...
@JGary321 - I have the art for a basic shading tutorial - I would just need to sit down and write it... Would something like this help (with the step by steps and explanations of course)?
That would definitely help... I have trouble figuring out where & why to shade.. I think if I could just get that concept down I could do some good stuff. I can do the drawings, but they look flat ya know?
If you're doing requests chris! I would find a UI tutorial amazing! Or a nice Tutorial on who to make a planet But I think everyone would love a UI tutorial!
This has to be one of the most requested tutorials has to be on shading. How do you do it? Why do it? Where do I add shadows and what colours do I use? Lighting is vast area and the possibilities are shear endless. In this tutorial I tried to cover the absolute basics with one of the simplest shapes - the ball. If used correctly light and shadow will make your scene / object look a lot more spectacular, real and visually appealing.
Let's start with a circle - I know this must be the 100s time I have written those words - but it's still the easiest object to work from.
The result is not realistic and not overly cartoon like. If you aim for the latter cell shading with 2 to 4 colours will do the trick. To get the ball to look more realistic the highlight elements would require more work - and a Google image search for something like Christmas decoration.
Let's take a quick look at the effect of changing light on our ball.
As the ball gets closer to the light source the effect of the light should be stronger - lighter highlights and darker shadows with the effect of the secondary light source less visible.
One question I have been asked a lot concerns the choice of colours. The very basic shading would be by simply using white for the highlights and black for the shadows. In my opinion the result usually looks dead and cold. I prefer warmer light and my favorite shadow colours are dark purple or dark brown (with adjusted alpha). That way you get warmer tones and more lively colours.
Then again the scene you are trying to influences the colours of your light and shadows. E.g. an underwater scene would look very odd with brown or red shadows - you would choose a white/ blue/ green colour-scheme. A summer afternoon would have a light yellow/ gold/ dark brown or deep red palette - while a winter's day would have white/ blueish grey and black.
Here are a few examples of the effect colours have on the shading of an object.
In the end it's a matter of playing around, finding the right light to set the mood for your scene and then stick to it for all the objects in your scene. Have fun with it! Try to find something that enhances the mood and the atmosphere you are after and don't be afraid to try 'odd' colour combinations.
Note: If you create game assets keep changes to the scene in mind. To avoid having to create dynamic lighting - which looks awesome but is a lot of work on the coding as well as the art creation side of things - I would suggest sticking to a standard light setting (e.g. top down - that way flipping a character horizontally to walk in the opposite direction does not mean creating new assets to keep the scene looking consistent). It can also be very helpful to separate the shadows form the objects for allow jumps and walking on non-horizontal surfaces to look right.
I hope this was helpful so far and I plan to add to this tutorial in future with some more advanced objects and more complex shapes. Enjoy!
@poorcollegedev - pixelart is a whole different kettle of fish and it is very different skills - a lot more artistic and less constructed... I would love to do those... but there are still a bunch of topics to cover with vectors and a digital book to write
@SpriteAttack thank you very much for the tutorials. I have really learned a great deal from your insights. I know it takes a lot of time to put these together. Your efforts and insights are greatly appreciated!
@SpriteAttack my wife could not believe that I created this, and better yet I actually impressed my 8 year old! Thanks man, and keep doing what you're doing!
I'm a noob to GameSalad but I'm working on an idea and had a question about Graphics.
If I wanted my Characters Eyes to blink when he was touched on the screen, do I have to have to draw the image with 3 different frames of the eye closing..
So the first image will be the the character with eyes open. Then second image with they eyelid half closed Lastly the image with his eyes fully closed.
Is this the correct way to create an animation of a character?
Sorry for the newbie question, thanks for the advice.
Can you make a tutorial on how to make a cabinet (as in filing cabinet) thanks. i've tried it with adobe fireworks and it doesn't look right also looks too cartoony with inkscape.Can you show it with a applied a gradient with inkscape? thanks
Hi guys... I will try to catch up... It's been a mad few month and I am finally catching my breath... and finding time to answer... I will write some new tutorial this weekend and hopefully keep them coming on a weekly basis again...
Hi guys... I will try to catch up... It's been a mad few month and I am finally catching my breath... and finding time to answer... I will write some new tutorial this weekend and hopefully keep them coming on a weekly basis again...
Comments
here is my first one-
@JGary321 - I have the art for a basic shading tutorial - I would just need to sit down and write it... Would something like this help (with the step by steps and explanations of course)?
But I think everyone would love a UI tutorial!
If used correctly light and shadow will make your scene / object look a lot more spectacular, real and visually appealing.
Let's start with a circle - I know this must be the 100s time I have written those words - but it's still the easiest object to work from.
The result is not realistic and not overly cartoon like. If you aim for the latter cell shading with 2 to 4 colours will do the trick. To get the ball to look more realistic the highlight elements would require more work - and a Google image search for something like Christmas decoration.
Let's take a quick look at the effect of changing light on our ball.
As the ball gets closer to the light source the effect of the light should be stronger - lighter highlights and darker shadows with the effect of the secondary light source less visible.
One question I have been asked a lot concerns the choice of colours. The very basic shading would be by simply using white for the highlights and black for the shadows. In my opinion the result usually looks dead and cold. I prefer warmer light and my favorite shadow colours are dark purple or dark brown (with adjusted alpha). That way you get warmer tones and more lively colours.
Then again the scene you are trying to influences the colours of your light and shadows. E.g. an underwater scene would look very odd with brown or red shadows - you would choose a white/ blue/ green colour-scheme. A summer afternoon would have a light yellow/ gold/ dark brown or deep red palette - while a winter's day would have white/ blueish grey and black.
Here are a few examples of the effect colours have on the shading of an object.
In the end it's a matter of playing around, finding the right light to set the mood for your scene and then stick to it for all the objects in your scene. Have fun with it! Try to find something that enhances the mood and the atmosphere you are after and don't be afraid to try 'odd' colour combinations.
Note:
If you create game assets keep changes to the scene in mind. To avoid having to create dynamic lighting - which looks awesome but is a lot of work on the coding as well as the art creation side of things - I would suggest sticking to a standard light setting (e.g. top down - that way flipping a character horizontally to walk in the opposite direction does not mean creating new assets to keep the scene looking consistent). It can also be very helpful to separate the shadows form the objects for allow jumps and walking on non-horizontal surfaces to look right.
I hope this was helpful so far and I plan to add to this tutorial in future with some more advanced objects and more complex shapes. Enjoy!
-Max
@poorcollegedev - pixelart is a whole different kettle of fish and it is very different skills - a lot more artistic and less constructed... I would love to do those... but there are still a bunch of topics to cover with vectors and a digital book to write
Wonderful!
Could you do a template/tutorial of the "Zanda" hero character? Thanks!
If I wanted my Characters Eyes to blink when he was touched on the screen, do I have to have to draw the image with 3 different frames of the eye closing..
So the first image will be the the character with eyes open.
Then second image with they eyelid half closed
Lastly the image with his eyes fully closed.
Is this the correct way to create an animation of a character?
Sorry for the newbie question, thanks for the advice.
Send and Receive Data using your own Server Tutorial! | Vote for A Long Way Home on Steam Greenlight! | Ten Years Left