Method for Designing Charts

So I don’t know about you, but I find it very hard to draw charts in Photoshop. Line charts, pie charts, etc. It’s pretty tough. It’s a piece of cake in Illustrator though. The problem is, it’s not very easy to go back and forth from Photoshop to Illustrator. How do you know how the chart is going to look good in the document? How do you get the right sizes? Well, I’ve recently had to do a lot of charts, and I think I’ve found a pretty good solution.

Step 1

Export your design from Photoshop into a rasterized image. I prefer PNG format. It helps to draw faint boxes where you want your charts

Step 2

Open that exported image in Illustrator. The benefit here is, you can see your design to scale, and draw your charts in place, and see how they’ll look in your design.

Step 3

So you’ve got your charts how you like them now. Line charts, bar charts, whatever. Now you need to get the back to Photoshop so you can style them how you want. First, we likely need to expand any strokes that we’ve drawn. (This is critical for line charts). Go to Object → Expand… If you’re just expanding some lines for a line chart, deselect the Fill option, and just leave the Stroke option on. Otherwise, leave both selected. This will create actual separate shapes for the Stroke and Fill of the object.

Step 4

Now you need to select the individual components of each chart and copy them. If you’ve expanded a fill AND a stroke then you’ll need to Ungroup them first to select them individually. For each object, go back to Photoshop, then paste them in. It should ask you how you want to paste them, and select Shape Layer. That’s the way I prefer to have my objects in Photoshop because I can have ultimate control over the individual shapes. If you’re in a hurry, and/or already styled your shapes in Illustrator you can select the whole chart, copy, and paste as a Smart Object. This will retain the vector shapes, but to edit it you’ll have to pull up Illustrator again.

Hopefully this helps somebody. I find it a very useful process for designing inline Sparklines or other types of line charts especially.