3 Techniques to Create Realistic Reflections in Sketch
Also introducing Magic Mirror v1.1 — Flip Content
Last week I released a Magic Mirror for Sketch. It’s a plugin that allows you to mirror the content of an artboard to a perspectively transformed shape layer. This made Sketch now possible to create perspective mockups which we previously can only do with Photoshop.
Some donors noticed in the Sketch template, there is a combinations of visual effects that seems not easily “reproducible”, especially the flipped layers on the floor and the edges.
In fact, it also took me some time to get it right, including to make it work on different backgrounds. I was also secretly developing a feature in Magic Mirror, which I’m releasing along with this new version v1.1 and this article, it’s called “Flip Contents”. (v1.1 change log)
So lets get our hands dirty, and I’ll explain my process.
Download the sample .sketch file | Get the Plugin
1. Start with a Flipped Layer
If you’re not using v1.1, your reflection layer should be started by flipping the top layer the very first thing, or you’ll end up doubling your time to align the points. Lets see our example:
- You started by creating a perfect shape underneath your original layer, and after applying Magic Mirror you noticed that the content was in the same orientation of your originaly shape.
- You try to use the “Flip Vertical”, and notice the points were also flipped.
- You try adding a “Flip Horizontal” operation, the contents were flipped again, and the points were still off the place.
- Reverted and try using the “Rotate Content” tool provided in Magic Mirror, ending up with a non-flipped version of your first layer.
- You noticed that there’s no way to work that out unless you adjust the points manually.
Fortunately with the new Flip Content feature, we are resque from the frustration in #5. The points were perfectly preserved and only the content has been flipped around.
This is how Flip Content works in action:
I think Flip Content would be a very common operation that we’ll face while we work on Perspective Mockups, it’ll be available as a pro feature to whom donated, and I hope you like this addition as much as I do.
2. Draw Perspective Guides
In our first tip, the rendered results reveals some alignment issues.
Why there’s still misalignment for the icons and the text?
This took me a while to understand what has gone wrong. It’s because the two shapes were not sharing the same persective angles. By that, I mean we can easily verify that by drawing and extend three lines from the images to a distant point.
If the three lines won’t meet at the same point, that results in wrong viewing perspective. So lets fix that:
So as an extra touch, it’s also a good idea to shift up 1px to cover the gap.
3. Prefer Alpha Masks over Blending Modes
Yes, even if adds one more layer to your document, if you’re working on reflection, and wanted it to have a higher chance to work on whatever backgrounds, alpha masks are your friend, here’s an example:
Why does the Screen blending mode looks perfect in the Light Background but not in the Dark background?
If you look at the maths behind how blending mode works, you will realize the output will always be the composition of the top and bottom layer, which every pixels will be altered around its Color value, but not the Alpha value. Therefore, using blending modes will not create any real transparent effect at all.
So just make sure you understand what’s changing and whats not, instead of wasting time to trial and error, and turned out having to work on the reflection layer all over again like I previously did.
Conclusion
I hope you like the tips, go try out and download the new version of Magic Mirror, and checkout the sample Sketch file that I created along.
If you like this post, please consider:
