Trying out drawing backgrounds, criticism appreciated

Started by Shaneaphone, Sat 03/08/2024 22:06:48

Previous topic - Next topic

Shaneaphone


I wanted to see if my lowly art/animation skills are getting a bit better. Did this today just forming ideas and practicing a bit. Would really appreciate more experienced eyes and brains. Thanks

Factory-3" border="0
First-town-port-2" border="0
Hovel-Inside-2" border="0
Long-Road-3" border="0
north-beach-4" border="0
Peninsula-map-2" border="0
Pub-3" border="0

Rich Brown
Beardy Ramblin Games

Snarky

Good stuff, perfectly serviceable for a non-commercial game. If you did all this in a day, you're in a good place.

Some stuff you could work on:

- In this cartoony style, I think the colors could be more vivid. Everything looks a bit "washed out" to me (except that some of the darker red-browns and blues appear over-saturated compared to the other colors).
- You should be more conscious of and bolder about contrasts. In the third image, it's hard to make out the details of the couch and shelf because you're using very close shades of red/brown (and the shelf also tends to blend in with the floor). Similarly, in the last image I didn't even see the table because it blends in almost entirely with the floor. Meanwhile, in the second image the crates and nearer poles of the pier "pop" out of the image: they contrast very strongly with the rest, in a way that doesn't seem intentional, while the far poles don't have enough contrast against the sea: different hue, but nearly the same value.)
- You're using basically no shadows or shading. It's as if there are no defined light sources. This creates a rather flat feeling and doesn't give any sense of mood or atmosphere.
- In the third and the last images, the angles are so high that most of the screen is taken up by the floor, which is boring. Lower the camera so that more of the screen is filled by things in the room and on the walls.
- You have some bad tangents, where the edges of different things line up so that they seem like part of the same shape. Most obviously on the right side of the first image, where two different struts of the walkway line up exactly so that one seems to continue the other. (I also question the engineering of this construction; it would make more sense if the same beams did continue down all the way to the floor.) But also the top of the building roof in picture four lining up with the image edge.

To spot some of these issues, it may be helpful to examine the images by hue, saturation and value. To examine the value, you can just desaturate the image (convert it to grayscale), while hue and saturation are a bit trickier: in Photoshop you can put a flat gray layer below the image layer and set the blend mode of the image layer to "Color" to see the Hue and Saturation together. These tend to be so closely linked that you don't need to examine them individually, but if you add another layer with a perfectly pure color (e.g. pure red) on top and set its blend mode to "Saturation" you can see just the hue contrast, while diffing the image with a desaturated version of itself gives just the saturation contrast.

Otherwise, I recommend Ben's articles:
http://ben304.blogspot.com/2017/03/using-contrast-to-affect-visibility.html
http://ben304.blogspot.com/2017/01/low-camera-angles-in-adventure-game.html
http://ben304.blogspot.com/2017/02/tangents-and-why-they-should-be-avoided.html
https://adventuregamers.com/articles/view/an_artists_analysis_using_lighting_to_cionvey_mood
(And more...)

AndreasBlack

#2
I would say google one-point perspective and two-point perspective. You seem to go by feel and not by "rules". I know rules suck generally, yeah i get it, i dislike em' too :-D but when it comes to drawing, getting those angles of objects in a room to a better state will improve your stuff immensely. Take it from one that used to draw "by feel", now i'm much more proud of the bakgrounds. :) 

Here's an example of a bakground drawing it is entirely from imagination no reference images were used. Just basic knowledge of vanishing points is used, and about 5 years now of pixelart-creation from time to time! (nod) *Shameless plug*. I've keept the vanishing lines so you can get a feel for how it's done. :)

https://imgur.com/1NV1E77



Danvzare

Quote from: AndreasBlack on Sat 10/08/2024 12:37:52I would say google one-point perspective and two-point perspective. You seem to go by feel and not by "rules". I know rules suck generally, yeah i get it, i dislike em' too :-D but when it comes to drawing, getting those angles of objects in a room to a better state will improve your stuff immensely. Take it from one that used to draw "by feel", now i'm much more proud of the bakgrounds. :) 
That is some really good advice.
I should know... because I'm one of those fools that keeps going by feel.
One of these days I'm going to learn how to draw properly.  (laugh)

Snarky

I never want to discourage people from learning perspective construction, but at the same time I don't really think perspective is that much of a problem in these backgrounds. There's only one object that jumps out at me as being seriously off-perspective (the shelving unit in the third picture). Most of the screens seem to be drawn using more-or-less parallel projection rather than one-point perspective, which is perfectly valid. (There are some cheats to get the horizon in the picture, but that's a common trick.)

Shaneaphone

Ok first of all - thank you so much for taking the time to have a look. Especially brilliant being directed to some good reading. I am entirely guilty of making stuff up. I haven't read/watched anything yet. My wife has been an immense help, she can actually draw really well. That was a first day. I've been working on it pretty much every spare minute (I'm off work for summer) since. Though I've been sort of making more stuff up. Decided to have a go at a primative way of doing shadows by selecting shapes and using gradients to drag shadows and then blur. Slowly starting to figure out the questions, the links provided I'm sure will provide lots of answers (and questions I never knew to ask. I will peruse while on a bit of getaway to the mountains.

I've also animated some stuff.

I'll just leave it here because I'd be interested to see what you make of them.

Thanks again, incredibly helpful and supportive as ever.


Bridge-1" border="0
Factory-1" border="0
First-town-port-1" border="0
Hovel-Inside-1" border="0
Knobbiton-inside-1" border="0
Munpin-House-1" border="0
north-beach-1" border="0



Rich Brown
Beardy Ramblin Games

Shaneaphone

Quote from: Snarky on Sat 10/08/2024 11:27:48- In this cartoony style, I think the colors could be more vivid. Everything looks a bit "washed out" to me (except that some of the darker red-browns and blues appear over-saturated compared to the other colors).
- You should be more conscious of and bolder about contrasts. In the third image, it's hard to make out the details of the couch and shelf because you're using very close shades of red/brown (and the shelf also tends to blend in with the floor). Similarly, in the last image I didn't even see the table because it blends in almost entirely with the floor. Meanwhile, in the second image the crates and nearer poles of the pier "pop" out of the image: they contrast very strongly with the rest, in a way that doesn't seem intentional, while the far poles don't have enough contrast against the sea: different hue, but nearly the same value.)
- You're using basically no shadows or shading. It's as if there are no defined light sources. This creates a rather flat feeling and doesn't give any sense of mood or atmosphere.
- In the third and the last images, the angles are so high that most of the screen is taken up by the floor, which is boring. Lower the camera so that more of the screen is filled by things in the room and on the walls.
- You have some bad tangents, where the edges of different things line up so that they seem like part of the same shape. Most obviously on the right side of the first image, where two different struts of the walkway line up exactly so that one seems to continue the other. (I also question the engineering of this construction; it would make more sense if the same beams did continue down all the way to the floor.) But also the top of the building roof in picture four lining up with the image edge.

To spot some of these issues, it may be helpful to examine the images by hue, saturation and value. To examine the value, you can just desaturate the image (convert it to grayscale), while hue and saturation are a bit trickier: in Photoshop you can put a flat gray layer below the image layer and set the blend mode of the image layer to "Color" to see the Hue and Saturation together. These tend to be so closely linked that you don't need to examine them individually, but if you add another layer with a perfectly pure color (e.g. pure red) on top and set its blend mode to "Saturation" you can see just the hue contrast, while diffing the image with a desaturated version of itself gives just the saturation contrast.




Amazing - thank you! Lots of these I think I know how to fix. After doing some reading I'm sure it certainly will.

The spaces at the bottom are generally because of GUI - the player won't really see them in some rooms. Some rooms do have more detail there if I know a cutscene will happen etc.

I did find a handful of sprites from a Welsh time travel game I was working on - those were the ones you spotted as contrasting too much (crates). No idea how I wasn't blind to that. There's just so much isn't there? Really handy to have objective eyes. Like I said I've been so obsessed with the project, I probably need some time away  :undecided: I'll keep working on it!
Rich Brown
Beardy Ramblin Games

Shaneaphone

Quote from: AndreasBlack on Sat 10/08/2024 12:37:52I would say google one-point perspective and two-point perspective. You seem to go by feel and not by "rules". I know rules suck generally, yeah i get it, i dislike em' too :-D but when it comes to drawing, getting those angles of objects in a room to a better state will improve your stuff immensely. Take it from one that used to draw "by feel", now i'm much more proud of the bakgrounds. :) 

Here's an example of a bakground drawing it is entirely from imagination no reference images were used. Just basic knowledge of vanishing points is used, and about 5 years now of pixelart-creation from time to time! (nod) *Shameless plug*. I've keept the vanishing lines so you can get a feel for how it's done. :)

https://imgur.com/1NV1E77



 :shocked: What devilry is this!?

Brilliant - I think this will be very handy! Thank you!!
Rich Brown
Beardy Ramblin Games

SMF spam blocked by CleanTalk