The birth of the kissing fish

Lively and lovely kissing fish not only let Girls fondle admiringly, its charm even the lad can not resist. Today, we use Photoshop and ImageReady to make a little animation of a kissing fish. (as pictured)

This tutorial is mainly about layers, channels, and deformations in Photoshop, where layers and transitions are used in imageready to achieve animation effects. If you like, you can use the file we provided to complete the animation (click here to download).

1. First, use Photoshop to open the image background and redfish, where Redfish has been removed from the background. (Fig background and redfish)

Our red fish looks, um ... A little shy, so in this animation, we hide it in the coral plexus in the lower left corner of the background image. The first thing to do is to separate the coral from the screen and copy it to another layer so that it can be shown in front of the background, and we will take this step in the channel.

2. Select the background image and open the channel panel. Look at each channel in turn to find a channel with the largest contrast to the coral and the surrounding environment, in which the coral in the green channel is the largest compared to the surrounding. Select the green channel and drag it to the Create new channel button below the panel to copy the Green channel. By default, this channel is automatically named "Green copy." (Figure 01)

Figure 01

3. Choose the green Copy channel, our aim is to make the outer edge of the coral almost white, and the surrounding environment is almost all black, further increase the contrast to facilitate the selection. Open the Levels dialog box and set the input levels to 52,2.07,167. (Figure 02)

Figure 02

4. Select the Pen tool, black smear green copy of the channel in all white areas outside the coral, now in addition to the coral part of the screen, should all be filled with black. (Figure 03)

Figure 03

5. Hold down the CTRL key, click the green Copy channel, load the white area in the channel, click the RGB channel thumbnail, go back to the color image, and go to the layers board. The constituency is the main area of the coral. Press Ctrl+j to copy the image in the selection to the new layer, and the image does not appear to change.

If you hide the background, you will find that the coral we have copied is incomplete, leaving a lot of space in between. Of course, if you were to fill the coral inside the green copy channel with a white brush in the previous step, you would get the complete coral shape. What's the difference? Come with me, and soon you'll understand.

6. Now, use the mobile tool to drag the red fish from the Redfish file to the background. Immediately, adjust the layer position in the layers panel and place the red snapper layer above the coral layer. Press Ctrl+t, pull out the deformation box, in the tool option will be long and wide links, the red fish to reduce to the original 90%, to determine the deformation. Then, select Edit > Transform > Horizontal Flip Command, and then use the deformation tool to rotate red fish, so that its body and the body of the big fish to keep parallel, with mobile tools to move the red fish to the coral plexus behind, pay attention to the position of the fish mouth Oh! (If you feel bad, you can create a new layer on top and draw a line for reference) (Figure 05)

Figure 05

As you move, you may find that the body of the fish looms in the coral plexus because there is a gap in the coral plexus, which is not only interesting but also true. If we choose the entire coral, it will completely block the body of the fish.

Now, to store your image, the next step is to move to the ImageReady and complete the animation section.

Click the Photoshop panel to jump to the imageready and open the image we just made in ImageReady. If your animation panel is not open, open from the window > display animation. Currently, this file has only one frame on the animation panel. (Figure 06)

Figure 06

8. In the layers panel, activate the layer where the red fish is located. Then use the mobile tool to move the red fish to the front of the big fish, making the fish mouth phase, it looks like kissing (Figure 07).

Figure 07

Note: In this animation panel, only the second frame changes, reflecting the situation after the image is moved. (Figure 08)

Figure 08

9. At the bottom of the animation panel, select the "Animation frame Transition" button, in the Transition dialog box, select all the layers, the parameters only select the location, the transition to select the previous frame, add the number of frames to select 3. (Figure 09)

Figure 09

The transition adds an intermediate frame to our animation. As you can see in the animation panel, there are 3 intermediate frames added between the first and last frames. (Figure 10)

Figure 10

Note that the increased intermediate frames make the animation smoother, but the file size increases with each additional frame. If you're going to do the animations on the Web, you might want to experiment with as few frames as possible to achieve the best results. At any time, you can click on the play button on the animation panel to preview the animation effect.

10. In most cases, you need to adjust the speed at which the animation is played. Do you see the numbers below each frame on the animation panel? These numbers indicate the delay between the two adjacent frames, or the speed at which the frames are displayed. To change the time of all frames at once, click the first frame, hold down the SHIFT key, click the last frame, and select all the frames.

Click the Drop-down arrow next to the frame speed to select a time from the pop-up menu. In this case, I chose 0.2 seconds. You can also specify a delay time for each frame individually. (Figure 11)

Figure 11

11. When you are satisfied with the speed of the animation, the next step is to optimize the animation. Sometimes, the animation can be very large, at this time, you need to sacrifice some image quality to ensure the appropriate size of the animation. I will optimize the format of the file as GIF, the loss of 0, detectable, color algorithm set to diffuse, color 64 color, imitation color 100%, no miscellaneous edge. (Figure 12)

Figure 12

You can select a preview in the tool panel, or right-click the image, select Preview from the pop-up menu, and then output the animation with the "Save optimized results as" command. Before the output, it is best to use the PSD format to save the original manuscript, so you can easily modify. Finally, we output the animation is only 34K, is not very small and exquisite it?