Selena progression for SPB. Warning: lots of images!

Community Forums/Graphic Chat/Selena progression for SPB. Warning: lots of images!

sswift(Posted 2004) [#1]
Hi there...

I did the character art for Seths Puzzle Boxes, Warren's recently completed game written in Blitz.

While I was working on it I was dying to post some of it here but Warren would have none of that. So I had to wait till he released the game.

Now that it's out, I can show you a complete progression of how I went from not being able to draw anime characters at all to creating two finished characters which look rather nice, in 27 easy steps.

I'm not going to comment on every picture below, but I will comment on several.

If you have trouble viewing these images, then you can see them all on a mirror I have placed here:

http://sky.prohosting.com/scswift/sethspuzzlebox/



...



Here we see the initial spencil sketch which I did for Selna. Amazingly, Warren didn't fire me on the spot! What's funny about this, is that A) I can't draw, and B) While drawing it, I couldn't tell that the eyes weren't even aligned properly.

It's funny how when you're drawing something it is impossible for you to see the really obvious mistakes in your work. One day you'll be drawing a peice of art, and it looks perfectly fine, and then you look at it fresh the next day and you're like "Whoah... I really screwed that up."

This doesn't just occur when drawing it appears, it also occurs when selecting colors as well.





This next picture shows how, relising how horribly I mangled the original image, I have cut the eyes out of the original scan and moved them into the proper locations. I then use levels to darken them up and make them look like they're inked.

It should be noted that the final images were always intended to be 128x128 in size. I worked at a very high resolution so I could be sloppy, and then scaled them down at the end. I also worked at a higher resolution than I needed to just in case Warren decided he wanted to use 256x256 images instead.








Now I begin adding the chin and contemplating the hair.

An interesting bit of trivia is that Selena was not intended to be as young as she ended up being. My initial pitch to Warren was that she be a "Young, easily exciteable girl." What I meant was that she should look like a super-deformed version of a teenager, thus appearing younger than she really is. She also was intended to have firey orange hair, and be much more animated in her emotions. As you can see though my initial drawing made her appear middle aged. I'd never drawn hair before, so I was improvising.

Here we see how I overlaid the finished face ont he original drawing and began to try differnt hair styles and colors.


















It was at this point that I decided Selena didn't look young, or exciteable enough, and that when having just a head and shoulders visible, it's really hard to pull off the super deformed look. Notice how the eyes suddenly jump two sizes, the chin receeds, and ponytails and bows are added to her hair.












At this point, a background was added. As you can see, the background is just a bunch of quickly skwtched out forms, blurred to hide the lack of detail and to empahsise the foreground character.








It was now time to add Selena's shoulders, and give her an outfit which would make her look more like a girl. At first I went with a blue outfit, becuase it ent nicely with the background, but apparently bows alone were not enough to make her appear girlish, so her vest was changed to a pinish color. And here's where what I said about color selection being another one of those things which you just can't get right the first time. I always select saturated colors when I paint stuff out of habit because I like saturated colors. But saturated colors are harsh and unrealistic. So as you will see in the final image, the saturated hues on her vest were toned down a bit, and look much better as a result.














And here we have the final image of Selena. Notice how she appears much softer than the prior versions. While developing her, I was working on this effect the whole time, but just didn't display it in the images above. The softening effect is created by using several layers. First, I grab the background, with a hole in the cneter of a character and place that in the topmost layer. I blur this by 8-16 pixels or so. This softens the edges of the character. Then to soften the center of the character I copy the whole image and blur that a bit, set the layer to 50% opacity, and set it's mode to lighten. This makes all the harsh black lines take on some of the color of the surrounding pixels. I then grab the highlights of the eyes and make a blurred layer just for those to make them glow, and finally, I cover the original background with a white layer at 50% opacity. The blurred background in the topmost layer then appears to be the background, but near the edges of the character, the true background, which is now white shows through, and this creates the highlight all around the edge of the cahracter which helps seperate it from the background and give it that extra artsy touch.




Then after all that, Warren decided that he wanted a robot instead. Here is the end result:





Just kidding! That's Seth, the nemesis of Selena. :-)


skn3(Posted 2004) [#2]
Omg you should have used a anti-alias line tool to go over your sketched lines. Either way looks quite nice. I like the eyes especialy :)


sswift(Posted 2004) [#3]
The final image is 128x128. Antialiasing happens automatically when you scale down. That's what I meant by working messy. I can make corroked lines and lines with no antialisisng and they look fine in the final image. A lot of artists work this way.


skn3(Posted 2004) [#4]


Hope you don't mind, I had nothing better to do X).


sswift(Posted 2004) [#5]
I don't care. :-)

Did you use some special rescaling program to make the small one bigger there? Cause I know there is one such program out there that uses some patented algorithm that can do stuff like that, but I don't know if it does that good a job.


skn3(Posted 2004) [#6]
I took your second-from-last step.. the large one.. used the bezier with anti-alias line tool, to sharpen the edges of the lines with the apropriate colors. Then shrank the modified image to 128x128.

That program sounds like it could be handy, any idea what it is called ?


sswift(Posted 2004) [#7]
No idea. I think it's on download.com somewhere though.


sswift(Posted 2004) [#8]
I think this is it:
http://download.com.com/3000-2192-10187083.html?tag=lst-4-23

[edit]

Forget it... it's crap. It doesn't do anyhting at all like what they show on their website. In fact, the resulting images are blurrier than those which you get with bilinear filtering. A little smoother edges perhaps, but definitely not super sharp.

[/edit]


Steve C ™(Posted 2004) [#9]
Looks like all the other Japanese crap.
I like the robot though :)


sswift(Posted 2004) [#10]
Well I'll take that as a compliment then cause I'ts supposed to look like all the other japanese crap. :-)


CyBeRGoth(Posted 2004) [#11]
The algo you are talking about sounds like 2xSai or Eagle

http://elektron.its.tudelft.nl/~dalikifa/

Nice style btw, very kawaii :)


Genexi2(Posted 2004) [#12]
Aside from some of the proportions being off in the typical anime style, its not bad at all considerin' you really havent had much experiance at all drawing in that style.....took me about a years worth of drawing before I could get anything sorta-decent looking in my own style of it...here's a link one of my 5 month old pics : http://www.deviantart.com/view/3195793/


jhocking(Posted 2004) [#13]
Cripes, you should warn people about the tons of enormous images in this thread. Oh wait, you did. So that makes me an idiot.


Warren(Posted 2004) [#14]
I'd just like to thank Shawn for his awesome work on the game. He sort of invented the process for this stuff as he went along and pulled it off with style.

Nice work! :)


IPete2(Posted 2004) [#15]
Hmm,

Shawn, looks great to me. I love the Japanese Anime and Manga. My 12 year old daughter is getting very good at creating this sort of stuff now.

I'll see if she'll let me post some of her stuff.

I love the eyes too!

IPete2.


simonh(Posted 2004) [#16]
Well the first pencil drawing is pretty horrific, but it seems your Photoshop skills are second to none because from then on it really did transform into something quite brilliant. Well done.


Agamer(Posted 2004) [#17]
Yeh well done I like it


Rob(Posted 2004) [#18]
swift, you are quite rubbing it aren't you? modesty doesn't enter into your dictionary :)


Ruz(Posted 2004) [#19]
looks good sswift. the final image is spot on . nice to see the progresion also.


sswift(Posted 2004) [#20]
"swift, you are quite rubbing it aren't you?"

What? :-)

I put a lot of work into that. A real artist would have been able to sketch that out in an hour and finish coloring it in two. It took a week of refinement for me to get that end result.

If you want to do nice art, you jsut need to put your mind to it, and look the work of others to see how they do it. I downloaded a LOT of anime artwork to get ideas for this.


"modesty doesn't enter into your dictionary :)"

Not true. :-) It's humility that my dictionary lacks. :-)