WIP: Sketch-style map: C&C please
Printed From: Pixel Joint
Category: Pixel Art
Forum Name: WIP (Work In Progress)
Forum Discription: Get crits and comments on your pixel WIPs and other art too!
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=17764
Printed Date: 30 September 2025 at 10:04am
Topic: WIP: Sketch-style map: C&C please
Posted By: Raf
Subject: WIP: Sketch-style map: C&C please
Date Posted: 03 January 2014 at 1:36pm
I'm working on a level select screen for a game I'm making. It's pen on paper sketch style. Got a first attempt at it done, but want to hear the opinion of you guys on a couple of issues that've popped up thus far. Now, the issues I'm having, are: 1. The mountains feel kinda wonky. I just can't put my finger on why... 2. I was told that I should take the branches out of the trees, as it's not a cross cut (I was basing myself on these resource pics, which resulted in that "cross-cut": http://image.shutterstock.com/display_pic_with_logo/300199/105415385/stock-vector-doodle-forest-set-trees-105415385.jpg - http://image.shutterstock.com/display_pic_with_logo/300199/105415385/stock-vector-doodle-forest-set-trees-105415385.jpg and http://us.123rf.com/400wm/400/400/gollli/gollli1006/gollli100600161/7258724-doodle-trees-set-1-baobab-sequoia-acacia-poplar-oak-fur-tree-maple.jpg - http://us.123rf.com/400wm/400/400/gollli/gollli1006/gollli100600161/7258724-doodle-trees-set-1-baobab-sequoia-acacia-poplar-oak-fur-tree-maple.jpg ). If I take the branches out, the whole thing becomes bland. I tried sprucing it up with shading, but shading in this style doesn't quite work. I tried to shade using lines instead of surfaces, which works partially, but I couldn't finish it properly (I'm adding that version below). So how can I make the trees more interesting if I take the branches out?  3. There's some serious need for anti-aliasing here. The problem with it here, is that whenever I try, it looks like a drop of water fell onto the paper and smudged the ink. That's not the effect I'm going for, so how do you anti-alias something in this style? Thanks in advance! |
Replies:
Posted By: r1k
Date Posted: 03 January 2014 at 3:50pm
I tried AAing it, maybe you could show your attempt though |
Posted By: H|F
Date Posted: 04 January 2014 at 12:05am
|
I would suggest using 1px paint brush and look at how the computer AAs and then be meticulous and line by line as and edit it also so that maybe not every single line connects or some pass through by a little bit. Just like when some people write they don't "close" or connect every letter/line.
Your just going to need to dig in and spend some time editing until you are happy with the result. |
Posted By: Raf
Date Posted: 04 January 2014 at 4:03am
Ok, retried AA-ing it, using H|F's suggestion of the line tool. I
stopped after one side of the leftmost tree, cause, to be frank, it
doesn't seem to work. I think I'm missing something here, but what?
|
Posted By: H|F
Date Posted: 04 January 2014 at 11:07am
|
What lol I was meaning for you to just dig in and work line by line..... I'm really not sure what just happened there sorry if I'm confusing
Basically, there is no easy solution someone else is going to bring to your eyes. You can keep going post progress and we will do our best to help along the way but especially from this step it's all you |
Posted By: Raf
Date Posted: 08 January 2014 at 3:20pm
Friend of mine gave me a huge push in the right direction. Next attempt:
|
Posted By: Raf
Date Posted: 18 January 2014 at 1:04pm
Another attempt. Hopefully I can get some pointers now, instead of getting told to figure it out by myself and then getting ignored...
|
Posted By: SuperTurnip
Date Posted: 18 January 2014 at 1:18pm
|
Hey, I can offer some advice! Don't you worry.
Really, there's nothing "wrong" about this map. It doesn't have any context, that's all. What is the map of? What are you trying to communicate through this map? If it's some deciduous trees, some coniferous trees, and a couple mountains, you succeeded in your first version. If it's tree world 1, tree world 2, and rock world, you need to include some symbolic device that tells the player that these are "worlds" or "levels" rather than pretty trees and mountains. Try an oval which the player character hovers over, or some other very simple thing like that. You just need to think less about the "what" and think way more about the "why" of this piece! You're doing well and just need to add that little bit of polish to the meaning of this piece. Good luck! |
Posted By: Raf
Date Posted: 18 January 2014 at 1:33pm
|
It's a level select map, yep. Each "part" has several levels. Like the deciduous trees are the starting point, then you'll get to a level that's kind of a transition between deciduous and coniferous. Then a full coniferous level, followed by a transition between conifers and mountains.
It's not so much about the trees (they'll appear in the background of the levels), but more about the "environment" (like heavy wind, or lots of lightning, or heavy snow, etc). The trees / mountains are mainly there to colour the atmosphere, but it should be reflected in the map. A simple "lvl. 1" square, "lvl. 2" square, etc. is too boring. As far as markers goes, I was thinking of putting tack pins on, grey ones for the levels that're still locked, red ones for the levels you can select (which turn yellow when hovering over them). They're separate objects, though (due to the unlocking / hover parts), so they don't appear on here. |
Posted By: Raf
Date Posted: 18 January 2014 at 6:58pm
Found the proper way to do this
|
Posted By: Raf
Date Posted: 20 January 2014 at 4:59pm
Quick update: Finished the pine forest.
|
Posted By: Shadow64
Date Posted: 21 January 2014 at 5:02am
| Coming along nicely. Really like the way you did the pine forest. :) Keep going! Looking forward to those mountain textures! |
Posted By: Raf
Date Posted: 22 January 2014 at 5:21am
Got two attempts for the mountains (although one of the two's slightly outdated. I'll update it this evening, when I'm at my own comp):  I can't decide whether or not to go with the outline on the inside parts. I'm stuck on both, too. They don't look good enough to me yet, but the only thing I can think of to improve it, is adding some texture. Got no idea what texture to give this, though. If any of you guys got any suggestions, I'm all ears! |
Posted By: Raf
Date Posted: 23 January 2014 at 1:25am
Couldn't upload it yesterday, due to my hosting being down, so adding it now: So what do you guys think? Is there still any way to improve it? |
Posted By: Raf
Date Posted: 23 January 2014 at 11:47am
The previous direction was a dead end. Looked up pics of mountains again, and saw I had to think in fractals. Came up with this. I think that's about as good as it can get :D
|
Posted By: skittle
Date Posted: 23 January 2014 at 12:13pm
| It looks fantastic! The mountain is really well done. |
Posted By: Raf
Date Posted: 23 January 2014 at 1:53pm
All mountains done! Time to look at what levels I got covered now, cause I'm about 2/3rd through the map now, I think.
|
Posted By: Raf
Date Posted: 23 January 2014 at 5:00pm
That's it for today. Those houses and maybe a little square in the middle and then some small details here and there to finish it off should be all. Gonna see if I can get the shading on the houses better tomorrow, and how I can make them more interesting. Right now, they're rather boring, I think. I also just noticed the proportions are way out of whack. Trees that are as big as a mountain, which both absolutely dwarf a house. Oh well, that doesn't really matter in this piece. |
Posted By: flamkuch
Date Posted: 25 January 2014 at 2:27pm
|
Yeah, in a map, proportions don't matter, and I actually didn't think about it until you brought it up! One house isn't shaded like the others (it has a darker side than the others), but other than that the shading on the houses looks fine to me. An idea to make the houses more interesting is to use different shapes. L-shaped houses, T-shaped houses, house with backyard etc. |
Posted By: Raf
Date Posted: 26 January 2014 at 7:44am
OOOOOH YEAAAH! Now we're getting somewhere!
|
Posted By: Raf
Date Posted: 26 January 2014 at 9:28am
I think I'm done, unless you guys see something that can still be improved. |
Posted By: skittle
Date Posted: 26 January 2014 at 9:29am
|
Maybe if you added some brick paths going from house to house? Or a path leading out of the forest or something like that. It looks great though!
And one more suggestion... maybe the mountains and trees can cast a shadow or something? It looks pretty snazzy though, great job with this! |
Posted By: Mr.Fahrenheit
Date Posted: 26 January 2014 at 10:14am
| Try some cast shadows. It'll ground each element. |
Posted By: Raf
Date Posted: 26 January 2014 at 10:36am
Road done!
Now for those shadows. I hope those'll work out. |
Posted By: Raf
Date Posted: 26 January 2014 at 11:19am
Shadows!
I'm not 100% sure of the ones of the mountains, and of the top leftmost house. The rest looks decent, I think. |
Posted By: Raf
Date Posted: 26 January 2014 at 11:49am
And added into the game, to see what it's like there:
|
Posted By: flamkuch
Date Posted: 26 January 2014 at 12:04pm
|
Cool! The shadows make a nice difference. The town looks much better now, too. Minor nitpick: the big mountain looks "copy-pasted" over the rightmost mountain. How would it look if the blue lines could be seen through the light gray shadows? Not necessarily with the same shade of blue, but just to preserve the notebook feel. |
Posted By: Raf
Date Posted: 26 January 2014 at 12:10pm
|
Originally posted by flamkuch
Cool! The shadows make a nice difference. The town looks much better now, too.Minor nitpick: the big mountain looks "copy-pasted" over the rightmost mountain.How would it look if the blue lines could be seen through the light gray shadows? Not necessarily with the same shade of blue, but just to preserve the notebook feel. Hmmm, dunno how to fix the "copy-pasted" feel, especially since it's been drawn there from the start (you can tell from the very beginning from this topic :P ) The lines is something I've been thinking about, too. It'll be tricky sh*t, though, as I took out all white in the pic, making it transparent, then put it onto the notebook page, kinda like a sticker. If I position it 1px up, the lines'll be placed differently. I'll see what I can do, though. |
Posted By: Raf
Date Posted: 26 January 2014 at 12:47pm
Done! :D But only in the in-game version :P
|
Posted By: flamkuch
Date Posted: 26 January 2014 at 12:49pm
Yes, it's been there from the start, but the new shadow makes it pop out. Maybe it's just me? It's hard to explain with words, but here's a quick edit that "corrects" what I was talking about: As for the lines, you mean the sketch is pasted on top of the notebook page in the game? In that case you could try just giving the sketch texture an opacity of say 75% (while darkening the colors a bit to compensate) and it could work. Unless you're a purist and you want a 100% old-school look with no alpha blending tricks ;) |
Posted By: flamkuch
Date Posted: 26 January 2014 at 12:51pm
| Ha, you posted that before I finished my post! Good job, it looks great! |
Posted By: Raf
Date Posted: 26 January 2014 at 12:55pm
| Hmmm, your fix does help. And damn, didn't think of opacity.... I did those lines by hand xD Took me friggen' aaaaages! I'll try with the opacity, as I was thinking of seeing what it'd give if I'd pull those lines through the other parts, too, not just the shadows. |
Posted By: Raf
Date Posted: 26 January 2014 at 1:04pm
I think it's better, except for the opacity paling everything. |
Posted By: flamkuch
Date Posted: 26 January 2014 at 1:19pm
|
Here's how I'd go about doing it in the Gimp (I normally use Grafx2 for pixel art, but when it comes to semi-transparency it doesn't cut it): Create a mask for your layer by transferring your layer's grayscale levels to the mask Invert the mask Fill your layer with a very dark, solid color. It has to be darker than what you'd use normally since it will get lighter because of the low opacity. Adjust the grayscale levels in the mask to have a readable, non-opaque image If it's still not dark enough you can play with the color levels This particular technique only works because you have a ramp of the same hue. It wouldn't work as-is if you had other hues. Transparent:  Crude mockup to show how it could look:  |
Posted By: flamkuch
Date Posted: 26 January 2014 at 1:28pm
| Or you could do it the other way around: use a low-opacity image for the lines pasted on top of a fully-opaque image of a sketch. Probably easier this way. |
Posted By: Shadow64
Date Posted: 26 January 2014 at 3:58pm
| This came along really nicely. :) Very cool to look at! |