Last week, I was working on a cool HTML5 animation with Edge Animate. I designed some shapes within Illustrator and wanted to use them within Edge Animate. To do so, I had the option of using either transparent PNG files or SVG files. I’ll talk later about my SVG experiments; for now I’ll just focus now on PNG files.
Here are the two shapes I designed using Illustrator drawing tools:
Now, let’s see how to produce two transparent PNG files.
File > Save for Web
My first thought was to try the File > Save For Web feature, as in Photoshop. Illustrator wasn’t originally designed for Web Designers, but this feature can be useful for producing optimized graphics for the web (JPEG, GIF, or PNG).
As you can see, it’s very limited. I can only export a full image that automatically takes the dimension of my page.
The classic File > Export
Next I tried the classic File > Export feature. I remember that in CS5, I couldn’t directly produce a transparent PNG file, but the transparency option is now available in CS6.
Surprisingly, Illustrator automatically set the dimensions of the PNG, snapping the edges of my shapes. The preview thumbnail is not correct. Illustrator will fit the edges of all my shapes, horizontally and vertically. I was getting closer. Now, let’s see how to produce two transparent PNG files.
Create two artboards
The easiest way to create multiple transparent PNG files from Illustrator is to create one artboard per file.
1. Select the first set of shapes (the first cloud in my example) with the array tool.
2. Select the Artboard tool (Shift+O).
3. Create a new artboard (draw a random rectangle on the page)
4. In the presets menu, select “Fit to Selected Art”. It will produce an artboard for the first cloud with the perfect dimensions.
5. Repeat the same operation for the second shape.
6. Now choose File > Export and select “Use Artboards”
7. Choose between “Art optimized” or “Type optimized” (depending on the content of your creation) and click OK. You’ll get one transparent PNG file per artboard: cloud-artboard-01.png, cloud-artboard-02.png…
This is a very efficient and clean way to produce PNG files from vector graphics. You can easily duplicate your artboards, try different variations of colors, etc…
Here is the result: Two transparent PNG files.
Sharing your work with Creative Cloud
The Creative Cloud services are all about sharing your work with your customers or your team. I was wondering how my Illustrator file would behave in the browser, and the result is awesome. The Creative Cloud web UI detected my two artboards and the user can navigate to discover my two artboards. Users can preview your work without having to install Illustrator. They can also download the .AI file, or PNG and JPEG exports (no transparency though :)). It’s very neat. Try it for yourself, I’ve just shared it publicly: https://creative.adobe.com/file/6092cffb-91a5-4126-b8f5-771aed6af8d9