Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: Squinky on Sat 01/12/2012 04:24:25

Title: Help me make these images better?
Post by: Squinky on Sat 01/12/2012 04:24:25
Hey folks,

I'm working on a new game. I have a good start, but some things bother me about my current art. First, it looks a good bit blurrier in AGS, and second....well it kind of sucks.

My process is to wacom in the lines in photoshop, color on another layer, and add black shade layer that I drop the opacity on. The look is close to what I want, and the work load is bearable. I'm hoping to find some solution that won't add countless hours to my work. The thickness of the black lines is kind of bothering me a bit too.

Here are some samples:

(http://img692.imageshack.us/img692/791/crit3.jpg)
(http://img405.imageshack.us/img405/5951/crit1l.jpg)
(http://img10.imageshack.us/img10/6206/crit4.jpg)

So any advice stylistically or whatever would be appreciated. I don't want to get the game 70% done and hate the art.

Thanks for any help.
Title: Re: Help me make these images better?
Post by: Anian on Sat 01/12/2012 07:58:58
I'd make the lines a bit thinner on everything and I think you messed up the perspective on the first two images.
Don't know what's with the blurriness.
Title: Re: Help me make these images better?
Post by: Squinky on Sun 02/12/2012 03:39:49
Heres a shot with thinner lines. Still giving me blurriness inside AGS. I think I will totally start over on those other two.

(http://img62.imageshack.us/img62/564/crit5.jpg)

Thanks. Anybody know what the blurriness in AGS might be?
Title: Re: Help me make these images better?
Post by: Spummy on Sun 02/12/2012 08:37:45
(http://i.imgur.com/9oFCS.jpg)

I'm uncertain of what the thing I've circled in red is. Is that a park bench? If it is I should be able to see the surface of the seat because it seems below the horizon line.

Now, this could be a matter of opinion, but the clear area on the right behind those bushes seems distractingly empty by comparison to the left side. It could do with some trees I think.
Title: Re: Help me make these images better?
Post by: Squinky on Mon 03/12/2012 02:17:11
Yes, I agree. I'll make those changes. Thank you.
Title: Re: Help me make these images better?
Post by: Armageddon on Mon 03/12/2012 07:32:19
Don't do the sky gradient, the blue was nicer, maybe add some clouds. The first background is passable, the second looks nice overall except for the perspective, so it does need to be redrawn. The character need to be shaded like the environment and he needs sharper lines. The 'blurriness' is just from Flash I believe, it's not too bad but if it bothers you I'm sure there's a way to fix it.

Everything is looking very interesting though, add an extra sidewalk segment on the right side of th bus stop scene because the piece is too long. Maybe change the colour of the mountains too, or maybe make it entirely trees with some rocky steppes.
Title: Re: Help me make these images better?
Post by: Eric on Mon 03/12/2012 12:24:53
The thinner lines help, I think. The perspective is a bit off, but not so as to make the game unplayable. I still think those images look pretty good. I like your style.

If you do go with a gradient on the sky, have it go vertical instead of horizontal. Start lightest at the ground, and get more saturated as you go up. You might want to fade the mountains a little too, to simulate atmospheric distortion.
Title: Re: Help me make these images better?
Post by: Darth Mandarb on Mon 03/12/2012 14:20:24
It warms the bottom of my [cold, dead and evil] heart to see you working on a game again.  Love the eye patch.

Eric pretty much said, verbatim, what I was going to suggest.
Title: Re: Help me make these images better?
Post by: Squinky on Mon 03/12/2012 21:32:13
Thanks guys!

I will try all the advice given. I'm kinda feeling iffy on the gradient anyway. I tried clouds, but well I did them poorly.

Darth
Thanks dude! It's weird right? I'm finally feeling the desire to do it again. I'd love to see you working on some new isometric thing again. That would be like hopping in a time machine.
Title: Re: Help me make these images better?
Post by: Squinky on Mon 03/12/2012 22:34:16
(http://img546.imageshack.us/img546/3464/crit6.jpg)

Okay, changes made. Still not sure about the sky. I originally had the hills the other color because here in Idaho, hills look like that :)

Any more advice folks?
Title: Re: Help me make these images better?
Post by: Anian on Mon 03/12/2012 22:41:56
I'd change back to non-gradient skies and maybe add in some nice white fluffy clouds instead. Gradient seem kind of out place when everything else is not gradiented (or at least not so obviously) and it kind of clashes with the overall style (not much, but it does.
Title: Re: Help me make these images better?
Post by: tamatic on Wed 05/12/2012 00:11:56
Quote from: Squinky on Mon 03/12/2012 22:34:16
(...)

Okay, changes made. Still not sure about the sky. I originally had the hills the other color because here in Idaho, hills look like that :)

Any more advice folks?
Hi, you might indeed want to use a non-gradient. The old blue seemed fine to me.
Also, the old saturated background hills appeal to me much more, both in colour and consistent style. So unless you are going to use some parallax effect on those I would consider going back to the old.


Hmmm also, the perspective here (http://img405.imageshack.us/img405/5951/crit1l.jpg) almost demands the sky not to show at all.
Title: Re: Help me make these images better?
Post by: Darth Mandarb on Wed 05/12/2012 02:01:56
I think the problem I have with the style is that the lack of "depth" makes it hard to tell where your focus should be.  The background (sky, hills, trees) feel as important to the composition as the foreground elements which confuses my eyes a bit!  It's already been suggested but I did a [very] quick paint-over to illustrate it better:

(http://www.twin-design.com/ags/help/squinky_help_01.png)

- did two layers of "depth" on the hills
- kept a gradiated sky but did it with far less colors to maintain the shading style you're using
- this really separates the fore/back ground areas and draws your eye into the foreground which (I'm assuming) is where the game play is focused anyway!

I didn't have the dev-file here so this was done with the wand tool (in photoshop) thus it's a little sloppy but it's just an example!

On a side note; this style you're using just screams for some parallax scrolling!  I would love to see this moving in parallax!
Title: Re: Help me make these images better?
Post by: Armageddon on Wed 05/12/2012 03:00:23
That's a great edit Darth, I think the last problem I see with the background is the bus stop, I can't say that I've ever seen a concrete bench like that with an ad, or a bus stop constructed with two concrete blocks, it's very odd looking.
Title: Re: Help me make these images better?
Post by: Squinky on Wed 05/12/2012 04:38:32
The sky seems to be a matter of debate :)

Tamatic
I've since restarted that image. Thank you.
Darth
Thanks dude! I tried out your stuff, hope I'm on the right track. I don't think I'll play with parallax right now, trying to keep it simple.
armageddon
Dude, those things are everywhere :)
(http://img607.imageshack.us/img607/2839/newbustopchange.png)
Title: Re: Help me make these images better?
Post by: dactylopus on Wed 05/12/2012 05:10:56
I love the progress here.  The early versions were nice, but you've come a long way already.

I like the style.  Simple, but every scene full of details.
Title: Re: Help me make these images better?
Post by: Honza on Wed 05/12/2012 12:08:40
I like it, the style is clean and pleasing, looks professional. It's also the kind of style with which you can pass a certain amount of sloppiness as a gimmick ;), so I wouldn't mind the perspective too much - but I'm not one to judge perspective, I suck at it myself.

The signs on the last picture don't look right to me. I think the right side of the sign on the left shouldn't be visible, and the top and bottom of the sign on the right should be skewed according to it's sides.

I would also add a lights layer (a yellow fill layer in overlay mode) in the same way you've added shadows, and play with curves/brightness/saturation layers a bit to lighten the image and give it a more coherent feel. A little like this:

(http://hvavra.sweb.cz/newbustopchange_02.png)

(just a quick example of what I mean, I'm sure you can do much better)
Title: Re: Help me make these images better?
Post by: MurrayL on Wed 05/12/2012 12:17:29
Yes, there's a lot to be said for lightening the lines. Black tends to cut into foreground elements too much (although I'm being a bit hypocritical by saying that, since Astroloco makes copious use of black outlines).
Title: Re: Help me make these images better?
Post by: Squinky on Wed 12/12/2012 05:53:38
Whelp, I'm back on this issue again.

Just finished a Plants versus zombies marathon and it is making me dislike my backgrounds :)

So, looking at what I've posted, is there any advice on going non black lines, in a timely manner? I've done the whole digital painting thing a bit, and it takes forever....

(http://img809.imageshack.us/img809/2125/girlshooterfinished.jpg)
So I mean, I know how to do the "blend it in for goddamn hours" way, but I would love to see if anyone has some simpler advice. Something to break up all the flat color and get rid of the black lines?

Thanks again for any help. And for all the help so far.
Title: Re: Help me make these images better?
Post by: tamatic on Wed 12/12/2012 11:35:23
Quote from: Squinky on Wed 12/12/2012 05:53:38
Whelp, (...)  advice. Something to break up all the flat color and get rid of the black lines?
Hmm, well one handy practice (for finding the right values and having control over them) is: just copy/paste everything as layer a few times. Then play mostly with the color levels, hue, saturation, and lightness settings.  Then use the eraser tool with a few well picked brushes to get the desired effect. Working your way down rather then up. Taking away: rather than adding.
This approach is handy for some fast revisions of colour etc. but also works, for example, when you are working with multiple source material. -Like when merging photographs of different quality.

Another simple idea is adding subtle, less cartoony fog, light-fall, smoke and so on "on top" of your scenery. So it can just kinda hang there fluidly muffling the cartoony contours. However it's easy to overdo that.

And another idea is confronting the hate a bit rather then going around it. Hehehe. What is wrong with a crisp, consistent, down to earth cartoony style? Why not focus on making it better in its own domain? Why go wide, more or less put time in concealing it? Since that will indeed bring the extra hours of work.
Btw, not saying adding more depth and polishing it is a bad idea. But I kinda wondered what you hated about it initially.
Title: Re: Help me make these images better?
Post by: Daniel Thomas on Wed 12/12/2012 18:32:29
I'm not sure what you are asking, what happens when you remove the black lines(supposing it's on a layer)? Do you mean that when you remove the lines the shapes just blend together with to real edge? If so the solution is ofcourse to make the shape contrast each other more. For a very obvious example, look at Rembrandt, he uses light against dark a lot. You don't have to go so extreme, but it's just an idea that using light against dark creates a clear edge. And it is not a bad thing that some edges blend in to eachother(also refered as a 'lost edge'). Look at any image/painting and see how they did it, look how they create a good silhouette and make the object pop

http://www.abcgallery.com/R/rembrandt/rembrandt88a.jpg
http://www.dan-o-saur.com/blog/wp-content/uploads/2011/02/2647.jpg

As for a process, you can use the lasso tool and fill the shapes using the lines as a guide(I think this is what Bill Tiller have done for the Vampyre Story background, you can see they have very crisp edges). That way you have a mask anytime you want to tweak a shape/edge.
Title: Re: Help me make these images better?
Post by: EchosofNezhyt on Wed 12/12/2012 18:40:58
That second drawing is amazing.
Title: Re: Help me make these images better?
Post by: Anian on Wed 12/12/2012 20:06:58
This is a more of a moral support thing comment:
past few days I've been working on the competition entry for Background challenge (frozen water theme) and I am also very much more comfortable with drawing outlines (and the scene I'm doing is with loads of shades of white and blue basically) and it's really hard for me to switch into that "mode". My mind knows what I want it to look like but keep struggling with the number of shades I'm using.

As Daniel said, I think it is a matter of working with high enough contrast between colors that is the trick. For example shadows make a good outline tool, they give shape but also indicate where an object ends without a separate outline.

Btw by responses, Squinky, I hope you didn't get the wrong idea about your drawings, as far as I'm concerned the usage of outlines was not the problem, but the fact that they were (they're look really good to me now) a tad too thick and formed shapes of their own and so overpowered the shapes they were supposed to surround. The digital painting you posted is a lower level of those backgrounds, even though it too has some good aspects.
Title: Re: Help me make these images better?
Post by: tamatic on Wed 12/12/2012 20:26:19
Yeah, apparently people in this thread now think about losing outlines all together? But what MurrayL meant was that black has the habit of jumping into the foreground. Especially when you start to do the whole bells and wistles thing with desaturated backgrounds for depth effect.
The easy way is to adjust the brightness along with it. But I am not convinced this is the real hate Squinky has for these images yet. lol :D
Title: Re: Help me make these images better?
Post by: Daniel Thomas on Thu 13/12/2012 01:58:25
I didn't read the question as he wanted to keep the lines.
But if you want to keep the lines but not have it so dark, you can always paint the outline as a darker color of the object. I also like to punch up the saturation of the line, but it depends on what effect you're looking for.
Another, obvious, one would be to make the lines thinner, or introduce line variation. That way they will seem more interesting. tamatic mention that they jump in to the foreground, you can make the foreground with thicker/darker lines, and thinner/lighter as you go back, like Monkey Island 3 - that way there is a clear distinction of where in the space the lines belong.



Title: Re: Help me make these images better?
Post by: Honza on Thu 13/12/2012 12:21:39
If you have the lines in a separate layer, can't you just reduce their opacity?

Or maybe something can be done by playing with masks. If you post the lines layer without colors, I'd like to give it a try :)
Title: Re: Help me make these images better?
Post by: Darth Mandarb on Thu 13/12/2012 15:22:17
Some really good advice in here (and accurate).

However... my advice? 

KEEP THOSE OUTLINES MAN!!  I love the way it looks and it just screams personal style!  (though I do agree that line weight could work really effectively to separate the depth)

Just my $0.02!
Title: Re: Help me make these images better?
Post by: Squinky on Fri 14/12/2012 04:32:57
Thanks a ton guys!

I’ve looked over all the comments and I think the wisest choice for me is to keep the black lines. I actually took some advice from this thread and lightened some of my images. This weirdly made a world of difference to me. Also, I’m messing with the yellow shade layer and liking what I see, although it is very easy to overdo.

Thanks  guys! I’ll try to post an updated picture soon!
Title: Re: Help me make these images better?
Post by: dactylopus on Fri 14/12/2012 08:58:23
Good to hear that you're keeping the black lines.  I like the outlined style a lot.