Bookmark and Share

Я хотел бы сдержать обещание и продолжить публикацию переводов интересных заметок для дизайнеров и создателей мобильных приложений, которые собирал в течение долгого времени. И сегодня у нас в программе первая часть статьи «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,5px не бывает. В случае специфических изменений для увеличенной версии придется завести отдельный файл.

Экспорт, экспорт, экспорт

А теперь о плохом. Экспорт всех изображений может быть чрезвычайно утомительным. 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». Сейчас процесс и так сложный, а если бы они остановились на дробном масштабе для экрана, все стало бы намного хуже.

Продолжение следует…


Читайте также: