Photoshop Template iOS Play Button

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 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.

Not exactly the most legible. Image: Android Central

So, I went to and found a .gifv of Homer on my iPhone.

Aye Homer! Cheer up bud!
Aye Homer! Cheer up bud!

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=”″] Download the Template [/button]

Subscribe to the blog

Join my email list and receive dispatches from the blog automatically. New subscribers receive a FREE $50 hosting credit at DigitalOcean.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.