How to create an animated image for your Medium publication
From CSS to GIF
We liked the idea of having an animated cover for our publication. Medium does not allow users to fully customise the publication layout, but you can still play around with some visual elements to achieve original results and make your publication stand out.
In this article, we are going to show you how we created our animated publication header. We are also going to share some tips and guidelines on using GIF files on Medium.
GIFs on Medium publications
Medium allows you to upload two images to your publication header: one is the background image, and the other one is the logo image.
In both cases, GIF format is supported, so you can populate your publication cover with some nice animations.
Here are two inspirational examples:
- Backchannel (GIF as background image)
- Magenta (GIF as logo image)
From CSS to GIF
GIFs can be created with many tools. The path we followed might not be the easiest one, but we wanted to use one element that already exists on our site and adapt it for the Medium cover.
The animation on our website was done with CSS, so we decided to tweak the existing piece of code and find a way to transform it into a GIF.
Step 1 — html and CSS
The first step was to adapt the existing code and create an html page containing our animation and the same background as the background image that we wanted to use in our publication.
If you would like to play with similar word animation effects, you can checkout this pen by Amrit Leone.
Step 2 — Record the screen
Quicktime Player has a handy screen recording functionality, allowing you to choose the area of the screen that you want to record. The video is captured at around 30 FPS, so your animation shouldn’t be longer than 15 seconds (15 seconds = 450 Frames).
If you use Windows, you can also try one of these softwares for screen recording.
Step 3 — Transform .mov to GIF
Once you finish recording, you will have a .mov file.
Open Photoshop and go to File > Import > Video Frames to Layers.
You can choose the part of the recording that you want to import and convert to Layers. Don’t forget to check the “Make Frame Animation” box.
Photoshop will limit the frames to 500, and you shouldn’t have more than that, otherwise the file will get too heavy.
If you open the timeline panel on Photoshop you will see all your frames.
Now you just need to export the frames as GIF. To do this, go to File > Save for Web.
You can reduce the file size by limiting the number of colours in the export dialog.
It is important to keep the dimensions of your GIF double the size than what you need, because Medium will resize it to half.
“We assume all logos are retina, meaning that the logo is uploaded at twice the size we assume it will be displayed. If you upload a 2000px wide and 1000px high logo, Medium interprets it as 1000px wide and 500x tall.”
— Medium Blog
Our final GIF has 475 frames and around 2MB.
Step 4 — Upload it to Medium
Upload your background image and logo image to your publication, and that’s it.
You now have an animated cover image!
We hope you find this helpful. Give it a 💚 and let us know if you are also using GIFs on your Medium publication. We would love to see some more great examples! To read more stories, just hit that “follow” button.
