Digital Illustration Tips and Hints

Layers and Merging

Create lots of layers, periodically grouping and merging before the doc gets too cumbersome. When flattening, always ‘save as’ each version. Regular saving as (rather than just hitting save) will help you out if your software crashes and corrupts upon re-opening.

You can flatten an old version and use as a reference layer (at low opacity)

At the end of your process you’ll be merging layers. As you merge you may choose to tweak opacity settings of different groups.

Colour

Instead of picking colour from a photo using the sampler, you’ll get more interesting results if you pick colours manually, perhaps starting with what’s there in the photo but modifying the hue/saturation. There are a lot of dead colours in photos. At the very least, click around and find a good one before committing to it.

Values Checking — Use a layer for muting the colours to better understand values (without getting distracted by the pretty colours). If it looks no good in black and white, you need to work on your values. How to do this: Create a black (0,0,0) filled layer with layer blending set to ‘saturation’ and put it at the top of your layer stack. Another way to check values is changing your background colour from white to grey, which is one of the reasons why you should never work on a white canvas. (The other is that it’s intimidating!)

Choose a background colour that ‘sets the mood’. This might be a ‘coloured grey’ colour — warm or cool.

Devise a colour scheme before starting a project. You can add new tones or change a few as you go.

Canvas Size

If you ever need to increase DPI after you’ve added a gradient layer this can adversely affect its smoothness, so increase file size before you do that. Start by making a picture at least twice as big as the final product should be.

Better to work with high resolutions then scale down afterwards because high res allows us to paint in finer detail.

Thumbnails for planning purposes can be low res, and should be, to make the workflow faster. If you like the thumbnail, enlarge and paint over it.

Light and Texture Layers

Keep light sources in mind. Some illustrators draw a (temporary) arrow onto the canvas to remind themselves where the light is coming from. There can be more than one light source, of course. The other thing that can help with creating and remembering the main light source is creating a gradient (obviously, with the light part nearer the light source).

A great unifying tool is to add a gradient layer over top of (almost) finished artwork. This can have the unintended consequence of disguising detail in lights and darks. You might raise some objects above the gradient layer for this reason. If two things are merging too much you can add a gradient layer in between. You might also add a slight paper texture or something like that.

Texture layers can be great (for unifying) but can ruin your hard work by hiding detail. Apply textures on separate layers and then use the eraser on them to get rid of what’s not really needed. Most of the time it won’t really be good enough to simply plonk a textured image on the top layer of your work and call it done. You’ll be creating custom textures most of the time.

Play up the difference between form and cast shadows. There is diffuse light, or light from a point source. Both are important (or can be). e.g. One from the forest, one from a glowing object in the palm of a hand.

Aerial perspective (a.k.a. atmospheric perspective) refers to the effect the atmosphere has on the appearance of an object as it is viewed from a distance. Distant objects are pale, less detailed and usually blue.

In low lighting, there is a lower range of colour values. Wood, metal, skin might all be depicted with the same colour value in low light.

Software

90% of digital painters use Photoshop. The other 10% use Painter. Artrage is a much cheaper program which can replace Painter and Sketchbook. Artrage has excellent blending capabilities and is designed for the home user, but excellent results can be achieved. However, the professional illustrator will still want some of the capabilities of the more expensive software. There’s nothing wrong with making use of several programs — a combination is probably more common than not. Some illustrators are now incorporating 3D software such as Blender into their 2D work. This can speed up your process if you’re good at it.

A more recent addition to the digital illustration marketplace are products from Affinity: Affinity Photo and Affinity Designer which are similar (but much cheaper than) Photoshop and Adobe Illustrator.

Sketchbook can be very good for creating thumbnails, too.

General Tips

Beginners tend to start at one corner of the canvas and continue across. Pros get rid of white as fast as they can. They don’t think of things as objects that need to be separated logically.

Don’t make edges and boundaries where the eye would see none. (Paint what you see, not what you know is there.) This is particularly true in low light. Shadow sides have softer transitions.

In order to create good scenes from your head you need to have done a lot of life work first. Otherwise you’ll need to collect a lot of reference photos. In fact, every artist is working from ‘reference’, whether they carry that reference inside their head or are using a photograph/real life scenery.

Draw the viewer’s eyes to a specific part of the piece. That piece will be more detailed.

There is a hierarchy of edges in every image. Play up the sharpness of some edges. Others fall away. When creating edges, give harder objects (e.g. metal) harder edges than softer objects (like skin). Keep the soft/hard hierarchy relative in any one image.

Thumbnails — The first thing a concept artist does is create thumbnail sketches in monochrome, with a variety of different silhouettes to try out shapes. Work in greyscale. Use neutral grey as the background colour. Put each silhouette/object into its own layer and group those layers to keep organised. Always keep that background as a separate layer. This way you’ll be able to move objects around freely to work up to a great looking composition.

Keep an eye on the piece as a whole, especially when doing fiddly adjustments.

SAPALO — Sample And Paint At Low Opacity. A digital painting technique where you create vibrant colour only by overlaying lots of layers, as if painting with weakly pigmented watercolours. This is not the only way to work digitally but it’s pretty common.

Blocking — This is a fast way of working — create the shapes then lock the paint in place so that transparencies can’t be touched. This will allow you to paint detail onto your shapes without ‘going over the lines’, and is especially valuable when working with a stylus on a Wacom tablet, which is a little harder to manipulate than a pencil and paper. Don’t start on the details until the composition is blocked out. Think of yourself as a sculptor at this point.

Flip your layer periodically. This will show you where the flaws in your line work are.

iBooks Author: Making a Fixed Layout Children’s Picture Book

Lotta: Red Riding Hood made with iBooks Author available on the iBooks store for iPad
Lotta: Red Riding Hood made with iBooks Author available on the iBooks store for iPad

I noticed when searching for tips on how to make a picture book (of the sort most often produced for children), the term ‘picture book’ most often refers to a book of photos as far as iBooks go.

But I didn’t want to create a ‘photo book’. Nor did I want to use any of the fancy features of iBooks Author (IBA). After making 3 picture book apps, with all the bells and whistles, I didn’t want any music/narration/video/hyperlinks — I just wanted a plain old linear picture book. I didn’t want to spend 18 months on it, or spend weeks learning how to use new software.

ONE OPTION: BOOK CREATOR APP

I considered making my picture book with the Book Creator app, used by lots of schools when students are creating projects. Book Creator is certainly simple, and very good for use with students, but I’m not a fan of its page turns, and I want my pages to fill the entire screen.

ANOTHER OPTION FOR MAC USERS: IBOOKS AUTHOR

As it turns out, iBooks Author is amazing for what it can do as well as for what it can’t. For example, you can’t hyperlink to an image.  [Now you can.]

IBA is not set up for ‘creating’ a picture book — it’s the equivalent of Adobe InDesign in that you come to IBA after you’ve created all the story and artwork and now want to lay it all out so that it looks nice.

(My favourite ‘creating software’ is Scrivener, by Literature and Latte. Others are using Pages.)

How do I set up an iBooks Author file to create a children’s picturebook? 

tl;dr

Download my very basic IBA picturebook template.

A children’s picturebook has no chapters and only one section. So do this first:

When creating a new document, don’t choose one of the templates — pick the plain one.

Delete its first chapter. You can’t get rid of the ‘section’ below it. Start your page one in the section, then add all the rest of the pages behind it.

Step-by-step instructions are here.

Although all pages after page 01 will be indented inside IBA, as if they’re children of the ‘mother page’ 01, the reader won’t see this incorrect hierarchy, and it doesn’t really matter for us as authors either, since the pages are all numbered correctly. Consider it an unfortunate limitation of iBooks Author, which is optimised for making textbooks, not picturebooks.

Picturebook Template in iBooks Author

Word of warning:  Don’t do what I did and at a late stage decide that actually you’d like to insert a page before page one. If you do that you’ll have to shift a whole heap of assets manually. At least, I never figured out a way to insert a page before the first one.

 

Disable Portrait Setting

It’s necessary when creating a Fixed-Layout Picture Book (FXL) that you don’t want the orientation to change when a reader rotates their device. To avoid this all you need to do is click the “Disable Portrait Orientation” check-box in the iBooks Author Document Inspector.

There are a lot of Internet lamentations about how people are still making FXL books in this day and age, when flowable text exists so use that instead! But no, unfortunately 2015 is not the year in which it’s suddenly easy to create beautiful, bug-free reflowable picturebooks for iBooks. Maybe next year, Apple?

The main problem with creating a FXL book is that it won’t be available to users of iPhones and iPod touches. There are many more iPhones in the world than there are iPads. This will affect the number of downloads you get. Now you can read one of these fixed layout picture books on the small screen which actually creates another issue: For which screen size should you optimise? our Lotta: Red Riding Hood was made for iPad, but now you can read it on an iPhone, the text is actually a little small.

 

What size should I create my iBooks canvases in my art software? 

2048 x 1496px. (That’s landscape)

When you place your image onto the page in iBooks Author, type 1024 into the metrics panel of the inspector. Position it at 0,0:

iBooks Inspector Canvas Size in Pixels

What size do I make the cover?

The cover is always portrait orientation on the iBooks Store.

768 x 1004 pixels

You may have noticed that IBA works with points. I don’t know why. But if you’re interested in more information on pixels vs points, dimensions etc. etc., I found this website the most helpful.

 

What do I do about the text? Do I add the text inside my art software, or within iBooks?

This seems obvious to me now, but was a question I started with. There is a huge advantage to adding the words in iBooks Author — the end user can make use of iOS features such as dictionary, highlighting passages, or I believe there’s a setting where they can have the words read aloud to them. Also, the font will look really crisp on the screen if you’ve added the words within iBooks Author rather than embedded them into the page in your art software.

The problem is, how do I know where the words are going to go, as I make my art in a separate program? I hacked around a bit and ended up pasting all the words into iBooks Author (before doing any art at all), deciding which size font fit best (for this book size 20 looked best for the number of words per page).

Next, I took an approximate (but close enough) screen shot of each page (Cmd+Shift+4), saved the screenshot as page1, page2 etc, then used this as a semi-transparent layer in my art software as a guide to where I’d put the words. That way, I was able to create the illustration to fit around the words.

Using Screenshot as Tracing Object in Artrage
Using Screenshot as Tracing Object in Artrage

 

Page Layout

For Lotta: Red Riding Hood I have decided to stick with a traditional verso-recto design, partly because this is based on a traditional tale, so I want a traditional feel. Bear this option in mind for more modern stories: Now that you’re working with a flat screen rather than on paper with a centrefold, your graphic design is not in fact limited by that pesky join in the middle. Here is an example of interesting, magazine-esque graphic design from a book called:

TRICKY VIC: THE IMPOSSIBLY TRUE STORY OF THE MAN WHO SOLD THE EIFFEL TOWER (Click through to find more about this book at Art of the Picture Book).

TRICKY VIC- THE IMPOSSIBLY TRUE STORY OF THE MAN WHO SOLD THE EIFFEL TOWER
Here the double-spread has been broken into three distinct columns.

What should I put into the ‘Intro Media’ area?

I’ve bought children’s picturebook iBooks where the reader is subjected to a promo video of the picturebook as soon as we open it. I think this is the wrong way to use a promo video. After all, the user has already found your book, if not paid for it. Perhaps you can insert a video which provides a prologue of sorts to the story. I’m sure there are other creative ways to make use of this new digital medium. Let me know if you can think of any.

For now, I’ve decided to use this area for a landscape version of the title page. This works well. I feel an iBook picturebook needs a title page as well as a cover — after all, we’ve been conditioned as readers of picturebooks to expect end papers, a colophon and at least one title page before starting to read the story.

I designed the cover and title page pretty much simultaneously, since I wanted to use more or less the same assets to create both a portrait and landscape version of the same thing.

Here’s our front cover:

Lotta: Red Riding Hood cover for iBooks Store
Lotta: Red Riding Hood cover for iBooks Store

And the title page, which I dragged into the ‘intro media’ area in IBA:

Lotta: Red Riding Hood intro media for iBooks
Lotta: Red Riding Hood intro media for iBooks

 

What do I put into the Table of Contents Area?

You’ll need to put an image in there, maybe the digital equivalent of endpapers? I created an image related to the story, and now it doubles as a colophon. iBooks Author will show you with semi-transparent squares exactly where the page thumbnails will go, so make sure you don’t put anything ornamental or fussy behind there.

Table of Contents Background Image
Table of Contents as seen from within iBooks Author

Here’s what the same page looks like when it’s on the iPad. (Artwork is in progress during this preview.)

Table of Contents as viewed on the iPad
Table of Contents as viewed on the iPad

As you can see, Apple reserves some space for their tool bar/status bars.

I made a PNG file which you are welcome to use as a reference overlay when creating your background image in your art software. Turn it on and off as necessary to check you’ve positioned your illustration where you want it.

How do you preview an iBook on your iPad?

You need to have the iPad plugged into the Mac, with the cord. Then it will show up as a preview option. (You’ll also be reminded that you need to open iBooks.)

Important Update: Mid 2015, Apple changed iBooks so that you can now read iBooks on an iPhone as well as on an iPad. This has important consequences for how big to make the writing — bigger — and means that you’ll need to decide beforehand which device you’re going to optimise for: Will the words look a little too large on the iPad, or a little too small on the iPhone?

Next job, getting your iBook onto the iBooks Store.

  • I called the American Tax Office via Skype and requested an EIN. Strangely enough, we’ve been selling apps on the App Store since 2011 and have never needed one of those. It took no time at all — at least, it wouldn’t have, if the Skype connection had been better…. [Was it the connection, or my non-American accent?!]
  • You’ll need to download an extra piece of (free) software called Producer. (Whyyyy)
  • It took about a day for LRRH to be approved (or, overnight, since I’m here in Australia). A subsequent book seemed to appear on the iBooks store right away.
  • No, you don’t need an ISBN — it’s no longer a required field. (If you’re Canadian you might want to grab one anyway. I heard over your way, they’re free.)

Mercer Mayer On Picturebooks

All three of my daughters loved Liza Lou and the Yeller Belly Swamp by Mercer Mayer, 1984. Picture book with strong young female in a cultural environment my girls found magical. We would take turns being the characters and they could participate even before they could read. It was the first book they wanted for there own children.

commenter from On Point

 

On the Brain Burps podcast, author/illustrator Katie Davis interviewed Mercer Mayer, whose Little Critter books were all around our house as I was growing up. My mother particularly enjoyed them. Sure enough, I enjoy reading them to my own kid.

what a cute little guy....love mercer mayer books!

The podcast can be found here (20 11 2013).

A Mercer Mayer board on Pinterest

Mercer Mayer has an astonishing work output even though he’s been in this biz since the late 60s, with over 400 productions by now. Mayer also interests me because many of the Little Critter books have been turned into apps by Ocean House Media. Here are some things I learnt about apps and children’s books from this interview:

Although many authors are reluctant to enter the digital age, he feels this is like saying of the Gutenberg Press, no I’m just going to stick to handwriting thanks. He sees no reason not to make works available via new technology, whatever that technology happens to be. Mayer’s attitude is not a new one — he also embraced CD-ROM when that was a thing.

Mercer Mayer has an assistant, Bonnie, who works with him on marketing appointments and on the more mundane Photoshop tasks which are nonetheless lengthy and time-consuming.  While I thought this sounds awesome in a way, I wasn’t too impressed that Mercer Mayer didn’t realise Katie Davis is an author/illustrator in her own right. I don’t aspire to that kind of success — the kind where you don’t bother looking up your interviewers’ credentials, or keeping up with who’s who in publishing world.

Katie Davis at the time of this interview was considering biting the bullet and subscribing to the monthly plan that Adobe has now instituted for its Creative Suite. Mayer’s advice is to not bother. He still uses Adobe CS on Macs which haven’t been updated since Apple switched to Intel processors. He does update his printer, so it seems, because he was talking about how good printers are nowadays — he can get excellent proofs out of his. I think he has a point about the Adobe thing. While it’s nice to have the latest version, in fact it’s possible to do very good work with much older versions of this very nice piece of software, even if it takes you a few more keystrokes or whatever. Mayer no longer works on paper — it’s all digital — he uses a Wacom Cintiq (the top of the line model, by the way, in which it’s just like drawing on paper.)

Although Mercer Mayer has produced many books, each time he finishes he thinks that was his last work. But then he starts doodling and another idea presents itself. I’ve heard that the writer of Mary Poppins, P.L. Travers said exactly the same thing: Ideas are floating around in the ether waiting for a writer to pull them out of the air and turn them into something, and if you don’t do it, someone else will.

Mayer also says there’s no more than about 10 ideas out there anyhow. (Some people say seven.) It’s all about how you execute the idea.

The hardest parts of writing a picturebook are beginnings and endings. The middle is easier. The main problem with many middles is that the writer is focusing on the same scene for too long. You turn the page and it’s still the same scene, when the child reader wants to move on.

The other problem in many picturebooks is that the writer doesn’t seem to trust the illustrator, writing far too many words, perhaps as guides for the illustrations. Picturebooks are all about the illustrations. Illustrators who write their own stories don’t have this particular problem, and Mayer is thankful that he writes his own.

 

 

 

Skeuomorphism: What is it?

Here’s an infographic.

Skeuomorphism is one of those words you keep hearing, once you’ve learnt what it means. I’m even starting to hear it outside tech blogs: Has Morality Become A Skeuomorph? from The Society Pages.

It’s oft-talked about in app world because developers each decide how much an app needs to emulate the real world. For storyapps, one form of skeuomorphism is in the page-turn. There’s no real need for digital books to emulate the turning page — technically an entire story could exist on a single screen. But we’re at a time in history when most readers are well-adapted to print books, in which the transition to digital needs to feel intuitive to that cohort. Hence the ‘page turn’ icon.

We made use of a page-turn icon in The Artifacts. The button looks like a dog-eared page. That was at the end of 2011.

After a year and a half, certain conventions have started to emerge, and right now the dog-eared page icon indicates the user needs to swipe in order to get to the next page. We don’t like the swipe to turn because younger readers tend to find it difficult to do. Also, swipe to turn the page limits the touch-interactivity possible on each page, with hotspots limited to the centre of the screen.

skeumorphic page turn dog ear button

So with Midnight Feast we’ve decided to use an arrow, which looks unambiguously like a button. We hope no one will have trouble working out how to turn the page, even users new to touchscreen devices. We shall see.

Arrow Page Turn Button

We’ve also played a bit with the types of page transitions available in Cocos 2D, and we’re making use of a ‘wavy’ transition to get from ‘real life’ storybook pages into ‘imaginative’ pages. This doesn’t look at all like the paper page turn of a print book.

It will be interesting to see how digital storybooks continue to look less and less like printed matter as the years roll by.

Related: Here’s a pretty cool skeumorphic page turn.