Game Development Community

How big should paper drawings be to convert to decent 2d image I can use in itorque?

by Adam Emrick · in Artist Corner · 09/11/2011 (3:57 pm) · 17 replies

I have a gifted artist to do my graphics but I was hoping someone might enlighten me a bit more on the process. So far I know I need to scan the image in, color it, then form an image map from it. My questions are

1) How big should the physical drawing area be on the paper? To give an idea of how big they will be on the iphone, I'd like them to fit under a finger to move around. What image format should i scan it into?

2) How should the image be colored? Is this something that is done with photoshop? Are there other tools that making coloring a hand-drawn image easier?



Thank you for your time!




#1
09/11/2011 (8:38 pm)
The resolution you get in is relative to what dpi you scan it at. Since you'll end up with fixed bitmaps anyway you can go pretty low, but you can try 150 or 300 if you want a high quality version to down-convert from. Always handy if you port to other platforms :)

Everything should be PNG to start with. The only two formats you need for most cases are PNG (lossless) and PVR (very lossy, memory-saving format). There are absolutely no good rules to predict what will and won't work as PVR. But you can worry about that during optimisation.

Colours are also something you'll have to experiment with. Generally you can get away with 32-bit PNGs (8 per channel, including alpha), but sometimes you might want to load it as 16-bit (565 or 5551, or many other variants). Also for the optimisation phase (plus I don't recall how the engine handles 16-bit at the moment ;).
#2
09/11/2011 (11:06 pm)
Thanks so much for your reply. As far as how big I should tell the artist to draw the images I'm going to scan, should I go for actual size relative to the iphone screen? Or should i tell him to draw bigger? I hope this question makes sense, please let me know if i should clarify.
#3
09/12/2011 (5:16 am)
If he draws it to scale the ink will be heavier because the pen strokes are "actual size." If you want this, cool. If you want the ink to be finer, draw larger.
#4
09/23/2011 (12:37 pm)
Speaking in terms of print, you should always make your images twice as large as their final output will be. So if you were creating an image that will be printed @ 8" 1/2" x 11" ( standard legal size paper ), you'd want to create those images @ roughly 16" x 22".

This same principle can be applied to digital work. Scanning a drawing at 300 dpi will give you enough resolution to work with. Standard monitors operate at 72 ppi so before you output you'll want to shrink your images to conserve memory. If you're making iPad art, the source images should be twice as large as their final on-screen size. If, for instance, you want a sprite to fit within a 2" x 2" cel, you' want to author your original drawing at 4" x 4". This will give you enough room to put in all the little details and it will look super tight when you shrink the image for the final asset.
#5
09/23/2011 (5:20 pm)
Awesome reply thanks Jessie, this is what I was looking for!

Cheers
#6
09/25/2011 (2:08 am)
I do all of my drawing with a Wacom table (Intuios 4) into Manga Studio At 1200 DPI on simulated 8.5 x 11 paper and they look really harsh and rough when you are at 100% view setting but when you size everything down it all melts together and gives it that computer video game look, and I have plenty of room to alter things if I don't like the look.

The first thing is... Render everything. NO INK OUTLINES IN VIDEOGAME ART. (unless you want it to look like a comic book that is) Second thing is Dodge and Burn are cheap marker effects, you need to get down into the actual color. Either use markers to get your color, or use a software and hardware setup (see my Wacom tablet) that lets you simulate a markers way of getting kinda darker as you apply more strokes. Finally use a soft eraser (again with the pressure sensitive tablet) to manually put in your alpha channel. Again, do this all at crazy higher resolutions than you need and scale down to final size.

Using this technique I guarantee you a total noob can make passable plant textures, brick textures, and someone was asking on another thread a dirt walk texture in about an hour. Also it will look better than any photograph texture ever;P

Finally, for all its expertese in altering colors of photographs I have a heck of a time doing anything in color in photoshop (unless I am using the clone tool) because Photoshop only lets you work with two colors at a time...

Oh and layers. Are layers just assumed at this point? Don't try to structure your layers too much, just use a thousand of them. Use a layer for every little detail you do.

Oh and nothing kills the life in a drawing like using the line, rectangle or elipses tools. Those are for charts and graphs.


#7
09/25/2011 (5:14 am)
On the Wacom tablet, did you get the small, medium, or large version?

When you say render everything, do you mean do it all in tablet or mouse/photoshop rather than scanning a ink drawing?

when you simulate a paper on the tablet, do you draw to fill the whole page? Or something like half the page? (assuming the graphic will be finger size on a phone device)

Greg, awesome reply thank you so much!


#8
09/25/2011 (7:26 am)
I have the big one with the buttons and touch wheel.

By rendering I mean... Follow sketching and painting conventions rather than comic or manga conventions in your drawing.

When I say "render everything" I was being an art snob... Ignore that;P I can go on but...

Earlier tonight when I was playing with the DBPro tool Plant Life I did an alien tuft of grass real quick in about 20 minutes. The final image was a tiny little texture file, but it started out at about 10 megapixes. I was a crude fast and dirty drawing. Modern scaling methods are better at pixel drawing than any human artist.

I zoom in and out and rotate the canvas a lot. The scaling process makes it look tight and video gameish(stay away from those black lines!).

If you are starting with pencil sketches, I would just break out your camera. Take a picture of your pencil sketch, then color that in, in whatever software you use.

If you have actual inked Drawings that you paid for,take them over to FedEx Print and Ship and have them scanned on their nice scanner over there.

It is easy to reduce resolution. Do it right the first time and all that.

Gosh... Phone sized... Stay away from black lines!!! you need every pixel for color!

Did I mention I don't care for comic art styles in my video games?
#9
09/25/2011 (10:57 pm)
Greg, what software do you recommend for coloring? (for you, is photoshop still best?)

Is Manga Studio good for this?

What do you think of Darkbasic pro? Worth it?

So if i had a drawing say, 1/4 of a page, and I wanted it to shrink down to a touch graphic, it would be no problem? Would photoshop be ok for this or do you recommend something else in your experience?

Your replies are golden, thank you.
#10
09/26/2011 (4:54 am)
I end up using Photoshop a lot because it is Photoshop... I prefer sketching in MangaStudio. They both have great support for for my tablet. I would have to say for a drawing and sketching platform, Manga Studio has a superior artistic workflow overall.

I had a gig the other day where I had to take a survey map and draw a rough parking lot sketch into it, I ended up doing that in Photoshop.

Manga studio has a lot of tools to help you draw. See the rulers that it has. Also the selection transform tools work better in Manga studio.

Darkbasic Pro was fun to tinker with. I think the special they have now is worth it just for the tools that come with it. See Tree Magic and Plant Life. I still needed to go through Blender to convert obj to dae, and I had to manually make my materials and rename my materials while in Blender so they didn't collide once in Torque.

For resizing, anything will work, because I don't think anyone uses nearest neighbor scaling anymore. Once again, I am looking at the end result all the time while I am drawing.

#11
09/27/2011 (3:25 am)
Greg, when scanning should I ever try to convert to paths first? That is, is a vector approach ever better in your experience? Or is direct pixil manipulation best? I've heard the mathematic formulas utilized in vector to pixil conversion are pretty advanced. It made me wonder, should i attempt to convert print drawing to vector, fill with color, then render as pixels?

#12
09/27/2011 (4:49 am)
Vector drawing packages made sense when computers were limited on cpu and memory resources.

I used to use Adobe Illustrator to do Billboards in my day job... Not so much any more. Yeah, you get some grain, but people looking at it are 100+ feet away...

But anyhow... Cheeks on faces in 3/4 view is why I quit using Illustrator. I would go to draw that line, and then the smoothing would make the cheek something that I didn't like.

I think just learning how to draw the lines and shapes you want is the better way to go.

Anyhow, if you want vector art for a video game, I think desiging those figures right in Blender (or whatever you use...) would be the way to go. I did this yesterday... Then your vector drawings are ready for animation.

It would be a simple matter to map your drawing right on there for the detail, and tweak things with bones during animation.



The downside seems to be armature animation seems to be broken in the Blender collada pipeline...
#13
10/30/2011 (9:59 pm)
Hi Greg,

I've created my desired graphics in vector format. (adobe illustrator) What I've been doing is utilizing an adobe photoshop script to take my individual animation frame vector images and convert it to a spritesheet for iTorque. I'm getting little white lines on the edges of my animation though. Do you have any experience with this?

I've also really unsure what Resolution, Mode, and Bit Depth to put when I load an adobe illustrator file in photoshop and it converts it to a pixel image.

Thanks for any help
#14
10/30/2011 (10:00 pm)
I should mention, these graphics will end up being less than an inch tall on the iphone screen, if that makes any difference on resolution and Bit Depth?
#15
11/02/2011 (9:26 pm)
Chances are, Adam, your white lines are most likely coming from the antialiasing. Without seeing your script, or your final output, it's hard to tell, but I imagine your sprite sheet is using a document format that doesn't support Alpha and Transparency, which is why you are getting the white line on the rasterized vectors.

Also, a side note: I sincerely hope you are using legal versions of the Adobe series (not pirated or "educational" versions) because if you are not, you are risking a hefty lawsuit if you release the game for commecial purposes.
#16
11/03/2011 (11:00 am)
@Jesse - Monitors are typically 72 dpi (or ppi in this case), but Iphones and I-devices have wildly differing resolutions

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density#Apple_Inc.

Iphone 4 is actually 326 dpi (!)
#17
08/19/2013 (9:16 pm)
Hi,
I am a newbie here. And I found that the guys here are all very nice. Because I want to learn more about the image conversion program using C#.NET, I have got a lot of information from your discussion. As for myself, I am using another document and image conversion SDK instead of Photoshop. Because I prefer the one whose way of processing is simple and fast when I need to do with the conversion work.It saves a lot of time for me. I will keep learning and I hope someday I can offer you guys some help. Good luck.