First Trial at Pixel Art (Background and Character)

Started by Binak Versailles, Fri 14/12/2018 13:19:32

Previous topic - Next topic

Binak Versailles

Hi everyone,


I have been a long time watcher of these forums, they are really fascinating and inspiring to watch from afar.


I have now decided to try and start my own AGS adventure (allow me this one pun).


Here is my first relatively serious attempt at a pixel background (with a static person too).
[imgzoom]https://i.imgur.com/6KTlhdp.png[/imgzoom]


I know much of this is wonky, so I'd appreciate some technical (or other) advice to help me out.


Regards


Binak Versailles.

ManicMatt

Not bad really! The biggest thing that sticks out to me, is the line going from the door to the floor. It looks like you drew a line over your background. Either remove the line from the floor, or try having it get bigger as it gets closer to the foreground, maybe that will fix it? As the line is the same scale from the foreground to the background.

Creamy

Hi Binak,
Nice sci-fi background you've got here  :smiley:

Some suggestions:
[imgzoom]http://creamy.r.c.f.unblog.fr/files/2018/12/6ktlhdp-.png[/imgzoom]
- the second post of the right barrier is off. It should be placed where the diagonals of the 2 other posts meet.
- the lines on the bridge seem random and mess up your perspective.
- the middle windows should appear wider than the side windows if the building is circular.
- the trees look too symmetrical for my taste. This is particularly glaring because they are twisted.
 

Binak Versailles

#3
Hi ManicMatt and Creamy!

Thank you very much for your help, your suggestions were both great and the exact type of technical help that I need. I really do appreciate your time in going through and giving some constructive feedback.

I've tried to incorporate your suggestions in this new edit - I think the simple tips you provided have helped immensely. Thank you.

[imgzoom]http://i.imgur.com/tHnuuAR.png[/imgzoom]

Kind regards,
BV.

selmiak

looking a lot better now.
I suppose you read up on lights and shadows some more. I mean, your lightsource is on the left side (it seems), why arethere these straight line shadows on the building on the left and not on the right. where do the shadows come from.l The shadows on the trees seem okay, but the trees themseves have shadows, the left tree a more diffure one than the tree on the right, but judging from the shadow of the middle rail the shadow of the right tree is just wrong.
what is in the background of the building? What is the overall light condition? Is it noght? Then everything is too bright, and you'd need more lightsources. Is the building inside some bigger scifi complex, so no daylight in here? Same, too bright overall or too few lightsources shown...

Binak Versailles

Hi selmiak,

Again, really helpful and useful feedback - exactly the type I was hoping for! Thank you.

Quote from: selmiak on Sun 16/12/2018 13:41:11
I suppose you read up on lights and shadows some more.

Would you be kind enough to point me in the direction of some useful resources (guides, tutorials etc.) about lighting? I'd greatly appreciate it.

Also, regarding lighting, when you approach an illustration, do you compose the image starting with lighting sources, then work on the actual features of the illustration? Should I first decide where light sources are, then commence sketching out the structures etc.?

Kind regards,
BV.

Snarky

Nice job, especially for a first attempt! I like your designs and some of your color choices.

A couple of tricks I would recommend to help you see whether your backgrounds are working (apart from the old "look in a mirror"/flip the canvas trick, which wouldn't do much good in this case):

-Defocus your eyes to look past all the detail and line work, and just look at the overall composition.
-See how it looks in black and white. This helps you focus on how your image uses brightness values.

Here's a an illustrative edit that does both:

[imgzoom]https://i.imgur.com/MS2Bbvj.png[/imgzoom]

With this it becomes very obvious that the extreme brightness of the building overwhelms and flattens out any other value distinction in the picture, and that the symmetry and flat shading makes it appear almost more as a geometric 2D pattern than an object in 3D space (even in the original version, I'm not really sure which bits are sticking out and which bits are pushed in). So yes, I would focus on how light hits the major surfaces or leaves them in shadow, in order to block out the main shapes clearly and tie the scenery together.

selmiak

Quote from: Binak Versailles on Sun 16/12/2018 22:54:54
Also, regarding lighting, when you approach an illustration, do you compose the image starting with lighting sources, then work on the actual features of the illustration? Should I first decide where light sources are, then commence sketching out the structures etc.?
this depends on the scene, of course I start with a sketch on paper mostly, or really rough scribbles in photoshop. Then I block in the basic forms of what I want to show with flat colors. Then I already think about lightsources, when there is sunlight you mostly think about where the sunlight is coming from and where the shadows fall and what color it will be or what time of the day it is. If it is a dark scene you think more about where to place the artificial lightsources and what you use as a lightsource. Then you maybe rearrange things to give room for another lightsource or make an object drop an even more interesting shadow. then refine it.

for your image I'd maybe add some pillars to the building to cast more shadows onto the building so you can better show the form of the building and maybe add another, a bit dimmed secondary lightsource behind the building, amybe on the right this time...

tutorials
https://www.deviantart.com/fox-orian/art/Quick-Lighting-Fox-s-Way-254337276
this covers everything very brief

https://www.deviantart.com/justiraziel/art/CW04-value-shading-359817233
also good

These basic light principles apply to pixelart too, but are a bit harder to do when you have a limited palette. but watching "making of" things is always interesting like this:
https://www.deviantart.com/mediocre-mel/art/Pink-Dragon-Process-292065032

or this:
https://www.deviantart.com/crativia/art/Pixel-Tutorial-Shading-By-Kiwinuptuo-623447761
very expert level :)



just a quick overpaint with how the light is cast from that lightsource...
[imgzoom]https://i.imgur.com/ORF5dBk.png[/imgzoom]

Binak Versailles

Hi Snarky and selmiak,

This is very brilliant and so very helpful. I really do appreciate your time and effort in responding with such informative feedback.

Thank you both very much, this is exactly what I'd hoped for.

BV.

Binak Versailles

Quote from: selmiak on Mon 17/12/2018 23:13:18
just a quick overpaint with how the light is cast from that lightsource...
[imgzoom]https://i.imgur.com/ORF5dBk.png[/imgzoom]

Hi selmiak,

Can I ask, how did you do this overpaint? How did you get the shadow to naturally go from light to dark (that is, what tools on your image programme do you use?) I am using GIMP, for reference. I have tried to make a new layer, paint it black and then turn up the transparency, but I can't get teh same effect. I would appreciate your help.

Kind regards,
BV.

VampireWombat

#10
I know I'm not the one you asked, but I am a Gimp user. In Gimp you can use the Gradient tool in a new layer and change the Gradient to FG to Transparent with black as your selected color. Then drag from right to left trying different angles until you find one you like. Stop a little short of the left side to maintain full transparency on the left most area. You'll probably want to adjust the layer Opacity too.

I imagine the rest is covered in the linked Deviantart Tutorials.

selmiak

I use photoshop and this it not pure pixel art anymore when you shade like this. Pure pixel art has a very limited palette. But shadings like these look nice too ;)

some more good tuts:
https://www.deviantart.com/tag/kiwinuptuotutorial

http://gas13.ru/v3/tutorials/  (click through the image icons on the right side, the AA tut is also great)

http://pixeljoint.com/forum/forum_posts.asp?TID=11299

https://web.archive.org/web/20130604154027/http://www.barnettcollege.com/tutorial1.htm

Danvzare

Quote from: selmiak on Wed 19/12/2018 18:02:30
I use photoshop and this it not pure pixel art anymore when you shade like this. Pure pixel art has a very limited palette.
Not only that, but pure pixel art requires you to be aware of almost every single pixel. Which is one of the reasons why you need a limited palette.

But if it makes your art look good, and is easy to do, who cares if it's pure pixel art right?  :-D

Binak Versailles

To everyone who has taken the time to help me out here, thank you so very much!

It has been such good help and feedback.

VampireWombat - thank you for the GIMP-specific tip! Very helpful!

selmiak - your links to resources and advice have been excellent, thank you.

Danvzare - I agree with you completely.

I have a lot to get on with and learn from now! Thanks again everyone.

BV.

ArsCreativa

Hi!, just an idea for the illumination of the scene.
It never hurts to use real references to improve your art, look at this photo on how the lighting works on this building at night.



Usually, unless a building is self-illuminated, will have more light at street level than on the upper floors.

SMF spam blocked by CleanTalk