Painting the Archer
Welcome to a work-in-progress background painting for Dust: An Elysian Tail. I thought it'd be fun to chronicle the production of a texture, and the steps necessary to prepare the artwork for the game.
The first step is obviously the idea. I wanted to paint massive statues to populate the backgrounds. I wanted the ability to segment them, for variety, and to give the sense that they are ancient and neglected.I started with some tiny sketches, only about an inch high. I usually like to start character art fairly small, so I can get an idea of the pose, before worrying about anatomy and draftsmanship.
- The First Sketch
After I find a pose I'm happy with (which in this case was a combination of two thumbnails), I do a bit of research on archery. It's been ages since I personally used a bow, and I wanted to make sure I was drawing something that felt accurate and cool. More than anything, I wanted a sense of urgency and beauty in the image.
This time I draw as large as I can, mainly because I know I'll need lots of little details (this statue will eventually become a massive texture to use in the game). The purpose of this drawing is to nail the pose and work in some anatomy. As with all of my character art and animation, I use a mechanical pencil on 8X11 paper.
Being that this is a female figure, I'm being relatively subtle with musculature. That's not to say I'm not employing anatomy, but this softer look is more appropriate for the style I've chosen for Elysian Tail.
I then scan the artwork into Photoshop, flip it to do a little mirror test, and move a few parts to make it more pleasing and balanced. Even after decades of experience, it's surprising how much mirroring an image can help nail any balance issues.
- The Second Sketch
After I'm happy with the basic drawing, I'll print it out, and layer on details and clothing. Once again, I'll scan the image, mirror it in Photoshop, and correct any last minute mistakes. Had this been a frame for animation, I would take a final step and ink it (non-digitally), but for the purposes of this painting I'm fine with a rough sketch.
- Beginning the Painting
Now that the image is ready, I'll create a set of layers in Photoshop... one for the artwork, and one where I'll be doing the actual painting. I'll set the drawing layer to multiply, and lower the opacity, so I can use it as a reference. I then open the artwork in Painter, and begin painting the general values. You always want to determine general values early on, before bothering with details.
- Starting Mid-Level Details
After strengthening the contrast, I began midlevel details. Defining the shoulders, chest, and neck.
- Starting the face
It's always nice when the painting starts to stand on its own without the aid of the sketch. It's always much more difficult to define detail when you can't fall back on an outline, moreso when that outline is somewhat cartoony. Painting these faces always requires a careful level of subtlety.Also note, I pushed the contrast even further. I can always lower the contrast at the end, but it's a good idea to get the full range as early as possible. Looking at this image at this size, I can already see that I need to push contrast further in the head to match the body. That's a lesson in itself... occasionally stand back from the artwork, look at it from a new perspective, and see how off-track you are.
- Finishing the Character
Here I've finished painting the character. I'm going to add the bow and quiver on a seperate layer, mainly because they are a bit more mechanical, and I don't really want to mess up the character art. That's the beauty of digital layers. The next step would be to remove all the excess paint around the edges.
- Begin the Mask
After adding some clothing details, I begin erasing around the artwork. For longer curves I'll mask with the pen tool, but usually I just manually erase with the eraser in Photoshop. Note that the red in this image is a layer behind... I'm not painting red onto artwork, only erasing.
- Mask Complete
And... the mask is complete. The green is just there for the purposes of this image... normally it's the normal empty space in Photoshop. Now to start the weapon...
- Bow Complete
I came up with a slightly more extravagant design for the bow, and after a bit of work have it ready. To make life easier on myself, I kept it (and the arrow) on seperate layers, so I wouldn't mess with the rest of the artwork. This will make things easier if I break the statue apart. For the sake of believability, I didn't paint the bow strings, since they wouldn't last. The arrow, however, is made out of some sort of indestructable material.
- Weathering and Aging
The final step of the painting process is to add imperfections to the artwork. This is meant to be a statue after all, made of stone, and apparently very old. Some cracks, dents, and stains should do the trick. These little details also add a sense of scale, so it's important that they are painted 'to' scale. Weathering an object tends to be one of my favorite parts of painting, as you can almost tell a story with the details.
- Texture Ready!
The painting is complete, the image is properly masked, and placed onto a texture sheet. Since I'm using XNA, I import the artwork as a .png with transparency. I build the map in my engine, and viola, the texture is set.
Painting with a 3D model
Most of the background work in Dust: An Elysian Tail is handpainted from scratch. However, on occasion I will build a 3D model first to aid in the painting. Following is a little step-by-step of how I painted an architectural element using a 3D model as a basis.
Once again I begin with a sketch. There were actually quite a few sketches at first to get a feel of how this region of the game should look, but here's the most relevant example. This will eventually become a crumbling pillar of brick and stone.
- Deciding to use a model
At this point I made an important decision. Do I handpaint the element, or use a 3D model? Since I wanted a relatively uniform brick pattern on this element, it would make sense to use a tilable texture, rather than paint each brick by hand and with perfect perspective. And if there's anything 3D is really good for, it's perfect perspective. This isn't a particularly dramatic angle, but compounded with the necessary details dictated that a model was the way to go. Thankfully the model in this case was extremely simple. I even modeled a few of the bricks to give a staggered and more realistic impression.
Finally, the deciding factor was that I was going to need a number of these types of elements for different building. Following is the wireframe for this particular element.
Next up were some textures. I didn't want this to look photorealistic, but rather blend in with my handpainted style. So I painted a brick texture, and various bump and specular maps.
- Lighting and mapping the model
I apply my texture maps, add mapping coordinates, and some basic lights. Nothing incredibly fancy, since I'm going to paint over much of this anyway.
The final step as far as 3D is concerned is rendering. I spend a while with my shadow parameters so that I get a nice contrast around edges. I like to overexaggerate these edges in my painting, so I make sure to capture that in the model to make painting easier. And of course you always want to render much higher than what will finally be used, so you can get a nice anti-aliasing on the final image.
Now begins the tedious job of painting over the model so it doesn't look like a model. I did chamfer all the edges a bit so it wouldn't look so angular, and of course a modeler could do a lot more work rounding everything and giving each brick a bit of randomness, but I knew I wanted visible paintstrokes, so this worked better.
Here's the central part of the pillar, before and after being painted over.
- The finished texture
Some vines, cracks, and other details polish off the final texture, and a clean mask makes it ready for the game.