There have been some requests for Percolator tutorials, so I’m going to start off with one on how I created the “hero shot” screens for Percolator 2.0 that are used in the App Store and on percolatorapp.com. If you’d like to follow along, there’s a smaller version of this image that you can use to follow along in Percolator 2.0.

Source

The original photo of a model holding a coffee cup was created for us by Alex Galushkoff of Retro Atelier. Alex produced this shot as well as all of the model photography on percolatorapp.com.

Alex provided a Photoshop image with an alpha channel. I increased the saturation slightly, exported this in PNG format at 2048 pixels high—the maximum export size that Percolator supports. Next, I emailed this file to my iPad, saved it to the iOS photo library, then imported it into Percolator.

Grind

Once imported into Percolator, I started by adjusting Percolator’s Grind settings. “Grinding” is all the stuff Percolator does to your image before turning it into circles. The main wheel, with settings from Course to Extra Fine, determine the starting size of your image, and that effects the maximum amount of detail Percolator can use to create circles: Extra Fine is the most detailed setting and  takes the longest because it uses the largest starting image size. What Grind you choose depends on the effect you want to get, so Extra Fine is not always the best setting to use. In this case, I wanted to show as much detail as possible (it’s a feature), so I chose Extra Fine.

Grind: Extra Fine (Average Circles & Effect: High Contrast)

Grind: Extra Fine (Average Circles & Effect: High Contrast)

For the Circles and Effect dials, the most important setting for this image was under the Effect dial, and that’s High Contrast. All the Effect dial options will preprocess your original image by running filters on them, i.e., Saturate will increase color saturation, High Contrast will run an unsharp mask (contrast enhancing) filter, etc. This filtered image is used internally by Percolator and will effect circle size, placement and color.

Here’s a Before and After of the High Contrast filter:

The High Contrast Effect looks really great when used with the Treble Brew—I use it almost every time I use Treble because it creates large, distinct patches of light and dark. I find this very important when using Percolator’s blend modes because it creates pleasing clusters of circle and circle-free areas. Choosing the remaining two Grind settings, Extra Fine and Average Circle size, was then a matter of experimentation—finding what “looked right.”

Before finalizing the Grind settings, I jumped over to the Brew tab and chose Treble so I could preview how it was going to look with that Brew. My general approach is to start with the Fine Grind (the default) and Average Circles (also a default) and then add detail using either Extra Fine Grind or the Smallest Circles setting. If there’s too much detail in an image, I like to chose Big Circles before using a coarser Grind.

For this image, it was important not to have any distracting circles in the face, i.e., covering eyes, etc.. In the final image, there’s still a distracting circle in the left nostril and over the left eye, but I think these are typical-to-good results.

Brew

I wanted to use the new Treble Brew for this image because it showcased a lot of new features in Percolator. Treble is a very decorative filter and I’ve found it works best when blended with the original image (its default setting), so Treble is good for showing off the new circle and image blending features.

Brew: Treble (Full Pic & Darkest Blended Circles)

Brew: Treble (Full Pic & Darkest Blended Circles)

Treble’s default Pic dial setting is ¾, meaning, the original image is drawn at 75% opacity, but for this image I set it to Full so that the original image would be shown at 100% opacity. Notice that the photo Percolator draws is the original image we imported, not the version filtered by the Effect dial. That’s because the Effect dial only uses its filtered image internally to create and colorize the circles.

The default Blend dial setting for Treble is Darkest, and I leave it at that. This setting makes darkly colored circles opaque (solid) and lightly colored circles transparent. For this particular image, circles appear in the model’s hair and under her arms, but not in the lighter areas like the coffee cup, teeth, or skin tones

The Treble Brew will also alter the circle color based on value: Lighter circles use a selection of the images original colors while darker circles use some percent of the Serve color.

Serve

Next, we have the Serve tab:

Serve: Soy (Vignette Tone & Brown Bag Texture)

Serve: Soy (Vignette Tone & Brown Bag Texture)

The Soy setting in the Serve dial has a special meaning when used with Treble: It will color the background using a special gold color. This is a special color only used in the Treble brew. For other Brews, Soy will draw the background with an off-white or cream—i.e., “soy”—color. Because Percolator respects the alpha channel in your source images, we can see more of the gold in the background than if it were originally a solid color. This gives the image a highly ornate appearance.

For the Tone dial, Vignette was chosen because it’s a very dramatic, spotlight-like, effect; just thing needed for the hero shot.

Finally, for the Texture dial, the Paper Cup and Brown Bag options are great for adding noise or grain to your images, giving them a natural-looking surface. I chose Brown Bag because it goes very well with Treble’s gold Soy coloring, making the surface look very metallic and golden.

That’s it! Now all that’s left to do is save it to the camera roll. All of the settings I used are stored in the image’s metadata. You can read more about that feature here.

Your Turn…

I’ve prepared a special version of the Hero Shot source file for you to try yourself. It’s smaller than the version I used so the placement of circles will be slightly different, but it will allow you to try the workflow and effects yourself. You may download the image here: Woman In Red

If you’re on an iPhone or iPad, touch the image until a button appears that says, “Save Image.” Following the steps in the tutorial, the result will look just like the image below.

Good luck, and let me know how it goes in the comments section below!

John Balestrieri

Creative Commons License Woman In Red by Tinrocket, LLC is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. Based on a work at percolatorapp.com. Copyright © 2011, Tinrocket, LLC.

 

7 Responses to Tutorial: “Woman in Red”

  1. Lucia Singer says:

    As a lover of digital arts and bubbles I would love to have this software for a PC platform. Do you already have? Do you intend to have?

  2. Tom M says:

    I don’t understand this part: “…Percolator respects the alpha channel in your source images” because I don’t use Photoshop. Is there a way to simulate this just by having a white background?

  3. John Balestrieri says:

    @Tom Possibly, but it’s not the standard approach for masking. The human eye is really good at picking an object out from the background, but it’s a difficult thing for software to do. In movies, a “blue screen” is used to help software automate masks.

    That said, there *should* be a an easier solution for iOS users to make PNGs with alpha channels—and I’m searching the App Store and I’m not finding any good solutions. :\

    I will try adding this effect in a future update—perhaps I can treat white or black as an alpha—it won’t give the same results as the tutorial, but might make a very interesting effect.

  4. Minerva Mountainriver says:

    I loved your tutorial I could hardly believe it when I successfully recreated your hero shot first time in just a few clicks! More tips and tricks, please!

  5. Yuki Hua says:

    How to make the distracting circles in the face disappear?

  6. John Balestrieri says:

    Hi Yuki, the circles that appear in the face are part of the Percolation process. The techniques in the tutorial minimize the circles but do not completely eliminate them. In the future I would love to add a custom mask option. In the meantime, users use apps such as Blender or Juxtaposer to combine their before and after Percolator images selectively.

  7. Preview : Percolator 2.3, une mouture plus corsée | i comme photo says:

    [...] d’exemple, pour partir sur de bonnes bases, une excellente idée qui vient compléter le tutoriel mis en lignes par le développeur. Le mode « Charmed » ajoute une agréable [...]