Start with an image of an empty mug. I grabbed mine from sxc.hu and besides the mug it depicts a small bag of instant ground coffee from Guatemala. No actually it is a tea bag which might not really match a mug we will fill with coffee, but that should not bug us right now.
Import the image to Illustrator and dim the layer down to 70%, that will make it easier to see the lines we will draw atop our footage. On a new layer, we will try to replicate the shape of our mug in right perspective. Draw two circles and match their orientation, size and ovality to the uppermost and lowest horizontal cross-section of the mug:

We will need two circles in between those two end circles: one to establish the coffee, the other one to define the outline of the last line of transition between coffee and mug. The easiest and most precise way to create circles in perspective between two opposing ends is creating a Blend. Select both paths and change the blend settings using Object > Blend > Blend Options. Specify the number of steps to something around 16. Create the blend via Object > Blend > Make and Illustrator will calculate 14 different shapes between them, generating the intermediate steps it takes to get from the upper outline to the lower one. Your result should look akin to this:

Select all lines except of four with the Direct Selection Tool (shortcut A) and group them before you hide them. The four remaining circles consist of three close to each other and a fourth one farther away. Remove the lower semi-circle of the second and fourth one from the top. Does your result look like this? (I highlighted the circles that must remain full circles.)

Select the lowest circle and fill it with your desired coffee tone — usually something pretty reddish yet dark. Make the color global in the swatch options and save the swatch for later use. Having a global color enables you to make color changes in the whole scene with just one slider instead of having to reassign every single color! Now set the opacity to 90% so there is still a slight slight slight shimmer of the mug coming through.

Hide the other circles — for now we will be concentrating on the base of our coffee.
Use the Mesh Tool to add two anchor points dividing space in half vertically and into thirds horizontally. Then move the points way up until you get a sickle-shaped area at the upper corner.

Distort the tangents but try to keep the sickle shape.

Select the different anchor points of the mesh and colorize them: a color with less tone on the sides and one with more orange on the top.

Unhide the other semi-circles and form two overlapping sickles with it by combining respectively two paths to a Compound Path (Object > Compound Path > Make). Color the top one in a color somewhere between yellow and olive (this color is going to create the gleamy fringe coffee creates when transitioning to the surface of its container) and the lower one in red (before it turns greenish, coffee gets red on the edges).

Select both sickles, remove their Stroke and apply a Gaussian Blur to both of them. Move the red sickle in front of the yellow-green one and you should get something like this:

Duplicate the red shape and set the copy’s Blend Mode to Multiply (you do that in the Transparency window). Make it a bit wider to soften up the transition of the coffee on the left and right sides.

Draw a blobby white shape representing the reflection of a light source. One of the graphic artist’s most important tools is his power of observation! Take your time and observe how coffee looks and reacts to light, how the reflection are shaped and try to mimic that look. I set the Blend Mode to Screen and pulled down the opacity to 20%.

Use the Pen Tool to draw a new little highlight within this light reflection — this will depict the brightest part of the light source (the lightbulb e.g.). Fill it with a linear black-to-white-to-black gradient and position the gradient with the Gradient Tool (shortcut G). Set the Blend Mode to Hard Light so the black areas will appear as transparent whereas white will show up as white.

Add more highlights to enhance the effect of refraction. As mentioned above, it is always helping to look at real coffee or photographs to see how those highlights may look like.

Well let’s create a little foam then (nothing is too much to increase the credibility of your image)!
Create a skewed circle and fill it with a radial gradient going from black to grey. Set the Blend Mode to Screen and add two little starry highlights. You can create two circles and apply Effect > Distort > Pucker & Bloat to transform it to a little star in the twinkling of an eye.

I added a golden corona to give the foam bubbles a certain thickness in a coffee-like color and duplicated it a couple of time, sizing each bubble separately to add some variation.

Now all we have left to do is clipping the coffee so it won’t stand out of the cup. Let’s take the uppermost cross-section we created earlier and use it to create a mask. Copy the circle and press the ALT-key while you click on the layer’s mask.

Once in the mask, all you see is white — no surprise as we didn’t create a mask yet. Paste the circle and click on the thumbnail next to the mask thumbnail to see what you are doing and position the mask circle until your coffee is clipped right. Unlink the mask and the layer so you can move around the coffee without moving the mask. If you want to have a lower level of coffee in the mug, you just need to stretch the whole coffee group so it fits the shape of the mug’s actual cross-section and move it down a bit.

See the final result on the top of the page here or download the Illustrator file here!

Dan Borufka

...you might also be interested in:

• Delaunay Image Triangulation Brush
  for Illustrator with Scriptographer
• Poster: Vicious Circle