1

I designed a set of icons for a website in Illustrator CC.

What would be the difference between using Illustrator CC's tool to export my icons in different sizes (@1x; @2x, @4x) vs. drawing the actual icon in different sizes ?

EDIT: I believe my question was about "size" and not resolution, but I might be wrong. I used (@1x; @2x, @4x) as it is in Illustrator CC. Exporting in @1x, @2x, @4x in Illustrator means at different sizes not different resolution. Is this correct?

|improve this question
  • Please note that you can edit your post by clicking the edit link (or even those two I just posted. – Vincent Dec 21 '17 at 13:35
  • Also, it would appear you have accidentally created multiple accounts. Stack Exchange does not support more than one account per user on a site. In case your accounts interact (upvoting your own posts, for example), they are liable to be deleted. Please go to our help section and contact SE to have this issue fixed. – Vincent Dec 21 '17 at 13:35
2

Most basically the difference is automation, you save a lot of steps by drawing only one and blowing it up to export.

All icon sizes cannot be generated from one file. A 64 pix icon looks terrible if reduced to 16 pix, and if you design at 16 pix and export x4 you will get a mess.

Between the biggest icon, 256 pix thumbnail, and smallest, 16 pix favicon, you should draw at least 3 different versions with greater complexity and detail at the larger sizes.

|improve this answer
  • The OP is about different screen resolution exports (@1x; @2x, @4x) of the same icon, not the design of icons at different sizes. – AAGD Dec 20 '17 at 17:00
  • I see "size" as the topic of the question, not resolution. You're thinking they want to know difference between exporting at 72 dpi, 144 dpi, 288 dpi etc? – Webster Dec 20 '17 at 17:15
  • AFAIK the term '@2x' as part of the filename was introduced with the Retina screens on iOS so an app (or browser) can automatically select the right resolution image, if available. So the question would be about automatically generating the exact same icon for different screen dpi. But who knows, maybe the difference between different dpi versions and different size versions is what the OP is unsure about?! – AAGD Dec 20 '17 at 17:57
0

Drawing the icons in different sizes also means updating designs in different sizes. When every change means 3 changes, it can quickly get messy and inconsistent.

EDIT:

To make it clear: The @1x; @2x, @4x exports are usually intended for creating assets for different screen resolutions (72dpi, 144dpi, 288dpi) of the exact same icon design. This is a typical requirement ie. when designing for mobile apps. So a "16x16px" icon for a hi-res screen with 288dpi (@4x) is actually 64x64px but will not look larger than 16x16, just sharper. These export settings simplify the export for an asset generation workflow, but you don't have to use them.

If you want to design different icon sizes, ie. like responsive icons where each size has unique features, or size step requirements do not match the @1x; @2x, @4x steps, you should draw the icons in the sizes you want to export, on single artboards or slices, however you prefer.

|improve this answer
  • It also allows for relatively painless batch exporting. The only drawback is Illustrator's artboard limit. – Ovaryraptor Dec 20 '17 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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