how to make line ink drawings look good in a browser

[tensimon]

Hi,

I'm completely new to this forum, tho i have had a look around, some really talented people here and I am quite sure i dont measure up, but if you dont mind i'd like to ask some advice with a problem i am having.

I am developing a webcomic called TenSimon's World, a look thru my eyes as i live teaching English in junior high school in japan.

It is going to run in flash, as swf files, becuase i want the viewer to be able to roll over bits of japanese for an instant translation (i might also add little bits of animation, but only occasionally - animation takes too long, and this is a comic after all). that bit I have working fairly well, but what I am struggling with is how to make my scanned ink line artwork (partially colored in photoshop) look good - i can't get it to look like clean ink lines. Somehow it looks a bit unclear and pixelated.

Here's how I produced these images:
1. draw and ink on B4 card
2. scan at 300dpi, reassemble, color in photoshop
3. change the image size down to 980x980 pixels, save for web as a .png (at which point the resampling means it has already become less clean)
4. import the image into flash, and export as a movie (but i dont think it is flash that is the problem, since it already turned unclean in step 3.)

The problem is that I have to display my comic at BIGGER than it was originally drawn at on paper to get it looking clean - that can't be right.

Anyone any suggestions? Kazu, how come copper's lines look so clean? mine end up all blurry. Or do i just need to learn to draw with a thicker pen (which i dont like - i like those delicate lines!)

this one is just a gif - seems clean but is still displayed bigger than it was drawn:



these are all .swfs, two of the same comic, and one of the comic above i was just experimenting with the size, but they have all come out blurry.





or am i barking up the wrong tree trying to get my ink line art to display in flash? should I stick to gifs (but that would kill my translation feature) or would i be better inking directly in flash (but i'm not that much of a fan of drawing in flash).

thanks for anyone who can offer some advice here

tensimon

www.tensimon.com

[tensimon]

sorry, my images didnt display - I've never tried to post images on a forum before (i said i was new )

i looked at the faq but there was nothing on posting images, sorry! if anyone can tell me where i went wrong i will be very grateful. hopefully you can follow the links

[rohwer]

This is how I do it:

Select the hyperlink address and click the IMG button (above the edit box). That will automagically place the code around the selection.

Or, you can do it manually. Put this in front of the hyperlink:

Now, this looks like you did this, and I was able to get to your art by running your url in the browser, so I'm not sure why it didn't work. Here is an examlpe of me doing it. I pulled this one of by blog, it is linked back to blogger.com.

[tensimon]

thanks for the tips, let's give it a try:
[img]
http://www.tensimon.com/images/TSNS-005 ... 02-bitcol-
[/img]

now I'll submit and see if it works....

.....it didnt. hmmmm.

anyone any other suggestions?

thanks for any and all input

and also about how to display line art. however i am going to try inking a whole picture in flash and see how i get on - if that works it would solve all the above problems and probably make the whole process simpler into the bargain. I'll post to report how it goes.

thanks for reading

[Frank Stockton]

Wow the line art does look bad.

I don't know about flash but I've seen it do some pretty incredible things and I don't see how it wouldn't be able to show you good line art.

After looking at your images (which I copied and pasted into the browser in a new window), the only thing I can think of is that it's an issue with the scanner. Do you have it on "home mode" or something? Maybe it's an ancient or a really cheap scanner--or maybe there's some kind of automatic "levels" setting on there that's trying to get too much contrast from the image. See if there are settings for that so you can figure it out.

Also, you seem to have a lot of things you're not a fan of, like inking in flash and using fatter lines. You need to design your comics for the medium you're presenting them in, so my advice is to let go of any bias you have and do what works best.

f.

[Muffin]

to make the images work it probably has to be linked to a jpg or gif or png or something. not swf and not whatever that last one is.

other than that, listen to frank.

[tensimon]

hi,

thanks for the advice, guys.

Frank, you're right, i need to think more about my medium, and what can be done, not what can't. . I said I was new to this

I just spent the last hour or so trying my first really serious effort to ink an imported pencil drawing in flash. (I have used flash quite a lot but mostly animating very simple drawings, now I am trying to produce a more professional-looking effect). I need a little practice but i think it will work, and that'll make the whole project much simpler.

I have one question, for anybody familiar with flash: is there a convenient way to rotate the canvas? It's hard to get good curves going the wrong way. I gooogled but nothing came up.

I could select and rotate and then back again, but that sounds a bit labour-intensive. Or maybe i just need to go back and edit those curves with the arrow tool?

This must be a common issue for drawing on a tablet however - how do other people get around this problem?

thanks again for the comments

tensimon

[Muffin]

i've never come across that problem,. I've never rotated a drawing in photoshop either in order to get better curves from a certain way. Maybe you should just practise drawing good curves going both ways.

[tensimon]

when i gooogled i did find a forum page of people wishing it was a feature in the software they use (apparently it is in mangastudio, and some others).

But if you've never had problems, maybe i just need practice. I will go practice.....

thanks for the feedback.

Regarding line art, i just took the dog for a walk, and had a thought, or a realisation:

if in my line art my line is four pixels wide full-size, then I reduce the image size, my four-pixel line will now only be one pixel wide. And in places where it was three, it will now be zero (or a shade of gray to compensate). Aa-haaaa, I'm starting to see where my problems are coming from. Dog-walking is good for the brain, gets oxygen in there.

thanks again for the feedback.

[Muffin]

hehe
maybe i should get a dog.

but really, it might be something ive just never thought of (the rotating, not the dog), it could be a good thing and maybe there is a way to do it too. I guess i never think about it because all my curves are more or less shabby and random.

[Frank Stockton]

all my curves are more or less shabby and random.

Maybe you should hit the gym.





f.

[angeldevil]

I like to do my line art by hand but then everything else is digital -- this what I'm doing now (but it does require heavy software): In Illustrator CS2 and CS3 there is a nifty feature that does a fairly detailed auto trace. This gives you a nice vector version of your line art, which in turn reduces and enlarges quite nicely! Ok, I've adjusted the way I draw and clean up line art somewhat to use it, but I'm happy so far and saves me quite a bit of time -- less fussing and correcting lines in Photoshop, less messing with scanner settings... I also use this method for some of my freelance work which involves technical drawing.

As for rotating the canvas and drawing in flash, are you using a tablet or a mouse? Once again, involves equipment, but the tablet made all the difference for me drawing on screen ( I can tilt or angle the tablet anyway I like).

Anyway, that's what works for me.

[Muffin]

Maybe you should hit the gym.

lol, .. you prick. ;P

[tensimon]

more dog-walking, more oxygen, more thoughts:

Frank you were dead right about perhaps changing to fit the medium. I'm a very amateur cartoonist with experience in working in exactly one way (rather fine line cartoons, and drawn quite small, A4 or smaller), and the change in medium is of course the perfect oportunity to expand and try different ways.

And one thing i have often reflected on is that my lines, although i like them, can result in a lot of white compared to black in my pictures - they can end up a bit too...flat?. So this is the perfect opportunity to try some new styles. Thanks for pointing that out, its quite significant for me i think

Regarding rotation, i do have a tablet, i have tried moving it but then it gets all messed up between the screen (which is still the same way up) and the tablet which is now at a different angle.

Am i missing something? It seems like i must be if moving the tablet works for you.

other than that, i thought of two workarounds i will try. One is to draw a rough version of the curve on the pic wrong-handedly, then copy and rotate that section only, and use it as a guide to draw my good-handed curve. Then rotate back, obviously.

The other is to put everything in a symbol, drawing within that symbol, then go back to the main stage to rotate the whole thing if i need to.

Both seem a bit long-winded, but might help.

The curves thing is one of the reasons i didnt like drawing in flash. The other is the way the brush size changes with zoom, but (another brainwave ) if i keep my zoom constant that wont be a problem (duh!)

anyway, thanks for the input

[Stick]

thanks for the tips, let's give it a try:
[img]
http://www.tensimon.com/images/TSNS-005 ... 02-bitcol-
[/img]

now I'll submit and see if it works....

.....it didnt. hmmmm.

anyone any other suggestions?

I tried fixing it, but it appears the link you gave was cut off at the end. is there more to the link? that's probably why it's not showing up for you. recheck to see if that's the proper file name, extension and all, and then try it again.