Friday, July 20, 2012

What I've learned about CGing so far

Having wrapped up the major coding issues for the first AXIOM.01 case (knocks on wood), I'm back to working on CGs. Progress has been good so far - out of the 5 CGs for the demo, I just have to finish backgrounds on two. I have a mortal fear of backgrounds, though, so hopefully I don't end up coping out with more filtered photos. -_- But yeah, once CGs and about 6 more clue images are finished, all the major art assets for the demo will be complete! (kicks the save/load/pref screens under the rug and whistles innocently)

Hopefully I can take my experiences doing these early CGs and use them to make the later ones better. Some general things I’ve learned so far, which might be useful to anyone else who is just starting out with CGs:

1. Start with a sketch.
Pretty obvious, but bears repeating. A sketch not only serves as a base for lineart, but is also invaluable for testing image placement and animations. I found out the hard way that I should check if my CG sketch looks good in the actual game (is the image the right dimensions to pan, zoom, or shake the way I want? does it look okay with the textbox in front of it?) before I start working on the final CG. On that note:

2. Pay attention to where the textbox is!
When I started doing CGs, I just opened up an 800x600 canvas and started sketching away. Once I started sticking CGs in the game, however, I saw that what looks okay on an open canvas can get misaligned or cut-off once you stick a textbox in front of it. Sure, you could hide the textbox so people see the full picture for two seconds. But the textbox will pop right back up once the player starts reading about what’s going on, and it’s kinda sad if it’s blocking key parts of the image. As a result, you might want to resize or angle the sketch differently to make sure it looks alright both with and without the textbox present.

AXIOM.01 - demon CG
Oh look, there's a person down there.
AXIOM.01 - demon CG with textbox
But you can't tell when the textbox's up. ;_;
3. Go big if you can. 
PaintTool Sai brush size adjustment
That arrow could have saved me much pain.
While you can always reduce image size (which also helps smooth out imperfections), enlarging a too-small image makes it blurry and gross. With this in mind, I’ve taken to doing my CGs at anywhere from 2-4 times the sizes I think I'll need for the game, then shrinking them down.

I was originally going to add the caveat that max brush sizes for some programs (I use PaintTool Sai mostly) may not be large enough for big canvases. However, I just discovered that you can increase the max brush sizes on Sai (up to 500 px) by clicking the little arrow to the left of the size range. Well, at least now I know for the future. -_-

My other caveat is that huge images do not make computers happy. My poor little laptop freezes up for several minutes every time I try to save a Sai file over 200 MB. It probably doesn’t help when I have Photoshop, Ren’py, and Youtube open at the same time. ^^;

4. Draw a bit more than needed.
It doesn’t hurt to do an extra “buffer zone” around your image, just in case you decide to change its positioning or angle later. Cropping a picture takes a few seconds, but filling in extra parts to make your image wider or taller, especially after you’ve already done shading, can be a big pain.

If you’re planning to animate the CG with a pan, zoom in, or shake effect, then you will likely have to draw even more of the image than you normally would. Gauging exactly how much extra space you’ll need is what sketch tests are for.

AXIOM.01 - Remy CG spacing example
I have extra margins on this CG of Remy (mainly on the right because I wanted to pan the image in). In retrospect, I would have put more space on the bottom and left, to center the image better.

5. Screenshot major steps and changes. I like taking screenshots of my images every so often, since it reassures me that I’ve actually made progress haha. I also take screenshots whenever I make major lineart, coloring, or shading changes. Though these changes may seem good at the time, if I come back after a day and compare them to previous screenshots, sometimes I end up liking the previous versions better and switch things back. ^^;

Screenshots are also useful if you lose your original files for whatever reason. For example, I accidentally saved over my files for one CG with another. -_- Luckily, I had a screenshot of the lineart and was able to trace over it, so I didn’t lose as much time as I might have.

(To explain this process in a little more detail: What I do whenever I want to make major changes is to first take a screenshot of the current state. Then I either save a new copy of the file, or make a new copy of the layer(s) I want to change. That way, if I decide to switch the image back later, I will still have the previous file/layers available. The screenshots just provide an easy way to compare different versions all at once. The downside to this is that it takes up a ton of space. I either have multiple copies of the same image, or multiple copies of the same layer inflating the size of my one (already large) file. I'm really indecisive, though, so I can't bring myself to delete anything until I'm 100% sure I won't work on that image anymore.)

AXIOM.01 - Cody CG screenshots
Some screenshots from Cody's intro CG.
If there are any artists out there, feel free to comment with your own CGing tips and experiences! I would love to learn new things for future CGs! :)

ETA: For opinions and tips from other VN artists (including some great suggestions for saving multiple versions and working with other artists), check out a related discussion on Lemmasoft.


  1. Personally, I like to save my project's images in Dropbox: it keeps previous versions of the files I'm working on up to a month ago (maybe more, if I went for a paid account?) and I get to work with .psd files rather than a screenshot with all the layers united.

    Another good idea could be to work with something like TortoiseSVN.

    Both TortoiseSVN and Dropbox of course make it so you can share your progresses with the rest of the team instantly, without even having to send the file via mail. :D

    The thing with the text box is something I discovered the harsh way... so I got into the habit of having a template that shows where the text box will be, which I can overlay on the image.

    Thanks for pointing out the option in Sai, I never really noticed it so far! :S

    1. Awesome, thanks for the tips! I use Dropbox, but did not know about TortoiseSVN before. I just learned what version control is today, in fact, so it's definitely something I'm interested in learning more about. :) At the moment, though, I'm not working with any other artists, so would that software still be good for me?

      Haha, yes, I also discovered the textbox thing the harsh way. A template overlay is definitely a smart idea, and one that I wish I had thought of in advance!

      I'm glad I'm not the only one who never noticed the size option in Sai. I was always annoyed by the default size limit, but only thought to look up the max brush size in Sai recently. When I found out it went all the way up to 500 px, I was all "Huh?, I feel silly." ^^

    2. "At the moment, though, I'm not working with any other artists, so would that software still be good for me?"

      I'd say so, yes. :)

      The reason why I know about is that my partner is much more computer-savvy than I (he's a programmer), and he used that in previous projects as well.
      He has been the artist for those some times, but other times he wrote or programmed instead. The advantage is that you can just commit your changes (Dropbox just saves a new version every time you save... and I save a lot) and when other members of your team are looking for inspiration or a place-holder for a scene they're already programming, they can use your unfinished stuff.

      I guess if you're the only person in your team Dropbox is more than enough, and it does let you modify stuff wherever you are. :D

    3. Cool, I think I'll have to figure it out then! Having all the previous versions in some well-organized way would be super nice - better than my current system of random numbers and letters for sure haha.

  2. Thanks for sharing! It's always interesting to see other people's processes.

    1. And thank you for commenting! I also enjoy seeing other people's methods and learning from their examples. :)