Little Nemo in Slumberland - adapting for web.

First I very roughly sketched out the layout (the vertical bits would be connected, I just didn't have the room in my sketchbook)

Then I plotted it out in photoshop, using the images from the original comic and artboards the dimensions of the screen to I can see what the image in the viewport would be. Ideally when putting it online, I'll tie the scaling to the viewport size so it's always about the same no matter the device.

I then drew over it with the flow, and bits I need to redraw. The dream section will take up the full screen, and the start and end still in the panels - to emphasise the normal world/dream world. Having the dream world part image instead of divided into panels means redrawing some of the middle section, also 'widening' the panels.


I then redrew the panels: (with as much tracing and copy/pasting as possible)

and also added the text in PS - I may remove the narration text in the final? it's kind of not needed.

I then saved the artboards as one big image, and put it into a site. I wasn't sure initially whether I'd put them into separate boxes - which could possibly mean I could get it to scroll to those points? But I decided one big image is simpler for now to test out the scale. I used vh and vw on the dimensions to lock it to the viewport so it fills the screen right no matter the screen size or zoom (though it may not work for vertical/mobile screens)
I checked the widths of the sections in the dream part, so it read well.

I then did the lines for the first section and again tested it in brackets.


/////

I'm not sure about having the narration go to the top here - it's out of line with the first two, but I can't have it below because that's where the dream section starts and it would break that flow. it also makes more sense to be read before you read the panel. maybe i could put the other narration on top? or remove it?

 This section I spaced out horizontally a lot more than the original - considering he walks for a while between then. I could have probably spaced it out more, but i didn't want to draw too much extra.... In any case, this gives it more 'time' than the original comic, which goes straight into the next panel

For the falling section - because the screen is horizontal it doesn't quite have the same falling effect as the tall panels in the original, although of course the scrolling does that. It emphasises more the chaos, which I think is just as important

at the end the white space takes over, representing him waking up from the dream and it goes back to the normal panel for the end

/////
I also put this online! http://layaart.tumblr.com/littlenemo it doesn't work very well when I tried to look at it on my ipad but I kind of knew it wouldn't. If I end up editing the way it's structured in the code I'll make sure it works for mobile too.