A Scene From Midnight Feast: Roya’s Bedroom

I decided to put the full workings of this first page up because it illustrates how I changed my mind about the colour scheme. As you can see, I proceeded to create a bluish sort of colour scheme, avoiding the black outline with a colour wash that appears in many children’s books. This is fairly quick to draw, but doesn’t look as attractive to me.

In the end, to overcome the feeling that this project will never get done, I decided to make the ‘A’ version of each page the line-drawing and wash sort of illustration which can take about half the number of hours for me to crank out. This is because instead of rendering form tonally, I can just plonk down an outline and colour it in with a block colour. This makes drawing the characters a lot quicker. Since some pages have multiple touch and fade ‘animations’, drawing each character tonally proved too time consuming. If we spent a month on each page, this app wouldn’t get done before I got sick of it. But it’s not just about time. The ‘A’ version of each page has to look different in mood, and I was wondering how to achieve this at the beginning of the story, before Roya has fully entered her imaginative world.

As you can see, I begin to change the colour scheme back to the colour of the original canvas. In keeping with a more sketchy style, I’ve decided to hand-write the text.

I made Roya’s arms shorter so that she looks a LITTLE bit younger. I think she can pass for 12-14 now so I’m happy with that.

I had to send a whole bunch of preview screens to Dan so that he knows where to position the elements.

That probably gives some idea of the number of elements in this page, and how difficult it will be for Dan to get this page loading quickly and playing nicely. So there are no guarantees that he’s going to fit all of them in. He tells me that Apple are vague about upper memory limits, which means coding an app for Apple is a matter of trial and error to some extent.

Anyway, it would be nice to think that mobile devices were completely free of the constraints of print publishing — the need for a 32 or 24 pages, the need for approximate rather than precise colour and so on. But there are limitations on what we can do in a storybook app, even in an app designed for the best mobile hardware out there: Apple’s.

 

And here’s the next version. I’d like to say it’s the ‘final’ one, but you never know! I figure the first few pages need mucking around with the most. After I’ve got a mood down, I can remember how I did it, then recreate it on all the following pages.

 

 

 

Unlikely Influences

This week we started watching Season Three of The Wire. I was struck by how much my transition page for Midnight Feast resembled the housing depicted in that series. Then I realised that I drew this just after watching seasons one and two, and that I’d no doubt been influenced by the rather depressing backdrop of The Wire as I drew.

I’ve been thinking a lot lately about how everything you do/see/read/watch/hear during a long-term creative project has an influence, subconscious or not, on your final product. It’s important to keep surrounding yourself with good art, good books and, in my case, good TV. Um, okay!

Midnight Feast: Roya’s Scary Bedroom

wireframing

Since I am intimidated by a white page, the first thing I do is fill the page with a midtone colour. Later, after the page is no longer blank, I’ll delete that layer of brown.

Next, using the default pencil in Artrage, I sketch the bedroom. These lines are actually as straight as I could get them without making use of the ruler stencil, but the wobbliness is the look I’m going for. In other words, if I aim for straight, I get pleasantly wobbly. If I’m too careful, the picture will end up looking like an off-kilter photograph rather than an illustration. Besides, this pencil sketch will only serve as a guide and, like the ugly brown layer, the lines will be deleted after I no longer need them. On second thoughts, I never delete these ‘wireframe’ sketches — I just hide them. Who knows when I’m going to need them again later, perhaps for a different page. Although this whole book has been storyboarded, and I know I probably won’t need them… you just never never know.

As you can see, this room is sketched in one point perspective, looking down onto the beds. I’ll need the viewer to be able to see Roya tossing and turning later, because she won’t be able to sleep.

By the way, the outlines for the beds are each on their own layers. By keeping objects in their own layers I can easily change the size and positioning of one thing without affecting the other things. I’m not yet sure about the positioning of those two mattresses, because they’re meant to look lower than the bed. These things will become more clear as the painting progresses, I hope.

 

laying down colour

Above is a screenshot of Artrage.

Since I’m working on the large canvas (iPad size = 2048 x 1536), which won’t be scaled down this time (to make use of Apple’s beautiful new retina screen), it can take ages to fill in large areas such as walls with the felt pen tool, so even though the felt pen strokes are what I’m after, first I use the roller to cover area fairly quickly. I’ve already sketched a different view of this room, so I’m keeping my eye on that as I look at the basic shadows. As you can see, I’ve imported a screenshot of that into Artrage to use as a reference. I am holding the Wacom pen in one hand. My other hand is hovering near the keyboard, pressing Alt to pick colours from that reference photo to use in this one.

walls filled in

Now the walls have been covered with a roller.

The room has to look the same from one page to the other. This poses a dilemma — not from an art point of view but from a storytelling point of view. For this story, each page has two versions: the version that happens in the real world of the main character (Roya), and the world which happens inside her head. For the majority of this story, Roya’s imagination has transformed her shabby, drab apartment into a luscious, brightly coloured interior. Yet she hasn’t quite gone there yet. Instead, she’s still using her imagination but not to good effect. The reader needs to realise that she is still in her bedroom, too, and it’s early in the story, so I’m caught between deciding whether to make use of the drab colour palette or the new one. I’m going to have to experiment with that. At this stage I’m thinking I’ll probably export the final background into GIMP and fiddle with the levels of blue. Then again, I may have to do something inside Artrage itself. As you can see, for the meantime I’m painting exactly the same room as before.

the concrete floor

I have put the floor on a layer of its own because I wanted to use a concrete overlay. This is just a photo of some concrete, which I imported as a tracing image, converted to paint (in a layer above my gray flooring), then adjusted the blend mode to overlay. This is exactly the look I was going for. The good thing about skirting boards (in life as in paintings) is that they exist to cover up messy edges. So I don’t need to bother cleaning those up too much.

 

curtains

In the story, Roya has trouble sleeping partly because it’s too light outside. For this reason the curtains will have to be substandard. I’ll make them a bit raggedy at the bottom. This will come in handy because Roya will imagine monsters coming under these curtains. I’ve heard a few people say they had this fear as children. I’m yet to find out (via user testing!) whether this is TOO scary for a middle grade audience, but I’ve found that worrying too much about the end experience is counterproductive, so I’ll stick to illustrating the story as I would enjoy it.

I have chosen blue for the curtains from the bright colour palette reserved for the b-version of pages, even though I know this is going to be too bright for the otherwise drab room. I’ll desaturate it later. I’m doing the curtains in two layers – first, the opaque layer, where the curtains overlap the wall. No light can shine through here.

opaque curtains

I continued to fill in the rest of the curtains in the same colour (and at 100%) opacity on a new layer, then dropped the opacity of the diaphanous layer (the part of the curtains which cover the window itself) to 75%. I can rarely guess the right transparency of a layer. I started by guessing 50%, but that was too much, so next tried 70. I couldn’t decide whether 70 or 80 percent opacity looked the better but life is too short to spend too much time worrying about such things, so 75 it is!

I then merged the layers and blended around the joins with the ‘instant blur’ tool in Artrage. Next, the spotty overlay, which I had in my library of overlays. I was really pleased at how the whiteness of this overlay meant that the world outside is also bright white. I haven’t yet painted the outside scene, so I don’t really want to show any of it! I’ve also added to the opacity by using the eraser at very high softness and about 20% pressure. Also, I desaturated the blue by -44, which looks better to me.

Sure enough, I had to move both beds over a smidge, so I was glad I put them on their own layers. I have also put a texture over the bedroom wall, but I’m not sure whether I’ll keep it yet, as the entire picture might look too ‘digital’ and not ‘handdrawn’ enough. Textures, like anything, need to be used sparingly. I have also put a poster on the wall above Roya’s bed. This serves two purposes: it tells the reader (at a subliminal level, I’m sure) that this is Roya, in the bed beside the window, and that there are four people in her family. I coloured the mattresses with grey and white, and I chose a grey portion of the yellow range so that when the white and grey mix together, I get a nice yellow colour. I’ve learnt it pays to be mindful of which grey I choose, for that very reason. Even in digital painting, blacks and greys are slightly complicated. There’s more to these colours than meet the eye!

After a few months’ break, I came back to the story and decided that Roya was older than about seven — as a foodie she can be about 12 or 13. This meant that the poster above her bed seemed too juvenile, unless it was something she’d done years ago, in which case she probably would’ve taken it down by now anyway.

Since Roya is a true foodie, it made sense for her to paint a roasted chicken. In my mind her full name is ‘Roya Gourmand’, though this won’t come up in the story. Room 13 sounds appropriately ominous since 13 is an unlucky number in some cultures. It’s fitting that Roya has an interest in painting because she has an excellent imagination. It’s likely she’d want to express herself somehow, with paints or whatever.

I had to desaturate the painting somewhat from the one above because in dim light, everything tends towards black and white.

For several reasons, I decided the little sister should have a poster above her bed, too. First, it’s likely that she’d look up to her older sister, who is a good few years older, and emulate what she does. Second, I’ve been wrestling with whether to give her a name. There are several reasons not to: it emphasises the familial relationship (even though it’s probably clear enough that these two are sisters), and makes the character more universal.

So I decided in the end to keep referring to her as ‘Little Sister’. In many languages, this is perfectly normal, but I’ve noticed from critiques in writing groups that some English speakers consider failure to give a character a name of their own is almost disrespectful. So if anyone feels like this and really wants to know what the little sister’s name is, here it is: I called her Afya, which in Arabic means ‘shadows’. Afya has only a supporting role in this story, so in a sense she’s in the shadows.

I considered getting the resident four-year-old to do me an authentic juvenile portrait but unfortunately she’s going through a pink phase, where every single thing she draws has to be pink. She also likes playing with all the different Artrage tools, like airbrushes, sticker sprays and gloop pens, whereas I wanted this to look as if it’d been done by hand with splatters of actual paint. So yes, I did that myself, taking cues from typical four-year-old paintings that I’ve admired of late.

 

This is pretty much the final version of this page, though I’m experimenting with a drop shadow on the text. I’m not a fan of drop shadows because I think they’re overdone, but when I minimised the picture on my computer monitor to 25% I got a vague idea of what it will look like on the iPod and iPhone screens. I couldn’t easily read the text without drop shadows. But the PC monitor isn’t a great gauge of readability because Apple mobile devices have screens a lot better than my cheapo computer monitors.

Also, when the four-year-old woke up screaming because of a hand moving in the shadows across her bedroom wall I strengthened my resolve to keep the ‘scary on-or-off’ functionality. I’m pretty sure it was this picture which gave her nightmares. Not recommended for under middle-graders, though I noticed that Monster House has a scene in it where a hand comes in through the window, so I’m confident enough that older children can cope with it! Monster House, too, is for middle-graders.

Dan is having problems with memory, because the precursor to this page already has so many assets, so I’ve been advised to err on the side of minimalism. For that reason, I decided not to have Roya tossing and turning in her bed, and I also decided not to have Little Sister’s blanket moving gently up and down with her breathing.

I’m not sure yet, until Dan tries to cut the code, whether we’ll be able to leave both hands coming in towards Roya, because each animation has about 30 frames. I look forward to seeing how the animations look. I’m not at all experienced with animation, so even basic animations such as these are plain old guesswork. I never know how it’s going to look until I see it in action.

The Non-Intuitive Rules Of Design

I’ve been blogging with WordPress for about 3 years and only just noticed the text at the bottom of this screen which says, ‘Thank you for creating with WordPress.

Maybe I’m just not that observant. Actually, I know I’m not that observant, but is it also possible that there is a space on every page which is almost guaranteed not to be noticed?

I’m reminded of a staff ‘de-stress’ sheet which the assistant principal used to distribute into everyone’s pigeon hole on a Friday. High schools are some of the most complex organisations that exist, management wise, and this de-stress sheet was vital in that it told everyone what was happening over the coming week. It was an A5 sheet of paper, folded in two (usually with a lewd cartoon on the front, which we were reminded to keep away from students), and the text inside was surrounded by a black border.

It took me about three years to work out that the MOST IMPORTANT THING of to the week existed OUTSIDE that border, right at the top of the page. It was even in a different font, 16 point instead of 10. It had been designed to be noticed. Yet when I asked around, I wasn’t the only staff member to have missed it.

I had never, ever seen it. Once you knew it was there it was impossible to miss. And I’m sure the assistant principal, who’d designed that template, couldn’t believe someone might fail to see it. I can’t begin to imagine how much trouble I would’ve kept out of had I noticed that particular line of text.

I wonder if there are any ‘rules’ of layout that my boss would’ve lead to a better de-stress sheet. If I can take anything away from that:

  • Just because the designer thinks she’s highlighting something, doesn’t mean the end-users will consider it so.
  • The very act of trying to make something obvious may have the opposite effect.
  • There ARE rules of layout, and an experienced designer no doubt knows them intuitively. I don’t know the rules per se, but I’ve learnt from that one example not to position important things too close to the edge.

Do You Look Like Your Dog?

There are some researchers, who’ve been very lucky with their funding, who have studied the ways in which pets resemble their owners. If you’ve ever been to a dog show you’ll probably have noticed the phenomenon yourself. Sure enough, it’s been noted that when shown a random mixture of owner/pet photos, people are able to match those owners with their pets at a higher than random rate.

30 Owners Who Look Like Their Dogs, from Buzzfeed

I sometimes wish I could see photographs of illustrators alongside their pictures. I bet illustrators most naturally draw people look like themselves — similar face shapes and stature, even if they don’t mean to. Indeed, even if they go out of their way. Because we spend a lot of time looking at family members, and they tend to look like ourselves. We must also have a ‘default setting’ for a face, and that default is ourselves.

Do you look like your pet? We own a rather attractive Border collie. Though if I think harder, he hasn’t had a good brush in quite a while, and I have to admit I care about my own coiffure just about exactly as much. Think I’ll duck off to the bathroom and run a comb through my hair…

Related: Stuart Freeborn designed Yoda based on himself. Who else looks like the character they designed?

Fonts in Storybook Apps

I’ve heard that serif fonts exist to help the reader’s eyes move across words, gently guiding us from one letter to the next without us even realising.

I’ve also heard that sans serif fonts are more easily read on a screen, which may explain how Comic Sans ever took off. (I have to remind myself that it did used to be awesome, that font.)

Most storybook apps I’ve seen make use of a form of serif font, regardless of the fact that the reader is reading from a screen. While it may be the case that sans serif fonts are adequate for iPads, if not downright better, there’s an atmosphere conveyed by serif fonts that can’t be achieved with sans: the feeling of paper books and tradition and memories of our childhood favourites. Font choice influences the mood of a piece of work. This is why I have chosen a serif font.

I love fonts, and can easily spend a week finding new ones and seeing how they look. In the end, though, I decided to use an open source font for The Artifacts. It’s from the Dejavu font family. After experimenting with all of them, the condensed bold version looked the best.

What about all those other cool fonts, though, the ones with REAL personality? There are numerous font sites online and I’d love to have made use of one of those.

The problem I have is that someone, somewhere designed those fonts and they rightly expect to be paid. When I look at the end user licence agreements for some of my favourite ‘free’ fonts, they are indeed free for personal use, and sometimes the print run licence is reasonably priced, but once you want to make use of a font in a piece of software, sold internationally, the licence gets really difficult to understand (I understand ‘expensive’) so without a copyright lawyer to advise us, I figured I’d just stick to open source.

Since it took me a good while to find Dejavu, I’ve decided to use it again in Midnight Feast. This time, though, I’m wanting a sketchy, handwritten version of a font. I considered making my own font. There’s an iPad app for that.  (But I can’t remember what it’s called, and I haven’t found an adequate stylus yet.)

So I made my own handwriting font. You can do this online for free at MyScriptFont.com. (There are also plenty of sites that’ll charge about $15 for the same thing, e.g. Your Fonts, but they don’t tell you that until the very end.)

I called my new font Midnight Feast, of course. I used a pen preset that I’d already made in Artrage. I didn’t bother printing out the template, mainly because our printer’s not working, instead making use of the Wacom. (When, exactly, is the Printers’ Strike ending, again?) My font is pretty rough and ready. I wouldn’t want to attempt anything other than a handwriting font without making use of something far more time consuming and powerful like FontStruct (where I technically have an account.) Tutorial on FontStruct can be found at MacLife.

We’ll probably be using our Midnight Feast font only to generate numbers at Dan’s end. But now I have a font called MidnightFeast on my computer! And it was super simple to do.

Experienced and qualified font designers will be turning in their graves.

RELATED

A Handwriting Font For Doctors

The Typography Of Authority — Do Fonts Affect How People Accept Information? from The Scholarly Kitchen. (Hint: That’s a loaded question.)

How To Make Fonts From Your Own Writing With iFontMaker

Pros and Cons of Universal Apps

Most of you are probably already aware of what Universal apps are, but for those who aren’t let me give a brief description:

On the App Store, there are two device categories. iPad and iPhone/iPod Touch. Each device category has its own App Store, with its own list of apps.

Universal apps are configured to run in both categories, and should work on all supported devices. Now this is a great deal for consumers buying apps, because you basically get 2 for 1. Buy an app on the iPad, and it is linked to your iTunes account, so that you can then download and use it on your iPhone or iPod Touch at no extra cost. Our first app, The Artifacts, is a Universal app. You can tell a Universal app, by the little ‘+’ plus sign next to it in the App Store.

Ok now that I’ve explained it, lets go through a few pros and cons of this system;

 

Pros

  • Savings: Consumers can use an app on any device that is linked to their account, and they only have to purchase once. Obviously a pro for the consumer, and generally speaking, a happy consumer makes a happy developer.
  • Convenience: You might hear about a great app from someone you know.. but you only have your iPhone on you. You can buy the app on iPhone, and then later download it on the iPad, because it’s linked to your account.

Cons

  • Development time: It takes quite a lot of extra work to be able to support all device types in the one app (different screen resolutions, memory requirements, etc).
  • App size: Because you need to support different device resolutions, you need to have all the device graphics in the one app. This makes for a much larger app, especially for the smaller devices. The Artifacts for example is around 92 MB. It would be reduced to about 40 MB if it only worked on the iPhone/iPod touch. Our next app, Midnight Feast, supports iPad Retina images (2048 x 1536), which are 4 times larger than iPad images. Apple could provide some support in this area. If we could make “custom” versions of universal apps, it would fix this problem. It would work in a similar way to having different device versions of the same app for sale (so you’d have to buy two copies. One for iPhone/iPod touch, and one copy for iPad), but just make it universal instead so you only have to buy one.
  • App Store ranking: Now this is a biggie. Any developer knows that it’s important to get a high ranking in the App Store. The problem is, if the app is universal, it’s effectively ranked by each device. This means that if someone buys an app with the iPhone, it only affects the ranking for the iPhone store. This is clearly a poor solution, because it puts universal apps at a disadvantage. I’d like to see Apple give rankings for Universal apps based on the total downloads, not on downloads from each individual store.

It’s really hard to tell, because Apple do not provide the stats, but from the store rankings alone, we notice that we’ve had quite a few downloads on the iPhone/iPod Touch side of things.

We’ll continue to make universal apps, but I really hope Apple starts to support them in a way that helps the publisher AND consumer.

 

Designing Roya in Midnight Feast

I read a new picturebook to our daughter last night. The artwork was amazing. But one thing bothered me: the boy looked like a different person in every picture.

Now that I’ve illustrated a story for myself, I can totally see how this happens.

1. It’s difficult to draw people. I don’t think I’m alone in thinking this, even among people who draw regularly. I think that’s why so many picture books feature animals as characters!

2. It takes months to illustrate a children’s book (even if, unlike me, you don’t dawdle about it!). Over the course of months, your child model grows up. I’ve already noticed that the reference photographs I took of our three year old look different, mainly because she’s since turned four.

But of all the things to get right in an illustrated book, it must be the child protagonists. I’ve noticed our resident preschooler looks intently at the facial expressions of the characters in storybooks. When language skills are in early development, facial clues provide most of the story.

I thought I could use myself as a model for Roya, to avoid imposing on randoms, asking them to get into my bed and whatnot, but when I first drew her, she looked about fourteen. The lazy bastard in me thought, oh well, fourteen she is, then. I can’t be bothered creating her again.

But the story doesn’t fit a fourteen year old. She has to be younger than that — I wrote the story about an eight year old. So even though I quite like this character (who looks not much like me, by the way) I had to kill her. (Along with the initial colour scheme, which was easier to let go. No one’s ever been incarcerated for killing a colour scheme, I don’t imagine.)

By the way, here’s an even earlier version of Roya. When Dan walked into my computer room he actually screamed. “Yar! What the hell is that?”

That’s when I knew I was making the story TOO scary. No one would expose their kiddies to a story with this thing as a main character, right?

Anyway, that’s what you get when you use a Blythe Doll as inspiration. (She did actually have eye-balls, but when Dan walked in I hadn’t done them yet. It’s true, without eyeballs, anyone looks freaky.)

Children’s Literature: How scary is TOO scary?

Writing scary tales for children is difficult, because it has to be interesting without being too scary. How is it done? Where’s the line? What have storytelling experts said on the subject?

I’ve always believed that children, even at a very young age, know their limits, and if a story is too frightening and overwhelms them in some way, they will either fall asleep or walk away.  If you read to your child on a regular basis, it’s easy to navigate this terrain with conversations about each story that help you instinctively calibrate what is appropriate for bedtime reading.  Reading fairy tales may expose children to the dark side, but it also introduces them to survival skills, teaching them to use their heads to outsmart predators.  Shoving the witch into the oven may be a bridge too far, but no reason to be reverent about the words on the page, especially for the younger crowd.

Maria Tatar

People say, ‘Your book keeps giving me chills,’ but I don’t know what that feeling is. Horror always makes me laugh. Normal adult things scare me, but not things from a book or a movie.

– R.L. Stine, from an interview with Village Voice

“There’s no formula. I think you have to create a very close point of view. You have to be in the eyes of the narrator. Everything that happens, all the smells, all the sounds; then your reader starts to identify with that character and that’s what makes something really scary.”

– R.L. Stine from an interview with mediabistro

 

What’s the difference between a monster movie and a dark fairy tale?

It’s a very, very, very thin difference. I think that horror stories come from fairy tales, in a way. They share a lot of similarities. I think the difference is tonal. You know, the fairy tale contains a lot more elements of magic and whimsy and the the horror story contains a lot more, sort of, almost existential feelings — sort of dread, and ultimately they are similar melodies, played at a very different key.

– Guillermo del Toro

Over time, supernatural and horror fiction that has been targeted to children and young adults has become darker. If we look at books from the early 20th century through to the 1950s or 60s, we see books similar to The Wonderful Wizard of Oz in their mild handling of frightening characters and scenarios. As we move into the 1970s we start to find horror novels targeted towards young adults. Stephen King’s works Salem’s Lot and Firestarter won the American Library Association’s Best Books for Young Adults award in 1978 and 1981 respectively, showing that children and young adults have been quite willing to read scary literature for some time. Neil Gaiman’s books Coraline and The Graveyard Book are also targeted for the tween audience, and could easily be considered scarier than even these specifically labelled horror books from authors such as King and Dean Koontz. In recent years, it appears clear that more and scarier books are being targeted to the child and young adult audience, and as a result, children are reading scarier books than in the past.

Thomas Pynchon

Continue reading “Children’s Literature: How scary is TOO scary?”