We wanted a way to quickly see how a design would look in context, both as a quick way to judge its effectiveness in context, and for inclusion in design decks and presentations.
The user’s design needed to be blended seamlessly into the photograph. For some visuals, alignment of the design with photo’s perspective was enough, but often more was needed. White and black levels had to be adjusted to match the photo, edges had to be feathered and blended so that the underlying color would not show through even on a full-bleed design. Texture needed to be preserved for designs composited onto paper, and reflections preserved for designs shown on glass. In some cases, depth of field blurring was added to the design to match the original photo.
Paper texture is preserved
Depth-of-field blurring is matched
Since some parts of the compositing were computationally expensive, we rendered the images in two passes. The first was at a slightly lower resolution, and with some of the more expensive effects dialed back or rendered in lower quality. The second was at full quality and resolution, and would replace the preview as soon as it was ready. The result was a much snappier experience, and an almost-imperceptible switch once the full render was completed
All mockups were defined in an easily-extendable format, so that new mockups could be easily and quickly added, and so that app updates would not always be required to add new mockups.
I created an internal tool to help specify all the properties of a mockup, allowing properties to be easily tweaked, and the results to be seen in realtime. The tool also made it simple to see a variety of content composited into the mockup, which was important as the result often appeared different depending on the lightness, darkness, and colors of the design. This also meant that a developer was not always needed to define the properties of a new mockup.
The studio team we first approached to work on the projects gave us an estimate of several months, much longer than we wanted to spend on content creation. So, I approached Rich Kern, a colleague at Behance, to help with the photography. In a day of shooting, we created all of the mockups that we shipped with the first version of this feature.
I then oversaw the editing and preparation of the photos to ensure the final compositions would be seamless, ensuring that common issues such as lens distortion and color fringing would not interfere with the final results.