At Six Flags, we deliver an immense amount of newsletters.
Each park has several thousand subscribers. Every so often, the parks have videos they would like to share in their newsletters. We discovered an issue with these thumbnails that have an overlaid play button. It either distorted the image, or it was too dark or too light. So we did some research on who reads our newsletters, and what devices/browsers are normally visiting sixflags.com from the newsletters.
Turns out we have mostly iOS users (with Android shortly behind) that were the highest openers. So it was discussed we could use the iOS play button on the thumbnails since most users would be seeing the newsletter in on an iOS device. Besides we weren’t a fan of emulating Android Chrome’s play button due to the fact the play button might get lost in our thumbnails.
So, I went to imgur.com and found a .gifv of Homer on my iPhone.
With that out of the way I started to replicate the gaussian blur in Photoshop. Here’s the setup:
We got our Artboard, a Group containing all our stuff suffixed with .jpg so Generate Assets will do its thing, and Icon Group and a Smart Object containing our source photo and just a nice background because aesthetics.
In the Icon Group, we have a Play Icon, and Play Circle. Each containing a duplicated copy of the Smart Object source photo. This is pretty nifty, because when we save changes in the Smart Object it is updated everywhere else in our document. 😌 Both of which are a clipping mask, and have their corresponding shapes underneath (i.e. Ellipse and Triangle) Each Object also have a Gaussian Blur Smart Filter whose value is set to 8px.
I also added Color Overlays to the shapes to distinguish one from the other. The Ellipse which was
rgba(255, 255, 255, 0.5) and the Triangle is set to
rgba(0, 0, 0, 0.6 Now if you edit the Smart Object, Save and return to the Document, you have yourself a nice little iOS Play Button thumbnail image! Enjoy!
[button type=”primary” size=”lg” link=”https://www.dropbox.com/s/xcjjb9kcl3qzwai/20160630-Play-Template.psb?dl=0″] Download the Template [/button]