How should I save my files?

A tutorial for beginner level users of Photoshop.
In this tutorial I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.

What a great question that is… “How should I save my files?” A more important question is “How will I be using my file?” and from there, you will know how to save it.

When saving files in Photoshop, there are many file type options. Here are some quick ways to know when to use different types:

- If your are saving your work for further Photoshop editing, save as a psd. This will maintain all of your Photoshop layers and effects. You may want to get in the habit of saving a psd first, and then the other file type you might need, in case the file needs to be altered in the future.

- If you are saving your file for use on the INTERNET, a GIF is good for line art, such as simple logos and charts, and JPG is better for files with lots of color variants, such as photos. A GIF allows only 256 colors, a jpg allows for thousands. JPG is also widely used by digital cameras. GIF and JPG files do NOT support layers when saved. Photoshop has a “Save for web” function I recommend for web files. If I should blog about that next, let me know.

- If you are saving your file for EMAIL, see above. For both of these options, a low resolution file is needed, not a high resolution file (click to read more on that here).

- If you are saving your work to share with someone who is putting your image files in a different graphics program or can’t seem to open files you send them, use a TIFF (also, TIF). These files were designed to be universally shared. TIF files DO support layers when saved. TIFF is a raster image format supported by virtually all paint, image-editing, and page-layout applications.

- If you have a text heavy document, like a brochure, or a form to fill out, save as a pdf. (But I might ask why you are using Photoshop for this file in the first place.) A pdf has the option to be high resolution, so people can later print it and the clarity will be maintained, or low resolution, for quick proofs or online sharing. PDF files CAN support layers when saved, depending on the settings you use when saving.

- If you need the file to have a transparent background, so you can put it on another background color, save as a gif.

- If you have a massive file to save – either in size or file size, choose Large Document Format (PSB) for documents of any pixel size and any file size. (All Photoshop features are preserved in PSB files.) Currently, PSB files are supported only by Photoshop CS. Photoshop Raw supports documents of any pixel dimension or file size, but does not support layers. TIFF Supports files up to 4 GB in size.

- GIFs can be saved as high resolution. They support RGB, Indexed Color, Grayscale, or Bitmap modes.

- JPGs can be saved as high resolution for print. CMYK, RGB, and grayscale images can be saved as JPGs.

What about PNG?
JPGs use compression — images are compressed to take up less memory space. Compression also leads to loss of quality. The more you compress an image, the more the quality continues to degrade. Every time you open a JPG, make a minor change, and save it, the JPG is compressed yet again. The more you work with a JPG, the worse it gets. This shows up as pixelation, overall fuzziness, random pixels are added. Also, gif creation is patented and a free option was needed. To solve these problems, a new image format was created call PNG (Portable Network Graphics, pronounced “ping.”)

PNG images are supported by web browsers and do allow for transparent backgrounds, however they tend to get fuzzy on internet explorer, which is the most commonly used web browser today, so I don’t save web files as PNGs.

PNGs do not allow for animation. If you need some slight movement, use an animated gif. An Animated gif resaved as a jpg or png will lose its animation. You can use the Save As command in Photoshop to save RGB, Indexed Color, Grayscale, and Bitmap mode images in PNG format.

What’s a BMP?
BMP stands for bitmapped graphics format. Wikipedia explains it as “used internally by the Microsoft Windows and OS/2 graphics subsystem, and used commonly as a simple graphics file format on those platforms… BMP files are usually not compressed, so they are typically much larger than compressed image file formats for the same image. As such, BMPs are generally unsuitable for transferring images on the Internet or other slow or capacity-limited media.”

A commerical printer may ask for an EPS file. Typically, these are created in vector programs, but Photoshop can save as an EPS. Virtually all page-layout, word-processing, and graphics applications accept imported EPS files. DCS format is a version of EPS that lets you save color separations of CMYK or multichannel files.

The Targa (TGA) format supports images of any dimensions with between 1 and 32 bits of color. It is designed for Truevision hardware. HUH? I don’t know either…

Wikipedia has a great chart comparing file types and what they support here: http://en.wikipedia.org/wiki/Comparison_of_graphics_file_formats

Restoring Color to Areas of a photo Blown white by Flash

A tutorial for intermediate level users of Photoshop.
 One of the problems we face when taking photos with a flash, or even in bright sunlight, can be that color can be washed (blown) from some areas.

Original photo, with color blown from cheeks. (Her cheeks have lost their skin tone and appear white)

This is the result we want – natural sun highlights on cheeks, but not blown.

These are the color values for the cheeks. Much too white! The flash has hit the areas and blown the color to some extent.

I have a technique for putting the color back into photos that were blown white by flash. It’s not the only way, but it can help with some difficult images.

1. I’d use the lasso tool in this instance, to select the face, like this.

2. Feather the edge, as appropriate. That means, low radius for low res image like this one (5 pixels works) but you’d use a higher setting for an image at higher resolution.

    To do this: Right Click on the selection, select Feather. Enter the appropriate setting. Click OK.

3. Bring up Levels (ctrl-L). We’re going to change the white point to fix this area.

4. There are three eyedroppers at the bottom right of the dialog box. Double-click the white dropper. This will display the Color Picker.

5. In this case, I then clicked on a skin tone that was closer to what I wanted.

    To do this: Hold the mouse pointer over the photo instead of the color picker and the eyedropper tool comes up, allowing you to take a color sample from the photo itself.

But the cheeks should be lighter, so once you have the color, you want to choose a lighter tone. Make sure “Only Web Colors” is NOT checked on the bottom left corner of the color picker.

6.  This is the color we’re going to set as the white point. So now you just click OK.

7. The color picker will close, but Levels is still open. You also still have the white eyedropper active. (If you don’t, then click it again.)

8. With the eyedropper, click in the lightest area of the cheeks.

9. This will blend the cheeks nicely into the rest of the image, giving them natural color.

Sometimes, in a portrait for example, you don’t need to select the face area to do this, but in this image we didn’t want to set the other white items – crown or the pearl earring – to flesh color, so selecting was necessary.

10. The program will ask you whether you want the new color to be the new white point. You really don’t, so remember to check it next time you open Levels.

Christine Frey is an instructor at Eclectic Academy (http://www.eclecticacademy.com)

For many web sites, animation is created using Flash. Flash is an Adobe program that can combine images, text, web programming and more to make something as seamless as a movie or as annoying as a “skip intro” page. If you want just a tad of movement somewhere on a page, such as lightly flickering stars in the background, I would suggest using an animated .gif instead of Flash.

If you are a basic Photoshop user, you can create an animated .gif if you know about layers and are willing to learn about the animation palette. Older versions of Photoshop do not allow for this, and Photoshop Elements or Image Ready can be used. In this tutorial I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.

Photoshop defines animations as: “a sequence of images displayed over time. Each frame varies slightly from the preceding frame, creating the illusion of movement when the frames are viewed in quick succession.” Basically, you are creating animation the way cartoons are made, by replacing each frame with another frame that is slightly different.

Here is the sample image that I will be animating – a little stick figure enjoying Yoga.

In this instance, you can see that I have 4 layers on the image. From the top they are: Forward Bend, Downward Dog, Cobra and the white background.

GOAL: My intention is to have the stick figure do some fluid Yoga, going from one pose to another.

Step 1: Because I want the man to do his Yoga in place, I centered the layers with each other.

Step 2: With the image open, go to Window on the main menu and select Animation. This opens the animation palette. Your image will appear in the first frame of the animation palette.

Step 3: Add a frame to the animation palette.

You can do this by clicking on the arrow on the top right of the animation palette and selecting “new frame” from the fly-out menu, or you can click the square at the bottom of the animation palette. Now you’ll see your image in the first frame & new frame of the animation palette.

Step 4: Select a frame and edit the layers of that frame.

You can do any of the following:

• Turn visibility on and off for different layers
• Change the position of layers to make layer content move
• Change layer opacity to make content fade in or out
• Change the blending mode of layers
• Add a style to layers

(FYI: you can only animate linear movements. Rotations need to be done frame by frame.)

You can generate new frames with slight changes between two existing frames easily and automatically using the Tween command in the animation palette. Tweening is a quick way to make an object move or fade into another shape. The button looks like a series of squares changing opacity:

In this case, I wanted to Tween my Yoga man between the 3 Yoga positions to make it look as though he is moving. I selected frame 1 and turned off the visibility of layers 2 and 3, so only Cobra and the Background layers were visible. Then I selected the 2^nd frame in the animation palette and turned off the visibility of the Cobra layer, and turned on the visibility of the Downward Dog layer.

Ready to Tween the 2 layers: allowing Photoshop to create the movement for me of the little Yoga man between the 2 Yoga poses.

Tweening: First I held down the shift key and clicked on both frames of the animation palette, so they were both selected. Then I clicked on the Tween button (the series of squares at the bottom of the animation palette.)

My tween menu popped up and I made the following selections:

6 new frames have appeared in the Animation palette!

I did not preview the animation at this time, because I had not edited the frame delay – the rate at which the animation changes from frame to frame. The animation would therfore move too quickly. So next I …

Step 5: Set frame delay and looping options.

You can assign the delay time between each frame (do you want to go from frame to frame every 4 seconds or every .25 seconds? etc…) and specify looping, so that the animation will run over and over or just run through once. I have chosen .5 seconds on each frame. Just click on the tiny black arrow next to where it says “0 sec.” on the bottom of each frame in the animation palette. (I did this 8 times.)

Ready to preview the animation.

Now, press the play button on the bottom of the animation palette to play a preview of the animation. You can also preview the animation in your web browser.

Step 6: Edit layers of additional frames as needed for your project. The number of frames you can create is limited only by the amount of system memory available to you.

I had another Yoga pose to animate, so I created a new frame in the animation palette. With only that new frame selected, I turned on the visibility of the Forward bend layer and turned off the visibility of the other 2 Yoga pose layers.

Then I followed the same Tweening process, highlighting the new Forward Bend frame and the one just before it, pressed the tween button, and instantly added 6 new layers.

Then I selected my frame delays of .5 sec again for each frame.

I also made some manual changes to the layers, duplicating those I thought would show better action and making the frame delay longer on frames that showed the finished Yoga poses.

Step 7: Save the animation.

In Photoshop, go to File, Save For Web. Make sure gif is selected. There are control buttons on this window to see the animation as it will finally appear one last time before saving.

(In ImageReady you can also save it in SWF format, like a Flash file.) I strongly recommend saving the animation as a .psd in case you need to rework the animation later.

View my final animation here. Note that this is a basic elementary start to animation. As said earlier, if you need lots of detailed animation on your web site, this is not the program to use to handle that. Keep playing around - Soon you’ll be Photoshopin’ your own flip books!