How do I get my graphics to look like this?
December 5, 2009 11:46 AM   Subscribe

How do I make pretty lines like's The Strouhal Number in Cruising Flight. The lines themselves, like the oscillating flight path and the angled lines in "Amplitude perpendicular to the angle of attack" seem just perfect. Is there a good workflow or template to recreate this in Illustrator or Photoshop?

I'm more familiar with Photoshop, but whenever I try to use the line tool, my lines come out all crazy. There doesn't seem to be a way to enforce the mathematical precision the's line get.

The NYT does this all the time, and they can't be going from mathematica -> illustrator for everything. There must be a toolkit or library of pre-made Tufte objects.

Specifically I'm trying to map some workflows and the content is abstract and more comparable to the NYT graphic than the bird in flight.
posted by geoff. to Computers & Internet (7 answers total) 4 users marked this as a favorite
In Photoshop, you probably want to use paths. In edit mode you'll get handles you can use to manipulate the curves, etc. Then stroke the path with a color and line style to get an actual line that will be visible in the image.

If you haven't worked with the path tool before, you'll want to play around with it a bit to get the hang of it.

(Note: I use The GIMP, not Photoshop, but usually the tools are pretty similar, so I think this applies.)
posted by nangar at 12:23 PM on December 5, 2009

For quantitative data, I usually work them out to a diagram of some sort in something else than Illustrator (excel, for instance), and then import the resulting diagram in Illustrator, clean it up and rework the style (coloring, lines, fills, etc.) to my necessities. Illustrator itself has a set of (often overlooked) graphing tools which can be quite powerful.
The NYT graphic you're linking to, on the other hand, is entirely qualitative, and just requires about half an hour of work with the usual Illustrator drawing tools.
posted by _dario at 4:27 PM on December 5, 2009

By "mathematical precision" do you mean the fact that the line work in the diagrams is not anti-aliased? That the pictures therefore look a bit crisper rather than smoother? Look into the options palettes for the tools you're using in Photoshop, or the export dialogs in Illustrator, or the like. See if there's an option to turn off anti-aliasing. See if that's more like what you're looking for.
posted by letourneau at 4:31 PM on December 5, 2009

Response by poster: No, there's just a certain look and feel to the lines and arrows and such that seem so consistent. I didn't know if there was a workflow or methodology to get this look as the NYT is very consistent and I'm sure they have multiple designers. Perhaps I just need to get better at Illustrator. This is sort of what I'm looking for, except as noted above, I'm going after qualitative data.
posted by geoff. at 5:07 PM on December 5, 2009

Some of these are likely more infographics than graphs, which would likely be done in illustrator. I think _dario's workflow is also a possibility. Getting the pretty lines isn't really that hard in a program geared toward graphing, but getting the fonts to look really nice might be, since they aren't geared toward that.

I'm not sure what mathematica's plots look like, but I know matlab produces pretty ugly ones. I believe gnuplot produces better ones as well, and matplotlib, which is the python plotting library definitely does. Here's a gallery of matplotlib screenshots that give you an idea of what it can do. Most of the graphs aren't as pretty as the NYT ones, but that's largely because it was done by engineers, and not someone with a good eye for the aesthetic. I think I could reproduce the graphics you linked to in matplotlib pretty easily (if I had a working install right now). The labels might be the toughest part.
posted by !Jim at 9:48 PM on December 5, 2009

Anoter (graphing) tool which looks quite powerful is R. It seems to be geared mostly towards scientific data visualization.
posted by _dario at 3:48 PM on December 6, 2009

Best answer: From a quick glance it looks like the waves you want to draw are sine waves. Here's a quick tip to help you get closer to creating mathematical curve type lines with the Pen tool in PS or AI:

The handle should be no more than 1/3 the length of the segment it's affecting.

I realize this seems silly, but I swear I got it from an Adobe engineer. Any longer than that and the two handles on either end of the segment start "fighting" and you get those strange bloated sort of curves.
posted by Brainy at 4:21 AM on December 8, 2009

« Older Wine & Fire?   |   How many will be killed / wounded? Newer »
This thread is closed to new comments.