Step 20: Saving Various Formats

Now that we have finished up Catgirl, we are ready to save him in formats other than Photoshop's default format. Photoshop's psd format is fine for working with our file in Photoshop, but if we want to share Catgirl (over the Internet for example) it would difficult to do so using Photoshop's format. For one thing, Photoshop files tend to be huge - not a good thing when we are trying to share our work. Also, everyone who wants to view our image will have to have Photoshop. Since everyone does not, we need a better way to share our masterpiece. In this step we are going to save a JPG and a GIF version of Dogman. There is a lot of good image information included in this step, so be sure you read everything and take some notes!

OK, let's get started...

1. If is is not already open, open your Cartoon file

The first thing we want to do is create a version of our Catgirl with all the layers smashed into one so that we don't have to worry about them when we save it.

2. Make sure all layers EXCEPT the Sketch layer are turned on - Photoshop will only merge the visible layers with what we are about to do, so be sure you have all the layers you want to include turned on and any layers you do not want to include turned off
3. Click Image on the menu bar then click Duplicate
4. In the As: box, type in Merged (this is what the new file will be named) and be sure the box next to Duplicate Merged Layers Only is checked (graphic, below)
   
5. Click OK

You should now have a new file open named Merged. Look at your layers palette - you should only have one layer with everything on it. Take a second now to make sure your Merged file has everything you want on it. If is does not, close it without saving and repeat the above directions with the correct layers active.

We will not be using the Cartoon file any more..

6. Close the Cartoon file - if Photoshop asks you if you would like to save it, choose No

Now that the Merged file is all set up and ready to go, let's go ahead and resize it so that it is more manageable. A good rule of thumb for images distributed over the Internet is to never exceed about 800 pixels wide or 600 pixels tall. Since Catgirl is so much taller than she is wider, we will specify the height and let Photoshop change the width by the same percentage automatically.

7. Click Image on the menu bar then click Image Size
8. Next to Height type in 600 (be sure you are doing it next to Height and not next to Width!)
9. Notice that as you type in 600 for height the height will change automatically
10. Make sure the rest of the settings match the graphic below (don't freak out if your width does not reset itself to 377 as in the graphic below - let it go to whatever it wants to go to)
    
11. Click OK

The width changes in proportion with the height because of the Constrain Proportions checkbox. If it were not checked, we could change either the height or width without the other changing as well.

You may have noticed a bunch of other options in the Image Size window. We don't have to worry about the Document Size settings for what we are doing now. These options allow us to define specific items for printing images, and since we are more interested in creating images that can be used on the Internet or in some other digital manner (hence the name of the class being Digital Graphics and Animation), we don't need to mess with these settings. If you move on to an art class, this area will become more important to you.

Now that Catgirl is the correct size, we can save her in one of a variety of formats. There are many image formats widely in use today, and each format has its advantages and disadvantages. Most formats use some sort of compression, which gives the advantage of smaller file size at the expense of image quality. Here is a quick look at some of the most common file formats...

• GIF (Graphic Interchange Format) - This format compresses images by limiting the number of colors they can have to a palette of up to 256 solid colors. This is a good format for images such as clip art, company logos, images with lots of line art, grayscale images, or other images that don't have much color gradations (if you don't know what gradations are, go to dictionary.com and look it up). It supports basic transparency and animation, and is one of the two most widely used formats on the Internet.
• JPEG (Joint Photographic Experts Group) - This is the other most widely used format, and has no limit on colors. It decreases image file size by breaking images into blocks of color and looking for patterns, which can lead to visible quality loss. JPEG is a good format for photographs. By the way, in case you are wondering, there is no difference between JPEG and JPG. This will be the format choice for 99 out of 100 images you will create.
• PNG (Portable Network Graphics) - This format does a fairly good job at being an all-purpose format with several different compression styles, similar to both GIF and JPG. Although support for this format is growing, many programs still do not correctly interpret and display PNG data, especially when it comes to transparency.
• OTHERS - There are many other formats, such as TIFF, BMP, IMG, MSP, PCX, TGA, RAS, and a bunch more. Many of them do not compress the image, and thus are fine to use when file size is not an issue (such as when you have a full-resolution image you want to have printed professionally). We have a limited amount of time in this class, so if you are interested in learning more about these other file types you will need to do so on your own.

When saving the various formats we have the option of simply using File - Save As... to save them, but this is generally a bad idea as doing so will cause Photoshop to save the file with a large amount of color information that we don't really care about for most of the uses of these file types. Also, this tends to make files that are larger than they need to be. The best way to get what we want is to use Photoshop's Save for Web feature. This command makes saving for the Web easier, gives you a real-time preview, protects against accidentally deleting your original Photoshop file, and allows us to make the file size as small as possible while retaining a high degree of quality.

Let's get a look at how the Save for Web feature works...

12. Click File then click Save for Web & Devices...
13. The Save for Web & Devices window should open
14. Any one of the four different modes may be active (notice the 4 tabs at the top of the window) but we want to work in 2-Up mode, so click the 2-Up tab to switch to 2-Up mode

There is a lot going on in this window, so let's take a piece-by-piece look at how it works...

Below is a shot of the Save for Web window. Let's concentrate first on the upper-left hand corner. Here we see some common tools down the left side of the window (the area labeled with a 1) - pan, slice select, zoom, color picker, current color, and slices visibility.  Across the top are the display tabs (the area labeled with a 2) and include Original, Optimized, 2-Up, and 4-Up. Each tab will give you a different display, but the one that works best for what we are doing is 2-Up since it shows us both the Original version (Catgirl as she is now) and Optimized (how she will look when we save her). 4-Up will show us something similar, but displays multiple options for the optimized picture.

On the right of the graphic above, just under the Done button is the settings section (the area labeled with a 3). The three graphics below are the same section - the left is before we choose a setting (notice that it says 'Unnamed'), the middle is what it looks like if we choose JPEG, and the right is if we choose GIF. Notice that the available options are different for the JPEG and GIF selections. We will not worry about most of the available options as they control functions that perform specific tasks that do not really concern us.

I would like to quickly point out a couple of items...

• JPEG (look at the middle graphic above) - the Optimized option will decrease the file size, but may create an image that is incompatible with many applications; the Quality area allows users to indicate exactly how much detail they want to incorporate; the area that currently says High allows for the selection of varying degrees of quality.
• GIF (look at the right graphic above) - Transparency indicates whether we want to allow transparent areas or not; the colors area allows for the specific definition of the number of colors we want to use in our image; Web Snap allows the image to be limited to using Web save colors, but this is really only applicable to Web developers so we can just leave it alone.

Below the settings section is the Color Table (the area labeled with a 4) and Image Size (the area labeled with a 5, and also pictured below). The Color Table is only functional for GIF and indexed PNG formats, since these formats use a limited number of colors. When we try to save an image with thousands of colors under one of these formats, Photoshop is forced to reduce the colors to match something available under that format. The Color Table allows us to see, and in some cases edit, those colors Photoshop is using. The Image Size tab controls the dimensions of our graphic, and not only allows us to change them, but as you can see in the image below the top of the tab shows us our image's current setup. When saving images for the Web, we want to use as small an image as possible to successfully do what we intend. Keep in mind that when changing the size of your image you can use the zoom function (the area labeled with a 6) to zoom in and check the quality of your image.

The point of all this is that when we save an image in any non-Photoshop format we want to find the best balance between image size, image quality, and file size. Exactly what that balance is will differ from image to image and from purpose to purpose, so you will have to handle that on your own when the time comes. We will say that for distribution over the Internet, images intended for use by the general public should never exceed 200 kilobytes, and should be well below that if possible (the only exception to this is if you know that everyone looking at your image has a high-speed connection, then image file size may become irrelevant).

Saving a JPG file

The first of the two files you will save in this step is a JPG version of Catgirl...

15. You should still have the Save for Web window open (if you do not, go back and repeat directions 12-14)
16. In the Settings section choose JPG High
17. Make sure Optimized is check and that the Quality is set to 60

Photoshop should have chosen 60 by default, but it may not have. For most uses, 60 will give us a good looking graphic and a relatively small file size. We can change this if we want, and the images below will give you a quick look at how changing the Quality setting effects the image's appearance...

	Quality = 100 File size = 207.4K (you can tell the file size by looking just below the image in the Save for Web window; it is the area labeled with a 7 in the graphic above) Resizing the image has cost us some clarity, but it looks very much like the original, especially when zoomed out to its actual size.
	Quality = 60 File size = 55.64K She still looks pretty good, and looks even better when viewed at actual size. And notice how much smaller the file size is now with almost 150K being lost.
	Quality = 40 File size = 32.22K She's beginning not to look so hot right now, but JPG compression is much more noticeable when zoomed in like this. Notice that the file size is even smaller. This would be a good setting if you need a fairly descent image but are concerned with file size.
	Quality = 20 File size = 22.37K She is really starting to look haggard (if you don't know what means, look it up at  dictionary.com), but file size is teeny tiny.
	Quality = 0 File size = 12.58K OH GOD, WHAT HAPPENED??? It looks like crap up close and from a distance, but its file size is only a little over 12K. This would only be useful if you are very very very very very very very very very very very concerned about the file size. now...excuse me while I go puke blood.

OK, let's save her so he can be graded...

21. Click Save
22. Surf to your Cartoon folder and name the file JPG.jpg

Saving a GIF

The GIF format was originally developed when computers had strict limits on how many colors their screens could show. Even though most computers are far beyond the limits of those days, limiting the palette of images remains an effective compression method for certain types of pictures. Any image that has large chunks of solid color is likely to be compressed well with GIF. But, like JPG, how you use it can dramatically influence your file size and image quality.

Be aware that trying to save a full-color image as a GIF can have drastic consequences. Take a look at the image below...

Notice the color variations on his cheek and in the sky? They result from Photoshop having to convert our multi-colored image into one that only uses 256 colors. Keep in mind that if our image did not have gradual shifts in color (such as where the clouds fade off into the sky) but instead had only solid colors (like what your Color layer should now look like) then saving as a GIF would be fine.

Let's go ahead and save her in the GIF format...

23. Click File then click Save for Web...
24. In the Settings section choose GIF 128 Dithered
25. Click Save
26. Surf to your Cartoon folder and name the file GIF.gif

Keep in mind one very important aspect of the GIF file type: the ability to save a transparent color. While it was not needed here, consider how useful it would be if we were saving a round cut-out of Catgirl's face. Since all graphics must be rectangular in shape, the area outside the circle would simply be transparent so that whatever color was behind our image could show through. This is incredibly important when we are saving graphics for display on the Internet

We are now done working with the Cartoon file, so let's go ahead and close it. Remember, we DO NOT want to save any changes we have made to this file in this step.

29. Close the Cartoon file and if Photoshop asks if you want to save it click No