ps制作飞机穿越云层动图 Animated Plane Flying Through Clouds

Introduction

This Photoshop tutorial explains how to place a plane in some clouds and how to create the illusion of depth. Later in this tutorial we're going to use this plane to create a short animation in ImageReady.

1. Add plane and create the proper mask

This is the image that we're going to use in this tutorial:

You can save this image by click right clicking on it and selecting (in Windows that is) Save Image/Picture As...

Open the image in Photoshop.

Open the channels palette. Since we're working in RGB, we will see three channels; (R)ed , (G)reen and (B)lue. Notice when you click on the red channel that it has a lot of contrast between the sky and the clouds. This means that this channel is a great candidate to be used as a mask later on (you'll figure out soon what I mean).

So with the red channel active (click on it once), go to the menu and choose Select / All (shortcut Ctrl + A or Command + A on the Mac). Continue by choosing in the menu Edit / Copy (shortcut Ctrl + C or Command + C on the Mac). This will place the content of our red channel on the clipboard. Needless to say that after you've done this you shouldn't copy anything else to this same clipboard or you will lose its content.

Remove the selection that's still active by selecting in the menu Select / Deselect or use the shortcut Ctrl + D(Command + D on the Mac). 

Click on the RGB layer in the channels palette (A) and then on the layers palette tab (B) and the original image will reappear in the document window:

We're going to add the image of an airplane, one that you can download here (right click on it and select Save Target/Link As...).

Open this file that contains the airplane, select the Move tool in the tool bar, click on the image of the plane, hold down the mouse button, drag the image to our file with the clouds and release the mouse button.

Click on the Add a layer mask icon in the layers palette to add a layer mask. 

Hold down the Alt Key (Option key on the Mac) and click on the mask (A) in the layers palette:

This will open the layer mask in the document window, which will now be completely white. Continue by selecting in the menu Edit / Paste (shortcut Ctrl + V or Command + V on the Mac) to paste the content of the clipboard (the copy of the red channel) on our mask.

Remove the current selection by pressing Ctrl + D (Command + D on the Mac)

Invert this mask by selecting Image / Adjustments / Invert (faster is to use the shortcut Ctrl + i or Command + i on the Mac):

Please remember this; the color black in a layer mask means ignore. Notice that by inverting the clouds we have made them black and since black means ignore, it means that in those areas parts of the plane won't show up and that's exactly what we want, because it creates the illusion as if the plane is behind the clouds.

However, to make our mask more useful, we need to increase its contrast; make sure that the mask is still active (it will have a double border) and select in the menu Image / Adjustments / Levels...

Enter the value 70 (A) for the black slider, enter a value 160 (B) for the white slider and click OK:

At the moment this mask is linked to the plane layer (notice the link icon between the mask and the plane layer), which means if one of them is moved, the other one will also move. Because we want to be able to position the plane without moving the mask we have to remove this link, so click once on the link icon to remove the link; the icon will disappear (A in next screenshot ). 

Click once on the plane layer in the layers palette to make the plane layer the active layer; it will now have a double border (B):

2. Add the illusion of depth

Go to the tool bar and select the Move tool  (if it's not selected). You can now use the mouse to move the plane in any direction. Notice when you do this, that the attached mask will stay in the same position since we've removed the link icon.

Important: always make sure that the layer with the plane is active (its thumbnail will have a double border in the layers palette) and not its mask. The mask should never be moved at any time. If you move the mask by accident, just press Ctrl + Z (Command + Z on the Mac) to undo the move.

Also notice when you move the plane that it will always disappear behind those clouds that are close to pure white. However to create the illusion of depth it would be nice to have the plane sometimes appear in front of these bright white clouds (from the viewer's perspective). My tutorial shows you how to do this in a pretty simple way.

Select the brush tool in the tool bar.

Open the brush picker window in the option bar by clicking on the button with the little triangle marked with A. 

Select a round brush, select a Master Diameter(B) of 20, a Hardness (C) of 0% and an Opacity (D) of 100%.

Click again on the button marked with A when you're done to close this window:

Now let's make the plane invisible for now by changing the Fill value of this layer to 0% (A in our next screenshot)

Click on the mask in the layers palette to make it active (it will now have a double border (B in next screenshot )).

Continue by pressing the \  key on your keyboard, which will change the mask into the equivalent of quick mask mode (the clouds are now a light red).

Note: Instead of using the \  key, you can also hold down the Alt+Shift keys (Option+Shift on the Mac) and click on the mask in the layers palette instead.

Change the foreground color to black by pressing the letter D on your keyboard. 

Press the letter X on your keyboard to switch the foreground color to white (check this): 

Now paint on those clouds (or part of it) that you want to appear behind the plane (again, from the viewer's perspective). Change the opacity of the brush in the option bar to a lower value (something like 30%) if you feel the need to have a softer transition between the areas that you paint on and the ones you leave alone. So in this screenshot the white clouds will appear behind the plane:

When you're done, press the \  key on your keyboard to leave the quick mask mode.

Return to the layers palette and change the fill (A) value of the layer with our plane back to 100% and click on the thumbnail of the plane layer to make it active (it will now have a double border (B)):

You can now grab the move tool  and move your plane around to see how your adjusted mask has corrected the depth in your image.

In the following image some of the clouds were moved behind the plane. Move your mouse over the next screenshot to see how the image looked like before the correction took place:

Save your current file by selecting in the menu File / Save and name it clouds. 

3. Add a contrail

In this step we're going to add a contrail to our plane. We're going to draw this contrail with a special clouds brush. 

The Realistic Clouds tutorial shows how to make a clouds brush in case you're interested to know how to make one. In this tutorial we're going to use the clouds brush that was created in that specific tutorial.

You can download this clouds brush here (right click and select Save Target As...)

Look at the following screenshot:

Select the Brush Tool  and click on the button in the options bar marked with A in the screenshot.

In the window that opens click on the button with the little black triangle(B) and then select Load Brushes... or Replace Brushes... (C) 

What's the difference between the two?

• Load Brushes: add the new brushes to the existing brushes in Photoshop
• Replace Brushes: replace the existing brushes in Photoshop

Which option to use is all up to you, but my advice is to select Load Brushes... 

Select the brush that you downloaded earlier and click on load.

Activate the brush by selecting it in the Brush Preset picker window that you opened earlier by clicking on the button in the options bar marked A in the above screenshot . You can find the clouds brush all the way at the bottom of the list of available brushes.

Enter the value 7 for Master Diameter (D). Make sure that the Opacity (E) for the brush is set to 100%.

Click on the Create a new layer  icon in the layers palette to create a new layer. 

Press the letter D on your keyboard to make your fore- and background color black and white: 

Click on the foreground color in your toolbar...

...to open the Color Picker window.

Enter the value DDDDDD (light gray) in the box marked with A and click on OK:

Now let's draw the contrail:

• hold down the shift key until I tell you to release it (this will help us to draw a perfect straight line)
• move your mouse cursor to the center of the left side of your image
• press the mouse key but don't release it yet.
• move your cursor to the other side on the right (this will draw the actual contrail)
• release mouse key
• release the shift key

Add a layer mask to our contrail layer by clicking on the Add layer mask at the bottom of the layers palette.

Press the letter D on your keyboard to make your foreground color white and your background color black: 

Select the Gradient Tool in the tool bar. (if you can't see it; it's under the Paint Bucket tool )

Make sure that in the option bar the Linear Gradient  is selected and make sure the other settings are the same as in this screenshot:

With the mask still active (double border), hold down the shift key and draw a gradient from the left edge of the mask all the way to the right edge of this same mask (it's the same technique we used to draw the contrail). 

Release the shift key again when you're done. 

Note: we needed to use the shift key to draw a gradient under a perfect straight angle.

Next click on the layer mask and drag/drop it on the Delete Layer icon  (soon you will understand why we remove the mask that we just created):

Photoshop will now ask whether you want to apply the mask before removing it. Select Apply:

So the reason why we removed the mask is to actually apply it to the contrail layer. Maybe a strange way to do things, but an effective way nevertheless.

Now that we've removed the layer mask, we're able to add the same layer mask that is already attached to our plane layer; with the contrail layer active (again, notice the double border), click on the plane's mask and drag/drop it on the Add layer mask icon .

Continue by changing the opacity of this layer to 70% (A):

We had to copy the mask, because our contrail will have to act the same way as our plane does (like we saw at the end of the previous page), otherwise we would have an odd animation in which the contrail would always stay behind the brightest white clouds. 

Note: there is no need to remove the link symbol between the contrail layer and the mask we just copied, because there isn't one. It turns out that Photoshop only adds the link symbol if you create a new mask from scratch.

Click on the plane thumbnail in the layers palette to make the plane layer active (it will have a double border at A in the next screenshot) and select the move tool in the tool bar.

Move the plane out of the clouds and to the left side of our image with the same amount of space between the plane and the upper and bottom edge of the image.

Select the contrail layer by clicking on the contrail thumbnail in the layers palette and move the contrail just behind the left engine of the airplane (leave some space between the engine and the contrail).

Once the contrail is in the right position, click inside the area marked with the arrow (B) to link the contrail layer with the plane layer (a link icon will appear in that location):

Both layers are now linked, meaning that the contrail will now follow the plane from right to left and that's exactly what we need for our animation.

Make sure that the move tool is activated. Move the plane all the way to the right and stop until you see only the front of the plane:

Hold down the shift key and press the cursor right key  on your keyboard a few times until the plane has totally disappeared.

Save your current file by selecting in the menu File / Save

4. Animate the plane

In this step I'm going to show how to animate a plane in ImageReady to make it look as if were flying through the clouds.

Continue by clicking on the Edit in ImageReady button  at the bottom of the tools palette in Photoshop; this will open our current file in ImageReady..

Make sure that the animation palette in ImageReady is visible and if not, select in the menu Window / Animation

Look at the next three screenshots:

You'll notice that by looking at the animation palette that you only have one frame (it has the number 1 in the top left corner). What we need to do first is duplicate this frame by clicking on the Duplicate current frame icon(A)at the bottom of the animation palette.

With the second frame active, go to the document window and make sure that the tab Original is selected (F). 

Select the Move tool in the tool bar.

Hold down the shift key and press the cursor left key  on your keyboard a few times until both plane and the complete (!) contrail have totally disappeared out of the image.

Return to the animation palette when you're done.

We now need to select both frames; we can do this by clicking on each one while holding down the Ctrl key (Command key on the Mac). Both frames are selected if their background in the animation palette has become a darker gray. 

Note: you can also select multiple frames by clicking on the first frame, then holding down the shift key and clicking on the last frame.

The next step is to select the Frame delay time; normally we would click on the area marked with a red rectangle (B) and select the number of seconds. We however need a value of 0 sec and since this is the default value we don't have to change anything. 

Note: you can always change that value later on if you have to, even if you have more than 2 frames; just use the shift-click trick that I mentioned earlier.

We now have two frames; frame 1 contains the object at its starting position, frame 2 contains the object at the location when the animation ends. We now have to instruct ImageReady to fill in the missing frames.

We do this by clicking on the tween button  at the bottom of the animation palette (C).

In the window that opens up you'll notice that the current setting for Tween With reads: Selection. That's good, because that's exactly what we want. The important question is; how many frames do we want to add? I'm suggesting in the screenshot to go for 60, but you can choose any value that you prefer. Keep a few things in mind;

• More frames means a smoother animation, but a larger file.
• Fewer frames means "jumpy" animation, but a smaller file
• Make sure that the image you're working on is rather small. How small? Well that depends on the number of frames you're planning to use. In this tutorial we will resize the image to make the animation faster.

After you have selected the number of frames and you made sure that all other settings (layers/parameters) are the same (they probably are, because they are default values) you can click on the OK button.

We are now adding a delay to our animation. We can add that delay to our first or last frame. In this tutorial we're going to add it to our first frame. Move the slider (marked J in the screenshot below) all the way to the left so that we can see our first frame.

Click inside the area marked with K and select in the drop-down menu a value of 2 sec:

Select the Optimize tab in your document window (marked H in one of our previous screenshots) and wait a few seconds. The optimized tab allows you to see how the frame(s) or animation looks like with the current optimize settings in the Optimize palette (more about his palette later in this tutorial).

You can now play the animation by clicking on the Playbutton (marked with E in the first screenshot of this page).

The animation will now play in your document window. 

Note: the final animation will be faster than the one you're watching now if you're on a slow computer.

Like I said earlier; the animation uses the currents settings of the Optimize palette:

Notice that at the bottom of the optimize window (not the optimize palette) you can see the predicted size of the final animation, in my case it reads 403.1K:

Let's see how we can reduce that number. Note: in your case this number is probably higher or lower.

Take another look at the earlier screenshot of the optimize palette. It would take a complete new tutorial to go through all the settings, so I will mention two things;

• For this tutorial I've selected for the format (A) GIF since GIF is a format that supports animation. Don't select Jpeg; it doesn't support animation.
• For the amount of colors (B) I've selected 256. This will make the image look better but will make the final file slightly larger.

Like I said earlier; the predicted file size for the GIF file is about 403.1K. Since this is rather big, we need to do something about his. Let's first crop the image; select the crop tool in the tool bar and select in the option bar for Cropped Area: Hide:

We have to select hide because we don't want to delete the invisible parts of our plane and contrail that will be part of our animation.

Click on frame 20 in the animation palette if you can't see the plane. 

We will do 3 optimizations to bring the file size down. Optimization #1 is our crop:

Optimization 1: Crop the image in such a way that you cut off a part of the top and bottom section of the sky. In my case this resulted in a new file size of 330.4K which is a reduction of about 20%.

Optimization 2: Go to the menu and select Image / Image Size and select a width of 400 pixels and click OK. The new file is now (in my case) 149.5K which is a reduction of about 55% of my previous size.

Optimization 3: By changing the default setting for Dither Method (C) from Diffusion to No Dither I was able to reduce the size to 120.1K which is a reduction of about 20%.

The file can now be saved as a GIF file with File / Save Optimized As...

Your animation should look something like this:

It's not a perfectly smooth animation, but that's because of the limitations of ImageReady

Final words

Even if you don't plan to create any animations, then consider to use what you've learned in the first part of this tutorial to create static images in combination with clouds using the mask depth technique that I've shared earlier:

 

Hopefully this tutorial gave you some idea what can be done with the information that's available in one of the channels and also how you can use ImageReady to create a simple and straightforward animation. The resulting visual size of the animated image is rather small, but we there are ways to make it larger;

• Use less colors
• Use less frames
• Use different settings in the optimize palette (experiment).
• Use a transparent background if possible (in our example not possible, because of our sky background).

Today Flash is often what's being used for animations like this on the internet, but that doesn't mean that we should stop using Imageready for any kind of animation, because for some simple animations ImageReady can be quite useful.

I hope that you enjoyed this tutorial.