Transparent PNG with Illustrator

Transparent PNG with Illustrator

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:

Shapes in Illustrator

Two design clouds in Illustrator CS6

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).

 

You can use the Save For Web menu to produce a transparent PNG file.

You can use the Save For Web menu to produce a transparent PNG file.

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.

I can export to transparent PNG. The image size fits the edges of my objects.

I can export to transparent PNG. The image size fits the edges of my objects.

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).

Select the Artboard Tool

Select the Artboard Tool

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.

The artboard will magically fit the dimensions of your shape.

The artboard will magically fit the dimensions of your shape.

5. Repeat the same operation for the second shape.

6. Now choose File > Export and select “Use Artboards”

Check Use Artboards, to produce multiple files.

Check Use Artboards, to produce multiple files.

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…

Select the best options for your creations

Select the best options for your creations

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.

Export from Illustrator

Export from Illustrator

The second artboard exported

The second artboard exported

 

 

 

 

 

 

 

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

Share your Illustrator file with Creative Cloud. It will create one page per artboard.

Share your Illustrator file with Creative Cloud. It will create one page per artboard.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

1 Comment

  1. Good on ya!! This saved my arss this morning. Thank you so much cool guy, who ever you are.
    Mally

Trackbacks/Pingbacks

  1. Export a path form AI to png | My Webdev Log - […] See also http://creativedroplets.com/transparent-png-with-illustrator/ […]
  2. Export a path from AI to png | My Webdev Log - […] See also http://creativedroplets.com/transparent-png-with-illustrator/ […]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">