Coffee with Animated Steam

In this unique tutorial, we will push Adobe Photoshop to its next level of design. We will take an empty coffee cup, place coffee inside it, and then finally create realistic looking animated steam. As a result, we will end up with an animated '.gif' file which will animate smoothly and realistically.

Throughout this tutorial, you may follow the image illustrations and the detailed descriptions which match these illustrations. All actions, effects and features are explained in detail to ensure that anyone will be able to understand and follow this tutorial with ease.

You can either search the web for the two images I have used below for the cup and the actual coffee or you can download the images from our site. Feel free to give it try using the images displayed below.

I will be starting this tutorial with 2 images. I have a shot of coffee and then a 3D rendered coffee cup which is empty. View Figure1 and Figure2 below as an illustration.

Figure 1

Figure 2

Open these two images in your Adobe Photoshop application. We won't be physically working on these files, so we need to create a new, empty stage to create our unique design on. In order to create a new Photoshop document you may go to 'File > New…' *or simply press 'Ctrl' + 'N'. View Figure3 below as an exact reference to the values which you will be using.

Figure 3

Once you have created your new Photoshop file with the values as shown in Figure3 above, you need to place the two source images on this new stage. Select the window of one of the source images. Then hold down 'Ctrl' + 'Alt' while you click and drag the content to the 500px by 500px stage you have just created. Do the same with the other source image as well.

Move over to the 'Layers' panel. If the 'Layers' panel is not visible on your workspace, you may make it visible by going to 'Window > Layers' *or simply by pressing 'F7' as a keyboard shortcut. You should notice that there are three layers in the 'Layers' panel at this moment in time. The bottom layer named 'Layer1' is empty, and then there are two other layers containing the two source images which you copied.

Rename 'Layer1' as 'background', the layer containing the empty cup as 'cup' and finally the layer containing the coffee as 'coffee'. View Figure4 below as an illustration and reference to how your 'Layers' panel should look.

Figure 4

Select the 'background' layer in the 'Layers' panel. Press 'D' to reset the 'Color Box' to its default colors, which is Black (#000000) and White (#FFFFFF). With Black as your primary/foreground color, press 'Shift' + 'F5' and click 'Ok' when the prompting dialog appears. By doing this, you will fill the 'background' layer with your primary/foreground color which is Black.

Ensure that you have the 'cup' layer actively selected in the 'Layers' panel. Hide the 'coffee' layer by clicking on the 'eye' icon to the left of its small thumbnail image. You will now select the 'Marquee Tool' from the 'Toolbox'. View Figure5 below.

Figure 5

Once you have selected the 'Marquee Tool' from the 'Toolbox' you need to right-click on the stage with the 'cup' layer actively selected. On the right-click menu, select 'Free Transform' which will allow you to resize and reshape the content of the 'cup' layer. View Figure6 below as an illustration to what I have done.

Figure 6

Use your discretion and feel to position the content of the 'cup' layer as you think it looks most appropriate and appealing.

Select the 'coffee' layer in the 'Layers' panel. You need to change the 'Blending Mode' of this layer to 'Hard Light'. You can change the blending mode by toggling the setting at the top of the 'Layers' panel. View Figure7 as an illustration.

Figure 7

After you have changed the 'Blending Mode', you will also resize and reshape the content of the 'coffee' layer as you have done with the 'cup' layer earlier on. Select the 'Marquee Tool' from the 'Toolbox' by pressing 'M' as a keyboard shortcut. Then right-click on the stage with the 'coffee' layer selected, and select 'Free Transform' from the right-click menu. View Figure8 below as an illustration and reference to the reshaping step.

Figure 8

This is the tricky part. The cup is kind of square shaped, and the coffee in a round shape. With the 'Marquee Tool' still at hand, and the 'coffee' layer still selected in the 'Layers' panel, you need to right-click on the stage, then select 'Free Transform'. Right-click on the stage again, and select 'Warp'. In this step, you need to physically warp the coffee to fit the shape of the cup. View Figure9 below as a result to what I have done.

Figure 9

Once that's done, and you have achieved the appropriate shape, we need to get rid of all instances of the 'coffee' layer which isn't coffee, and obviously which we don't want in our design. You can easily do this by using 'Quick Mask Mode'. Access this mode from the 'Toolbox' *or simply by pressing 'Q' as a keyboard shortcut. View Figure10 below as an illustration to accessing the 'Quick Mask Mode'.

Figure 10

While in 'Quick Mask Mode', you will now press 'D' to reset the colors in the 'Color Box'. You will use Black with the 'Brush Tool' selected to color in all the parts of the 'coffee' layer which you want to show. View Figure11 below as an illustration.

Figure 11

As you look at Figure11, you see a red spot. Whenever you brush with Black in 'Quick Mask Mode' it creates a red overlay. Once you have completed this step as shown in Figure11, you may press 'Q' to return to normal mode. Now ensure that you have the 'coffee' layer selected in the 'Layers' panel and press the 'Delete' key on your keyboard. View Figure12 as the result I have achieved from this step.

Figure 12

Our coffee has been successfully placed in the empty cup, and there is one more thing left to do in order to complete this tutorial successfully. This is the fun part. We will create realistic looking animated steam for our coffee.

Create a new layer in the 'Layers' panel by clicking on the 'New Layer' icon, *or simply by pressing 'Shift' + 'Ctrl' + 'N' as a keyboard shortcut. Rename your new layer as 'steam'. Once you have done this, select the 'Brush Tool' from the 'Toolbox'.

With the 'Brush Tool' at hand, and the 'steam' layer actively selected in the 'Layers' panel, you need to press 'D' to reset the colors in the 'Color Box' and then press 'X' to switch the primary and secondary colors, thus making White (#FFFFFF) your primary color.

As you have the 'Brush Tool' at hand, you will create a random white spot as shown in Figure13 below. Ensure that you have the 'steam' layer selected when doing this. See Figure13.

Figure 13

Once you have drawn something which looks like the illustration in Figure13, you need to blur the content of the 'steam' layer by using 'Gaussian Blur'. Go to 'Filter > Blur > Gaussian Blur…' and apply this filter with the following effects as shown in Figure14 below.

Figure 14 (Click to enlarge)

We are now done with most of the design work, and the only thing left to do is to create the animation of the steam. Go to 'Window > Animation' in order to open the animations panel. When you open the animations panel, there will be one frame. Duplicate that frame by clicking on the 'New Frame' icon at the bottom of the animations panel. View Figure15 below as an illustration.

Figure 15

After you have duplicated the first frame, select the second frame and move over to the 'Layers' panel. With the second frame selected, move the content of the 'steam' layer upwards with the 'Move Tool' and reduce the transparency of the 'steam' layer in frame 2 to 0%.

With frame 2 still selected, click on the 'Tweens' icon at the bottom of the animations panel. When the prompting dialog appears on your workspace, use Figure16 below as a reference to the settings and values which you need to use.

Figure 16

When you are ready to export your design as an animated '.gif' go to 'File > Save For Web…' and save the file as a '.gif' animation. You can then place the file in your website or simply view it in 'Windows Picture & Fax Viewer'.

You have now successfully completed your design and the animation of the steam. Your file is ready for exporting as an animated '.gif', but you might want to spice your design up a bit. You may add some more steam to have a continuous animation. For now, I will stop the tutorial right here. You can view the result in Figure17 below.

Click to enlarge