How to use animated GIFs in Photoshop mockups
Today, I’m putting together some example mockups for a recently finished website project that I wish to promote. I am using this free mockup I found from Febri Angga Nuryandana on Behance. My goal is to insert a GIF into a smart layer, so the GIF and each of its frames fit the angled screen of the mockup.
1. Create your GIF
First, I need to create my GIF. I want to highlight an animation I like on my web project. If you already have your GIF, skip to the next step.
Open Google Chrome. Navigate to the webpage you wish to record. Right-click and select Inspect — this will open up the Google Chrome DevTools window. In the top left corner, turn on Mobile View.
Your webpage will then be formatted as it would on a mobile device! Since the mockup is formatted for an iPhone X, I’m selecting the closest ratio to that phone screen size. You can also type your dimensions in by typing the X and Y height and width.
Next, open Quicktime. It will almost look as if nothing has happened when you open this application, but your top toolbar should look like this:
Under File select New Screen Recording (control + command + N). This will bring up crosshairs, where you can drag and select the area you would like to record. Everything inside the crosshairs will be included in the recording, and everything in the gray area will be omitted.
Click Record. I let 5–6 seconds of my webpage’s animations play. To stop the recording, click this tiny stop button on the top right side of your toolbar.
Doing so will stop the recording, and open the video file generated from your screen recording.
Next, navigate to my favorite GIF editing website, EZ GIF. Navigate to the Video to GIF tab, upload your newly obtained screen recording, Convert to GIF. There are a bunch of features to optimize and alter your new GIF on this site as well. However, you can also just click Save and download if everything looks good to you.
2. Prepare GIF for mockup
Open Photoshop and load in the GIF you want to add to your mockup. You should see each frame of the GIF loaded in as its own visible layer. To modify GIFs in Photoshop, we’ll want to open up the Timeline window. You can access it via Window > Timeline.
Click the arrow next to Create Video Timeline, and select Create Frame Animation. Then, click Create Frame Animation. This will create a timeline with one frame from the first layer in your file. In the hamburger menu on the top left corner of the Timeline window, select Make Frames From Layers. This will turn each of your layers (the GIF frames) into their own individual frames.
You can press play (bottom left corner of Timeline window) to see how your GIF appears. Feel free to prune and adjust each frame how you wish it to appear.
3. Convert GIF into Smart Object
We will now change the Frame Animation into a Video Timeline by selecting this icon in the bottom left of the Timeline window.
Select All Video Frames by selecting any video frame and pressing Command + Option + A. This should also select all layers in the Layers window.
In your Layers window, right-click any layer and select Convert to Smart Object. All of your video frames will be condensed into a single frame. However, when you press Play, the GIF should still play in the same way.
4. Add Smart Object to Mockup
Now, our GIF has been transformed into a Smart Object that Photoshop will understand within your mockup’s PSB layer.
Open your mockup file. In the mockup I’m using above, the smart layer is located here:
If I double-click the transparent preview of the Smart Object layer, it will open a PSB file. Mockups have all sorts of different formats for these Smart Object layers, but will usually label where to “install” your content.
Your PSB file will open in a new tab. If your Timeline window isn’t opened automatically in this new tab, reopen it via Window > Timeline. Create a Video Timeline, or change your Frame Animation to a Video Timeline.
Go to your original GIF tab. Select the Video Timeline you created in Step 3 and press Command + C. Return to your mockup tab, and in the Video Timeline, press Command + V. You can press Play to see your GIF play on the Smart Object layer. Save the PSB by going to either File > Save or Command + S. Return to your mockup file.
5. Exporting your Mockup
Your mockup should automatically update when your PSB file is saved to show your GIF in the correct perspective. In your Timeline window, you can press Play to see your GIF play out in your mockup!
There are two ways to export your mockup + GIF.
As a GIF: File > Export > Save for Web (Legacy)
As a Video: File > Export > Render to Video…
My final result!
I wrote this article because I couldn’t find the answers to this problem online. I’d love your feedback on how helpful / clear this article was.
