Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

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

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

  1. 1. Нарезка графики для разработчиков: проблемы ресайза
  2. 2. Павел Скрипкин Ведущий UX/UI дизайнер, My.Com / Mail.Ru @skrpkn Евгений Беляев Android-дизайнер и интегратор дизайна, Avito.ru @30PP0
  3. 3. www.resonator.cc @resonator_cc
  4. 4. 0. Введение в нарезку
  5. 5. Спецификация дизайна 1. Нарезка графических ресурсов 2. Гайдлайны для размеров элементов и отступов
  6. 6. Спецификация дизайна 1. Нарезка графических ресурсов 2. Гайдлайны для размеров элементов и отступов
  7. 7. Проблемы нарезки 1. Ресайз графики под различные плотности экрана 2. Передача ресурсов разработчикам 3. Хранение и поиск исходников графики
  8. 8. Проблемы нарезки 1. Ресайз графики под различные плотности экрана 2. Передача ресурсов разработчикам 3. Хранение и поиск исходников графики
  9. 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. 10. Name Density Scale Factor non-Retina @1x 163 1x Retina @2x 326 2x Retina HD @3x 489 3x Плотности iOS
  11. 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. 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. 13. iOS – частный случай Android
  14. 14. Экран Nexus 5 Размер 4.95” Разрешение 1920x1080 px Плотность 445 dpi Категория плотности XXHDPI Коэффициент ресайза 3x
  15. 15. Часть I. Проблемы ресайза графики из XXHDPI
  16. 16. 1.1 Выявление проблем ресайза графики из XXHDPI в теории
  17. 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. 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. 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. 20. Выводы из теории ресайза из XXHDPI Чтобы минимизировать проблемы при ресайзе из XXHDPI, параметры графики (размер, толщина и т.д.) должны быть кратны 6 px.
  21. 21. 72x72 px LDPI 18 MDPI 24 HDPI 36 XHDPI 48 XXHDPI 72 XXXHDPI 96 Пример
  22. 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. 23. 1.2 Выявление проблем ресайза из XXHDPI на практике в Photoshop CC 2014
  24. 24. Способы ресайза графики 1. Ручной ресайз 2. Автонарезка
  25. 25. Способ 1. Ручной ресайз 1. Собираем графические элементы на отдельном канвасе 2. Изменяем Image Size у канваса для каждой плотности экрана 3. Правим проблемы ресайза 4. Нарезаем png с помощью Slice Tool 5. Раскладываем нарезку по привычной для разработчиков структуре папок
  26. 26. Способ 1. Ручной ресайз Marc Edwards, дизайн-директор в Bjango www.bjango.com/articles/appdesignworkflow/
  27. 27. Способ 1. Ручной ресайз Для пиксель-пёрфект дизайнеров!
  28. 28. Способ 2. Автонарезка 1. Плагины и расширения (PNG Express и т.д.) 2. Photoshop Generator
  29. 29. Способ 2. Автонарезка Для пиксель-пофиг дизайнеров!
  30. 30. Способы ресайза графики 1. Ручной ресайз 2. Автонарезка
  31. 31. Задача. Выявление проблем ресайза из XXHDPI при автонарезке
  32. 32. Исходные данные: инструменты 1. PNG Express, $ 2. Photoshop Generator, бесплатно
  33. 33. Исходные данные: графика
  34. 34. Исходные данные: графика Размер 72x72 px, 96x96 px, Произвольный Толщина 6 px, внутри 5 px Тип линий Vector Stroke, Solid Shape
  35. 35. XXXHDPI PNG Express Photoshop Generator
  36. 36. XXXHDPI PNG Express Photoshop Generator
  37. 37. XXHDPI 16.2% PNG Express Photoshop Generator
  38. 38. XXHDPI 16.2% PNG Express Photoshop Generator
  39. 39. XHDPI 21.0% PNG Express Photoshop Generator
  40. 40. XHDPI 21.0% PNG Express Photoshop Generator
  41. 41. HDPI 40.4% PNG Express Photoshop Generator
  42. 42. HDPI 40.4% PNG Express Photoshop Generator
  43. 43. MDPI 15.6% PNG Express Photoshop Generator
  44. 44. MDPI 15.6% PNG Express Photoshop Generator
  45. 45. HDPI 40.4% PNG Express Photoshop Generator
  46. 46. HDPI 40.4% PNG Express Photoshop Generator
  47. 47. Выводы из практики автонарезки в PS из XXHDPI 1. Полупиксели или «мыльные» края 2. Сдвиг внутренних элементов на ±1–2 px, из- за которого: a. Симметричная иконка становится несимметричной b. Некоторые внутренние элементы «торчат наружу»
  48. 48. Выводы из практики автонарезки в PS из XXHDPI Photoshop Generator: количество символов для имени слоя ограничено, поэтому придётся сокращать названия иконок.
  49. 49. Выводы из практики автонарезки в PS из XXHDPI Автонарезка из XXHDPI ≈ 0
  50. 50. Сорьки ;(
  51. 51. Часть II. Проблемы ресайза графики из MDPI
  52. 52. 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
  53. 53. 2.1 Выявление проблем ресайза графики из MDPI в теории
  54. 54. 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
  55. 55. Выводы из теории ресайза из MDPI Чтобы минимизировать проблемы при ресайзе из MDPI, параметры графики (размер, толщина и т.д.) должны быть кратны 2 px.
  56. 56. 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
  57. 57. 2.2 Выявление проблем ресайза из MDPI на практике в Photoshop CC 2014
  58. 58. Задача. Выявление проблем ресайза из MDPI при автонарезке
  59. 59. Исходные данные: инструменты 1. PNG Express, $ 2. Photoshop Generator, бесплатно
  60. 60. Размер 24x24 px, 32x32 px, Произвольный Толщина 2 px Тип линий Vector Stroke, Solid Shape Исходные данные: графика
  61. 61. HDPI 40.2% PNG Express Photoshop Generator
  62. 62. HDPI 40.2% PNG Express Photoshop Generator
  63. 63. HDPI 40.2% PNG Express Photoshop Generator
  64. 64. HDPI 40.2% PNG Express Photoshop Generator
  65. 65. Выводы из практики автонарезки в PS из MDPI 1. Полупиксели или «мыльные» края 2. Сдвиг внутренних элементов на ±1–2 px, из- за которого: a. Симметричная иконка становится несимметричной b. Некоторые внутренние элементы «торчат наружу»
  66. 66. Выводы из практики автонарезки в PS из MDPI Проблемы возникают только для плотности HDPI
  67. 67. Часть III. Выявление проблем ресайза на практике в Android Studio
  68. 68. XXXHDPI PNG Express Photoshop Generator
  69. 69. One more thing
  70. 70. Resonator: Resize Test Требуется: Android 2.3.3 и выше
  71. 71. Выводы из практики в Android Studio 1. Полупиксели или «мыльные» края 😡 2. Сдвиг внутренних элементов на ±1–2 px, из- за которого: a. Симметричная иконка становится несимметричной 😡 b. Некоторые внутренние элементы «торчат наружу» 😡
  72. 72. Глобальный вывод Без ручной правки проблемных иконок после авторесайза не обойтись
  73. 73. www.resonator.cc @resonator_cc
  74. 74. Что делает Resonator 1. Собирает графические элементы на отдельном канвасе 2. Изменяет Image Size у канваса для каждой плотности экрана 3. Правит проблемы ресайза 4. Нарезает png 5. Раскладывает нарезку по привычной для разработчиков структуре папок
  75. 75. Что делает Resonator 1. Собирает графические элементы на отдельном канвасе 2. Изменяет Image Size у канваса для каждой плотности экрана 3. Правит проблемы ресайза 4. Нарезает png 5. Раскладывает нарезку по привычной для разработчиков структуре папок
  76. 76. Resonator Demo
  77. 77. Photoshop CC 2014 Доступен для скачивания Sketch 3 Coming soon… Поддерживается
  78. 78. Спасибо за внимание
  79. 79. Вопросы

×