Thursday, September 6, 2012

Aspect Ratio

All things being equal, the epub format is preferable to pdf for reading on devices like the iPad, Nook, Sony, Kobo, and other dedicated e-readers.
But for some types of books (such as manga, comics, or graphic novels), epub doesn’t seem to be able to handle large images that should fill the screen.
Apple has gone so far as to create its own fixed layout format for such ebooks.
It is possible, though, to stick with epub and get perfect results for illustrated ebooks, using the forgotten (or perhaps simply overlooked) svg image element.
Here’s a peek under the hood of how we do it at, as part of our new illustrated ebook publishing feature.
This is an example of the markup to use in your epub’s xhtml files for each image:

<svg version="1.1" xmlns="" xmlns:xlink="" width="100%" height="100%" viewBox="0 0 592 900" preserveAspectRatio="xMidYMid meet">
<image width="592" height="900" xlink:href="images/page01.jpeg" />
What this markup does is take a JPEG image sized 592 pixels wide by 900 pixels tall, and frame it in the center of a 592×900 svg element.
It turns out that 592×900 is the right size and aspect ratio for “standard-sized” six inch e-ink screens found on the regular Nook, and Sony Reader.
So why use svg at all?
Wouldn’t it be simpler to define it with the plain img tag (as this epub template does), like this?

<img src="images/page01.jpeg" width="592" height="900" alt="Page 1"/>
Unfortunately, many devices, such as the iPad and the Nook Color, have screens larger than six inches.
So on those devices, using the plain img tag in your epub’s xhtml files leaves an embarrassing whitespace gap, from where the image stops to where the actual screen ends.
The svg element shown earlier, though, is different: it stretches the image to fill the entire screen, while preserving the aspect ratio.
It’s also important to note that 592 width and 900 height specified within the svg and image elements should not be thought of as pixel sizes, since no units are defined, but as a width-to-height ratio.
So any image with the same aspect ratio as 592×900 will work well, regardless of its actual size. Scaling up to larger screens, though, also means the dpi count should be reasonably high, at least 72 dpi (and more for images whose base size is smaller than 592×900 pixels).
For most devices, that’s enough, but some e-readers insist on adding margins and other padding to each page, so it’s helpful to define this in the xhtml file’s head block:

<style type="text/css">
@page { margin: 0.000000pt; padding: 0.000000pt; }
And these css classes in the stylesheet:

.svg_outer {
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: left;

.svg_inner {
display: block;
text-align: center;
So the final xhtml for each page image looks like this:

<div class="svg_outer">
<div class="svg_inner">
<svg version="1.1" xmlns="" xmlns:xlink="" width="100%" height="100%" viewBox="0 0 592 900" preserveAspectRatio="xMidYMid meet">
<image width="592" height="900" xlink:href="images/page01.jpeg" />
Just repeat that pattern for every image in book, for every chapter that contains full-page illustrations.

Home / Section: Animation Yves Bigerel creates set of comic demonstrations using Flash

Yves Bigerel (known as Balak01 on DeviantArt) has created a set of demonstrations showing how print comics can be translated onto the web while maintaining their essential quality — the sequential use of space to tell stories through time — using Flash.
While some alternate methods used by others have included adding motion and sound to single or multiple panels, his simple demonstrations have shown that keeping the narrtive flow of one panel after the other is all it really takes to tell the story, keep attention, and attract a growing audience .
The first is “About DIGITAL COMICS”, the second is “ABOUT about DIGITAL COMICS”.
At the time this article was written, the first of the displays has been up for two weeks, has gained over 50,000 visits, and the attention of established comic artists.

Thursday, August 23, 2012

Interaction is More than Looking at Screens

Homework Article:

Back in the ’90s, forward-thinking designers started playing with HTML. The ones who did might’ve had a sense that the web was going to be a big deal, but it wasn’t a prerequisite for experimenting with design and code. It wasn’t long before the web’s big-dealishness was obvious, and the mood shifted. The web was no longer about experimentation; it was about work. For many designers who began their careers in print, the web was what they did now. Since then, the big conversation has been about making the print-to-web transition. And we’re still having that conversation.
But just like in the ’90s, there is something happening on the fringes today that forward-thinking designers are experimenting with. And if we’re not paying attention, today’s interactive designers could get left behind just like the print designers did 15 years ago.

More Resources

We need to start shifting the conversation from “print to web” to something more nuanced and much deeper. It begins with expanding our definition of “interactive” to push beyond work made for the screen. After all, the interactions typical to screen interfaces are hand-guided visual experiences. Until very recently, that meant bridging the gap between our bodies and the screen with a keyboard and a mouse. Even with fancy touchscreens, the glass surfaces offer virtually no tactile experience to our extraordinarily sensitive fingertips.
(And if you want to debate that point, close your eyes and touch the screen of your mobile device of choice. Try to use it. Now compare that to digging into your pocket and feeling the difference between a nickle, dime or quarter. Amazing what our fingers can do, provided they’re given some information to work with, eh?)
We’ve grown accustomed to associating “information” with bits, which is a phenomenal thing in and of itself. But there remains a world of information embedded in physical objects and in the interactions we have with them. Connecting the unseen world of information—the virtual world made manifest on the internet—with the tactile world around us is the next stage of design. We’ve been playing with visualizing this in the form of augmented reality (AR), but that’s going nowhere. AR is unhelpful because we already know that information is all around us. Seeing it on a screen only creates more work for us, forcing us to interpret visual signals on top of everything else, when that’s what technology should be doing for us. Last September I put the dis on AR in my Interaction column in PRINT and called for a focus on “awareness technology.” I said (and yes, I realize it’s questionable to quote yourself):
…if a machine can collect information and deliver it to our eyes, it should also be able to save us the trouble of analyzing and interpreting that data. “Awareness technology” should be doing much more for us than making advertising more ubiquitous. It should be helping us to do more work, more efficiently and more effectively. Rather than trying to enhance how we see reality, we should instead consider augmenting reality for machines. A more aware machine is far more valuable to us than a more crowded visual field.
The good news is that we’re making amazing progress with awareness technology—and it’s not all dystopic surveillance and Skynet. Much of it has been based upon the use of radio-frequency identification, or RFID, a technology that can be minuscule and embedded into objects so software can “see” where those objects are and “feel” how they’re being used. This kind of monitoring and analysis could help us design better systems of all kinds—from “smart” buildings to more efficient roads, transit systems, electrical grids, and much more. The possibilities are very exciting.
But it’s not about building a techno-utopia. For me, a world with more machines is not necessarily a better world. The reality is the problems we face—the crumbling infrastructure, a dwindling supply of natural resources, pollution—have outscaled our cognitive capacity. We’re smart enough to recognize them, and even to propose legitimate solutions to some of them. But we’re not fast enough to get to them all before the damage is too great, and we’re not able to see how they’re interconnected to avoid proposing a solution that might nip one issue in the bud but make another worse. There’s an urgency here that’s just as significant a motivator as exploring a new technology. So, if there’s any hope of a world with a healthy balance of the natural and the technological, we’re going to need to increase the ubiquity of the machine in the short-term. Sure, it’s daunting, but what could be more inspiring than working for a better world? (For more on this, see this piece I did for Print.)
This is the stuff of interactive design. More than websites. More than mobile apps. More than games. More than screens. Remember that scene at the end of The Matrix, when Neo finally sees the matrix for what it is, not the moody ’90s noir world but the undulating rows of code? As soon as the illusion disappeared, the first thing he did was take control and push beyond the code. Hokey? Sure. But what’s inspiring about that metaphor is that while the virtual world is an endless venue for exploring ourselves, it also creates a feedback loop right back to the real world. That’s interaction, and that’s the future of design.
When Grace and I chatted about this topic, she thought a great prompt would be “Why designers and hackers should be friends.” I think this gets at it, but I want to push it. It could just as easily be why designers should be hackers. Or scientists. Or city planners. Or sociologists. You get the point. As the world becomes more and more complex, so does what it means to be a designer.

 My Commentary                                                                                        
"AR is unhelpful because we already know that information is all around us. Seeing it on a screen only creates more work for us, forcing us to interpret visual signals on top of everything else, when that’s what technology should be doing for us"
I hate augmented reality. I'm not a big fan of most 3d graphics. Seeing something on screen doesn't make it more cool. There are only a couple instances of useful AR that come to mind. At the Lego store you can hold up the box and rotate it around to see different angles of the finished product. And, the video that TED video that showed a video about how to set up a wireless router using, Aurasma.

Other then the AR I don't understand what this guy is talking about.  Smarter machines or something. I don't get it.

Thursday, August 16, 2012

Questions for Q

  itunes like store



using shopify
comicsology dumb
a system to cloud then swap out
wrap it in a app with phone gap
or like wormworld through applestore download free and pings when theres a new episode
no drm

mignola art looks good on ereader

craig mod talk
i love typography posted a video on him craig
some content requires fixed layout, but usually designing the grid that is responsive
no forcing the reader to choose a certain font

wormworld doesnt do anything fancy but uses the strenghth of a browser and touch technolgy
using the strengths of the medium that you cant do in print

yzes bigerel
flash thingys
marvel highers
you are in coltrol of moving left and right
character moves through the panel

Self publishing an illustrated E book

 My Commentary                                                                                       
According to Holly Brady an E book publisher, if your considering publishing or republishing an illustrated book, like a cookbook, a children's book or a graphic novel you need to present such books in a fixed layout format. A fixed layout unlike an adaptive or liquid layout will not make dynamic changes for different mobile devices or mobile device orientations. Holly's points out that adaptive layouts tend to impede ones ability to read illustrated content in which the layout is part of the reading experience.

Assuming that Holly's point is valid how does one go about publishing an illustrated ebook with a fixed layout? According to Holly "There aren’t yet many vendors who know how to take a print book and turn it into an enhanced ebook for the iPad." She recommended two companies which translate books formatted for print into electronic publications: YUDU, and Innodata. I downloaded one of the books reformatted by Holly through YUDA and was not that impressed with the result. In addition since I already have a lot of digital layout knowledge already I'm a bit reluctant to hire a third party to accomplish something I could probably learn myself.

I did a little more research and learned that the last couple versions of InDesign have the ability to export ebooks. Exporting ebooks with a fixed layout seems a bit more difficult than an adaptive layout export but I learned by watching tutorials through that it is possible without a third party.

How to Publish an Ebook Picture Book from a Mac: for Nook, Kindle, PDF

I promised I'd post the process I used to create my ebook, "Princesses, Princesses, Princesses!" for PDF download, for Kindle, for Nook. It's actually not that hard but certain steps can be tricky. Hopefully this little tutorial will help you avoid some of my mistakes. I need to thank VonLogan Brimhall for their tutorial. It got me started. It may work well for PC users, but I am an Apple girl. So there were just some parts that didn't translate well. In addition, the dimensions they proposed for the devices didn't work for me when importing to InDesign and to the devices from there. And finally, there were a few easier tricks I learned in the process.

Remember, Kindle and Nook both have free apps for iphone and ipad and in the android market so anything sold by them can be read on those devices as well. You aren't limited to just kindle or nook users.

Here's what programs I if you don't have these 2 programs, this tutorial won't be super useful to you. I'm sorry.

  • Adobe Photoshop (any version should do- I have CS5)
  • Adobe InDesign (version CS5 is what I used, I don't know if earlier versions work, I think CS4 does)
  • Adobe Acrobat (I used Pro, you'll need more than just the reader)
I'll start with the most difficult and go to the easiest. Ah, you thought I'd start with the simple and work my way up. Too bad. Time to jump right in.

Or download a PDF of this entire post, HERE.

Convert text files to PDF optimized for ebook

Creating an Illustrated EBook
Are you considering republishing your children’s book, cookbook, graphic novel, crafts guide or travel book in digital format?

For these kinds of books, the ePub format—which allows words to flow from one page to another as your reader enlarges text or changes fonts—doesn’t work. The illustrations, sidebars, and photos you so carefully placed beside certain sections of your book take on a life of their own.
For such books, you need to create a fixed-layout file, one that displays each spread just as your designer originally planned.
Spread from Pinhole and the Expedition to the Jungle
Fixed-layout ebooks look great on the new tablets that everyone’s getting for Christmas (Apple iPad, B&N Nook, Kobo VOX). But they are tricky to produce, especially if you’re moving from a print book into an enhanced iBook for the iPad.
Renowned explanation graphics designer Nigel Holmes and I have been running down rabbit holes for the past year trying to get his book Pinhole and the Expedition to the Jungle into a fixed-layout format for the iPad. We finally did it.
And here are the top things we learned:
  1. There aren’t yet many vendors who know how to take a print book and turn it into an enhanced ebook for the iPad. We used YUDU, which is located in (surprise!) Great Britain. Innodata also works, I’m told.
  2. Price pressure on these books is fierce. You spend a chunk to have the book recreated for the iPad, and the market wants to pay $3.99 or less. Yike. Hopefully, all those folks who got iPads for Christmas will be looking to buy enhanced ebooks, which could drive up revenue.
  3. If you hold the iPad in landscape mode, you see an entire spread from the book–without a seam. Nice! But on the iPad’s 10-inch screen, the font you chose for your print book looks small—and on the 7-inch screen of all the other tablets, it’s unreadable. Of course, your readers can enlarge the text with their fingers, but then you lose the effect of the spreads.
  4. Every new format of a book requires a separate ISBN number. Per BISG.
For a little extra pizazz, we also laced the adventure story with sounds. If you have an iPad and would like to see the result, here’s a free peek.

Week 6

Shilo Shiv Suleman: Using tech to enable dreaming



Definition of PARADIGM

1: example, pattern; especially : an outstandingly clear or typical example or archetype
2: an example of a conjugation or declension showing a word in all its inflectional forms
3: a philosophical and theoretical framework of a scientific school or discipline within which theories, laws, and generalizations and the experiments performed in support of them are formulated; broadly : a philosophical or theoretical framework of any kind 


Competative Analysis:
2 other companies

Concept Model:
Sketches or concept for the project

Content Inventory:
Bulleted list of all the things you are to have to gather. 

5 total blog entries

Coins of the Realm - Scott McCloud

My Commentary                                                                                                
In his 5th and 6th episodes  of  I Can't Stop Thinking Scott McCloud discusses monetization of web comics. In Coins of the Realm - Part 1, he mentions that many site rely on advertisements as opposed to direct payment. I agree users will leave if they are forced to fill out a form and supply their credit card information. I think that something like iTunes works so well because all the user has to do it click the buy now button.

Coins of the Realm - Part 1

Coins of the Realm - Part 2