This is an intermediate tutorial. I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.

Bubbles are visually interesting because they reflect, can be transparent, have an iridescent sheen, and float. Sometimes this combination of characteristics can be hard to recreate. I’ll try to show you how. I’m starting with a photograph for my bubble to appear on. You can right click to copy it if you want to work with the same photo:

1. Open your photo

2. Using the elliptical marquee tool, draw a circle on your image. (If your rectangular marquee tool is showing in the tool box, hold the mouse over it, click and hold, and a fly-out menu will appear for you to select the elliptical marquee tool.) You can make your ellipse any size you want, and if you hold SHIFT while you draw it will make a perfect circle.

3. Press Cmd/Ctrl+J to copy your elliptical selection to its own layer.

4. Cmd/Ctrl+Click on the thumbnail in the layer palette to load the layer as a selection. You should see the marching ants in a circle as shown.

5. Select Filter from your main menu, then distort>spherize. Select an amount of 100% in the spherize menu that pops up.

6. Reapply the filter. Either Press Ctrl/cmd+F to re-apply the filter or go to Filter>Spherize (your most recent filter is listed at the top of the Filter menu now).

7. Your bubble area should now be distorted, and we will add a reflection to create a shiny surface. Create a new layer and name it ‘highlight’.

8. Make white your foreground color. Choose the gradient tool (on the fly-out menu of your paint bucket tool), and use the linear, foreground to transparent gradient.

Start from the top of the bubble and drag about 1/2 way down as shown.

9. Now right-click on Layer 1 for your blending options and select Bevel.
Style: Inner bevel, Technique: smooth, Depth: 29% (keep the other options at their defaults.)

10. Cmd/Ctrl+Clickon the thumbnail in the layer palette of the Highlight Layer. 

11. Click “Create new layer” to add a 4th layer (It should be Layer 2 on top of all your other layers).

12. Select your gradient tool and from the pre-loaded gradients select Spectrum (the full rainbow). Double click on the gradient to edit it, and remove the 2 darkest reds (the outermost colors) and the dark royal blue. Just click on the arrow by the color and drag it off the window to remove it.

Apply this newly edited gradient to Layer 2, then lower the opacity of the layer to 11%.

Now you have a round, shiny bubble!

If you want to place the bubble on different areas of the photo, reduce the opacity of layer 1 to 10%-40% and then group your top 3 layers and drag them anywhere on the image. Here I have copied the group a few times, changed the sizes and the opacities to place Lucy on the Beach among many Bubbles.

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: