Этот доклад мы прочитали на Dribbble Meetup Russia 2015

1. Нарезка графики
для разработчиков:
проблемы ресайза

2. Павел Скрипкин
Ведущий UX/UI дизайнер,
My.Com / Mail.Ru
@skrpkn
Евгений Беляев
Android-дизайнер и интегратор
дизайна, Avito.ru
@30PP0

3. www.resonator.cc @resonator_cc

4. 0.
Введение в нарезку

5. Спецификация дизайна
1. Нарезка графических ресурсов
2. Гайдлайны для размеров элементов
и отступов

6. Спецификация дизайна
1. Нарезка графических ресурсов
2. Гайдлайны для размеров элементов
и отступов

7. Проблемы нарезки
1. Ресайз графики под различные плотности
экрана
2. Передача ресурсов разработчикам
3. Хранение и поиск исходников графики

8. Проблемы нарезки
1. Ресайз графики под различные плотности
экрана
2. Передача ресурсов разработчикам
3. Хранение и поиск исходников графики

9. Name Density Scale Factor
LDPI ≈120 100–140 0.75x
MDPI ≈160 140–200 1x
TVDPI ≈213 1.33x
HDPI ≈240 200–280 1.5x
XHDPI ≈320 280–400 2x
XXHDPI ≈480 400–560 3x
XXXHDPI ≈640 560–720 4x
Плотности Android

10. Name Density Scale Factor
non-Retina @1x 163 1x
Retina @2x 326 2x
Retina HD @3x 489 3x
Плотности iOS

11. Плотности
Windows for Phones и Web
Name Scale Factor
WVGA 1x
WXGA 1.6x
720p 1.5x
1080p 2.25x
Name Scale Factor
non-Retina @1x 1x
Retina @2x 2x

12. Плотности Android vs. iOS
MDPI ≈160 140–200 1x
HDPI ≈240 200–280 1.5x
XHDPI ≈320 280–400 2x
XXHDPI ≈480 400–560 3x
XXXHDPI ≈640 560–720 4x
non-Retina 163 1x
Retina 326 2x
Retina HD 489 3x

13. iOS – частный случай Android

14. Экран Nexus 5
Размер 4.95”
Разрешение 1920x1080 px
Плотность 445 dpi
Категория плотности XXHDPI
Коэффициент ресайза 3x

15. Часть I.
Проблемы ресайза графики
из XXHDPI

16. 1.1
Выявление проблем ресайза
графики из XXHDPI в теории

17. Name Scale Factor
LDPI 3/4x 75%
MDPI 1x 100%
HDPI 1 1/2x 150%
XHDPI 2x 200%
XXHDPI 3x 300%
XXXHDPI 4x 400%
Плотности Android

18. Name Scale Factor
LDPI 3/4x 75%
MDPI 1x 100%
HDPI 1 1/2x 150%
XHDPI 2x 200%
XXHDPI 3x 300%
XXXHDPI 4x 400%
Плотности Android

19. Name Scale Factor
LDPI 1/4x 25%
MDPI 1/3x 33.33333%
HDPI 1/2x 50%
XHDPI 2/3x 66.66667%
XXHDPI 1x 100%
XXXHDPI 1 1/3x 133.33333%
Плотности Android

20. Выводы из теории ресайза
из XXHDPI
Чтобы минимизировать проблемы при ресайзе
из XXHDPI, параметры графики (размер,
толщина и т.д.) должны быть кратны 6 px.

21. 72x72 px
LDPI 18
MDPI 24
HDPI 36
XHDPI 48
XXHDPI 72
XXXHDPI 96
Пример

22. 72x72 px
LDPI 18
MDPI 24
HDPI 36
XHDPI 48
XXHDPI 72
XXXHDPI 96
Пример
80x80 px
LDPI 20
MDPI 26.67
HDPI 40
XHDPI 53.33
XXHDPI 80
XXXHDPI 106.67

23. 1.2
Выявление проблем ресайза
из XXHDPI на практике
в Photoshop CC 2014

24. Способы ресайза графики
1. Ручной ресайз
2. Автонарезка

25. Способ 1. Ручной ресайз
1. Собираем графические элементы на отдельном
канвасе
2. Изменяем Image Size у канваса для каждой
плотности экрана
3. Правим проблемы ресайза
4. Нарезаем png с помощью Slice Tool
5. Раскладываем нарезку по привычной
для разработчиков структуре папок

26. Способ 1. Ручной ресайз
Marc Edwards, дизайн-директор в Bjango
www.bjango.com/articles/appdesignworkflow/

27. Способ 1. Ручной ресайз
Для пиксель-пёрфект дизайнеров!

28. Способ 2. Автонарезка
1. Плагины и расширения (PNG Express и т.д.)
2. Photoshop Generator

29. Способ 2. Автонарезка
Для пиксель-пофиг дизайнеров!

30. Способы ресайза графики
1. Ручной ресайз
2. Автонарезка

31. Задача.
Выявление проблем ресайза
из XXHDPI при автонарезке

32. Исходные данные:
инструменты
1. PNG Express, $
2. Photoshop Generator, бесплатно

33. Исходные данные: графика

34. Исходные данные: графика
Размер
72x72 px,
96x96 px,
Произвольный
Толщина
6 px,
внутри 5 px
Тип линий
Vector Stroke,
Solid Shape

37. XXXHDPI
PNG Express Photoshop Generator

38. XXXHDPI
PNG Express Photoshop Generator

39. XXHDPI 16.2%
PNG Express Photoshop Generator

40. XXHDPI 16.2%
PNG Express Photoshop Generator

41. XHDPI 21.0%
PNG Express Photoshop Generator

42. XHDPI 21.0%
PNG Express Photoshop Generator

43. HDPI 40.4%
PNG Express Photoshop Generator

44. HDPI 40.4%
PNG Express Photoshop Generator

45. MDPI 15.6%
PNG Express Photoshop Generator

46. MDPI 15.6%
PNG Express Photoshop Generator

49. HDPI 40.4%
PNG Express Photoshop Generator

50. HDPI 40.4%
PNG Express Photoshop Generator

52. Выводы из практики
автонарезки в PS из XXHDPI
1. Полупиксели или «мыльные» края
2. Сдвиг внутренних элементов на ±1–2 px, из-
за которого:
a. Симметричная иконка становится
несимметричной
b. Некоторые внутренние элементы
«торчат наружу»

53. Выводы из практики
автонарезки в PS из XXHDPI
Photoshop Generator: количество символов для
имени слоя ограничено, поэтому придётся
сокращать названия иконок.

54. Выводы из практики
автонарезки в PS из XXHDPI
Автонарезка из XXHDPI ≈ 0

55. Сорьки ;(

56. Часть II.
Проблемы ресайза графики
из MDPI

57. Name Scale Factor
LDPI 3/4x 75%
MDPI 1x 100%
HDPI 1 1/2x 150%
XHDPI 2x 200%
XXHDPI 3x 300%
XXXHDPI 4x 400%
Плотности Android

58. 2.1
Выявление проблем ресайза
графики из MDPI в теории

59. Name Scale Factor
LDPI 3/4x 75%
MDPI 1x 100%
HDPI 1 1/2x 150%
XHDPI 2x 200%
XXHDPI 3x 300%
XXXHDPI 4x 400%
Плотности Android

60. Выводы из теории ресайза
из MDPI
Чтобы минимизировать проблемы при ресайзе
из MDPI, параметры графики (размер, толщина
и т.д.) должны быть кратны 2 px.

61. 24x24 px
LDPI 18
MDPI 24
HDPI 36
XHDPI 48
XXHDPI 72
XXXHDPI 96
Пример
25x25 px
LDPI 18.75
MDPI 25
HDPI 37.5
XHDPI 50
XXHDPI 75
XXXHDPI 100

62. 2.2
Выявление проблем ресайза
из MDPI на практике
в Photoshop CC 2014

63. Задача.
Выявление проблем ресайза
из MDPI при автонарезке

64. Исходные данные:
инструменты
1. PNG Express, $
2. Photoshop Generator, бесплатно

65. Размер
24x24 px,
32x32 px,
Произвольный
Толщина 2 px
Тип линий
Vector Stroke,
Solid Shape
Исходные данные: графика

67. HDPI 40.2%
PNG Express Photoshop Generator

68. HDPI 40.2%
PNG Express Photoshop Generator

70. HDPI 40.2%
PNG Express Photoshop Generator

71. HDPI 40.2%
PNG Express Photoshop Generator

73. Выводы из практики
автонарезки в PS из MDPI
1. Полупиксели или «мыльные» края
2. Сдвиг внутренних элементов на ±1–2 px, из-
за которого:
a. Симметричная иконка становится
несимметричной
b. Некоторые внутренние элементы
«торчат наружу»

74. Выводы из практики
автонарезки в PS из MDPI
Проблемы возникают только
для плотности HDPI

75. Часть III.
Выявление проблем
ресайза на практике
в Android Studio

76. XXXHDPI
PNG Express Photoshop Generator

77. One more thing

78. Resonator: Resize Test
Требуется: Android 2.3.3 и выше

81. Выводы из практики
в Android Studio
1. Полупиксели или «мыльные» края 😡
2. Сдвиг внутренних элементов на ±1–2 px, из-
за которого:
a. Симметричная иконка становится
несимметричной 😡
b. Некоторые внутренние элементы
«торчат наружу» 😡

82. Глобальный вывод
Без ручной правки проблемных иконок
после авторесайза не обойтись

83. www.resonator.cc @resonator_cc

84. Что делает Resonator
1. Собирает графические элементы на отдельном
канвасе
2. Изменяет Image Size у канваса для каждой
плотности экрана
3. Правит проблемы ресайза
4. Нарезает png
5. Раскладывает нарезку по привычной
для разработчиков структуре папок

85. Что делает Resonator
1. Собирает графические элементы на отдельном
канвасе
2. Изменяет Image Size у канваса для каждой
плотности экрана
3. Правит проблемы ресайза
4. Нарезает png
5. Раскладывает нарезку по привычной
для разработчиков структуре папок

86. Resonator Demo

87. Photoshop CC 2014
Доступен для скачивания
Sketch 3
Coming soon…
Поддерживается

88. Спасибо за внимание

89. Вопросы