Поделиться , , Google+, Pinterest,

Опубликовано в:

Как нарезать графику для iOS приложений

Ребята из e-Legion в блоге на habr делятся своим опытом по работе с пакетом Adobe для нарезки графики для iOs приложений. Какие сложности возникают во время нарезки и как сделать так, чтобы приложение на выходе полностью соответствовало дизайну.

Источник: habrahabr.ru

Работать с разрешениями iPhone удобно. Начиная с пятого поколения разрешения экрана увеличиваются пропорционально.

Как нарезать графику для iOS приложений

Спецификация

При создании спецификации необходимо убедиться, что все элементы стоят по сетке. Размер сетки 10px, ориентируемся на iPhone 5. Это удобно, так как все остальные разрешения тянутся из него. Затем на сборках проверяем, как дизайн живет в iPhone 6 и 6 Plus.

Как нарезать графику для iOS приложений

Элементы в верхнем баре можно вставлять согласно рекомендациям iOS и не подгонять под сетку.

Элементы стоят по сетке 10x. По ней удобно определять координаты и передавать их разработчикам. Чтобы при масштабировании разрешения шрифты отображались корректно, делайте их кратными двум. Чтобы текст легко считывался на экранах, делайте их кегль в дизайне не менее 21pt.

Подготовка графики

В iOS существует 3 разрешения: @1x (не Retina), @2x (Retina, iPhone 4/5/6) и @3x (iPhone 6 plus).

@1x сейчас не используется, поэтому рассчитывать и нарезать можно начиная с @2x:
@2x — 100%
@3x — 150%

графика для iOS приложений

Создается папка «cut», в которую помещаются все элементы нарезки без деления на другие папки по разрешениям (как это мы делаем в Android), там же хранится и рабочий файл с графикой:

графика для iOs приложений

Удобно просматривать в режиме «content» для того, чтобы проверять размеры нарезки.

Поскольку в данном случае все элементы нарезаются в одну папку, то названия удобно разделять приставками (пример: ic_activity @2x, bar_shdow @2x).

Аннотации

В аннотациях подписываем отступы, размеры графических элементов, параметры шрифтов. В подготовке аннотаций нам помогает расширение для Иллюстратора  —  specctr pro

Считать каждый отступ каждого элемента сложно, и мы стараемся найти способы упрощения, но в то же время и точности передачи координат. Сейчас мы используем модульную сетку. Поскольку изначально все макеты создаются в условиях этой сетки, удобно делать скрин, по которому видны все отступы и размеры. В случае с текстом и элементами важно знать координату нижнего левого угла.

нарезка графики для iOs приложений

Графические элементы

В iOS есть три состояния кнопок.

6f1a1cc9a0624e3082abb326f75d8dc8

Не забудьте прорисовать состояния кнопок, иначе за вас это сделает разработчик!

В iOS у графического элемента есть свойство тянуться только по горизонтали, если он состоит из одного цвета или одного линейного градиента.

b7f37fb7ff7f00bb55dd3d85ab870244

Реальный размер элемента и он же в нарезке.

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

comments powered by HyperComments