Homebrew Imagemagick
- I tried installing Imagemagick using 'brew install imagemagick'. The end result I was hoping for was the existence of commands mogrify and convert. It had apparently been a long time since I ran Homebrew; tt thought for a long time and then went about updating a positively frightening number of packages.
- Homebrew is an open-source package manager for macOS that offers an easy way to install software and tolls through the command line. If you are a coder, developer, Terminal lover, or more tech-savvy than an average Mac user, you can use Homebrew to simplify software installation on your Mac.
- Homebrew’s package index. Also known as: imagemagick@7 Tools and libraries to manipulate images in many formats.
While creating the Happy New Year edition issue of the newsletter, I decided that it might be cool to animate the accompanying image.
Ordinarily, I'd use SVG and CSS for this. I've used both for animation elsewhere on this site. Unfortunately, email support for SVG and CSS is not very good. So instead, I turned to that classic format: the animated GIF.
I've created animated GIFs using Fireworks back when it was owned by Macromedia. I've created them with ffmpeg by exporting frames from video files. But I've never created one “from scratch” by stitching together my own frames.
As it turns out, it's very easy to do. You'll just need a couple of tools: the image editing software of your choice and ImageMagick.
Convert is an ImageMagick command, so I'd say it's safe to just do brew link -overwrite imagemagick. If you want to be overly cautious, you can do brew link -overwrite -dry-run imagemagick to have a look at the list of overwritten files first, but I'd say that's not necessary. – 4ae1e1 Mar 21 '15 at 16:36.
Imagemagick Homebrew Install
Install ImageMagick
You may already have it ImageMagick installed. Here's how to check:
- Open a terminal window. MacOS users can use Terminal.app. Ubuntu Linux users, use Ctrl + Alt + T to open one.
- Type
convert
at the prompt. If ImageMagick is installed, you'll see a copyright notice and a list of commands. Otherwise you'll seecommand not found
or something similar.
If you do not have ImageMagick installed, install it. On macOS, you can install it with Homebrew.
Or, if you prefer, use MacPorts.
Debian/Ubuntu users use the following:
The -y
flag is optional, and means “Yes.” Passing it will skip the apt
confirmation prompt.
Note for Windows users: I haven't used Windows for the better part of this millennium. There are binary downloads of ImageMagick available for Windows. You'll have to figure out how to use them on your own.
Now you're ready to stitch together some image frames.
How to create image frames
Create your image frames using the software of your choice. Each frame should have the same dimensions. I used Sketch to create my images, and used a separate artboard for each frame. For other software packages, such as Acorn, you may need to use separate layers or separate files.
Export each image frame to a bitmap format such as GIF, PNG, or JPEG. Saving them to the same directory makes things easier to manage. I'm using the phrase image frame here because we'll turn them into frames, but they're just separate image files. Which format you use doesn't matter much; ImageMagick will convert them to GIF.
Once you've exported your frames, navigate to the directory where you've saved them. Then run the convert
command to stitch your images together. For example:
The -delay
flag indicates how many hundreths of a second the GIF should pause before displaying the next frame. In this case, the value is 100
, or one second. Animations can cause seizures in some viewers. One second is well above the safety threshhold to avoiding triggering seizures in most cases.
Note: The World Wide Web Consortiums Web Content Accessibility Guidelines say that content should not flash or blink more than three times per second. This works out to a -delay
value of 34, or thirty-four hundredths of a second.
The -loop
flag indicates how many times the GIF should repeat. A value of 0 (-loop 0
) will cause your GIF to loop infinitely. Here, I've chosen to have it repeat five times. Five times is enough to catch the viewer's attention, without being an ongoing distraction on the page.
-dispose
, indicates what should happen when the frame changes. In this case, -dispose previous
hides the prior frame. Without -dispose previous
, you'd end up with the mess in Figure 1.
The next three bits of the command indicate the paths to our input and output files: start.png
and end.png
. Both files will be stitched together to form IAmAnimating.gif
.
Brew Imagemagick
You can also pass a wildcard argument — e.g. *.png
— for the list of input files. If you do so, be aware that ImageMagick will assemble those images in alphanumeric order. A file named gifframe10.png
will be inserted before gifframe2.png
.
Even though it's more verbose, I recommend specifying the list of input files in the order you'd like them to appear. You can include a file twice within the list if you'd like it to appear more than once in the animation.
Homebrew Php Imagemagick
ImageMagick is far more powerful than what I've covered here. It's also very well documented. Be sure to read the documentation Animation Basics documentation, and the section on how to optimize your animated images.