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

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

Павел Скрипкин

Ведущий UX/UI дизайнер, My.Com / Mail.Ru

@skrpknЕвгений Беляев

Android-дизайнер и интегратор дизайна, Avito.ru

@30PP0

www.resonator.cc @resonator_cc

0.

Введение в нарезку

Спецификация дизайна

1. Нарезка графических ресурсов

2. Гайдлайны для размеров элементов и отступов

Проблемы нарезки

1. Ресайз графики под различные плотности экрана

2. Передача ресурсов разработчикам

3. Хранение и поиск исходников графики

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

Name Density Scale Factor

non-Retina @1x 163 1x

Retina @2x 326 2x

Retina HD @3x 489 3x

Плотности iOS

Плотности 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

Плотности 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

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

Экран Nexus 5

Размер 4.95”

Разрешение 1920x1080 px

Плотность 445 dpi

Категория плотности XXHDPI

Коэффициент ресайза 3x

Часть I.

Проблемы ресайза графики из XXHDPI

1.1

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

Name Scale Factor

LDPI 3/4x 75%

MDPI 1x 100%

HDPI 1 1/2x 150%

XHDPI 2x 200%

XXHDPI 3x 300%

XXXHDPI 4x 400%


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%


Выводы из теории ресайза из XXHDPI

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

72x72 px

LDPI 18

MDPI 24

HDPI 36

XHDPI 48

XXHDPI 72

XXXHDPI 96

Пример

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

1.2

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

Способы ресайза графики

1. Ручной ресайз

2. Автонарезка

Способ 1. Ручной ресайз

1. Собираем графические элементы на отдельном канвасе

2. Изменяем Image Size у канваса для каждой плотности экрана

3. Правим проблемы ресайза

4. Нарезаем png с помощью Slice Tool

5. Раскладываем нарезку по привычной для разработчиков структуре папок


Marc Edwards, дизайн-директор в Bjango

www.bjango.com/articles/appdesignworkflow/


Для пиксель-пёрфект дизайнеров!

Способ 2. Автонарезка

1. Плагины и расширения (PNG Express и т.д.)

2. Photoshop Generator

Способ 2. Автонарезка

Для пиксель-пофиг дизайнеров!

Способы ресайза графики

1. Ручной ресайз

2. Автонарезка

Задача.

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

Исходные данные: инструменты

1. PNG Express, $

2. Photoshop Generator, бесплатно

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


Размер72x72 px, 96x96 px, Произвольный

Толщина 6 px, внутри 5 px

Тип линий Vector Stroke, Solid Shape

XXXHDPI

PNG Express Photoshop Generator

XXHDPI 16.2%


XHDPI 21.0%


HDPI 40.4%


MDPI 15.6%


HDPI 40.4%


Выводы из практики автонарезки в PS из XXHDPI1. Полупиксели или «мыльные» края

2. Сдвиг внутренних элементов на ±1–2 px, из-за которого:

a. Симметричная иконка становится несимметричной

b. Некоторые внутренние элементы «торчат наружу»

Выводы из практики автонарезки в PS из XXHDPI

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

Выводы из практики автонарезки в PS из XXHDPI

Автонарезка из XXHDPI ≈ 0

Сорьки ;(

Часть II.

Проблемы ресайза графики из MDPI

Name Scale Factor

LDPI 3/4x 75%

MDPI 1x 100%

HDPI 1 1/2x 150%

XHDPI 2x 200%

XXHDPI 3x 300%

XXXHDPI 4x 400%


2.1

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

Name Scale Factor

LDPI 3/4x 75%

MDPI 1x 100%

HDPI 1 1/2x 150%

XHDPI 2x 200%

XXHDPI 3x 300%

XXXHDPI 4x 400%


Выводы из теории ресайза из MDPI

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

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

2.2

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

Задача.

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

Исходные данные: инструменты

1. PNG Express, $

2. Photoshop Generator, бесплатно

Размер24x24 px, 32x32 px, Произвольный

Толщина 2 px

Тип линий Vector Stroke, Solid Shape


HDPI 40.2%


Выводы из практики автонарезки в PS из MDPI1. Полупиксели или «мыльные» края


a. Симметричная иконка становится несимметричной

b. Некоторые внутренние элементы «торчат наружу»

Выводы из практики автонарезки в PS из MDPI

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

Часть III.

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

XXXHDPI


One more thing

Resonator: Resize Test

Требуется: Android 2.3.3 и выше

Выводы из практики в Android Studio1. Полупиксели или «мыльные» края 😡


a. Симметричная иконка становится несимметричной 😡

b. Некоторые внутренние элементы «торчат наружу» 😡

Глобальный вывод

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

www.resonator.cc @resonator_cc

Что делает Resonator

1. Собирает графические элементы на отдельном канвасе

2. Изменяет Image Size у канваса для каждой плотности экрана

3. Правит проблемы ресайза

4. Нарезает png

5. Раскладывает нарезку по привычной для разработчиков структуре папок

Resonator Demo

Photoshop CC 2014Доступен для скачивания

Sketch 3 Coming soon…

Поддерживается

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

Вопросы

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

Design

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