Краткая шпаргалка не только для вас, но и для меня. Иногда сам замечал, что захожу в свои же статьи, чтобы что то вспомнить.

Зачем вообще нужны pixel Perfect иконки?

  1. Они выглядят идеально.
  2. Масштабируются не смазываясь.
  3. Иногда имеют меньший размер в Кб.
  4. Их можно довольно таки эффектно анимировать средствами CSS, JS или canvas.
pixel_perfect

Левая иконка с четкими границами, правая с размытыми.

Делаю я иконки в Illustrator, в нем есть все что нужно для этого. Кроме того, интеграция с Photoshop (Smart Objects) позволяет легко переключаться между двумя программами когда это нужно.

Настройки

Поставить галочки

View -> Snap to Grid (Ctrl+Shift+”)
Будет привязывать точки согласно пиксельной сетке, о которой будет написано ниже.

View -> Snap to Point (Ctrl+Alt+”)
Полезная настройка, но иногда нужно выключать предыдущую, чтобы она работала правильно. Настройка позволяет привязывать точки фигуры к другой фигуре.

View -> Smart Guides
Никогда не выключайте, очень помогают всегда для удобной привязки вершин во время рисования.

Edit -> Preferences (Ctrl+K)00

General:
Keyboard Increment: 0.01 px
Будет круто работать в связке с Snap to Grid. Вы можете кнопками “Вверх”, “Вниз”, “Вправо” и “Влево” Задавать точное расположение вершины иконки по сетке.

Units (пиксельная сетка):
General: Pixels
Stroke: Pixels
Type: Points

Guides & Grid:
Gridline every: 1 px
Subdivisions: 1

Самый оптимальный вариант, 1 клетка = 1 пиксель.

Опционально

Align to Pixel Grid
Настройка привязывает каждую новую вершину к пиксельной сетке. Не всегда делает иконку лучше, иногда искажает ее, особенно если иконка не простой формы. Используйте по ситуации. Включается тут:

View -> Pixel Preview (Ctrl+Alt+Y)
Можно просто включить и работать в таком режиме, а можно делать как я: включать когда нужно посмотреть как выглядит иконка в готовом виде.

Советы

Правила, до которых я дошел путем проб, ошибок, обучения.

  1. Создавайте Artboard с целыми числами по высоте и ширине.
  2. При создании Artboard отключите Align to Pixel Grid, включайте по необходимости.
  3. Заранее определитесь с размерами иконок. Если вы решите их масштабировать, то размеры будут 2x 3x и т.д. Особенно актуально для дизайна приложений.
  4. Копируйте иконки в фотошоп смарт объектами, так вы всегда можете их отредактировать.
  5. Рисовать по несколько раз одно и тоже, такое себе занятие. Не делайте деструктивных изменений в иконку, пока макет дизайна не принят. Деструктивное изменение – уничтожение исходных объектов, которое не позволит в дальнейшем быстро поправить иконку.
  6. Ориентируйте направляющие вершин строго вертикально, горизонтально или под углом 45 градусов. Возможны исключения, не всегда возможно придерживаться угла 45 градусов.
  7. Используйте геометрические формы, так иконка будет выглядеть гармонично.
  8. Не используйте outline для маленьких иконок. Никто не разберет что вы там линиями хотите показать.
  9. Используйте комбинации клавиш для часто используемых функций.