Click on the image for a larger view.

If you aren’t sure why you should pay special attention to how you prepare photos for the Web or are confused by the whole dpi thing, read my Resizing Your Photos for the Web tutorial until you get to the Picasa instructions. Then come back here. If you’ve got Photoshop or Photoshop Elements, you’ll get more control from those programs than you would with Picasa.

I’ll be paying attention to resizing photographs in this tutorial. Look for my tutorial on resizing graphical images coming soon. If you’re unsure of when you’d want to use a JPEG and when you’d want to use another format, check out my What Image Format Should I Use? tutorial.

Getting Started

I’ll start by opening up Photoshop and loading a photo taken with a standard, point-and-shoot digital camera. This one is already a JPEG file, as that’s the format this camera stores pictures in. But it doesn’t matter what format the photo is, so long as you can open it in Photoshop. We’ll be converting the picture to an optimized Web image.

The starting point. The photo is 2816 pixels wide by 2112 pixels high.

This photo is 2816 pixels wide by 2112 pixels high. This is way too big for the Web. Most Web pages are under 1000 pixels wide, so this picture would overflow your audience’s browsers by a significant amount. Also, the photo is 2.33 megabytes. It would load slowly, even on a broadband connection.

With Web graphics, the smaller the file size you can create, the better. Every added kilobyte on your Web page slows down loading a tiny bit. Try and keep your Web graphics under 100k, and then only if it’s a really important image. Under 70k is better, under 50k even better, and under 30k really better. There is always a trade-off of quality versus quick loading times on the Web: try and find the happy medium. Fortunately, Photoshop allows you to preview different options before you settle on a final Web graphic.

Note: You can resize your photos in Photoshop by choosing Image>Image Size and reducing the photo size. But if you do this don’t forget to save the reduced image with a different name. Otherwise, you run a risk over overwriting your original high-quality image file. If you ever want to print the file, and you’ve shrunk it and overwritten it, you’ll be out of luck. So if you worry about doing that, you can do it from the Save for Web window.

Open an image in Photoshop and choose File>Save for Web (or Save for Web & Devices).

Save for Web, but the photo is way too big.

Here’s the Save for Web window. You’ll see something like the image above. If you don’t see two image windows, locate the 2-Up tab at the top of the window and click it. Depending on the image, these windows may be top and bottom or side-to-side.

One window has the word Original beneath it, and shows you the uncompressed image. This is great for seeing if the Web version you’re creating looks “right.” The second window shows a preview of the Web graphic you’re creating.

I decided not to resize the image before entering this window. You can see that the image is way too big: you can only see the top corner of it. So we’re going to reduce the photo size first. On the right-hand side of the window, you’ll see the Image Size section.

The Image Size section of Save for Web

Make sure that the chain icon is set as above, as this makes sure your image resizes proportionally. Now type a new number into the width or height. I would recommend not making your photos bigger than 500px wide unless it’s really important. But make sure the image isn’t too big for the area you want to put it. Go smaller when you can. So, for instance, type 500 into the width field. Then click in another field (or hit the Tab key). The image will resize proportionally based on the number you entered.

Save for Web with photo shrunk to a reasonable size

Above, you’ll see the image reduced to a much better Web size. In my version, setting width to 500px automatically set the height to 375px. See, no math to worry about. It’ll also tell you the percentage of the original size your new size is. In this case, it’s a patriotic 17.76%.

That’s the real work done. Now it’s just a matter of looking at the different options that will give you a good balance of file size and image quality. This is a photo, so I want to use JPEG.

Save for Web file format selector

At the top right of the Save for Web window, you’ll find the format selector. This is where you’ll make adjustments to find that balance of size and quality. There’s a preset drop-down, so I’ll choose JPEG High to see how it looks. Compare the preview with the original. Then look at the text beneath the preview, you’ll see the file size you’d create with the current settings. Change to JPEG Medium and make a judgment call: is the savings in size worth any degradation of image quality? I can’t help you here, use your judgment. You can fine tune by typing different numbers into the Quality box. Is the default 60 for High too big, but default 30 for Medium looks crummy? Try typing in 40 and see what happens. Or 50. It’s worth taking a bit of time to get the best results.

What to Look For

JPEG makes file-sizes smaller by compressing the quality of the image. If you go too low, you get visible JPEG “artifacts”. Look a the photo below. See all the blocky, blurry areas? Those are artifacts created by overcompressing your image. If you see this, turn the quality up.

A jpeg with quality set too low. Spot the artifacts.

For my photo, I ended up going with the default JPEG High quality of 60. It looked terrible smaller, and though there are a few artifacts, I think they’re acceptable to keep the file size lower (you can see them around my head and in the top corners). Final file size: 43k. Final dimensions: 500px x 375px. Judge for yourself below.

The final jpeg. Size was set to 500 x 375, quality to 60, with a final image size of 43k.

There are three basic formats you should use when saving an image for the Web:

• JPEG
• GIF
• PNG

The JPEG (Joint Photographics Expert Group) format is meant for photographs. Photos need millions of colors to provide smooth images, and JPEG supports millions of colors. JPEG is  a “lossy” format, meaning it compresses the image to make it download faster, but it does so by throwing out data and degrading the quality. With care, you can get JPEGs which are quick to download and are not visibly degraded.

The GIF (Graphics Interchange Format) format is meant for graphical images with large areas of solid colors. This would include logos, cartoons, and such. It is limited to 256 colors, which makes it a bad choice for photographic images. You can also create short animations using this format.

The PNG (Portable Network Graphics) format has been designed to replace GIF. For Web use, you should use PNG-8 files, which are limited to 256 colors. You use it for the same sort of graphics you’d use a GIF for. Unlike GIF, PNG cannot be used for animations. There is a 24-bit version of PNG, capable of millions of colors, but it creates much larger files and some browsers don’t handle PNG-24 files well.

Okay, What Does All That Mean?

Let’s look at some examples of images saved in all three formats. Below you’ll see thumbnails of the same photo saved in each format: from left to right they are PNG, GIF, and JPEG. Click on the thumbnails to see larger versions.

Looking at the GIF and PNG versios, you can see what happens when you reduce photo to 256 colors. There are noticeable bands of color on the wall behind (and on my bald head) and the whole thing takes on a more cartoon-shaded look. Also, the GIF is 102k, more than 3 times the size of the JPEG. And the PNG is 86k, which isn’t much better. The JPEG is 33k, and also looks the best of the three.

Obviously, JPEG is the right choice for a photo. And if you are only ever posting photos on the Web, then JPEG is the only format you’ll need to worry about. Also, if you’re using the free software Picasa as I described in the Resizing Photos for the Web tutorial, you’re limited to JPEGs.

So when would you want to use PNG or GIF? Let’s look at a non-photo graphic. Bleow you see thumbnails of a graphic: from right to left, they are in JPEG, PNG, and GIF formats. Click on the thumbnails to see larger versions.

This image has areas of flat color and type. Notice how lousy the JPEG looks. You could turn up the quality on the JPEG, but at 29k, it’s already the largest of the three. Look at the blurring around the edges. Ugh. The GIF is 25k, the PNG is 20k.

When you have a choice between PNG and GIF, PNG almost always produces smaller files.

So my recommendations:

• If it’s a photo, use JPEG
• If it’s a graphic, use PNG

Isn’t a 72 dpi Image a Web Image?

Many people have trouble with the concept of photo resolution. They’ve heard about dpi and think “300 dpi is for print and 72 dpi is for the Web.” Those numbers are actually meaningless. I’ll try and make this simple.

What matters is the number of pixels in an image. DPI (dots per inch) is an arbitrary number, and it tells an image how many dots (pixels) to print per inch. Here’s why the simple number of pixels in an image matters more. Say you to print a picture at the sharp 300 dpi resolution. To find out what size that image will print at 300 dpi, you divide the number of pixels wide by 300 and the number of pixels high by 300. I hope I haven’t lost you, because it gets easier below.

Let’s take a hypothetical picture, called Picture A. Picture A is 1500 pixels wide and 1800 pixels high. 1500 divided by 300 = 5. 1800 divided by 300 = 6. So if you print Picture A at 300 dpi, it will print at 5″ x 6″.

If you want to print Picture A at the lower resolution of 200 dpi, the picture would print larger. 1500 divided by 200 = 7.5. 1800 divided by 200 = 9. So if you chose to print Picture A at 200 dpi, it would be 7.5″ by 9″.

As you see, then, the important number is not the image’s dpi, it is the image’s number of pixels. If you wanted to put Picture A on the Web, it would be huge. The average person has their browser open at around 1000 pixels wide. With some simple math, we know that Picture A is 1500 pixels wide, and 1500 is more than 1000, and therefore Picture A is too big to fit into the average Web user’s browser.

And you don’t want that.

I hope the math hasn’t been too much. It’s about as good as my math gets, though, so don’t worry. We’re done with math.

Resize that Good-Looking Guy for the Web

A thumbnail view of Picture B

Here’s Picture B. This is such a handsome guy, you just can’t help sticking his picture up on your blog. This picture was taken with a digital camera, which is almost definitely what you use to take your photos with (unless you are still using a film camera while wearing your bowler hat and spats and complaining about “kids these days”).

The thing is, that digital camera image is probably way way too big to fit onto a Web page. It is at least as big as Picture A was, and very likely much bigger (the original Picture B file is actually about twice as big as Picture A). To put this picture on the Web, you need to resize it.

You don’t need expensive fancy software. You can do this with Picasa, a free piece of software from Google. Download it and install it now if you don’t have it already. It will index the photos on your hard drive for you.

I’ll open up my Picasa and locate Picture B. Here it is.

Double-click on the image you want to edit, and it will put you into edit mode for that photo.

From here, you can do all sorts of little edits, if you want to. When you’re ready, locate the icon of a folder labeled Export at the bottom of the screen and click it. You can also go to the File menu and choose Export Picture to Folder.

From here, you’ll export a new, Web-friendly version of the photo. It will not overwrite your original, print-quality image (and this is a good thing). Click the Browse button and choose an Export location. In the next line, choose a name for the folder into which the new image will be saved.

For Image Size, choose the Resize To option. Enter a number in the Pixels box. This is pixel width for the image, Picasa does not allow you to resize by height. You can use the slider to choose common sizes, or you can enter a number by hand. You need to decide how big you want your picture to be, but it should be small enough to fit into the spot you want to put it. I’d recommend 480 as a good size for images, or 240 if you want something smaller. As a rule of thumb, I wouldn’t go over 600 pixels unless you’re sure your site is wide enough for it.

For Image quality, choose Normal. The other settings will create bigger or lower-quality files, and you want to keep your file size small so that your page doesn’t load slowly. When I export Picture B at 480 pixels using Normal, the picture is 41 k. The Automatic quality setting creates a 150 k file, and that’s way too big. The Minimum setting will give you the smallest file size, but quality will suffer.

Ignore the movies bit, this isn’t a movie. Ignore Watermark, unless you really want to put some text on the photo that identifies it and makes it unappealing for people wanting to steal it. It doesn’t look very good.

Now you can click the Export button. The new file will be saved to the folder on your computer you chose on the Export screen. And you’re done. You have a properly sized photo to use on the Web. Here’s the resulting image for Picture B.

Photo B, reduced to 480 pixels wide from the original 2816 pixels wide. The file is 41 k

This free and relatively simple procedure will help you keep your site loading quickly and ensure that your photos fit well with your site. Now you have no excuse for slow, badly done Web images.

While ordering books in quantity from a printer will get you the lowest per-unit cost, you need to order your books in the hundreds or thousands. This might not be ideal for those of us just getting our feet wet, or without storage space for all those boxes. I’ll readily admit with my readership numbers that I can’t expect to sell hundreds of books, but I still want to have a nice collection of my strips to sell at cons, through my site, and even to give as gifts to supportive friends and family.

For the beginner not ready or unable to shell out a couple of thousand dollars for books from a traditional printer, print-on-demand can be an appealing option. Let me present some examples of pricing, pros and cons, and personal experience with the bigger POD companies. There are so many variables you can consider when preparing to print your book, but I’ll talk about the most important issues: quality and price.

To compare, let’s look at a book format that many of you would be using. I’ll use an order of 25 books for this example. Both companies will sell your books through their own stores and Amazon, and they allow you to set your own royalty. I’ll leave the cost/benefit analysis to you if you decide to go this route. To keep things simple, I’ll look at the cost of books you order to sell on your own (for convention sales or sales of personalized books through your own site).

Our Sample Book:

120-pages
Softcover, full color
Black-and-white interior (grayscale if you are using shading)
Landscape format (wider than high, a good layout for the traditional webcomic strip format).
Perfect binding (the square backs you see on books in bookstores)
Standard paper (avoid publisher grade, it is thinner and not opaque enough to prevent your art showing through from the other side of the page)

Lulu.com

Lulu has been around for a while and many web cartoonists have used the service to publish their first books. Lulu provides multiple book sizes, full-color covers, black-and-white or color interiors, and their own store as well as a free ISBN number and sales through Amazon for most book-format options. Prices vary by book size and page count. You can do a minimum order of one book.

Lulu’s landscape book size is 9″ x 7″. Printing costs a base of $4.50 plus 2 cents a page, but there are discounts for bulk orders. Using the cost calculator provided at http://www.lulu.com/publish/books/ (it’s in the left column, about half-way down the page) our book has a unit cost of $5.40, or $135 plus shipping for 25 books. Purchasing a single book will cost you $6.90.

Lulu Pros

Cover quality is great
Interior quality is great with little or no “show-through”
Pre-made templates available

Lulu Cons

More expensive for our example order

Createspace.com

This service is owned by Amazon, and provides pretty much the same options as Lulu.com: perfect-bound full color covers, color or black-and-white interiors, free ISBN numbers and sales through their own site or through Amazon. Prices vary by page count, but book size does not affect price. You can do a minimum order of one book.

Createspace’s landscape book size is the somewhat smaller 8.25″ x 6″. The cost of the book is a base $1.50 plus 2 cents a page. Createspace does not offer bulk discounts. For our example, the unit cost for the book is $3.90, or $97.50 plus shipping for 25 books. Createspace offers $39 pro plan, which reduces the per unit price of the book to $2.29, or $57.25 for 25 books. (Of course, you need to add the $39 to this initial order, bringing the cost to $96.25. This will save you more money if you end up ordering more books after this initial order. There is an annual $5 renewal fee for this plan, though you can downgrade to standard later on.)

Createspace Pros

Cover quality is great
Interior quality is great with little or no “show-through”
Less expensive
Cover creator for those who want the easiest possible setup

Createspace Cons

No pre-made template for our chosen book size (available for some other book sizes)
A blank spine is recommended, but not required, for books under 130 pages. Text on the spine may shift towards the front or back cover. Blank spines are required for books under 100 pages. This is for type: color or art that wraps around the spine will still show.

A Note on Book Setup

Any program capable of creating a PDF file can be used to create your book, and both companies provide clear information about setting up margins and bleed areas (if you want to print to the edge of a page). I used Adobe Indesign, but if you don’t have that rather pricy piece of software I know of people who have used word-processing programs such as Microsoft Word to create their books. Cover creation using your own program is not difficult, though it can require a little math to work out the spine width. If you plan on creating your own books in the future, I highly recommend taking the time to lay out your own book for the best artistic control over the final product. Both sites have active communities who are happy to help you when you have questions. You will never want to make your book available for sale before doing at least one proof copy; you may require more proofs if you find you’ve made mistakes with your first try.

A Note on Interior Color

POD color is much pricier, but not completely out of reach. For interior color, Createspace definitely wins on price. Using the specifications above but changing to a color interior puts the Createspace cost per book at $16.15, or $400.75 for 25 units. With the pro plan, the per unit cost drops to $9.25, or $231.25 (add the $39 pro plan fee and the price is $270.25). With the bulk discount, Lulu’s unit cost is $25.06, or $626.50. Without the bulk pricing, a single unit is $28.50. I have not printed a color book with Lulu (with that price difference, I decided to try Createspace first). The Createspace color turned out beautifully. I’ve had reports that Lulu’s color is about the same.

I ended up going with Createspace for my own book, and have been very pleased with the service and the product. No matter who you go with, consider a book launch part. I held one at my home and made back my initial order costs and even pocketed some money to put towards future projects. And I got to be the star writer signing books and taking compliments for the evening. You can’t beat that.

HP Tweetnotes Gallery

Below are some suggestions of not-too-expensive ways to get your kid on the right track.

Books

Most books on the subject of drawing Anime and Manga cover the same material with varying levels of quality. There are a ton of these books, so I’m going to limit myself to a few:

• For beginners: Draw Manga by Bruce Lewis. A non-threatening book with drawing lessons, as well as information about putting together Manga books and promoting yourself. (update: this may be out of print)
• For beginners: How to Draw Stupid by Kyle Baker. A marvelous introduction to cartooning by one of the masters. It’s very funny, as well.
• For more advanced artists: How to Draw Anime and Game Characters by Tadashi Ozawa. A great guide to drawing characters in many different styles, with plenty of helpful tips and encouragement. The whole series is worth checking out.

Art Supplies

Developing artists do not need expensive materials. Skip the expensive imported Manga paper (like the pros use, we’re told) and expensive Copic markers (for around $5 a piece, that’s a huge investment for even a basic set). Instead, here are some supplies that I recommend:

Paper: Buy the cheapest printer paper you can find for practice sketching. A dedicated beginner should be free to experiment, start over, wad up failures and simply fill up page after page. You can buy larger paper (8.5 x 14 or 11×17) for doing comics work, but buy it at the office supply store, not the art store.

Pencils: Don’t buy the cheapest pencils, those nasty yellow school ones we all know. Instead, go to the art or hobby shop and get a range of drawing pencils. The pencils vary from very hard to very soft, with H being hard and B (go figure) being soft. 2B is the most commonly used, but get some 2Hs and some 4Bs as well. Consider picking up some Col-Erase erasable colored pencils in light blue or red. These are great for creating a rough drawing that is easy to work over in pencil or pen later. And buy a good white eraser, the pink one on top of the pencil is useless and adds pink streaks to drawings.

Pens: Your kid may not need these right away. When the time comes, the Pigma Microns are nice. Whatever the brand, get ones with waterproof ink. A 2mm pen is nice for lettering and thin lines, a 5mm is a good all-purpose inking pen and an 8mm is nice for thicker lines. You can also buy brush pens, which have a brush-like tip: if your kid is really progressing, they’ll enjoy playing with one of these.

A Sketch Book: Any art teacher will tell you that carrying a sketch book is invaluable, because you can practice wherever you go. Drawing every day is the key to getting good. But I’ll add that you should get your kid a sketch book that is private. Artists need a place to experiment and fail and not worry about other people seeing. Fear of what other people will think of every drawing holds artists back. I’ve seen parents walk in, pick up their kid’s sketch book and start rifling through. Please don’t do this. If they want to show you a page, that’s great. But give them a place to draw and not worry about what others will think.

Software and Accessories

I’m always surprised when parents are unaware that kids are eligible for big discounts on software. Students at any accredited institution can get educational licenses; generally, these are full versions of the programs but limited to educational use. Google educational software and you’ll find many suppliers, or ask your school if they recommend a company.

Photoshop: This is the most popular graphics program out there, and despite the name it is not limited to photography. It can be used to color scanned art, letter comics, draw from scratch and add special effects (and that’s just scratching the surface). Any student interested in graphic arts will need to learn this program eventually.

Painter: Not as versatile as Photoshop, but this program makes it easy to emulate real-world drawing tools, from watercolors to pastels.

Manga Studio: This program is designed for the creation of Manga/comics. It aids in setting up comics pages, lettering and adding the screen tones that are common to Manga. The screen tones are what really set this program apart, and if your kid really wants to create comics this is both an inexpensive and useful program. There are pro (EX) and basic versions, the basic version being quite cheap for a student license. The pro version adds more tones and more advanced tools.

Anime Studio: An easy to learn and inexpensive animation program. What sets this apart is the ability to create simple skeletons for your characters. Once a character has a skeleton (or rig) set up, you can animate by moving the bones. Even better, if you grab the hand and move it, the arm will follow along. While the program has limitations, it’s a great program for beginning animators. There are basic and pro versions: the basic version costs under $30 for a student. Beginners will not need the extras that the pro version provides.

A Wacom tablet: Pronounced “walk-em,” the Wacom allows you to draw with a stylus on a tablet rather than trying to draw with a mouse (which is like trying to draw with a brick, really). With practice, the tablet becomes very easy to use, and the pressure sensitivity (the harder you push, the thicker the line) in supported programs mimics real-world drawing tools. The Wacom Bamboo Fun, for around $100, is a bargain as it also comes with Photoshop Elements and Painter Essentials (it seems the latest versions do not have Painter Essentials, sadly, always confirm what software you’ll receive with a tablet). These are stripped-down but very usable versions of the full programs described above.

Classes, Clubs and Conventions

Art classes are great. Cartooning classes, sure, but also other classes covering the basics of drawing. Even if they want to be purely cartoonists, they’ll benefit from learning the basics of more realistic drawing and from being exposed to different styles. I teach at the Austin Museum of Art’s Art School, and if you’re near Austin, TX, you’re lucky to have such a great facility. But I’m guessing you’ll find good art classes for kids and teens almost anywhere.

While you’re at it, look for Anime and Manga clubs at school or the local library. They’re a great place to share interests and find other like-minded kids.

There are Anime conventions held all over the country. These usually take place in a hotel, and feature panel discussions, guest artists, a dealers room to empty your wallet and rooms that play Anime 24 hours a day. These can be great fun and kid-friendly, though you’ll most likely want to accompany your kid. Don’t worry, you won’t be the only bewildered parent in a sea of people dressed as characters you don’t recognize.

I hope you found this helpful, and that you’ll continue to encourage your kid to draw and be creative. I’m always open to questions and suggestions, as well, feel free to leave a comment.

Why not?

Let’s start there, with the why nots. We’ll do that by looking at a surfing session by a hypothetical Web surfer, whom we’ll call Erik.

1. Erik is listening to music while surfing. His iTunes is pumping out the Eels’ masterpiece “Beautiful Freak” when he hits your page. Your page starts pumping out music that clashes horribly with the music Erik loves. Does this make Erik want to continue his visit to your site? Or does it make him close the window and make a note not to return? If you think Erik is still on your site, I have a bridge you might like to purchase.
2. Erik is at work, doing some sneaky personal surfing. He hits your page, your sound starts blaring, and Erik is busted. While standing on the unemployment line, is Erik thinking about returning to your site?
3. Your site is one of the top ten results for Erik’s Google search. There are others in the list, but yours looks good and he clicks it. You’ve kindly put a MIDI version of Air Supply’s “Making Love Out of Nothing At All” on your site. Does Erik share your taste for crappy music? Or does he hit the back button and go to one of the other links, finding the information he seeks in more silent pastures?

Okay, enough of that imaginary guy Erik. But he does sound like the kind of guy you want visiting your site with his suave, urbane and handsome presence. Also, he spends lots of money on sites he likes. And being hit with unwanted sound makes his wallet slam shut harder than a screen door in a Kansas tornado.

By the way, I’m also thinking of those sites where you hear beeps, boops or clanks when mousing over a button. I hate that. Some people may not mind it, but I doubt they visit silent sites and wish that the buttons made a “ping” when they moved their mouse around.

Okay, let’s be a bit more serious. There are many sites I’ve visited and been confronted by unnecessary and unwanted sound. I honestly do make a note never to return. And I have a pretty good memory for this sort of thing. If you’re putting sound on your site because you think it’s a cool thing to do, I’m certainly not the only person who would decide not to stick around. I never visit MySpace. Despite an option to prevent auto-play on page entry, many MySpace pages seem to overcome this and play sound automatically anyway. So I’m one of the many many people who no longer visit MySpace.

So when is it okay to put sound on your site? Here are some possibilities:

• You are in a band and promoting your work
• You are a voice-over actor looking for work
• You are a radio station
• You have sound content that is relevant and necessary to your visitors

Did you notice that “because it’s cool” did not make that list?

And if you do have the need to put sound on your site? Please make it an opt-in listening experience. Allow people to push a Play button to hear your aural masterpiece if they so desire. And give them a Stop button for when they’ve heard enough.

Using your characters and the story spark, come up with a story scenario. Maybe your characters are opponents, maybe they’re friends, maybe one of them is the hero and one is a sidekick. Your story spark must be used to start the story.

There are more helpful hints in the book, if you’re having trouble. You and your friend (or just you) should really work to examine your story and create something you’d really love to turn into a comic. I recommend actually creating that comic once you’re happy with your story. You might end up with a story and characters that will make you rich and famous. You might just have a lot of fun. Working on your own, this might be a good way to create a 24-hour comic (that’s when you create a 24 page comic in 24 hours, here’s more information about the 24-hour comic experience).