From Sketch to PSD, iPad tutorial part 6

In the last post we built a template page. When you complete your page rough on the iPad you will import that to Photoshop to set up the page.
Copy the template and rename however you want to keep pages organized. If you've used Sketchbook Pro on the iPad to make your rough as discussed in a previous post, you can use iCloud to sync to the desktop version of Sketchbook Pro, you can save to Dropbox, email to yourself, etc. Once you have that on your PC bring it into your page. The resolution of the iPad is small compared to your final print so you will need to transform it to fill the whole PSD. It will be pixelated, but it's the rough so that's okay.
In the template we made 7 folders for 7 frames. If this page has less frames, delete those extras: if more, copy and name 8, 9, etc. Cmd+semi colon to bring up you guides. Transform each premade border to the size you sketched. Be sure to snap to guides so that the boxes will be more perfectly aligned than your sketched boxes.




In each folder you should have at least one premade balloon. Delete or copy each of these to match the balloons needed for each frame. Size them to roughly match the sketch. The final size and position will be matched to fit the text, not the sketch.
Open your script and navigate to the page you are working on. Copy text from a piece of dialog. And paste it into a text field above the balloon. Repeat until all dialog is pasted and then size your balloons to fit the text. I also do some last minute editing to make sure text fits well into the space. Add any captions or any other text you want in at this point. I generally add sound effects after unless I think I will need to know how it's positioned while drawing. In other words, it's a bit of a judgement call and your style. Note: I don't bother with the balloon tails yet because they need to aim perfectly to the character speaking, but I've not drawn that yet so I'll add those when I import the final images back into this PSD.
Now, hide every layer except borders, balloons, captions and that thin black line I had you make around the parameter of the whole page.




Save this out as a PNG so it has transparency and put it in your Dropbox folder. Then on the iPad, open Dropbox and save to your Photos. You should already have the sketch you've used to make this page on your iPad because that's where you created it, but if not be sure to add it to your Photos too.
In the next post I'll talk about how I add these 2 images to Brushes and begin drawing.
- Posted using BlogPress from my iPad

Drawing Finals, iPad tutorial part 7

Up until now I've really just demonstrated how I get ready to do the final illustrations. Now's the big moment. Open Brushes and import the PNG of the borders and bubbles from the last post. Brushes will give you the opportunity to rotate and position the PNG. Pinch to zoom the image to fit a few boxes as big as possible so that 2-3 Brushes files should be enough to do a whole page. This will vary from page to page because of differing layouts. The idea is to find the sweet spot between having the fewest Brushes docs while keeping the boxes big enough to draw in. Next, import the sketch made in Sketchbook Pro that was used to set up the Photoshop so that You can reference while roughing out the final image. Obviously, you need to rotate and position this just as you did before.




In Brushes you can order up to 6 layers. By default, a solid white layer will be on the bottom. Put the sketch above this, but lower the opacity until it's barely visible.




Create a new layer above that and have the border layer on top.
Start with a brush of 1 pixel, black and about 30% opacity. With this brush you can "pencil" out the illustration. Save this brush in the Color Pallet so you can easily reset later.




When that's ready, make a new layer and set your brush to solid black to "ink" over the "pencil". You might be wondering why having separate steps for pencilling and inking when drawing digitally. I started out skipping the "penciling" stage, but later when I rendered the Brushes file at a higher resolution I found that it did not perfectly match the original on the iPad. A few things, like erasing, will not render correctly. Close, just not perfect. Minimizing erasing will save you clean up time later. Besides, I found I needed the liberty of throwing lines on paper roughly at first helpful in finding the composition. I felt more free to experiment.

When you finish inking you will color. Make a new layer beneath the ink layer and delete the sketch layer. Use the color palette to save all the important colors for you characters. You might also want to keep a bitmap of all color palettes for characters, objects, and settings since the Brushes palette has a limit to the number of colors you can keep at anytime.

Shading can be done in a variety of ways. I've created a layer at about 60 opacity (plus or minus depending on lighting conditions). In this layer, I paint solid black with sharp lines. Soft edges do not render well so I've been softening in Photoshop later. After adding any other effect layers you're done.

So far I've mentioned a few limitations to Brushes when using the PC app to increase resolution. The biggest one is that you can't export a layered file, like a PSD. To get around this you will need to make all the layers, but one transparent. Exit the app and email the brushes files with just that one layer showing. This will get monotonous, especially when you then use the desktop app to render high resolution TIFFs for each layer, since you could have 8 to 20 of these.

In the next and final post in this series, we'll complete the page by importing these TIFFs and finalizing the PSD.


- Posted using BlogPress from my iPhone

Setting up Photoshop - iPad Tutorial, part 5

The iPad cannot be used exclusively to make a comic. Not yet, at any rate. Sooner or later you will need the power of a computer to finish the job. My goal here is to us my computer minimally and efficiently because my computer tethers me to a desk. The less time the better.
There are many who would argue you should use Adobe Illustrator or InDesign to make the final pages. Their arguments are perfectly valid, but I just like Photoshop better. And I known I'm not the only one. Like cat versus dog people or Elvis versus the Beatles or Physics versus Chemistry some things are just one or the other depending on the type of person. So for all the die hard Photoshop people...
You will need Illustrator (briefly) and I am going to assume CS4 or greater. Open Photoshop. Create a new doc with the dimensions of your comic (including bleed). In my case that's [dimensions]. I choose 600 dpi in case I need the extra resolution some day. You don't need it that big. The more pixels you have, the more RAM and processing power you will need for good performance. Each page will have lots of layers and smart objects so i recommend going as high as you, but be judicious and don't go below 300 dpi.
With your new File open Save and call it "template.psd". In layers, create a folder called "Assets". In that folder create 3 more called "Balloons", "Tails", and "Connectors". Next, open Illustrator. Draw an ellipse with a white fill and no stroke; we'll add the stroke in photoshop. Grab the Bazier handle bars and fatten your ellipse so that it's almost a square with rounded corners. Copy this shape and stretch that into something long and skinny. Remember, the point is to make it easy to fit blocks of text in these.



Repeat until you've made a the speech balloon for every case you think you might need. Not every conceivable shape, just the generic types that can be sized to fit. I find 3 is fine, but it depends on how you write and compose frames... Your style. I'm a bit verbose, so my balloons need to contain lengthy bits of text in the minimal amount of space so I still have room for the illustration. Now, copy/paste these from Illustrator into Photoshop. When it asks you you how to import, choose Smart Object. This is important because you can size at will without lowering quality and edit later in Illustrator if needed. Put your Smart Object layers into the Balloons folder. Go back to Illustrator and draw a triangle. Grab the handle bars and make the triangle look like a speech balloon's tail. Like before copy and change until you have every shape of tail you will need. Long ones, sharp curves, straighter curves, and so on. Lastly make a series of bows for linking balloons together. All of these can then be placed into those folders you created. One final task with Illustrator: make a few rectangles to bring into photoshop too. These will be for the borders of your frames.



Next, we'll add strokes to the smart objects so that the are ready to go when you need them. You'll need to choose the thickness of the stroke that surrounds your balloons and frames. I like a heavier border so I use 20px stroke for boxes and 10 for balloons. Select a balloon layer, click the function layer, check Stroke and set to 10. Setting the stroke to "inside" will allow you to keep the sharp edges of your shape. Holding Alt while click dragging the effects icon, will let you duplicate those in another layer. Do the same for you the boxes.
Create 7 more folders called "Frame 1, 2, etc". Duplicate those assets you think you will use most often. Here you are setting up a generic folder for all the assets that will make up each frame: speech balloons with their parts, lettering, backgrounds, color fills, ink, highlights and other effects, and the frame border. You'll still be customizing balloons and borders as needed, but the more you have set up ahead of time the faster this will be. It's easier to delete than to create a new; easier to make multiples if you already have one to duplicate. Exactly what you should do depends again on your style and workflow, but the more generic stuff you can pre-create, the faster each page's setup will go. Assuming 24 pages per issue, saving 1 min each frame, saves an average of 6 mins a page and 2 and a quarter hours per issue. 2 min per frame doubles that to 4 and a half hours. Anything that saves you even a tiny bit of time will add up over the course of your project.
For the borders, add another stroke effect at the width you want to use and duplicate the effect for each box. Put the 7 boxes in the 7 folders. Adjust the layer's fill to 0% and now only the border should be visible. Below those folders, add a layer and fill with black. Then, cmd+click that layer to select the whole canvas and go ->Select->Contract... and contract the selection by a few pixels. Cmd+i to inverse the selection and then click the mask icon at the bottom of layers. This will give you a thin line around edge of your page. If you want page numbers, add a text field where your want that to go with "xx" so it's easy to click on to change later. Import the grid you made or the one I used and set up grid lines matching that pattern.



I suggest using the Photoshop plugin called Guide Guide for a quick and easy way to set lots of grid lines in one shot. Add anything else you might want to have started for each project and you're done.
Save this project and you'll have your template. For each page you will just duplicate this file, name it "issue001page1.psd", or what-have-you and you'll be ready to start that page. In the next post I'll show how I import a rough page layout into this template and get a page ready for creating the final panel illustrations.

- Posted using BlogPress from my iPhone

Anatomy of a Graphic Novel

Comic books have a long history, spanning many cultures, and can come in all sizes. For Heretics, I choose the current standard US/UK size. [17cm x 26cm or 6.625" x 10.25"] I liked it because it's a Golden Rectangle. And for my fist comic, I thought I'd stick to the standard. The Golden Rectangle is 1.618 time taller than wide. What I've done than to start is make a grid, shown below. The dark blue outside is the Bleed, or extra drawing to fill possible printing mistakes. The lighter blue is the margin. I often break out of a frame and have an illustration fills the margins; sometimes it's just color and texture, but nevertheless, that type of illustration needs to extend into the Bleed so if the printing is not aligned perfect, no one will be able to tell. Inside the blue is the live area. All of the frame boxes will be in this space. If I make an illustration that's not in a box, I'm sure to put everything important: speech balloons, characters, details inside that live area so there's no risk of that getting cropped in printing. I divided that live area into 10 squares by 16. Strictly speaking, they are not perfect squares, but they're too close to tell the difference. Each square is divided into 5. This space is the perfect the width for a gutter, the space between frames. At least in my opinion. If you want your frames closer you could divide into 6 or 4 if you want wider. Pick what looks good to you, but once you decide stick with it throughout the project.




In addition to using an industry standard size, I also stuck to the standard issue length which is 22-24 pages. 22 is typical for big publishers who want to sell pages for ads. I went through my collection counting pages and found that all the books I had were 24 so I ran with that. Although, I often wish I'd stuck to 22 to save on work. Oh well. It depends on the story type of course and you'll need to pick something appropriate to what you're trying to do. That said, using a standard can help keep your options open when it comes time to publish and distribute.

We're almost to my workflow now, but first I'll cover my app choices. There are several drawing apps available for iOS devices, but the 2 most professional are Sketchbook Pro and Brushes. Sketchbook Pro is better in almost every way, in my opinion, except one. And that's the most important one.

Brushes is an easy to learn and use painting app. It's fast to move through tools or colors. It's a joy to paint in. When you're done, you can email the .Brushes file to yourself and open it on your Mac. The have a companion app for the Mac that will redraw the file at up to 6 times the resolution. It will also let you export an MOV of you drawing which can be neat to watch. You can even critique your process like how an athlete might rewatch a match to see what went wrong or right. This redrawing app is important because Sketchbook Pro and most drawing apps are limited to the device resolution, which is not print quality. Even though SBP has more tools and features, in the end, I simply can't use it if I intend to go to print one day. SBP is still very useful which I'll get into in a sec and if a future iPad (3 if rumors be true) has the retina display introduced in iPhone 4 the SBP might yet become my primary app. Until then, all final drawings are done in Brushes.

Step 1:
I take each of the 24 pages and take a screenshot (Home+On/Off). This saves each page as a bitmap in Photos.

Step 2:
I open up this bitmap of the script and the grid shown above into Sketchbook Pro. The script is there as reference so that I don't have to switch back and forth between apps to see what happens on the page. The grid I use for guides to design my page. SBP has has line, ellipse, and rectangle drawing tools that I can use to plan the layout to my frames and placement of speech balloons. With the normal drawing tools a do a quick sketch of what the frame will hold. Don't spend too much time on this, the real sketching will come later. For now, stick figure thumbnails that have just enough detail to communicate to your future self what will be there... Is it close up? Panorama? Is it important to see a gun in the background? What expression do the characters have? It will look something like this.




Then save. SBP now has the ability to sync with iCloud, but you can also email or use Dropbox to get this back to your computer. The next entry demonstrate how to use this sketch to set up your Photoshop file where the final assembly will be done.

- Posted using BlogPress from my iPhone

iPad drawing 101

Wacom makes some great products that many artist love, including myself. That said, drawing with Intous is the closest they have to mimicking the feel of traditional media. This is a monitor you can draw on. It has to be plugged into the wall and a computer, which itself needs to be plugged into a wall if you plan on using it for more that 2 hours. It's also heavy, which means it's fine if you want to work at a desk. But I don't. I want to zip to a coffee shop if I'm finding it hard to concentrate at home. I want to work... wherever, anywhere I happen to be. And even if I stay at a desk I'm limited to the feel of a drafting table, where everything feels bolted down. I want a more sketchbook-like drawing experience where, not bond by cords and weight, I can easily rotate my medium, move it close to my face to see fine detail (zoom). I want to be able to smudge colors with my fingers, I want a tactile experience. Even though I can't be working directly in Photoshop, or what-have-you, the iPad is a more "real" drawing experience.

Of course finger painting only goes so far. Drawing with a stylus offers more precision. The downside is that you can't rest your hand on the iPad's surface without it thinking you are trying to draw or zoom/pan. The solution is a glove with thumb, index and middle fingertips lopped off. Not as weird as you might think. Artists who work in media like pencils or chalks have long used a similar solution to avoid smearing. My first attempts weren't great. You need something that completely blocks the screen from your hand without being too hot to wear. It also needs to be easy to cut up without fraying. I settled on work gloves from a hardware store, under $5.

I cut off the finger tips, flipped it inside out and sewed a quick cuff to prevent unraveling of the fabric so that the glove would last longer and not get in the way.



As for a stylus, I think I've tried everything. I did not like Pogo for drawing. The first I liked was Targus. There are others, like Griffin and Acase, that as near as I can tell are the exact same thing as the Targus. The biggest problem with these--and this might just be my problem--was that the tips would start to dull, then crack and eventually break. Maybe I push too hard, not sure, but I was going through them fairly quickly. And at about $12 a piece, I started to look elsewhere. On the other hand, if I were using traditional media, how many pencils, pens, ink, etc, would I be going through? Trade-offs, nothing more.

I eventually settled on Wacom's stylus. It's more expensive at about $30, but has a nicer weight and feel, thinner tip, and most importantly, offers replacement tips. Set of 3 for $5.

So with a stylus and the glove you're ready to draw.


- Posted using BlogPress from my iPad

Writing on the iPad

Many writers complained that typing on the iPad wasn't as fast. This might be true if you're good typist. But the analog keyboard has been in use for over a century; it has classes taught in high school and college. It could be that writers are accustomed to a certain paradigm and if they changing habits to reflect a different typing experience could prove over time to be just as effective, or even more so. Hard to say. I, for one, type faster on the iPad, but I wasn't a good typist under the old paradigm. This is something you'll need to consider before continuing.

I had started writing scenes and ideas before the iPad was released. I'd used Scrivener for the Mac since it was still in a phase of random ideas, research, and experimentation as I tried to precipitate the story out of the cloud of abstract ideas living in my brain. Scrivener is a great program for that. I mention all this because that was my jump off point when I started writing on the iPad.

The iPad is not just a device, it's a methodology. It's an approach to working. It's the Cloud. It's extreme portability. It's the very embodiment of efficiency. It's working casually, in comfort. It's flinging the very concept that work happens at a desk out the window like you're mad as hell and not going to take it anymore. It's the archer's bow in the study of zen, where you learn a device in order to learn something transcendent. I don't mean to make this into Zen and the Art of iPad, or worse, an Apple commercial. I mean that figuring out how to use the cloud to sync your content to multiple, portable devices so that you can work anywhere, anytime is the abstract concept you learn, when learning to use the iPad. The cloud is not yet perfect, but it's come further since the release of the iPad then it had in the previous fifteen years since it first became touted by the industry. In other words, my plan was to get serious writing done on my computer, writing on the go with my iPad and even editing done on my iPhone anytime I had a few minutes to kill -- waiting in line or whatever. You see? The goal was to get this difficult Tasked that I wanted to prove to myself I could do without sacrificing the other important things in my life. And it has, but not without a lot of tinkering.

My first order of business, then, was to find out how I could sync my Scrivener project with the iPad. Step one was Dropbox. Dropbox is a cloud service that offers 2 gigs of storage for free and more at an additional fee. The are other services like this, but Dropbox is used be so many apps in the App Store, it's a must have to maximize compatibility. So I started out using Simplenote, Index card and ScriptWrite with Dropbox to sync the different parts of Scrivener. This worked, but not too smoothly. I was using ScriptWrite because I had been using the screenplay template in Scrivener. There are no official or universal formats for writing comics, but I had learned screenwriting in college and liked that format for the way it visually organized dialog, action and so forth so I ran with it for the comic. But syncing back and forth kept messing up the format and I was loosing a lot of time fixing things over and over and over. I never like Simplenote either. Index Card is great, but again, moving back and forth just wasn't fool proof. In the end this pushed me away from using the computer to write, which is for the best really. I don't need it to print or format and what can I cay, I don't want to work at a desk anyway. It's too much like work. I'm writing this blog on the couch and the iPad is far more comfortable to use on my lap than a laptop ever was. After all that attempted simplicity, it was all to complicated.

Now, believe it or not, I'm just using iOS's built in Notes app to write. I'm not a fan of the yellow legal pad look or loosing some of the screenplay layout, but iCoud ensures that it syncs immediately across all my devices, which is worth it. What can I say? What I was trying to achieve all along was simplicity and it finally came with iCloud. And. With a little luck, more options will be forthcoming.

If you are going to use Notes, here's the set up:

1. Go into System Preferences and change the font in Notes to Helvetica.




2. Go into Settings -> General -> Keyboard. First, make sure Enable Caps Lock is on so you can double to the shift (up arrow) button to into cps lock mode. Second,add shortcuts.



This is a great feature. It allows you to create your own autofills. Use it for your characters' names. As I use a screenplay like format I even have the shortcuts configured to autofill these words as all caps. It's also good to use it to fill anything that requires a lot of keyboard switching because switching keyboards costs time and momentum. You'll notice for example in this screenshot that I have "vbv" to autofill 2 HTML breaks. That's not not may characters, but the < & > are deep in the keyboard so it takes a while to type anyway and I use them often in this very blog. It's stuff like this that can make the digital keyboard faster than the analog kind, especially if you're a bad typist (in the traditional sense). The trick is to remember that a 2-3 letter code that starts lots do words will make autofill annoying so stick to letter combos you're unlikely to use for anything else. In the example above, you'll see that my shortcut for FRAME is "ff" instead of "fr", but I don't want autofill coming up anytime I try to type "fragile" or "frozen". Why "ff"? Simple, what we're aiming for is maximum efficiency and my finger doesn't have to move between the 2 taps. Just ask yourself, "what's fastest and easiest to remember?" and make your choice on that basis.

I do what I can to keep everything digital. I still find final editing and critiquing to benefit from using paper. I'm trying to ween myself off of that, but there's something psychologically significant about holding something physical I you hands that reminds you that this is all really happening; you're actually making something and it's getting done. I also find it easier to brainstorm ideas about what isn't working or drawing thumbnails of how I might make the drawing. For printing I bought an HP with AirPrint to make printing easy from iOS devices.

Well, that's it for writing. My next entry will delve into drawing. I'll start with the basics.


- Posted using BlogPress from my iPad

Introductions

The iPad appealed to me for making a graphic novel, not because it's a slick toy, but because the 10 hour battery life and small size meant it could replace a whole studio in one small portable package. I could spend a whole day in a coffee shop without ever needing to plug into anything. I could write and draw at anytime or any place. It hasn't been that easy though. I still think its benefits outweigh its drawbacks, so I'm chronicling what I've done so far in the hope it might help others.

The trouble with writing and illustrating a graphic novel is that it's a great deal of work. For me, I've full time job, wife, friends... And not much time for other projects. Not all that time is used effectively. I can take a commuter train to and from work, which gives me about an hour a weekday. And anytime I have a few minutes to kill I can grab my iPad and do a little work. If I was to work in traditional media, I'd have set out what I was going to use and clean up afterwards. If I used a laptop with a Wacom tablet, I'd have to get a bunch of stuff hooked up and, again, put away when I was done. If I had only ten minutes, the time to set up and clean up would not leave enough time to get anything done. And I'd need outlets--can I tell you how much I hate cords?

I've been creating this comic mostly with time I was otherwise throwing away. With a project this intensive, that makes the iPad worth all the headache. All the hurdles can be grouped into 3 categories: drawing on a touchscreen, getting assets in and out of the iPad or syncing, and last but not least, achieving the 300 dpi resolution needed for print.

In the remainder of these posts I'm going to go through my process from notes to writing, printing, editing the script; from laying out a print to sketching, "penciling", "inking", coloring and final compositing. In other words, I'm going to go in chronological order of production, stopping along the way to tell the story of how a reached at my final process for each step. I hope you'll enjoy and find it useful.

Thanks,
Brandon - Posted using BlogPress from my iPad