Macs in Chemistry

Insanely great science


Adding drop shadows to chemical structures

As part of my day job I maintain Drug Discovery Resources a website intended to act as a resource for scientists undertaking drug discovery. One part of the site has a section on bioisosteres including many examples in which the chemical structures are shown with dropped shadows as shown below.

I use ChemBioDraw to draw the structures and then save as PNG files with a transparent background. The structures are then dropped onto webpages created using RapidWeaver, within RapidWeaver there is an option to add dropped shadows to images. I was recently asked whether there was any other way to create the same effect and Matt at macosxtips suggested using ImageMagick.

ImageMagick® is a software suite to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. ImageMagick can be used to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves. ImageMagick is used from the command line and there is an extensive tutorial, it is designed for processing image files but it is NOT a GUI image editor. You can download a pre compiled binary or source code from the website or install using MacPorts.

An applescript droplet

This first example of using ImageMagick is a simple applescript droplet that you can drop a PNG of your structure (or collection of files) onto and it will create an image with the dropped shadow included. As written this script will OVERWRITE the original file(s).

There are a couple of very important aspects to this script, firstly depending on how ImageMagic is installed the “convert” command may be in different locations. If you type “which convert” into a Terminal window you can get the full path to the command.

which convert

Since “convert” is a UNIX command line tool we need to convert the file path to POSIX format.

The actual command is this

convert /Users/username/Desktop/diazepam.png \( +clone -background black -shadow 80x3+5+5 \) +swap -background white -layers merge +repage /Users/username/Desktop/diazepam.png

But in the applescript it is

convert '/Users/username/Desktop/diazepam.png' \\( +clone -background black -shadow 80x3+5+5 \\) +swap -background white -layers merge +repage '/Users/username/Desktop/diazepam.png'

Where we have quotes around the file path to avoid problems with spaces etc. in file or folder names, also applescript (like any other programming language) has escape characters. Generally a \ is an escape character to tell the environment that the next character is a special character. In this case we have \ as part of the command so we need to change it to \ so the second \ is not treated as an escape character. The display dialog shows the actual shell commands and can be commented out.

on open source_files
    repeat with i from 1 to number of items in source_files
      set source_file to item i of source_files

        set input_file_posix to POSIX path of source_file

        set shell_script to "/opt/local/bin/convert '" & input_file_posix & "'  \\( +clone -background black -shadow 80x3+5+5 -channel RGBA -blur 0x6 \\) +swap -background white -layers merge +repage  '" & input_file_posix & "'"
        display dialog shell_script

        do shell script shell_script
  end repeat

end open

The offset of the shadow is determined by

+clone -background black -shadow 80x3+5+5

if you want a greater offset change it to

+clone -background black -shadow 80x3+10+10

As shown below.

diazepam1 diazepam diazepam3

To make the shadow a little more diffuse we add blur,

+clone -background black -shadow 80x3+5+5 -channel RGBA -blur 0x6


and of course you can change the background colour

+clone -background blue -shadow 80x3+5+5 -channel RGBA -blur 0x6


You can download the droplet from here

If you want to edit the downloaded droplet, simply right-click on the icon and select “Show Package Contents”, the file you need to edit is highlighted below.