avatarPaul Coogan

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

1544

Abstract

xI2p6Kazq4ex_MC8llNgpA.png"><figcaption>Video by <a href="https://www.pexels.com/@spencer?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels"><b>Spencer Davis</b> <b>from</b> <b></b></a><b><a href="https://www.pexels.com/photo/sunset-beach-bridge-coast-4340824/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels"><b>Pexels</b></a></b></figcaption></figure><h1 id="017a">Edit the Video</h1><p id="aa5b"><i>For the impatient, trim the video to under 10 seconds and go to the next section.</i></p><p id="498f">I imported the video to iMovie thinking I would need to change the aspect ratio to banner dimensions. It turned out to be unnecessary but there were some advantages to using iMovie:</p><p id="dc64">By cropping the clip before putting it on the stage I was able to check the framing for the entirety of the clip.</p><figure id="c569"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*-d4drKQ_RuuNHABbDAj2zQ.png"><figcaption>Screenshot of iMovie by the Author</figcaption></figure><p id="cae5">It also allowed me to reverse the video since I liked it better as a push-in and reveal shot. I decided not to adjust the color or add effects though some were quite dramatic.</p><p id="08c5">Trimming the video to under 10 seconds is important for making the motion smooth in a later step.</p><h1 id="3c79">Convert to GIF</h1><p id="f307">Once exported to MP4 it’s time to convert to GIF using <a href="https://ezgif.com/video-to-gif">EZGIF.com</a>. The first link in a Goog

Options

le search gave me a more basic conversion tool but that site created a larger file and had difficulty downloading — probably an overloaded server.</p><p id="953b">Upload the video.</p><figure id="e1ce"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*AbcumTFLgpvgGzJwgpWBjw.png"><figcaption>Screenshot by the author</figcaption></figure><p id="9371">Once uploaded, set the frame rate to 25 (the highest). Leave the size setting alone or it may distort the image.</p><figure id="83b8"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*s6VhOnC-_FQ9gJfmzejo0w.png"><figcaption>Screenshot by the author</figcaption></figure><p id="8ce3">Once the GIF is generated it will have a standard aspect ratio. Use the Crop tool to trim off the padding.</p><figure id="2e5c"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*AnhJqzNkv--NR1kaK9MGkg.png"><figcaption>Screenshot by the author</figcaption></figure><p id="2569">Once cropped and saved to your computer, go to Medium and navigate to <i>Design Your Profile</i>.</p><h1 id="a71c">Update Your Header</h1><p id="bbce">In the Medium profile designer, set the header as “large” so that an image can be used. Upload the GIF file and save your profile. <b>Bon appétit!</b></p><figure id="dfb7"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*Gf25JGYKoRfiA6NWLJgs5Q.gif"><figcaption>Video capture by author</figcaption></figure><p id="c99c">If you animate your header, leave a comment so I can check out your creation!</p></article></body>

How to Make a Profile Header Movie

An eye catching full motion underlay

I noticed a profile header that was using a GIF to put a bit of motion in the header. It was eye-catching and left me wondering if the header could use the popular UI display of full-motion video as an underlay.

Screenshot of author’s full motion profile by the author

The Medium header specification states JPG, PNG, and GIF can be used for the header image with a recommended width of 1500 px in a 2:1 ratio. This is a bit difficult to obtain in a video where the top resolution is typically 1080px for full HD video. To my surprise, the lower resolution GIF I tried worked perfectly. The image may not be as crisp as would be desired for a still image but as a motion underlay it is very eye-catching.

Find or Create Your Video

I have a ton of video and will probably search through that later to really personalize the header. In the meantime, I was able to easily find drone footage on Pexels of a bridge on the Pacific Coast Highway I have traversed many times both physically and in my memories.

Video by Spencer Davis from Pexels

Edit the Video

For the impatient, trim the video to under 10 seconds and go to the next section.

I imported the video to iMovie thinking I would need to change the aspect ratio to banner dimensions. It turned out to be unnecessary but there were some advantages to using iMovie:

By cropping the clip before putting it on the stage I was able to check the framing for the entirety of the clip.

Screenshot of iMovie by the Author

It also allowed me to reverse the video since I liked it better as a push-in and reveal shot. I decided not to adjust the color or add effects though some were quite dramatic.

Trimming the video to under 10 seconds is important for making the motion smooth in a later step.

Convert to GIF

Once exported to MP4 it’s time to convert to GIF using EZGIF.com. The first link in a Google search gave me a more basic conversion tool but that site created a larger file and had difficulty downloading — probably an overloaded server.

Upload the video.

Screenshot by the author

Once uploaded, set the frame rate to 25 (the highest). Leave the size setting alone or it may distort the image.

Screenshot by the author

Once the GIF is generated it will have a standard aspect ratio. Use the Crop tool to trim off the padding.

Screenshot by the author

Once cropped and saved to your computer, go to Medium and navigate to Design Your Profile.

Update Your Header

In the Medium profile designer, set the header as “large” so that an image can be used. Upload the GIF file and save your profile. Bon appétit!

Video capture by author

If you animate your header, leave a comment so I can check out your creation!

Medium Profile
Tips And Tricks
Graphic Design
How To
GIF
Recommended from ReadMedium