Today I Learned

hashrocket A Hashrocket project

3 posts by mikefretto twitter @fretto

Load Saved Color Swatches In Multiple .AI Files

Today I learned how to save and load swatch libraries in multiple .AI files.

Swatch and learn:

  1. Create a color swatch. If you’d like to be organized, save them in “Color Groups," which are indicated with a folder icon.

  2. Find the swatch drop-down menu and select, “Save Swatch Library as AI…". Give your swatch library a name.

  3. Open a new file and select, “Open Swatch Library" and where your User-Defined Swatch Library will be.

Boom—there ya have it. Your swatches can be now be used across any AI file when repeating this process.

DIY Grids for Designing UI in Illustrator

I realize I may be part of the minority of UI designers who enjoy working in Illustrator. If you too are part of this special group, check out this sweet TIL:

Open a new AI file with web settings. Create a rectangle that represents the full width of your app. Example: 1080 px wide rectangle for a desktop grid. Align it on your artboard. Go to Object > Path > Split Into Grid. This dialog window allows you to add equidistant rows, columns, and even gutters. When you’ve got all of that covered, select “Add Guides," then click, “OK." This now allows you to assign guides to your AI file by selecting View > Guides > Make Guides (⌘5 on Apple).

Killer grid, man!

Export SVGs with Ease in AI

If you’re tired of exporting SVG icons individually, follow these 5 easy steps:

  1. Size your icons to scale in one artboard (make sure all elements of each icon are grouped)
  2. Select your “Artboard" tool in the menu and then click each of your icons, which will assign their own respective artboard.
  3. Open Artboards window (Window > Artboards) and name each icon’s artboard (this will become the filename suffix)
  4. Save As > Select “SVG" as format and make sure “Use Artboards" and “All" are both selected. Your file name will become your prefix (AI adds a “_" to separate your suffixes).
  5. Pick up the pieces after your mind is blown.