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 the lightly flickering stars in the background of the Sleep Foundation homepage (www.sleepfoundation.org), 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!

At R-Design we work frequently with photographers, and most of us on staff dabble in photography as well. With digital cameras crashing through the marketplace at the speed of light, many people who used to take pictures for fun are now also learning to edit their photos like pros.

I asked some professionals, “How do you typically touch up a photo of a person before it goes to print?”
Common answers included “Adding eyelashes”, “whitening teeth” and “making the eyes sparkle”.

For those of you at home who now have Photoshop, I offer these crash courses on touching up eyes and teeth of a photo’s subject to add a dash of SUPERSTAR. The software I am using is Photoshop CS2, a.k.a. Photoshop 9.0.2.

Lesson 1: Teeth Whitening.      

Tool used: Dodge. (Note: There are a few ways to lighten teeth, just like there are a few ways to do most things in Photoshop. But to me, making teeth lighter is usually a fast, minor detail. So we are going to treat it as such.)

Here are some ordinary teeth. But what if you want them to be extraordinary? Maybe you read that study about sales reps with whiter teeth closing more deals?? Here’s my quick fix:

Step 1: Open the Photo in Photoshop.

Step 2: Select your magic wand tool. (The shortcut to doing this is pressing W for Wand.)

Step 3: Set your wand tool to a semi-low tolerane level, and click on the teeth. (explained: Once the wand tool is selected, your menu allows you to select a Tolerance level. The tolerance uses a mathematical process to look at the pixels of the image and determine which colors are similar and which are not. With a high level of tolerance, more like pixels will be selected by the wand. With a low level of tolerance, fewer will be selected. In the case of this photo, the white of the teeth is not surrounded by other white objects in the photo. Any low level of tolerance will select JUST the teeth, and avoid the lips and dark hollow of the mouth.)
By selecting a tolerance of 30, I can click on the front tooth of this girl and almost all of the surrounding teeth are selected because they are the same color. You know what is selected because it suddenly has a dotted outline moving around it, also know as Photoshop’s dancing ants. By holding down the shift key and clicking once more on a back tooth, the teeth are well selected.

Step 4: Select your dodge tool (press O). The dodge tool is used to lighten pixels. Once it is selected, you can adjust the rate at which it lightens by setting the ‘exposure’. For this example I would like to sweep my brush along the teeth once and adjust them all at the same time. Because of this, I have enlarged the brush size to 16. The dodge settings I chose were Range: Midtones, Exposure: 47%.

Step 5: Quickly wipe the dodge brush across the teeth. The dodge tool is sensitive to pressure. If you hold the mouse button down on one tooth longer than the others, that tooth will be whiter. Try to use even pressure and just glide the mouse in one short stroke.
 

That’s it! Here is my result.

Here is a before and after shot for you:

Now we can move on to Editing Eyes. Let’s make them sparkle and shine!!
There are many parts to eyes, and depending on what needs some touching up the following steps can be used individually or in conjunction with one another.
Part 1. Sclera cleanup (that’s the eye-ball whites)

Step 1: Select your magic wand tool. (The shortcut to doing this is pressing W for Wand.) Use the magic wand to select the eye whites in the photo. If you need to select more than one area, select a part, then hold down shift while selecting another part. On this photo I used a tolerance of 30.

Step 2: Add a new blank layer (shift-ctrl-N, Click OK)

Step 3: Set your foreground color as white. Select the paint bucket (G) and paint the white color in the selected area on the new layer.

Step 4: Lower the opacity of the layer to make it more realistic. This can be done in the top right of the layers pallette and takes out the red color, but leaves the blood vessels and some shadows showing. I set mine at 45%. Then deselect the area.

Here is what I have right now:

Part 2. Iris & pupil cleanup (that’s the eye color and black middle of the eye)

To adjust eye color:

Step 1: add a new layer

Step 2: On the layer palette, change the layer’s blend mode to Soft light with the top-left drop-down arrow.

Step 3: Press D to set your colors on the tools menu to default colors.

Step 4: Select a small sized brush from the brush tool menu and lower the opacity to 20%.

Step 5: paint on the new layer to adjust the lighting around the eye:

Painting white will lighten, Painting black will darken. Lighten or darken the colored iris as needed. Paint black and darken the pupil. You can also enhance the outer rim of the iris with black – but do this carefully with a 5% or 10% brush.

I also like to add a stroke of complimentary color, like a mustard-colored bit to brown eyes or a purple hue to blue eyes.

Part 3. Catchlights

When retouching eyes, you may also want to add “catchlights”. Catchlights are bright spots that are an indication of where the light source was at the time the picture was taken, and often occur naturally or from professional portrait lighting.

Step 1: Select white as your foreground color.

Step 2: Using the circle tool, create a small, white circle on the same side of each pupil, depending on the lighting in the picture. I have 2 tips for you here. TIP 1: you may need to zoom in for this part. TIP 2: you can create one circle and then duplicate the layer and move it to the other eye to get 2 circles that are exactly the same. Catchlights are often exactly the same.

Step 3: Lower the opacity of the layers that the circles are on to make them look more natural.

In this case I used a light yellow instead of pure white and lowered the opacity of the layers to 80%. Here is what I have right now:

Part 4. Eyelashes
This is mainly used for female subjects, and works best on adults who wear makeup.

To add fake eyelashes, you can duplicate the area around the eye and use an ultra high unsharp mask. I usually draw fake lashes. I try to select a color with the eyedropper tool from the current eyeliner. Then I use a small brush tool or thin line tool to add fake lashes where necessary. Then I lower the opacity of the layer so they don’t look too fake.

Here I used the line tool, grouped the lines into one layer group, and lower the layer group opacity to 50%.

And as usual, here is a Before and After: