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)
1 Answer
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 & Drag
or 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.
Final Note:
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.):
-
1Yes to everything in the answer above with additions: When saving in the "Save for web" dialogue make sure "clip to artboard" is selected. Also, to make sure your icons appear the same size in relation to each other and not just their bounding boxes, use guides top and bottom OR use 1 artboard, load the icons on top of each other and size them the same, but not exact same height and width. For instance in your example above the star should be 5-10% bigger than the circle so they appear proportional to each other. Only if the icons are adjacent or stacked can you see small differences in size.– WebsterFeb 1, 2017 at 1:23