An artsy fartsy process post by your local birdie (Patreon)

hi everyone! firstly, thanks so much again for being patient with me during this time.  i haven't exactly been a functional person. as an example of that... this post was originally written by Raven around the time that I last posted on here about taking a break! and it's taken me this long to actually get it up! what's up with that!

in general, i've been lacking focus and energy for basic activities, even for video games aside from trash mobile ones, and just like when i tried to play amogus, i find tasks to be very overwhelming and might randomly cry when doing them (true story).
however!!!
at the same time, i am doing much better at the Feeling Emotions part of the program-- way better than i expected tbh-- which I expected to be the Hard Part™. getting my life, willpower and work habits back in order is my historical comfort zone, and although i've been rebuilding that part of my life from the ground up in greater consideration of emotional health, i'm much more confident in that aspect of it.

i'll talk more about all of my experiences with that in the future when i have it at more of a conclusion, but for today, let's read this awesome, in depth post by Raven about one of the first things she did when joining the team!

####################################

Hello folks! The name’s Raven! I’m one of the newer members to the dev team. I joined late November of 2022 as a tile artist. So far, I’ve mostly been drawing structures to go in the starting area. And, since Ame is getting reacquainted with “me time” as a concept, I thought I’d share the process by which my first contribution was created!

So, be me. Mid November, chilling on vacation. I’m reading the Starlight Divide patreon pages, getting caught up, when I see that Ame wants a tile artist to help reduce the workload. I think “hey, this isn’t my field of study, but I can draw.” So I offer my services!

Now, before I just jump onto the team, I ask Ame if she has any test projects in mind for me. See, I’m a UX and industrial designer. I’m an art student, yes, but not for this kind of art. So I wanted to make sure I was up to the task before ruining the game with my mediocre drawing.

A statue, Ame says. Specifically, an ice sculpture. The starting area is littered with the things, so what better test than one of those? I ask her what sort of subject she wants, and she gives me creative freedom! My bane. This means I must be creative.

Well, like any good project, I start with some shitty pencil sketches.

Look at them shitty pencil sketches. They’re not made to be good, they’re made to be fast, and to communicate an idea. That way I don’t spend too long fussing over an idea that Ame doesn’t like, but she still gets a lot of choices and ideas.

Well, Ame likes 3, 4, and 8. Wonderful, this gives me a direction. The first thing I ask myself is “what’s compelling about these ideas?”

It’s the grace juxtaposed against the jagged violence of the spears. At the very least, that’s an interesting visual theme. So I take the dancer of 3, the spike of 4, and the exposed ribs/heart concept of 8.

Behold. Art. An elegant dancer with her heart pierced by a jagged spike. Ame okays the idea, I move onto the next step: digital sketching!

Now, here we hit the first issue. This sketch is a front-on view. You see the entire figure as though you are directly in front of her.

Starlight Divide, however, has this quirky style that I like to call “semi-foreshortened.” Let’s use a statue from the demo as an example.

Notice that the base is perfectly circular, as though you were looking top down, and yet the legs are long like you’re viewing it front on. This is inherently unrealistic, but it has its advantages: chiefly, it allows for a top-down game without limiting the view of the player to a purely bird’s-eye-view.

For those that are more design savvy, this is kind of like isometric art! For those that don’t know, it’s basically a perspective drawing that ignores foreshortening to show as much of the 3d shape as possible. This is mostly used for blueprints.

Notice how the different sides of the faces are perfectly parallel. This isn’t how real life works.

Notice how in this perspective drawing, the lines on a single face are not parallel- they converge on a single point. Isometric drawings ignore that rule of convergence and just draw shapes to show as much detail as possible while being easy for designers to read and measure.

Back to the statue.

I called this semi-foreshortened. Like isometric, it ignores those rules of convergence. The base in particular is perfectly parallel on the sides, rather than tapering downward like it should in the real world. Likewise, the arms and legs are the same length, even though that leg on the bottom should appear shorter than the one that is sideways.

This sounds like a flaw, but in a game like Starlight, it’s actually a feature. Just like how isometric drawings increase visual readability, so too does this. Starlight is a top-down game! If this were accurate, you’d only see the top of the guy’s neck stump! Like viewing a chess piece from directly above. It’d be way less interesting!

Now, how does this relate to me?

Well, our lovely lady is going to be viewed from this semi-realistic perspective, meaning I can’t just trace this drawing. Limbs are going to overlap, but not shrink. The base is going to be close to isometric in design.

Also, this pose is a btch! I’m not an illustrator, I don’t normally do polished drawings, especially not of people, and double especially not in such a complex pose! I have plenty of technical drawings, just not the instincts. So it was a rocky start.

I give Ame this. Notice the rounded base, yet the slight perspective on the arms, with her left forearm overlapping her bicep instead of being placed directly above it.

It’s just a rough sketch, but it gets the idea across. Ame approves the pose, so I add the spike!

Look at her dance. Notice the spike goes in a different direction from the original sketch. When designing, nothing is sacred. Changing the direction of the spike means that it aligns with her right arm and flows with the pose much better. Also, it’s narratively more interesting, since this means she was stabbed in the back! Who stabbed her? The world may never know, but it sparks intrigue, and it tells a story without a single word of text. She is a graceful person that had her heart ripped out by something jagged and unexpected. Which is way more interesting than just, say, a person on a pedestal. Onto the next step!

Line art!

Now, past Raven forgot to finish the bottom of the dress when I took this screenshot. Ignoring that, the blue fill is to make this easier to color without accidentally leaving a spot blank!

Also, since the sculpture is ice, it’s translucent! Hence the legs and little pieces here and there being a lower opacity if they’re behind something. Despite this step being relatively simple, it’s also one of the most difficult on a purely skillful level. With lineart, it’s very noticeable if something is jagged or wrong, so this was one of the longest steps in the process.

However, we’re ready to move on to color!

Now I know what some of you may be thinking. “But Raven, it’s ice! How hard can coloring be?”

Quite, quite. You see, light is weird, and it reflects off ice in a very weird way. See this dope ice sculpture for an example!

How do you even begin to go about coloring something like this?

Well, in multiple steps. The first one? Colors.

Now, you may be thinking, “but Raven! Ice isn’t colored!” And you’d be right, kind of! Ice isn’t colored, but like water, it reflects the color of the area around it. It acts a lot like glass in that regard, so I’ll be coloring it the same way I color glass.

But I’m getting ahead of myself. Colors.

We need a palette. Now, heaven is dark af, which means that the snow isn’t going to be all pretty and white. In fact, here’s what my references looked like.

That is some dark snow! So, when coloring, I picked colors that were brighter, because I wanted the statue to stand out, but not too bright.

Now, this is a process! I pick colors, then I shift them around! For now, I shade the piece as though it were stone. You can also see I added the snow around this step to help with the lighting. I tried it both with and without linework. For the snow, I used colors directly from the palette then made it brighter, but kept it flat instead of fully texturing it to prevent visual noise. You’ll also notice that the spike is a different color, despite it also being ice. This is unrealistic, but it makes the spike stand out from the body, so in this case, we’re keeping it!

Now we’re getting somewhere! It’s not perfect, but it’s progress, and that’s what matters! As long as the piece is moving forward, you’re on a good track! Now, it’s important to remember! These are going to be small! So it’s important to test them at their actual resolution with their actual backgrounds.

It’s looking neat! Not perfect, but neat! However, you’ll notice it doesn’t look like ice. It just looks like stone. Which, to be fair, is a dope stone statue, but this is ice! So now we have to fix the lighting.

This brings us back to glass, ice, and how to convey that texture.

Let’s look at another example.

How on earth do you go about making this look good while drawing in a cell-shaded, flat art style?

It seems strange, but with line art! You’ll notice, if you look closely, that a lot of the reflections that give the sculpture its shape are reflections along the edge of the piece! This is great, because it means we can use lineart as both lineart and shading!

I’ll show some examples I did on paper for homework!

Now, these don’t look entirely realistic, yet they absolutely look reflective, and they look really interesting! And if you look at the edges, despite all of these being shiny and clear, the dark lines actually help define the shape AND make it feel more realistic, because those lines look like reflections.

Now this is a bit trickier when drawing in an art style that demands that every side of piece have line art. But not impossible. Let’s take a look at how I went through this.

The trick is to take my nice neat lineart, and to make it messier! Notice how uneven some of the dark lines could be. We’re going to alter the lineart to capture this effect, to make it look like light is bouncing around in the sculpture.

Here was my first test on the arm and hair! First up, I changed the color of the lines. Instead of one solid color, the color of the lines also acts as dark shadows or bright highlights.

You’ll also notice that the lines are thin and all over the place! There are thin highlights tracing along shadows! What’s with that? Well, reflections are weird! We’re not able to actually draw the reflections for the environment. That would take a crazy 3d engine, and not even look that good. Instead, the highlights and shadows double as representing reflections in the environment.

Take a look at this cup. There are extremely sharp, dark lines right next to bright highlights. That’s because it’s reflecting the things around it. The shape is warping them beyond recognition, which leads to sharp shadows right next to highlights, which is what I’m trying to do with my lineart. To convey the idea that it’s wildly reflecting the area around it without actually knowing what will be in that environment.

Note that as I was working on this, I was also tweaking the colors. Here’s a progress step. It’s not done, but already it’s starting to look shinier!

Now, let’s take a look at how it looks in the environment, next to some icy stairs.

It’s getting better! It stands out well, and it’s shinier than stone.

Next up is my favorite step: Adding what I lovingly call “ants.”

You know those anime eye reflection dots? 

These things? These weird white dots that are supposed to act like reflected light? Well, shiny things have a lot of those! They reflect every little light, after all. So periodically, even in dark areas, we’re going to add especially bright highlights! It makes the piece really look like it’s interacting with the environment.

Take a look at that beauty. There’s only a few of them, but those ants do a lot to make this piece feel reflective! (Also I covered the base in snow at this step but that’s unrelated.)

Ants are a really fun trick to make something feel like it’s grounded, which is important. You just don’t want to go overboard. Or do. I like it when pieces go overboard on the ants, to be honest. Can always use more ants.

Side-bar, but Ame really didn’t like the name “ants.” Unfortunately for her, it’s started rubbing off on her. My ants are slowly taking over, one person at a time! And with this, hopefully they’ll conquer just a few more victims. Praise be the ants.

Now it’s on to finishing touches! This is where I make final changes to the colors and anything else. First up, remember how I said I made the snow lighter than the background? Well, this is where I tried reducing it back to the normal snow color.

However, I find that this makes it blend into the background a bit too much, so I stuck with the lighter snow.

Next up is transparency! These are already looking pretty reflective, but we can push it a bit more and make the piece actually see-through!

This is going to look really wild depending on if you have a light theme or dark theme. Anyway, I turned the color layer down to 50% opacity. Now, you’ll notice I kept the linework at full transparency. What’s up with that? Well, it goes back to reflections and how those work. Contrary to intuition, glass is not completely transparent if there’s stuff around it. Let’s look at the cup again.

Specifically, look at that dark reflection in the bottom-left corner. You can’t see “through” it in the sense that the dark thing in the background that it’s reflecting is making it appear to be opaque. It’s weird to think about and weird to draw if you’re not used to it! (I’m still not entirely used to it.)

For our purposes here, it just means that I’m keeping the sharpest highlights and reflections, the ones that are the same color as the linework, opaque.

Now here’s a few tests for different transparencies! 80%, 70%, and 50%! They all look nice, but 50% really made the sculpture feel graceful and delicately made, so we went with that!

So this ended up being the final piece! Here’s a version on a dark background to make it easier to see.

There’s my pretty girl! From there, it was just a matter of formatting and shipping the file to Ame!

And that’s all! I say that as if that probably doesn’t seem like a lot for just a single decorative tile that you’ll see one time.

Well, it is a lot of work, for sure. But there are some benefits. Now that I have the first ice sculpture done, it makes any subsequent sculpture a lot easier! After all, I already have line width, color, shading, and settings all locked in now, so I can just copy the settings here. That’s probably a good third of the work at least that I won’t need to repeat now that it’s done here.

Also, not every piece is so complicated! My next drawing after this one was a lamppost, after all. On the other hand, we can definitely also get a lot more complicated. It wasn’t long until I ended up designing an entire building, after all. Maybe I’ll talk more about that one day, we shall see!

This piece was a ton of fun to make. It was super hard to make. And it was also really satisfying to make! After all, if I could make this complicated pose out of a complicated material, what couldn’t I do? Now, should I have made sure I was more confident before offering to help? Hell no!

Sit down criss-cross applesauce kiddos, because there’s a moral of this story! Don’t worry if you think you’re not skilled enough for something! You have nothing to lose by offering and trying! Odds are good, even if it doesn’t work out, you’ll learn a lot in the process! Not that I encourage lying on your resume, but if you’re fussing about saying you’re “familiar with” a skill versus “proficient in” a skill, go ahead and say proficient, then figure out the details later! You’ll be fine! Probably! At the very least, it’s worth a try!

Now, this was a lot. If you made it to this point, you have my deepest respect and gratitude! You’re probably either already interested in art, or just really interested in the process of making this game! You mostly hear from Ame in these posts, but it really does mean a lot from all of us on the dev team that so many of you guys care so much! Thank you for being patient with us as we do our best to make this really cool game while also trying to not mess up that pesky work-life balance thing that really likes messing with us.