AuthorTopic: Beginner - Lights, shadows, borders etc.  (Read 5125 times)

Offline Kroan

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

Beginner - Lights, shadows, borders etc.

on: May 02, 2018, 10:19:24 am
Hi all,

I'm very new to making pixel art myself but we started on a game we want to make and so I have to understand and learn it. ;)

I made some stuff but something seems odd with it but I can not figure what exactly.
My guess it that the light and shadows that  I try to apply are just not good.

I read about it and tried to follow the advices I found but still I can not get it right...

Before we start, I also have to admit that I'm not that creative so what I do is for example if I need a car I Google for a picture of a car and then use it as the template for my resources. That means that perhaps something is also wrong with my borders of the sprites.
Also with the borders, I'm not sure what is the best practice here, I always use black lines but I saw that many are using darker colored lines instead so when to use what and what's more common?

Anyway here are some examples that I made and feel that something is wrong but can not really figure what it is

A mushroom house


A car


A front door


A tree I made (I feel this one looks quite ok)


Who can give me tips what's wrong and how to improve it?

Thank you all and many greetings

Kroan

Offline EduardoPras

  • 0001
  • *
  • Posts: 36
  • Karma: +0/-0
  • If it is damn hard it is probably right
    • Eduardo_pras
    • illpalazzo-sama.deviantart.com
    • View Profile
    • Beta 2 Games Studio

Re: Beginner - Lights, shadows, borders etc.

Reply #1 on: May 02, 2018, 04:06:02 pm
Hello Kroan!

First of all welcome to Pixelation.
I hope you find what you are looking for.

I’ll try to help you a bit.

First let me start with things I think you got right.

1)Using reference:
This is great. It will allow you to understand how reality works.
But don’t just trace it. Try to interpret it.(It is hard at first but you’ll get the hang of it.) 

2)Clean Lines:
Your outlines are really clean in the car piece and that means you’ve already studied a bit about the medium. Nice Job!

Now for some things i think you can improve upon:

1)Avoid Pillow Shading like you've done on the mushroom tree (Google this term. It will be more clear than I am able to explain)
2)Pixelart does not have the same resolution as reality. You must simplify your forms and shapes, try to make them as effective as you can.

I am still studying metals and probably someone else can explain them to you better but...
That aside, I’ve made a paint over of your car and made some more notes.
Here are the notes:



And here’s my take on it:


I’ve tried to avoid using the outline color in the inside and simplified the shapes.
It could use more work but I think you can get the idea.
I’ve also enhanced the contrast.

Hope it helps.

Offline Kroan

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

Re: Beginner - Lights, shadows, borders etc.

Reply #2 on: May 02, 2018, 05:29:58 pm
Hi EduardoPras,

thank you very much for the feedback!

Your car looks much better than mine. I will give it a shot again tomorrow, unfortunately I don't have time today. But I'll let you know the result ;)

What you say makes sense and I already read about the pillow shading problem but, for me personally, it is hard to understand how to place the light and shadows in order to follow the 3D shape.
On the mushroom house as you mentioned for example, how to understand what's good to do?

I see that the roof is over the base of the house so it will throw a shadow onto the house. The base is like a cylinder so my idea now is that to the sides the house must become darker (as it goes around).
But what about the light? The roof is on top so it will get a lot of light (which I tried to show with the pillow shading :D) and perhaps if I make the "base" of the house like a cylinder the middle will be lightened?

I don't know :D I will give it a shot tomorrow, too!

Thank you for your help very nice!

Greetings

Kroan

Offline Kroan

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

Re: Beginner - Lights, shadows, borders etc.

Reply #3 on: May 03, 2018, 08:15:14 am
Hi again, I tried and here are the results:

The house



I removed the chimney as I felt it is interrupting the sprite somehow. Also I replaced the big window in the middle with a clock. I think it looks more interesting that way. I straightened the lines a bit (for example the stone wall around the center, the roff a little)
and tried to follow your advice with thr 1,1,1,2,2,3 etc.
With the light and shadows I'm still not sure, the car I had your great example so it was easier to do.
I did as I said put the dark on the sides in order to go around and tried to lighten up the center (but one can not see it that easily)

The car


I decided to make it blue. Also I have to admit I followed a lot your example with the light and shadows therefore I feel they are good here :) of course some stuff I had to change as I didn't make the lines one to one with yours.
I also straightened the lines of the rear seat window, and tried to make the lines in general a bit more smooth.
I'm quite happy with the result but on the other hand, this wouldn't be that great without your example ^^

Thoughts?

Thank you and greetings

Kroan

Offline Zanorin

  • 0010
  • *
  • Posts: 189
  • Karma: +0/-0
    • http://pixeljoint.com/p/177874.htm
    • BasmatiPixel
    • View Profile

Re: Beginner - Lights, shadows, borders etc.

Reply #4 on: May 03, 2018, 09:18:18 am
Alright, I had redone the whole house but my editor just crashed  :yell: so I just redid the roof which demonstrates best what "should be done".

The way you shaded the roof makes it look very much like a cone, and not like something round and full. When you shade, not only you need to determine a light source (I guess you chose top-right corner there ?), but you need to think "How would a real-world object of this kind of shape react when lit this way ?". And since you don't necessarily know the answer, use references.
If you google "ball shading" (since the roof has a roundish general shape), you'll see this :

Analyze and apply that to your mushroom roofs, and you've already got something that looks more like something round and less like a cone (quick and dirty but you see what I mean) :
Half a noob figuring out stuff.

Offline Kroan

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

Re: Beginner - Lights, shadows, borders etc.

Reply #5 on: May 03, 2018, 11:10:16 am
Thank you Zanorin,

that was what I tried to do in my first version but ended up falling into the pillow shading trap.

I made a new version of the house.
I tried to do what you suggested, I also tried to apply it to the stairs and I removed the gras from the house as I felt it looks more like a bulk of green than anything else.



I have the impression we're getting close :) perhaps some final touches (like making the stones of the door and the ring around the house like the ones of the wall I made now) thank you very much so far!

Greetings

Kroan

Offline EduardoPras

  • 0001
  • *
  • Posts: 36
  • Karma: +0/-0
  • If it is damn hard it is probably right
    • Eduardo_pras
    • illpalazzo-sama.deviantart.com
    • View Profile
    • Beta 2 Games Studio

Re: Beginner - Lights, shadows, borders etc.

Reply #6 on: May 03, 2018, 12:20:41 pm
I am Glad to be able to help Kroan.

The problem I see in your lighting in the mushroom is that it is gradually radiating in circles.
I interpret that it means that the light source is a small point in space really close to the object.

If you are representing sunlight it comes as straight rays directly from the sun. Imagine you have a giant plane emmiting light from every inch of its surface from far away.

That said, the sun makes hard shadows if the day has no clouds.(Due to the way light behaves.)
Remember, light always travels in straight lines.

So, I guess your main problem is choosing a lightsource and sticking with it.

Don’t be afraid of using big shapes of color and always follow the geometry of your forms.

You seem to be missing what a teacher of mine once called “Depth Opportunities”.
Whenever you can suggest volume do it! It will make your shapes more readable.
How does that translates to drawing?
For example(There are infinite more examples):
Make sure when one thing is overlaping another there is space to its suggested mass.
If it feels like a 3D game clipping you lost depth.

Also, I’ve give a bit more of space between the mushrooms’s features. Information needs breathing space.

I’ve also removed the inner outlines, I personally feel that the “outlines” work better on the outside but this is not a rule. There are artists that use internal lines with the same weight of the outlines. I just happen to think it is a bit distracting and color changes can do the same work.

Zanorin also gave a very valuable tip that I think it is fundamental:
If you can’t find an exact reference find something similar. That saved my hide many times now since it is almost impossible for an artist to know the bahavior of every single material by heart.

Here’s my take on the Mushroom House you posted yesterday I started editing it before you posted your new version:



I’ve cheated a little bit in the lighting but I did not have the time to find a better solution.

Hope it helps you a bit.

Offline Kroan

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

Re: Beginner - Lights, shadows, borders etc.

Reply #7 on: May 03, 2018, 01:50:50 pm
EduardoPras you're killing me!
This looks amazing!

I tried to make my own version just like that. I really liked your window in the roof that gives an aditional shadow so I tried to make that one, too!



I didn't change the roof anymore and I kept the third light point on the roof, too.
I made the house a bit higher to give the clock in the middle more room and made the windows on the sides a bit smaller to have more room to the frontdoor.

Greetings

Kroan

Offline Zanorin

  • 0010
  • *
  • Posts: 189
  • Karma: +0/-0
    • http://pixeljoint.com/p/177874.htm
    • BasmatiPixel
    • View Profile

Re: Beginner - Lights, shadows, borders etc.

Reply #8 on: May 03, 2018, 03:12:51 pm
The horizontal row of stones in the middle of the tower is completely straight, but the tower is supposed to be cylindrical. You should bend it so it follows the curve.
Half a noob figuring out stuff.

Offline Kroan

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

Re: Beginner - Lights, shadows, borders etc.

Reply #9 on: May 04, 2018, 07:32:52 am
Thank you Zanorin you're right I missed that one!
I fixed it now and it looks good :)
Thank you all.

One question, more from a organizing point of view:

How does it work here at Pixelation? If in the future I have more stuff that I want to discuss about, is it better to open a new Thread for it or should I use this one as my "showroom"?

Thank you again and greetings

Kroan