Making animated GIFs in Python

This week’s blog post is a quick break from science infographics! I use Python pretty often at work, and recently I’ve also been experimenting with using it for design. For this project I wanted to make a browsable color palette website like Adobe Kuler, but with animated design examples for every color palette.

To do this I first wrote a Python script to make a GIF illustration for any 5-unit color scheme. The script features five different animated patterns, all based on Islamic mosaics. The code isn’t anything fancy - I used the basic Matplotlib graphing library to make each pattern and ImageIO to output images.

Next I picked 50 of my favorite color palettes, most of which were loosely based on popular colors from Kuler and Color Hunt. I decided to stick with only colorblind-friendly color palettes for a more useful and curated project.

I also wrote a script to generate titles for each color scheme. A lot of online color palettes have great names like Cherry Cheesecake, and I wanted to try and automate my own whimsical titles.

For the title generator I made a library of my favorite color names organized by color (pumpkin, cherry, buttermilk), as well as modifier words. Next I specified which two colors were dominant in each color palette, and let my script generate appropriate color scheme names for each entry.

Finally I combined all of the code and fed my list of 50 color palettes into the GIF-and-title maker. The final website randomizes the color schemes in Javascript so that it’s more fun to click through each color palette.

EDIT: I’ve open-sourced the Python code here for anyone interested in the project.

The map of medical statistics

This week’s medical infographic poster explains common medical statistics terms. Since statistics is a little lacking in the illustration department (compared to anatomy or chemical reactions), I got to have a lot of creative freedom with the project.

I knew I wanted to illustrate all of the drug trial types with actual people, so I pitched the project as an isometric “Land of Observational Studies.” At first I wasn’t planning on a river divide between the three sections of the poster, but after talking with Arun I really liked his idea to emphasize the differences in complexity between sections.

I think most people work on isometric art in vector programs like Illustrator, but I decided to draw this particular poster in Photoshop. I laid out an isometric grid for reference, and then filled in each of the buildings following the reference grid. The pixel cows are probably my favorite decoration.

  • Sources

  • First Aid for the USMLE Books 1 & 2 (2015). Tao Le and Vikas Bhushan. © 2014 McGraw-Hill Education.
  • Fonts: Pixel Emulator by Pixel Saga.

A compendium of abnormal red blood cells

This week’s collaboration with Nerdcore Medical is an ornamental poster showing the different kinds of abnormal red blood cell shapes. The style I picked for this poster was inspired by hand-woven rugs and Rococo stucco work.

When I started this project it was really hard to figure out what to do with the simple shapes of the red blood cells. I kept trying to make the design more interesting by adding details or shading or patterns to each cell.

But finally I stopped trying to make the cells more complicated than they needed to be, and went with the complete opposite approach. For the final design I made the cells extremely minimal, and then piled on detail everywhere else.

To make the decorative pattern I drew everything first in pencil, and then scanned it into Photoshop to copy and paste together. I originally drew this poster in navy blue - and then had a real “why didn’t I think of that” moment when Arun suggested red to match the red blood cells. Needless to say we went with red for the final poster.