2

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)

Icons of different sizes/dimensions

Improve this question
1
  • 1
    Please keep in mind that 'file size' and 'dimensions' are two different things :)
    – Summer
    Feb 1, 2017 at 15:02

1 Answer 1

Reset to default
6

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.

  1. 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:

enter image description here

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

enter image description here

  1. Move your artwork to the new uniform artboards:

enter image description here

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

enter image description here

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

enter image description here

Improve this answer
1
  • 1
    Yes 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.
    – Webster
    Feb 1, 2017 at 1:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.