Прочитавши першу частину статті, переклад якої я публікував вчора, читачам захотілося з’ясувати «навіщо все так ускладнювати?» Зібравши воєдино всі питання і відповіді, у дизайнерів Bjango вийшла ще одна велика стаття під назвою «Designing for Retina display, part two».

Зберігати зображення потрібно з конкретним значенням PPI?

Немає. iOS ігнорує значення PPI, тому неважливо, що ви вибрали перед створенням основного документа — 72, 163, 326 або будь-яке інше значення. Однак, дуже важливий точний розмір зображення в пікселях. Також переконайтеся, що розміри подвійних зображень рівно в 2 рази більше звичайних картинок, а всі елементи знаходяться на тих самих позиціях — зображення для сітківки повинні бути ідентичні своїм «маленьким колегам».

Можна просто створити подвійний дизайн і зменшити його?

Немає. Пакетне зменшення, використання функції Save for Web & Devices або інших методів серйозно позначиться на якості 1х-зображень. Ось чому потрібно використовувати векторні об’єкти, стилі шару (Layer Style) та інші руйнівні ефекти.

Подивіться на зображення нижче. Версії Bicubic і Nearest neighbour істотно втратили в якості, особливо погано виглядають текст, верхній і правий краї кнопки. Я розумію, що майже весь текст буде відображений за допомогою iOS, але показовий приклад — масштабування шкодить растрових зображень.

Дійсно два набору зображень так необхідні?

Так. iOS вимагає повний набір звичайних (1х) і подвійних (2х) зображень. Якщо iOS або Xcode стисне ваші подвійні зображення, якість картинки різко знизиться. Я вище написав, чому так відбувається.

Навіщо створювати 1х-дизайн замість 2х?

Переваги є і в тому, і в іншому випадку, тому рішення буде залежати від особистих уподобань. Мені подобається спочатку працювати над дизайном для звичайних екранів, а потім збільшувати, додати фінальні штрихи і експортувати. Для мене важливими факторами є:

Піксельна сітка

Робота з 1х-дизайном гарантує прив’язку всіх елементів до одиничної піксельною сіткою. Вам не доведеться весь час використовувати парні величини в позиціонуванні, висоті, ширині і параметрах для стилів шару. Після зменшення всі непарні значення (1, 3, 5 і т. д.) округлятися, в результаті чого можуть вийти розмазані краю і нерівне позиціонування. Але якщо ви все-таки вирішили працювати з подвійним розміром, перед експортом 1х-дизайну доведеться кілька разів перевірити, що все в порядку.

Деталі

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

А ось Майк Рандл (Mike Rundle), наприклад, воліє починати з 2х і потім його зменшувати. З цим можуть погодитися безліч дизайнерів, але, так чи інакше, ваш документ повинен масштабуватися без втрати якості, дозволяє перемикатися між звичайним і подвійним розміром протягом всього процесу.

Чому б не використовувати Slices для експорту?

Slice Tool може допомогти при створенні односторінкового дизайну начебто простого веб-шаблону. Але я вважаю цей інструмент майже марним при проектуванні iOS-додатків з кількома станами. А так як всі стани у мене розкладені по окремих папках, кожен слайс (slice) навряд чи підійде для всіх можливих варіантів.

Використовувати слайсы зручно для автоматичного експорту одного гігантського спрайту з усіма графічними елементами. Але зайвий час, який ви витратите на його створення, зведе нанівець переваги від швидкого експорту. Варто відзначити, що в OpenGL-ігри спрайт потрібні набагато частіше, тому підготовка зображень для ігор може відрізнятися.

Чому не використовувати Fireworks?

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

Чому не використовувати Illustrator?

В першу чергу, Illustrator є векторним редактором. Хоча він і зручний для окремих елементів, йому не вистачає такого контролю над пікселями, які пропонують Photoshop або Fireworks. Якщо в програмі будуть використовувати тільки стандартні UI-елементи і вам знадобиться декілька простих піктограм, сміливо вибирайте Illustrator. Але це не варіант для побудови повністю кастомного UI з великою кількістю елементів.