Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have purchased a set of icons.

In the package there are five files that contain all the icons, assembled on a regular grid in different file formats.

The file formats are .ai, .eps, .pdf, .png, .psd.

I need the icons to use in an android application I'm writing. I need around twenty of them at different resolutions (32x32, 48x48, 64x64 & 96x96), in .png format.

The only way I know to extract the single icons is to do it by hand, but it would be a tedious and error-prone way.

Is there an automatic method, or a better way of getting the icons out of the files, at the various resolution I need?

What software will I need?

Ps. The icons i need to obtain have the following format:

sample android icon

As you can see, the icon is centered in a 64x64 bitmap. I have colored red the transparent part of the image to make it more visible.

share|improve this question
1  
Do you have Adobe Illustrator? Using the .ai file you should be able to copy/paste individual icons into a Photoshop file and save. Not much error can happen there. –  Scott Jun 21 '13 at 20:21
    
How easy/difficult or automated the processes can be greatly depends upon the configuration of the .ai file. If each icon is on its own artboard in Illustrator it's a very easy thing. If all icons are on one artboard, copy/paste is about your only solution. –  Scott Jun 21 '13 at 20:26
    
I have access to photoshop cs6, but not Adobe Illustrator. Could i use Inkscape instead of AI? However, the .psd file is divided into layers, one layer for each icon. I hope this can help! I have tried to create a slice from a single layer, but the slice created is the minimal bounding box of the icon, and i need instead fixed squared boxes (32x32, 64x64 and so on...). –  lukeluke Jun 21 '13 at 20:43
1  
Ahh, then in Photoshop... size file accordingly, then File > Scripts > Export Layers to Files –  Scott Jun 21 '13 at 20:51
    
If the .ai files are saved in PDF compatibilty mode they can probably be imported in Inkscape. –  Takkat Jun 21 '13 at 20:54

1 Answer 1

up vote 3 down vote accepted

Export objects from Inkscape as bitmaps

To export a vector object imported in Inkscape as a bitmap of defined pixel size we need the following steps:

Case source icons include background

  1. Select the object with the select tool.

    enter image description here

  2. Export the object as bitmap ("File - Export Bitmap...").

    enter image description here

  3. Choose ""Export area - Selection" to only export the object.

  4. Define the pixel size (above 64 x 64) for the resulting bitmap.
  5. Choose a path and a filename for export.
  6. Done.

    enter image description here

Note: There is a batch option in Inkscape for exporting multiple selected objects in the "Custom" option but this will not let you define a fixed pixel size for each object.

Case source icon objects only

In case the source icons do not include a square box with margins the above steps will lead to a distorted icon when the object has a with different to height. We then need an additonal step to get desired results.

  1. Select object with the select tool.
  2. Copy the object to clipboard.
  3. Open a new document having the size of the source icons. In Inkscape you will have predefined layouts in the File - New menu (here I took icon_32x32).
  4. Paste the clipboard content to the new document.

enter image description here

  1. Align the icon, e.g. to the center using the "Object - Align and Distribute..." tool.
  2. Export the page as bitmap with "File - Export Bitmap...".
  3. Choose "Page" and the desired bitmap sizes in the opening dialog (see above). We can export all sizes consecutively.

enter image description here 32 enter image description here 64 enter image description here 128

share|improve this answer
    
When i select the object, Inkscape create a minimal bounding box around the icon. So, the 'settings' icon has a different aspect ratio wrt the 'help' icon. This will results in bitmap with different widths and heights... –  lukeluke Jun 21 '13 at 22:15
    
it is not possible what you say. In the image you posted here, the object size aspect ratio is approximately 1, so when exporting, you can select a WxW bitmap size. If you had selected an object with an aspect ratio different from 1 (like for example the 'key' icon), it would result in a bitmap with different ar. Furthermore, every icon should have margins, that is, space left on the left, right, upper and down border of the bitmap... –  lukeluke Jun 22 '13 at 10:59
    
Thank you Takkat, i tried to align without success, but thanks to your update now i am able to do it!!! –  lukeluke Jun 22 '13 at 13:59
    
Excellent answer Takkat! –  Yisela Jun 23 '13 at 0:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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