AuthorTopic: [WIP] Having trouble understanding shading.  (Read 5805 times)

Offline PixelPlant

  • 0001
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile

[WIP] Having trouble understanding shading.

on: May 15, 2015, 06:50:17 am
So far, for most of my pixel art I have been making the light source at the upper right. I make the left and bottom quadrant darker colors (outlining) and the top and right quadrant of whatever I am making lighter colors (outlining). This clearly only works with simple shapes, but I need to make more complex pixel art and I just don't know how to imagine where the shading goes. First rock looks ok, but when I make a bigger rock it looks terrible. Tree is just posted so you can see the type of artwork I am making. Most tutorials for shading just end up telling me to imagine where the shadow and shading goes. It really doesn't help at all. So, I have just been winging it. Go easy on me, I just started getting into pixel art.

First Rock:
http://s1340.photobucket.com/user/zippy231/media/1%20Rock_zps3aeojy9s.png.html

Bigger Rock:
http://i1340.photobucket.com/albums/o735/zippy231/3%20Rock_zpswrigruqf.png

Tree: http://i1340.photobucket.com/albums/o735/zippy231/1%20Twin%20Tree_zpsfh6wigcd.png
« Last Edit: May 15, 2015, 06:54:43 am by PixelPlant »

Offline yaomon17

  • 0011
  • **
  • Posts: 660
  • Karma: +0/-0
    • YaomonKS
    • taiya.sun
    • http://pixeljoint.com/p/28472.htm
    • yaomon17
    • valedev
    • playvale
    • View Profile
    • portfolio

Re: [WIP] Having trouble understanding shading.

Reply #1 on: May 15, 2015, 07:35:01 am
You are looking too much with your brain and not your eyes. Don't think of the rock as a rock and then go about drawing it based on what you think a rock should look like. Think of it as a cluster of forms/blobs, and just draw each simple form as you see them, eventually resulting in the full rock.

This is probably about as helpful as the cruddy "imagine where the shadow goes" tutorials, but the best advice I can offer is to study basic shapes and how they are shaded, and then look for those shapes as you are going about your day. I can see from where I am sitting a coke bottle with a cylindrical cap than curves into a conic bottleneck that curves back into a cylinder that goes into a one-sheeted hyperbloid that ends with 4 hemispehres on the bottom. If you know how to shade each of those individually, drawing the coke bottle becomes a lot easier. In the rock, you see I picked out easy prisms to shad and formed the rock from the prisms as opposed to trying to form a rock from a blobby shape that is difficult to imagine.

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: [WIP] Having trouble understanding shading.

Reply #2 on: May 15, 2015, 12:16:49 pm
To be a bit more precise than Yaomon's post:

This is an issue of art fundamentals -- specifically, construction and understanding of light.
Page 88 from Andrew Loomis' now freely available book 'Successful drawing' shows the basic way that the brightness you see a surface with is dependent directly on
the angle between the light source and the object (in 3d space):



(it's dependent on distance from the lightsource, too, but if the sun is your lightsource, then attenuation over distance is extremely slight and can be ignored.)

This image from page 71 may also be helpful:


As Yaomon implies but does not actually state, deconstruction is the skill of breaking down objects into 3d primitives (sphere, cube, cylinder, cone, pyramid, torus) and construction is the reverse -- building an object out of 3d primitives, based on memory or reference. For example Yaomon's construction (which he doesn't really actually show) seems to be a collection of overlapping boxes. I drew some rocks earlier based on repeated chisel shapes (box with angled point). These are simple ideas but once they are properly put together it is much easier to turn them into coherent, convincing rocks.

However you opt to attack this problem, I'd suggest getting a few photo references to check your work against.
« Last Edit: May 15, 2015, 12:59:42 pm by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: [WIP] Having trouble understanding shading.

Reply #3 on: May 15, 2015, 10:56:47 pm


Another thing you might want to consider is a cear seperation between light planes and shaded planes.
Once you found out where the lightsource is planes facing towards it will be lighter. Planes facing away from the lightsource will be covered in shadow.
You can start with a simple 2-tone seperation
once you start using more colors you can model out more and more details, but you always try to keep the initial "big" light/shadow setup if you are adding more values.
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: [WIP] Having trouble understanding shading.

Reply #4 on: May 16, 2015, 12:19:50 am
PixelPlant please use the image button/img tags when u post ur pics.
Also FYI I used to use photobucket too but its full of ads and pretty crap compared to imgur.com.
There's probably other good ones but I've been happy with imgur.

and when u post the art please dont scale it up as the forum has built in scaling

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: [WIP] Having trouble understanding shading.

Reply #5 on: May 16, 2015, 03:06:52 am
Quote
Most tutorials for shading just end up telling me to imagine where the shadow and shading goes. It really doesn't help at all.
lol, here's a secret for you: the reason all the tutorials are saying the same thing is because that's really all there is to drawing. There's no magic trick that's going to make you understand how to imagine forms and shadows in your mind and then put them down on paper. Follow the tutorial's advice for five or ten years, and then you'll see results, hahah! ;)

Everyone in here gave you good advice already, too. The problem you're having now is that you're not yet skilled enough to pull things out of thin air, but you're still trying to do it. Grab a reference, and draw what you see. Don't draw what you think you see - beginner's make the mistake of taking a reference of a tree, thinking "okay, I got my reference. Leaves are green, trunk is brown," and then picking bright green and brown MS-paint colors and putting them down, which looks horrible. If you study your hypothetical tree reference, you'll notice that the trunk ISN'T brown in the picture - it might be gray, blue, green, or any other color depending on the lighting and what kind of moss and such is growing on it. Same with the leaves. Annnnnd, I just scrolled up to look at your rock and notice you actually have the classic brown and green tree too. Either I'm psychic, or I understand beginners, hahah. Take my advice, look at a real photograph of a tree. Then, completely ignore that it's a tree. Pretend the picture you're looking at is some ridiculous splatter of random colors bullshit. Then try copying those random colors and shapes, without thinking about the fact that you're drawing a tree. Beginners get tripped up because they don't actually draw what their reference is teaching them. Use the color picker if you're having a hard time seeing what the true colors in the drawing are, even. Just copy your references exactly, and try to think about why those colors and shapes are appearing.

There's no trick to drawing, but with hard practice and lots of time, you'll get better. Don't slack off when you practice, either. Half an hour of REAL practice is worth five hours of half-assedly screwing around. If you have a headache and you want to cry when you're done studying for half an hour, you're probably on the right track. Good luck. X'D
« Last Edit: May 16, 2015, 03:13:19 am by jams0988 »

Offline PixelPlant

  • 0001
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile

Re: [WIP] Having trouble understanding shading.

Reply #6 on: May 16, 2015, 05:50:33 am
You are looking too much with your brain and not your eyes. Don't think of the rock as a rock and then go about drawing it based on what you think a rock should look like. Think of it as a cluster of forms/blobs, and just draw each simple form as you see them, eventually resulting in the full rock.

This is probably about as helpful as the cruddy "imagine where the shadow goes" tutorials, but the best advice I can offer is to study basic shapes and how they are shaded, and then look for those shapes as you are going about your day. I can see from where I am sitting a coke bottle with a cylindrical cap than curves into a conic bottleneck that curves back into a cylinder that goes into a one-sheeted hyperbloid that ends with 4 hemispehres on the bottom. If you know how to shade each of those individually, drawing the coke bottle becomes a lot easier. In the rock, you see I picked out easy prisms to shad and formed the rock from the prisms as opposed to trying to form a rock from a blobby shape that is difficult to imagine.

Ok, I'll stick with this mindset. I'll just find a reference of shading on all basic shapes. The frame after your outline, I understand how the shading works. But from the next frame, I don't know how you would know to add an even darker shading on  on the bottom portion. Do you draw everything out on paper then pixelate it or do you draw everything directly on your computer?

Offline PixelPlant

  • 0001
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile

Re: [WIP] Having trouble understanding shading.

Reply #7 on: May 16, 2015, 06:01:16 am
Quote
Most tutorials for shading just end up telling me to imagine where the shadow and shading goes. It really doesn't help at all.
lol, here's a secret for you: the reason all the tutorials are saying the same thing is because that's really all there is to drawing. There's no magic trick that's going to make you understand how to imagine forms and shadows in your mind and then put them down on paper. Follow the tutorial's advice for five or ten years, and then you'll see results, hahah! ;)

Everyone in here gave you good advice already, too. The problem you're having now is that you're not yet skilled enough to pull things out of thin air, but you're still trying to do it. Grab a reference, and draw what you see. Don't draw what you think you see - beginner's make the mistake of taking a reference of a tree, thinking "okay, I got my reference. Leaves are green, trunk is brown," and then picking bright green and brown MS-paint colors and putting them down, which looks horrible. If you study your hypothetical tree reference, you'll notice that the trunk ISN'T brown in the picture - it might be gray, blue, green, or any other color depending on the lighting and what kind of moss and such is growing on it. Same with the leaves. Annnnnd, I just scrolled up to look at your rock and notice you actually have the classic brown and green tree too. Either I'm psychic, or I understand beginners, hahah. Take my advice, look at a real photograph of a tree. Then, completely ignore that it's a tree. Pretend the picture you're looking at is some ridiculous splatter of random colors bullshit. Then try copying those random colors and shapes, without thinking about the fact that you're drawing a tree. Beginners get tripped up because they don't actually draw what their reference is teaching them. Use the color picker if you're having a hard time seeing what the true colors in the drawing are, even. Just copy your references exactly, and try to think about why those colors and shapes are appearing.

There's no trick to drawing, but with hard practice and lots of time, you'll get better. Don't slack off when you practice, either. Half an hour of REAL practice is worth five hours of half-assedly screwing around. If you have a headache and you want to cry when you're done studying for half an hour, you're probably on the right track. Good luck. X'D

I am making pixel art for a game. I don't think I want to have the tree to be any more complexed and I want the look of bright green leaves. The style of the artwork I was planning to have is simple. I did look at reference pictures of trees, but the artwork would look very complex if I did it that way. Do you reference real world images or pixel art? And do you have a reference image for very piece of art? My game has unrealistic aspects in it and I want to be able to draw without reference.



The artwork I want is very simple. Here is a rhino I made.




PixelPlant please use the image button/img tags when u post ur pics.
Also FYI I used to use photobucket too but its full of ads and pretty crap compared to imgur.com.
There's probably other good ones but I've been happy with imgur.

and when u post the art please dont scale it up as the forum has built in scaling

Will do, can't figure out how to unzoom an image.
« Last Edit: May 16, 2015, 06:47:09 pm by PixelPiledriver »

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: [WIP] Having trouble understanding shading.

Reply #8 on: May 16, 2015, 07:33:13 am

I am making pixel art for a game. I don't think I want to have the tree to be any more complexed and I want the look of bright green leaves. The style of the artwork I was planning to have is simple. I did look at reference pictures of trees, but the artwork would look very complex if I did it that way.
You seem to have a common misunderstanding about references. References are there for your understanding, not to directly copy. When you look at a reference and it's too complex for what you want, you simplify it-- for example, when you look at a tree, you can often simplify it into a few spherical/ellipsoid forms, with a series of tapering cylinders for the trunk and major branches.

One technique used for this is to squint, so the image becomes vague and blurred, and you only perceive the broad major forms involved.

With a good understanding of form and a good reference, your current rock, tree, etc could become much simpler than it is AND much more believable.

Quote
Do you reference real world images or pixel art?
Real world, in general. Referencing art is something that needs a good deal of caution, understanding, and double-checking (otherwise you could be copying someone else's mistakes).

Quote
And do you have a reference image for very piece of art? My game has unrealistic aspects in it and I want to be able to draw without reference.
You might have multiple reference images for any given piece of art. Thinking of art as being like making a collage, is good to illustrate how you find different qualities you like in different references, and combine those qualities you are looking for into your final artwork. So I would say, no matter how unrealistic what you want to do is, there are many, many possible references you can use for it, and using them will help make your final work more consistent and interesting.

To be blunt, drawing without reference is MUCH MUCH harder than drawing from reference, it requires you to be much better at the fundamentals of art, than drawing from a reference, and this remains true no matter what style you're going for.

In my experience, trying to draw without reference, while lacking those basic art skills, leads to lots of poking and prodding, hoping something ends up looking right, but not really knowing what would make it look right. ie. a huge time-sink.


re: dark parts:

The dark parts that yaomon adds to his example later are adding detail to the form for greater interest; this is generally known as modelling (you can also see modelling being added in the example Cyangmou posted). He is carving away some parts and building up others -- sculpting the basic forms he started with. Episode 3 in Moatdd's Youtube playlist The Basics of Digital Drawing and Painting does a good job of explaining the basics of modelling.

re:unzooming:

Not sure what you are using to make your images, but any decent free image editor, for example GIMP, should have a 'scale image' function. In the case of GIMP, this function is found in the Image submenu on the menu bar.
In most programs, in addition to letting you select the new size of the image, you have a choice of 'interpolation method' or something like that : for pixel art, 'None' (or 'nearest neighbor') is the correct choice.


« Last Edit: May 16, 2015, 07:41:54 am by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline invent

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
  • pixels
    • invent71
    • inventivedreams
    • View Profile
    • Amiga Blog

Re: [WIP] Having trouble understanding shading.

Reply #9 on: May 16, 2015, 11:21:27 am
Hello,

This might not be the best reference but the site Deviantart has some step by step tutorials on how to build a scene which including shading techniques.

Conceptcookie artist shows some examples
http://conceptcookie.deviantart.com/art/Fundamentals-Value-Shading-Demo-351688153
http://conceptcookie.deviantart.com/art/Exercise29-BAcktoBasics-482527864
http://conceptcookie.deviantart.com/art/Exercise-26-Results-Shading-Gems-Step-by-Step-462210728

I tried to find a tutorial on lighting various objects but failed for you, sorry. 
But if you search for tutorials, shading etc you might find more :) 

« Last Edit: May 16, 2015, 11:32:29 am by invent »
Game Developer:
Amiga/PC/Switch

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: [WIP] Having trouble understanding shading.

Reply #10 on: May 16, 2015, 07:34:37 pm
Will do, can't figure out how to unzoom an image.

clicking = zoom in

strg / ctrl + click = zoom out
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter