Photoshop Template iOS Play Button

Sometimes you need a righteous thumbnail for your videos!

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.

android-play
Not exactly the most legible. Image: Android Central

So, I went to imgur.com 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:

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.

icon-group

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.

blur

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!

iOS-Safari-Play-Button

 

Download the Template

Like what you see?

Join my newsletter for web stuff, design, and everything in-between. Delivered right into your inbox. You can unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *