0

What I need:

I'm creating android app icon. So it's obviously pixel based and I want to pay attention to make it "pixel perfect" and then I need to export it in different dimensions (say 36x36, 64x64) by scaling it down accordingly, without losing proportions and crisp edges.

What I tried and observed:

(Using Illustrator 2015)

Thing I'm using to get pixel perfect shape is Align to pixel grid so that edges don't seem blurred. It works but spacing and width of shapes change!

(A) Align to pixel grid is unchecked from beginning

  1. I created a shape (No strokes, only fills). Align to pixel grid is UNCHECKED
  2. Scaled it down to size of an app
  3. Checked Align to pixel grid and shape got distorted. One of the lines get thinner and spacing becomes uneven. It's not sure what will be distorted. It depends from dimensions to dimensions / shape to shape.

Observation: Widths and spacing are affected

(B) Align to pixel grid is checked before starting drawing shape

  1. I created a shape (No strokes, only fills). Align to pixel grid is CHECKED
  2. Scaled it down to size of an app
  3. Shape got distorted. Result was similar to (A) - 3

Observation: Mainly spacing is affected. It's not proportional

(Please see rough illustrated image at the end (these are not real pixels. I just made grids to make it clear to you. Things are a little exaggerated):

How can I fix it (i.e., getting those 3 rectangles of equal width with equal spacing between them)?

PS:

  1. I read answers on Adobe forums and here by Scott about similar questions. But I consider this a new question as others didn't explain how we can solve this problem of uneven spacing and widths if we want to scale it down and still get pixel perfect design.

  2. Things distort more when there are rounded corners. Some corners get more radius, some less eventually, instead of being equal.

enter image description here

  • Is this a question? Doesn't appear to be. Great info, but probably best served by answering a question. Posting general information as a new question is inappropriate. You can create a question, then answer it yourself. Doing that would be better. – Scott Feb 24 '18 at 4:08
  • But I don't know the answer. I just want to know if it is really an issue or I can fix it or I'm doing something wrong? But I realized I didn't ask something in question and detail so you may be saying this. Shall I edit it so it looks like a question? – Vikas Feb 24 '18 at 4:51
  • Edited it by the way. – Vikas Feb 24 '18 at 4:57
  • Okay, then after the edit I have to say the question is really unclear. There's a great deal of superfluous information here and having the question in the middle of it all makes it very difficult to figure out what the actual question may be. – Scott Feb 24 '18 at 6:05
  • Hi @Scott please check now. Hope it's better explained and asked now. – Vikas Feb 24 '18 at 13:07
1

You do understand that its different if those lines are paths with stroke or squares with fill. If your have stroked lines than this is not likely going to work since the line can only snap to grid, however what you would need to do for this to work is snap to 1/2 grid. So expand the strokes before you do this.

Also you can not incrementally scale you need to scale right size in one go or not scale at all. So you can scale it down to 2/3's but 1/3 but nothing else will work.

Personally i never ever enable pixel snapping, since its very unproductive for most work*. Like in this case, its better to disable pixel snapping scale and then align points to closes half pixel.

* Its not like its broken or anything but the restriction it causes on your effects is just too great there is a limited number of options. Better tweak first then snap whatever you need.

3

First I want to Ask if that lines are fill or stroke. And if you have checked the scale strokes & effects checkbox beside allign to pixel grid.

If it is still a stroke or not expanded then you must always check the scale strokes & effects checkbox. As shown some samples.

This is a sample of lines ond the first right side(stroke only) copied and scaled with scale strokes & effects checkbox shown on Transform window. As shown it's ratio is ok. enter image description here

This is a sample of lines // far right (stroke only) copied and NOT scaled with scale strokes & effects checkbox. It's distorted or not proportional to the original enter image description here

And if it outlined/Expanded use scale Tool as shown and check the scale strokes and effect also.

enter image description here

  • Please check the question details. I've edited. Hope you'll understand better and know about shapes. I'll read your full answer in detail meanwhile. – Vikas Feb 24 '18 at 13:20
  • Scale tool fixed one thing for me. It worked for rounded corners and maintained proportions when "Scale rectangle corners" was checked. Secondly, the main problem isn't solved yet. I drew 3 horizontal rectangles as I've mentioned in question detail. Scaled them down to 20% checking both "Scale strokes..." and "Scale corners..." checkboxes. It scaled them proportionally, but when I turned on pixel preview, it showed m one side of each rectangle blurred! That's the real problem. How can I overcome this? When I click "align to pixel grid", it results in same uneven spacing and uneven widths :( – Vikas Feb 24 '18 at 14:46
  • One more thing. Scale menu gives options to scale in %. What if we need to export in exact size, like 64x64px? – Vikas Feb 24 '18 at 14:57
  • If it is so use the transform window and input your desired scale just make sure your prefferences are set to px (pixels) – Dodie Eslava Feb 25 '18 at 7:33
  • 1
    Ok I have seen what i wanted. Illustrator has estimated it in pixel preview for the reason that it is so manute / it is to little that every pixel is separated and makes a transition between black and white. This is only in pixel preview. I think its OK, as long as it is vector. – Dodie Eslava Feb 25 '18 at 9:18

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.