X-Ray Gifs

Weiss Orthopaedics Design Project

When Dr. Noah Weiss approached me about redesigning his practice website he was very clear that he wanted something very interactive and fun, not just another boring doctor's website. I was up to the challenge, and luckily working with a clever client. Effectively using motion on the site was important to us form the beginning. Dr. Weiss suggested to me that we use fluoroscopy images to show joints in motion I knew that this was a perfect use case for one of my favorite internet mediums: the gif.

This meant I had to brush off my Adobe Creative Suite skills. I must commend Adobe on enhancing their integration between applications. With the newest version of the suite, it's easy to build layers in Photoshop and use them in Premiere projects. I've done a lot of video editing, and while Premiere was promising I was never convinced to use it over more seasoned alternatives like Final Cut. Deep Photoshop integration levels the playing field, allowing me to leverage some of my best skills in the video editing software.

In my case, I started with raw X-ray video footage. This was an excitement in and of itself as there is not much like it on the web and gave me an opportunity to do something cool. I converted the raw files and imported the footage into Premiere.

I needed to hide the patient information from the original footage so I created an overlay layer in Photoshop. You can import it like any other file in Premiere, selecting the layers that you want to use.

I used Premiere to trim the videos into clips that I wanted to use, each in its own sequence. I exported each sequence to the highest quality file for generating the gif. I import the video into Photoshop like:

File > Import > Video Frames to Layers

Finally I needed to adjust the frames to create a clean looping effect. I exported the video into small precise (~2 sec) clips. All I needed to do was duplicate the frames and play them backwards to complete the loop. Doing this is easy:

  1. Select All Frames
  2. Find the Timeline Menu button in the top-right
  3. "Copy Frames"
  4. "Paste Frames"
  5. In the pop-up select "Paste After Selection"
  6. "Reverse Frames"

Now all you have to do is export your file as a gif, with some reasonable settings. Gif images can be large, in some cases even larger than the videos they're derived from. Making the file large comes at an expense (e.g. the gifs embedded below are 800 x 800 so God help you if you have a slow internet connection). For this reason, Twitter embeds videos rather than gifs, taking advantage of decreased size and increased control.

However you decide to embed your cool videos into your website, Adobe has all the tools necessary. I especially like the new Media Encoder which is great at batch exports and the like.

Please head on over to Behance and appreciate these!

Wrist & Hand




Foot & Ankle

I am very proud and grateful to have had this work featured in some great publications around the web. Special thanks to all of those who have spread this via social media as well.

Written By: Cameron Drake

Tagged: tech, gifs, design, science, anatomy, animation, Adobe, Photoshop, Adobe Premiere, Creative Cloud, photography