I've created some icons, but they export at various sizes. We'd like to have them all be the same size, for use in our app. How can I export these all as the same size? Right now, they're exporting as their exact shape dimensions, which are all different. Currently, I'm exporting as PNG. (side note, I'm only exporting the white items, the background is only there for visibility)
One way you can go about exporting these icons at the same size is to create multiple, equal dimension artboards and move each icon to its own space. From here you can export each artboard as an individual file.
- Select the Artboard Tool (Shift + O) and set the size of the artboard with the toolbar at the top of the workspace to ensure they are all the same size:
- With the Artboard Tool still selected (Shift + O), copy the existing artboard by holding Option +
Click & Dragor by clicking the 'New Artboard' icon in the artboard toolbar at the top of the workspace (this will create a new board with the same dimensions specified in step 1):
- Move your artwork to the new uniform artboards:
- Save out the PNGs by navigating to File > Export > Export as... and selecting the "Use Artboards" option in the dialog box (this will allow you to export all or a range of artboards out as seperate files in one command). You can also select each artboard and Save for Web Command + Option + Shift + S individually if you wish to go that route.
If you're using Illustrator CC 2015 or later, you can also use the Export for Screens... (File > Export > Export for Screens...) feature to save out the PNGs. This is a more comprehensive tool for saving web assets which includes options in the dialog box to export individual artboards at various scales to accommodate various displays (1x, 2x, .5x, etc.) in various file formats (PNG, SVG, PDF, JPG, etc.):