Gourdelia!

Happy September! Meet Gourdelia, my second digital paper doll. I had a lot of fun making Eve Hallow a couple years back and figured making another Halloween-themed one would give me plenty of time to work on it over the summer.

I’d always wanted to make my own kisekae (aka KiSS) dolls as a tween/teen, even going so far as to draw out bases and clothing for them in mspaint. I never did get around to actually coding a doll, and sadly (or fortunately?) all those files are long lost. But hey, I’ve got a space to create and share as many as I can manage to make now (and I do plan to make more), so here I am, finally living out that little dream.

I actually managed to finish her fairly quickly—well, mostly finish her. I’ve been sitting on her for a couple months, putting off some finishing touches since it was crazy busy at work this summer. Now that I’ve actually finished the doll, I want to give a behind-the-scenes look at how I put her together.

Sketches and design

(Original Gourdelia sketch)

I started with my concept: jack-o-lantern headed girl that wears party clothes and has selectable facial features. I sketched up a rough idea of her pose, a few clothing items, and potential eyes, noses, and mouths. As you can see, I ended up flipping the image when I realized I had her facing the same way as my previous doll, Eve. I also ended up going with only two nose options (on and off) for simplicity’s sake.

The next step was taking her into Procreate and tracing over and editing the sketch to create the line art for her base. I decided I wanted her head to be bigger, and made tweaks to her pose.

Next, before I started working on the clothing and accessories, I wanted to nail down her color palette. I knew I wanted a limited palette of bright colors. I wanted an orange, a green, and a pink. I also decided not to use true black for the outlines and black fills, and the off black I went with softens the look of the lines a bit. The color palette generator at coolors.co was extremely helpful in pinpointing the exact shades that would work well together. It also helped in choosing a background color since I didn’t want to just go with stark white.

(Final color palette selected with help from coolors.co)

With that all squared away, it was time to draw up all the clothing and accessory options in Procreate. This part was the most fun for me! I’ve always been into drawing up outfits (I was obsessed with that Barbie fashion designer computer game as a kid). As I finished items, I’d save them as their own files.

Then came the slightly less fun but very important step of making this thing actually function the way I intended.

Cobbling the code together

Now, I’m not much of a coder. I went with JavaScript for Gourdelia since that’s what I used to make Eve Hallow, but I’m not going to pretend I fully understand how it works, nor that I was able to type it all up by scratch. With Eve, I admit I just looked up code for what I wanted to do and used that. This time around I tried to at least have a basic understanding of how functions worked so I could noodle around a bit. It still took me a lot of digging through GitHub and w3schools to really get it together.

Going in, I knew the functions I wanted were thus:

  • Clothing and accessory items rendered visible or invisible on a button click
  • Changeable facial features
  • Highlights on selected item buttons to show was was currently “on”

The functions I went with for Gourdelia are slightly different than what I used for Eve, but I think much simpler and far less clunky. I’m not going to say that my implementation of them is very sophisticated or anything. I went with what I understood (or mostly understood) well enough to get it to work. And that’s all that matters to me in the end. I don’t need to know how to do complicated things. I just want to make my silly little dolls and have fun with it.

Shout out to my partner though when, upon seeing me use notepad, suggested I use Notepad++ instead. I have to admit that it did in fact make things much easier. The feature that highlights matching parts in the code through the entire document made it a hundred times easier to spot mistakes, saving me much time and frustration.

Now, one of my issues with the Eve doll is that the selector for their clothing items is, well. A bit of a mess. I wanted something a bit cleaner and pretty for Gourdelia’s “closet”. I sketched up an idea for what this closet could look like.

(Sketch for the item selector)

I went with circle buttons over text buttons, which feels far less crowded than in Eve’s. Especially since Gourdelia has a more expanded color palette, using the circle buttons to indicate the color option for an item felt more clean. I’d also played with the idea of putting her facial features on a cycle, much like Eve’s hair base, but ultimately went with buttons for those, as well. It’s just more consistent and I think looks better.

With all the JavaScript figured out, it was just a matter of placement and formatting all the images…and then I put off doing the finishing touches–adding the main site link button and creating an image for Gourdelia’s name–for a couple of months.

That’s all done now, though, and Gourdelia is ready to dress!

And now…examples!

Here’s a peek at some of the outfits you can put together for Gourdelia:

You can find both Gourdelia and Eve Hallow in the Misc section up in the top menu for the site.

Next doll I want to go for a closet of drag and drop items rather than the selection buttons, really give it that KiSS feel. Making these is fun, as is the amount of experimentation it allows for. So, like I said above, expect more in the future.

Leave a Reply