Подготовка графики под iphone
Я работаю в e-legion и занимаюсь нарезкой графики для приложения. Недавно я писала о том, как готовить графику под android, теперь делюсь опытом и для iphone. Мы работаем с пакетом adobe и чаще используем в работе illurstator.
Спецификация
При создании спецификации необходимо убедиться, что все элементы стоят по сетке. Размер сетки 10px, ориентируемся на iPhone 5. Это удобно, так как все остальные разрешения тянутся из него. Затем на сборках проверяем как дизайн живет в 6-ке и 6 плюс.
Элементы стоят по сетке 10x. По ней удобно определять координаты и передавать их разработчикам.
Чтобы при масштабировании разрешения шрифты отображались корректно делайте их кратным двум.
Чтобы текст легко считывался на экранах, в дизайне их кегль делайте не менее 21pt.
Подготовка графики
В iOS существует 3 разрешения: @1x (неретина), @2x (ретина, iphone 4/5/6) и @3x (iphone 6 plus).
@1x сейчас не используется, поэтому рассчитывать и нарезать можно начиная с @2x:
@2x — 100%
@3x — 150%
Создается папка «cut», в которую помещаются все элементы нарезки без деления на другие папки по разрешениям (как это мы делаем в android), там же хранится и рабочий файл с графикой:
По-скольку в данном случае все элементы нарезаются в одну папку, то названия удобно разделять приставками (пример: ic_activity@2x, bar_shdow@2x).
Аннотации
В аннотациях подписываем отступы, размеры графических элементов, параметры шрифтов.
В подготовке аннотаций нам помогает расширение для Иллюстратора — specctr pro
Считать каждый отступ каждого элемента сложно и мы стараемся найти способы упращения, но в тоже время и точности передачи координат. Сейчас мы используем модульную сетку. По-скольку, изначально все макеты создаются в условиях этой сетки, то удобно делать скрин, по которому видны все отступы и размеры. В случае с текстом и элементами важно знать координату нижнего левого угла.
Графические элементы
В iOS есть три состояния кнопок.
В iOS у графического элемента есть свойство тянуться только по горизонтали, если он состоит из одного цвета или одного линейного градиента.
Нарезаем, проверяем макеты, графические элементы, делаем аннотации и передаем разработчикам. Как только у разработчика готова первая сборка, делайте переодические ревью дизайна. Это поможет избежать больших правок в финале проекта.
Если у вас есть решения как лучше организовать этот процесс или вам нужна помощь — пишите, я люблю письма.
le.ktrna@gmail.com