Я хотів би стримати обіцянку і продовжити публікацію перекладів цікавих нотаток для дизайнерів і творців мобільних додатків, які збирав протягом довгого часу. І сьогодні у нас в програмі перша частина статті «Designing for Retina display», написана відмінними хлопцями з Bjango.

Коли справа доходить до створення елементів користувальницького інтерфейсу, які легко масштабуються в Фотошопі, растрові зображення стають вашими ворогам. Вони складаються з пікселів і розмиваються при масштабуванні. Для вирішення цієї проблеми можна використовувати суцільні кольори, візерунки або градієнтні шари з векторними масками (тільки переконайтеся, що ви включили опцію snap to pixels, де це можливо). Спочатку це трохи незручно, але перенесення графіки вектор має значні переваги.

Я не пропоную нічого нового — б’юся об заклад, що більшість дизайнерів іконок працюють так протягом багатьох років. Я також довго працював з векторними фігурами, але після появи сетчаточного дисплея перестав їх використовувати від випадку до випадку і тепер створюю весь дизайн виключно у векторі.

Прості елементи я малюю безпосередньо в Фотошопі з допомогою квадрата або прямокутника із закругленими краями. Для кіл застосовую прямокутник з округленими краями з великим радіусом, тому що інструмент еліпс не прив’язується до пикселів.

Більш складні об’єкти малюються в Ілюстратора і потім додаються в Фотошоп у вигляді Shape Layer. При вставці будьте обережні, так як фінальний результат не завжди правильно вирівняно — часто половина пікселя «з’їжджає» по осях Х, Y або по двох осях відразу. В якості рішення я можу порадити збільшити документ, прокрутити його інструментом Hand tool і вставити заново. Повторюйте до тих пір, поки не досягнете правильного вирівнювання. Так, це зводить з розуму, але працює після декількох спроб. Другий варіант полягає у збільшенні документа до 200%, виборі шляху (Path) з допомогою Direct Selection Tool (A) і зсуву в потрібну сторону одним натисненням кнопки зі стрілкою. У цьому випадку фігура зрушиться рівно на 0,5 px (прим. пер. ця проблема описана в іншій статті).

Ще більш складні об’єкти, які потребують декількох кольорів, малюються теж Ілюстратора піксель в піксель і потім вставляються в Фотошоп у вигляді Smart Object. Це крайня міра, тому що пізніше такий об’єкт важче редагувати.

Якщо вам потрібно зображення текстури, є три варіанти: використовувати окремий шар візерунка (Pattern), в стилі шару вибрати Pattern Overlay або створити растровий шар подвійного розміру, а потім перетворити його в Smart Object. Зазвичай я волію використовувати стилі шару (Layer Style), але майте на увазі, що при масштабуванні всього документа візерунки збільшуються з використанням бикубической інтерполяції. В цьому випадку можна створити 2 варіанти візерунка і змінювати його вручну. Трохи втомлює, але цілком можливо, головне — не забудьте це зробити.

Збільшення

Ваш документ повинен збільшуватися точно в 2 рази без сучка і задирки.

У мене є дія для Фотошопа (Action), яке створює новий знімок (snapshot) з історії та збільшує зображення до 200% одним кліком миші. Тому якщо ви все зробили правильно, то збільшення зображення в 2 рази, його редагування і зворотне зменшення не має нічого зіпсувати. При виникненні проблеми ви завжди можете повернутися до створеного знімку. Зате вам не доведеться синхронізувати зміни у двох різних документах. Один файл — це величезна перевага.

Попередження: стилі шару повинні містити тільки цілі значення. Так що якщо ви для подвійного розміру зображення виберіть зміщення тіні на 1px, при зменшенні до оригінального розмір значення не зміниться, адже 0,5 px не буває. У разі специфічних змін для збільшену версію доведеться завести окремий файл.

Експорт, експорт, експорт

А тепер про погане. Експорт всіх зображень може бути надзвичайно стомлюючим. Slice і Layer Comps мені не допоможуть — для кожного стану програми його екрану у мене існує окремий каталог, тому приховувати і показувати елементи простіше простого.

А це, здається, краща методика для експорту: приховуємо всі верстви, які не повинні бути видні, виділяємо видимі елементи, об’єднуємо їх і копіюємо в новий документ. Веселощі закінчується, коли вам потрібно експортувати сотню зображень.

При збереженні графіки для сетчаточного дисплея проблема посилюється, тому що потрібно експортувати в 2 рази більше зображень, причому обидва розміру повинні точно відповідати один одному.

Ось найкраще рішення, яке я придумав:

  • Створіть дизайн для звичайного розміру (1х).
  • Використовуйте Edit->Copy Merged (Cmd+Shift+C) для збереження всіх 1х-зображень.
  • Створіть дублікат всієї папки, що містить 1х-зображення.
  • За допомогою Automator додайте суфікс @2x для всіх файлів.
  • Відкрийте кожну @2x-картинку і запустіть дію Scale by 200% в Фотошопі. Тепер у вас буде файл з правильною назвою та розміром, але розтягнутим вмістом.
  • Збільште оригінальний дизайн в Фотошопі на 200%.
  • З допомогою Copy Merged вставити елементи в подвійному розмірі кожний @2x-документ, вимкніть розтягнуте вміст, виконайте Save for Web і перезапишіть файл.

Експорт шарів

Іноді на допомогу може прийти сценарій Export Layers To Files, який знаходиться в меню File->Scripts. Це особливо корисно, якщо ви експортуєте багато іконок або зображень, які мають однаковий розмір і можуть бути розташовані на окремих шарах в новому документі.

Action Workflow

Всі дії (Action) і процеси (Workflow), які я сам використовую, можна завантажити нижче. Процеси для Automator для швидкого доступу можна розмістити на панелі Finder, щоб вони не займали місце в Доці.

Bjango Actions and Workflows.zip

Спасибі Apple за те, що вони вибрали подвійне дозвіл для iPhone 4 і використовували техніку «resolution independent». Зараз процес і так складний, а якщо б вони зупинилися на дробовому масштабі для екрану, все стало б набагато гірше.

Продовження слідує…