Как мы говорили, некоторые устройства уже имеют дисплей с высокой пиксельной плотностью. И мы видим, что выпускаются мобильные устройства с еще более высоким PPI. Весьма вероятно, что мы увидим настольные ПК и лэптопы с высоким PPI –Windows, Mac OS X и Сеть в целом будут следовать одной тенденции – мобильности.

Мы находимся на переломном этапе. Старые экраны с низким PPI еще будут использоваться какое-то время, поэтому нужно поддерживать экраны и с высоким, и с низким PPI. Разные платформы осуществляют этот процесс с небольшой разницей. Но, как правило, вам потребуется полный комплект изображений для каждой пиксельного плотности, с которой собираетесь работать.

 

iOS

Для разработки под iOS компания Apple подобрала две дисплейные плотности и поэтому два масштаба пользовательского интерфейса (UI). Новейшие дисплеи имеют в точности удвоенное пиксельное разрешение от устройств раннего поколения. Для iPhone его значение163 PPI для ранее выпущенных моделей. А для дисплеев iPhone 4 Retina и последующих моделей – это 326 PPI.

Для масштабирования это идеальное решение, потому что все, что создано с правильными техниками для малого размера, будет отлично масштабироваться на дисплее Retina. Однако вам понадобятся два полных комплекта изображений: один для дисплеев не-Retina, другой для дисплеев Retina. Apple добавляет @2x к названиям файлов с изображениями для дисплеев Retina. Поэтому myimage.png должно выглядеть как [email protected].

Таким образом, если ваши первоначальные файлы не для размеров дисплея Retina, то Retina они должны быть отмасштабированы до 200 %.

 

Android

Операционная система Android схожа с iOS, за исключением того, что она имеет четыре пиксельных плотности вместо двух. Это потому что Android используется в огромном спектре устройств. Android представляет следующие разрешения:

• 120 PPI (низкая плотность),

• 160 PPI (средняя плотность,

• 240 PPI (высокая плотность),

• 320 PPI (сверхвысокая плотность).

Интерфейсы для всех устройств с системой Android масштабируются на основе одного из этих разрешений. Чтобы поддерживать все четыре вам понадобится полный комплект PNG изображений для каждого. Android устройства с низким разрешением – явление нечастое. Поэтому вы, скорее всего, станете поддерживать только три другие плотности. Если изначально ваш дизайн настроен на 160 PPI, потом вам нужно будет изменять масштаб до 100, 150 и 200 %.

 

Windows Metro

Подобно системе Android, Windows Metro была разработана для размещения в широком спектре устройств, так что здесь тоже понадобится большое количество изображений. Исходники для Windows Metro создаются под 100, 140 и 180 %, если только не используется масштабируемая векторная графика (формат SVG).

 

Mac OS X

Хотя и непровозглашенная, система MacOS X очень похожа на модель для iOS и работает с дисплеями не-Retina и Retina с настройками изображений в 100 и 200 %. Где это уместно, можно использовать для интерфейсных элементов Mac Os X PDF изображения, где в одном файле находятся два размера.

 

Сайты и веб-приложения

Немного неясно, как будут обрабатываться дисплейные пиксельные плотности в вебе в дальнейшем, но применяемые методы, скорее всего, будут очень похожи на методы iOS, Android, Windows Metro и других «родных» платформ.

Некоторые сайты уже включают множество изображений, базирующихся на PPI дисплее, похожем на iOS, Android и Windows Metro. Другие дизайнеры пытаются рисовать все с помощью кода, используя CSS и SVG изображения или встраивая пиктограммы и глифы в шрифтах, поэтому и наборы изображений не требуется.

Рисунок 7.4. Избегайте растровых изображений и всегда используйте векторные формы и эффекты

Очевидно одно: так как дисплеи с высоким PPI становятся более распространенными, придется усовершенствовать разные методы для веба. Любой дизайн будущего нужно создавать так, чтобы можно было изменять масштаб во многих размерах. Итак, как же мы можем добиться этого с помощью Photoshop?

 

Масштабируемые документы Photoshop

Когда дело дойдет до создания элементов, которые легко масштабировать в Photoshop, избегайте растровых изображений. Растровые изображения по своей природе – это сетки с квадратными элементами изображения (пикселями). Это означает, что нельзя добавлять детали, когда растровое изображение расширяется, потому что дополнительных деталей нет (дополнительные пиксели можно было бы интерполировать из соседних, но это привело бы к размытости).

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

Решение тут таково – создавать все, применяя векторные формы и эффекты, которые можно будет восстановить в любом размере. В Photoshop это значит использование однотонных, градиентных слоев с паттернами с векторными масками и стилями слоев. Это позволяет увеличить или уменьшить рисунок, а потом экспортировать его как растровое изображение с установленной пиксельной плотностью.

 

PDF, SVG, CSS и изображения с помощью кода

Другой метод поддержки разных разрешающих способностей и плотности пикселей – рисовать все, используя векторные изображения (такие как PDF или SVG) или код, либо создавать элементы с помощью CSS. В некоторых ситуациях эти методы работают очень хорошо, как правило, для простых объектов. Данные техники также подходят в тех случаях, когда размер, цвет или другие свойства объектов нужно изменять динамически.

Однако чем сложнее объекты, тем больше ресурсов они тратят. А это может привести к возникновению проблем. Повышенная потребность в ресурсах может обернуться большой проблемой для мобильных устройств. К тому же использование одного векторного SVG или PDF-изображения для всех пиксельных плотностей означает, что вы не сможете проконтролировать, как выглядит результат в каждом размере. А это может быть более важным при изменении масштаба для размера, промежуточного заданным рядам 100, 150, 200 %.

Изображение в SVG или PDF с масштабом в 200 % будет выглядеть ярко и четко, но уменьшение его до 140, 150 или 180 %, вероятнее всего, «размоет» резкость.

Однако прежде чем углубиться в техники Photoshop, давайте подготовим наше рабочее поле.

 

Рисунок 7.5. Решайте, с чего начнете новый документ: с маленькой пиксельной плотности с увеличением масштаба или наоборот

Начинаем работу над новым проектом в Photoshop. Вы хотите подогнать ширину и высоту вашего документа под размер конечного сайта или приложения. В нашем случае мы разрабатываем iPhone приложение в «портретной» ориентации. Поэтому мы начинаем с холста размером 320 × 480 пикселей. В качестве отправной точки я выбрал пиксельное плотность не-Retina iPhone (т. е. меньшую), потому что предпочитаю разрабатывать на исходном размере. А затем уже увеличиваю масштаб и экспортирую в 2× изображения, чтобы иметь возможность прикрепить объект изображения к пиксельной сетке, и я люблю, когда достаточно рабочего пространства. Это личный выбор, а вы, может быть, захотите начать с больших размеров дисплея Retina с уменьшением масштабов. У каждого метода есть свои за и против, и вам нужно было бы принять аналогично решение, если бы вы разрабатывали приложения Android, Windows Metro или сайты для дисплеев с высокой и низкой плотностью.

 

Пиксельная сетка

Начало работы с маленького размера гарантирует, что все, что вы делаете, «привязано» к сетке с шагом в 1 пиксель. Если бы мы начали с размера 2×, это означало бы, что нам нужно использовать только четные величины: четное позиционирование, четную высоту, ширину и четные величины стилей слоя. В противном случае, при уменьшении масштаба нечетные величины (1, 3, 5 и т. д.) сократятся на половину пикселей (0,5; 1,5; 2,5), что приведет к размытым очертаниям или ошибке округления.

Рисунок 7.6. Увеличение масштаба до точных кратных величин всегда срабатывает. Уменьшение масштаба может вызвать проблемы

 

Размер предпросмотра

Работа в масштабе 1× означает, что превью 1:1 (где 1 пиксель на дисплее вашего компьютера отображает 1 пиксель в вашем дизайне) на дисплее вашего компьютера будет выглядеть меньше. В некоторых случаях это жизненно важно, потому что дисплей может быть недостаточно большим, чтобы сделать полный «портретный» предпросмотр на дисплее iPhone Retina (960 пикселей высотой плюс пространство для строки меню, окна и нижней панели). С дисплеем Retina на iPad ситуация становится только хуже.

Я знаю не так уж много дисплеев, которые могут вместить 2048 пикселей вертикально. Современный 27-дюймовый дисплей Mac Cinema имеет высоту в 1440 пикселей, поэтому даже если у вас большой монитор, вы не сможете увидеть экран для Retina iPad необрезанным. Retina iPad имеет 3,145,728 пикселей – гораздо скромнее по сравнению с 27-дюймовым дисплеем Cinema в 3,686,400 пикселей. Но как только выйдут в свет компьютеры с высоким PPI, предварительный размер уже не будет проблемой.

 

PPI документа

Вы могли заметить, что новый документ задается с разрешением в 72 PPI. Возможно, это выглядит несколько парадоксально, так как не увязывается с пиксельным плотностью устройства. Так или иначе есть причины работать именно с этой величиной.

Допустим, что один ваш документ имеет 100 PPI, а другой – 200 PPI. Если вы воспользуетесь функцией Copy Layer Style (Скопировать стиль слоя) на слое в документе с 100 PPI и Paste Layer Style (Вставить стиль слоя) на слое в документе с 200 PPI,стиль слоя изменит масштаб. Тень размером в 1 px (пиксель) превратиться в двухпиксельную.

Вроде бы разумно с точки зрения Photoshop, но, возможно, не то, что вам нужно. Вот почему: если вы внимательно следите за PPI вашего документа, то могли бы установить ваши iPhone-документы на 163 PPI или 326 PPI, а ваши iPad-документы – на 132 PPI и 264 PPI.

Если вы работаете над приложением, которое подходит и для iPhone, и для iPad, велик шанс, что вы будете копировать элементы и стили слоя между вашими макетами под iPhone и iPad. Если разрешение PPI вашего документа устанавливается в соответствии с устройствами, ваши стили слоя каждый раз будут изменять масштаб на 20 %.

Это не проблема для однопиксельных теней, когда они будут округляться больше или меньше до ближайшего пикселя и, скорее всего, такими и останутся. Но любая величина больше 5 пикселей будет масштабироваться, и вам захочется узнать, почему элементы слегка смещены после своего копирования между документами. То же самое происходит и с устройствами Android или Windows Metro.

Итак, как обсуждалось раньше, плотность изображения не имеет значения для веба и приложений. В расчет берутся размеры пикселей конечного изображения, а не PPI, которое вы настраиваете в Photoshop. Поэтому я настоятельно рекомендую всегда задавать документы на 72 PPI. Это сделает создание Photoshop-документа более предсказуемым.

 

Цветовой профиль

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

В мире печати управление цветом включает в себя калибровку всего технологического процесса, от сканера или цифровой камеры до дисплея компьютера, от пробного оттиска до готовой печатной продукции.

Это может показаться невыполнимым, особенно когда устройства используют разные цветовые пространства – подгонка под устройства RGB и CMYK печально известна своей сложностью.

При разработке дизайна и редактировании для ТВ обычно применяется калибровка главного редакционного видеотерминала и использование контрольного видеомонитора. Пробное изображение в реальном времени показывает, как оно будет выглядеть на обычном домашнем телевизоре.

В этих сценариях рекомендуется управление цветом, которое предлагает много преимуществ.

При разработке веб-приложений и интерфейсов приложений, ситуация несколько иная. Готовый продукт отобразится на том же устройстве (или том же типе устройства), на котором вы обычно создавали свои произведения: на дисплее компьютера. Однако здесь есть кое-какие сложности. Даже если устройство, на котором вы будете делать веб-приложение или интерфейс приложения будет тем же либо подобным тому, на котором вы собираетесь использовать готовый продукт, у вас будут разные ресурсы для цветопередачи: изображения (как правило, в форматах PNG, GIF и JPEG), разметка стилей (CSS) и код (JavaScript, Java, HTML, Objective-C и т. д.). Подогнать их может оказаться достаточно сложным процессом.

При разработке сайта или приложений мы хотим, чтобы цвета, отображаемые на экране в Photoshop и сохраняемые в файлах, великолепно подходили к тому, что отображается в других приложениях, включая Firefox, Safari и симулятор iOS.

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

 

Отключение системы управления цветом RGB в Photoshop

Чтобы отключить систему управления цветом RGB в Photoshop, выберите Edit → Color Settings (Редактировать → Настройки цветов) и установите рабочее пространство для RGB на Monitor RGB. Убедитесь, что цветовой профиль каждого документа, с которым вы работаете, настроен на положение Don’t Color Manage This Document (Не управлять цветом этого документа). Это делается с помощью выбора Edit → Assign Profile (Редактировать → Назначить профиль) или с помощью конфигурации дополнительных опций при создании нового документа. Если вы не будете делать этого для каждого документа, с которым работаете, цвета будут неправильно отображаться в самом редакторе Photoshop.

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

Рисунок 7.7. Отключение системы RGB в Photoshop помогает избежать настройки цвета Photoshop на экране или в сохраненных файлах

Рисунок 7.8. С опцией Assign Profile (Назначить профиль) в значении «Не менять» вы изменяете то, как ваш документ будет отображаться на экране, не затрагивая цветовые данные

Рисунок 7.9. При сохранении файлов через опцию Save For Web (Сохранить для веба) в Photoshop, убедитесь, что Convert to sRGB (Преобразовать в sRGB) отключена, также и когда сохраняете в формат JPEG. Иначе вы измените цвет и вызовете несовпадение величин

А вот опция Convert to Profile (Преобразовать профиль) – это нечто иное. С ее помощью можно не только назначить цветовой профиль документа, но и попытаться сохранить вид вашего изображение таким же и на экране. Это достигается путем обработки цветовых данных в каждом файле для каждого пикселя. Преобразование в новый профиль, скорее всего, будет поддерживать способ, каким документ появится на экране, но данные, хранящиеся, в файле будут изменены навсегда. Поэтому используйте эту опцию с осторожностью.

Если вы копируете слой из одного Photoshop документа в другой, проверьте, чтобы для обоих был назначен один цветовой профиль. Если этого нет, то информация о цвете может быть разрушена, так как она перемещается между документами. Вам также нужно убедиться в том, что опция View → Proof Colors (Вид →Цвета пробного отпечатка) отключена. Если нет, то опция Proof Colors изменит способ отображения цветов в вашем документе. А это значит, что они не подойдут другим приложениям.

И, наконец, при сохранении файлов опцией Save for Web (Сохранить для веба), посмотрите, отключена ли Convert to sRGB (Преобразовать в sRGB). Если она активирована, то изображение преобразуется из текущего цветового профиля в цветовой профиль sRGB, таким образом, изменяя цветовые значения, внося деструктивные изменения в файл и вызывая несоответствия с закодированными цветами.

Если вы сохраняете файл в формате JPEG, то также отключите опцию Embed Color Profile (Вставить цветовой профиль) (в некоторых случаях для фотографий вы, возможно, захотите ее оставить и отключить для элементов интерфейса и пиктограмм).

Если вы пользуетесь Adobe Illustrator вместе с Photoshop и стремитесь к тому, чтобы ваши цвета оставались неизменными, когда вы вставляете элементы между ними двумя, тогда вам нужно установить Illustrator с такими же настройками.

Рисунок 7.10. При создании интерфейсов всегда устанавливайте цветовой профиль документаIllustrator в положение Don’t Color Manage this Document (Не управлять цветом этого документа) через Edit → Assign Profile (Редактировать →Назначить профиль)

Рисунок 7.11. Установите положение Don’t Color Manage This Document для каждого Illustrator документа, с которым вы работаете. Также отключите View →Proof Colors

Рисунок 7.12. Сохраняя файлы с опцией Save For Web And Devices (Сохранить для веба и устройств) в Illustrator, проверьте, чтобы опция Convert to sRGB (Преобразовать в sRGB) была отключена

 

Отключение системы управления RGB в Illustrator

Система управления цветом в Illustrator очень схожа с Photoshop, в случае, если настройки производятся для дизайна под веб или экранные приложения. Для отключения системы управления цветом RGB в редакторе Illustrator перейдите к опции Edit → Color Settings (Редактировать → Настройки цвета) и установите рабочее пространство для RGB на Monitor RGB. Проверьте, чтобы в каждом документе, с которым вы работаете, цвет профиля был установлен в положение Don’t Color Manage This Document (Не управлять цветом этого документа). Для этого выберите Edit → Assign Profile (Редактировать→Назначить профиль). Это должно быть сделано для каждого документа, с которым вы работаете.

Вам также нужно отключить View → Proof Colors (Просмотр→Цвета пробного отпечатка). Если не сделаете этого, Proof Colors изменит способ отображения цветов в вашем документе. А это значит, что они не подойдут другим приложениям. При сохранении файлов опцией Save for Web (Сохранить для веба), посмотрите, отключена ли опцияConvert to sRGB (Преобразовать в sRGB).

 

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

Рисунок 7.13. Пиктограмма выше – один векторный слой, созданный из нескольких контуров

Почти любая сложная фигура может быть создана с использованием комбинаций фигур Photoshop (прямоугольник, закругленный прямоугольник, эллипс, многоугольник, линия и произвольная фигура).

Рисунок 7.14. Фигуры Photoshop «Прямоугольник» и «Закругленный прямоугольник» допускают четкие края на всех сторонах. Чекбокс Snap to Pixels можно найти в окне опций, как правило, вверху экрана

 

Привязка к пиксельной сетке

Фигуры «Прямоугольник» и «Закругленный прямоугольник» имеют хорошо скрытую опцию, которая позволяет им прикрепляться к пиксельной сетке, обеспечивая четкие края всем сторонам. Кнопку-флажок Snap to Pixels (Попадать в пиксели) можно найти в панели опций (Option bar), обычно вверху экрана.

К сожалению, у фигуры «Эллипс» нет опции Snap to Pixel (Попадать в пиксели). Если вам нужно нарисовать пиксельный круг, вам поможет в этом «Закругленный прямоугольник с большим радиусом угла».

 

Устранение проблем с вращением

Вращающиеся слои в Photoshop при 90 или 270º с выбором опций Free Transform Path, Rotate 90º CW или Rotate 90º CCW в меню редактирования могут вызвать проблемы с векторными и растровыми слоями. Качество готового продукта определяется размером иллюстрации. Если слой имеет четные ширину и высоту, все хорошо.

Рисунок 7.15. Обход ошибки вращения Photoshop с помощью вращения Bjango.

Если ширина и высота нечетные, то тоже все нормально. Но если они нечетно-четные или четно-нечетные, то результат может быть похож на то, что изображено справа (см. рис. 7.15). Изменение точки вращения с центральной на верхнюю левую, верхнюю правую, нижнюю левую или нижнюю правую до вращения приведет к тому, что все останется четким после трансформации.

 

Сдвиг точек на один пиксель

При перемещении якорных точек векторных контуров Photoshop может продемонстрировать весьма странное поведение, в зависимости от того, насколько увеличен масштаб. При 100 % перемещение стрелкой подвинет вашу векторную точку точно на 1 пиксель. При 200 % перемещение продвинет точку на половину пикселя. При 300 % – на одну треть пикселя. Если вы хотите иметь прекрасные пиксельные векторные фигуры, возможно, вы предпочтете перемещать с шагом в 1 пиксель, даже если вы редактируете при увеличенном масштабе.

Рисунок 7.16. Изменение точки вращения на верхнюю левую до вращения обеспечивает поддержку качества

Мы можем воспользоваться сдвигом в Photoshop даже при 100 %. Откройте ваш документ, выберите Window → Arrange → New Window для создания второго окна документа. Потом вы сможете изменить размер нового окна и переместить его куда-нибудь.

В оригинальном окне редактируйте как обычно, и увеличивайте масштаб так, как вы хотите.

Если вам нужно переместить точку, просто нажмите команду Command + `, чтобы включить окно, в котором выставлен масштаб 100 %, переместите элемент с помощью кнопок клавиатуры, потом нажмите Команду Command + `, чтобы переключить обратно. Так как другое окно показывает изображение в масштабе 100 %, перемещение сместит выбранные векторные точки точно на 1 пиксель. Немного неудобно, но гораздо быстрее, чем уменьшать масштаб до 100 %, а потом наоборот, чтобы отредактировать тонкие детали.

Как бы то ни было, перетаскивание якорных точек векторных контуров мышкой прикрепляет их к пиксельной сетке. А удерживая Shift с использованием стрелок курсора при перемещении всегда продвигает элемент на 10 пикселей, неважно насколько вы увеличили масштаб.

 

Заливка и тени добавляют дизайну тело и форму, при этом элементы выглядят натурально, как будто в трехмерном измерении.

Приподнятые выпуклые элементы своим видом показывают, что их можно нажать. Впалые элементы выглядят так, как будто их вырезали. Тени указывают высоту, структуру взаиморасположения и иерархию. Эти важные «подсказки» при быстром просмотре показывают, как функционирует пользовательский интерфейс, играя на нашем опыте с реальными объектами и освещением.

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

Как в Photoshop, так и в Illustrator, заливка часто завершается градиентами. В Photoshop это лучше всего достигается при применении опций Gradient Fill Layers (Слой заливки градиентом) или Gradient Layer Styles (Градиентные стили слоя), потому что они могут масштабироваться безгранично. В Illustrator заливка градиентом может применяться к любому контуру.

 

Выпуклая заливка

Выпуклые фигуры выступают наружу в направлении смотрящего. Они часто выражены линейными градиентами от светлого к темному, так как свет «падает» сверху. Выпуклые фигуры выглядят приподнятыми, и это отлично подходит для кнопок.

 

Вогнутая заливка

Вогнутые фигуры выглядят полыми или вдавленными и могут быть нарисованы, как линейные градиенты от темного к светлому (в противоположность выпуклым фигурам). Используя комбинацию нескольких фигур с градиентной заливкой, мы можем создать простой вид в каком-то измерении.

Рисунок 7.17. Выпуклые фигуры выступают наружу, выражены линейными градиентами от светлого к темному. Выпуклые фигуры выглядят приподнятыми, отлично подходят для кнопок

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

Рисунок 7.19. Вогнутые фигуры могут быть нарисованы как линейные градиенты от темного к светлому. Поперечное сечение (слева). Элементы с градиентной заливкой (справа)

Рисунок 7.20. Линии сверху и снизу выглядят как высеченные каналы. Углубленные линии часто используются как перегородки в пользовательских интерфейсах

 

Сферические фигуры

Сферические фигуры часто создаются радиальными градиентами. Радиальные градиенты начинаются от центра и перерастают в круговую диаграмму. В Photoshop центральная точка градиента может перетаскиваться мышкой по холсту, когда открыто окно задания градиента (для градиентных заливок) или когда открыто окно стилей слоя (для градиентов стилей слоя).

Для сферических фигур характерно отражение рассеянного света с поверхности ниже. Воспроизвести этот эффект возможно с несколькими незначительными изменениями градиентов. Использование фотографий и других исходников может помочь вам точно настроить величину контраста, который вам необходим для воспроизведения заданного материала (см. рис. 7.22).

Рисунок 7.21. Для градиентных заливок центральная точка градиента может перетаскиваться мышкой по холсту, когда градиентное окно открыто

Рисунок 7.22. Одни и те же рассеянные отражения могут существовать в других реальных объектах. Тонкое использование градиентов от светлого к темному и от темного к светлому может выглядеть впечатляюще, так же, как и добавление реализма в дизайн

 

Отраженные градиенты

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

 

Угловые градиенты

Угловые градиенты – это прекрасный способ имитации отражения окружающих предметов в металлических объектах. Как и у радиальных градиентов, центральная точка градиента может перемещаться в Photoshop при помощи мышки и курсора, когда градиентное окно открыто (для градиентных заливок) или когда открыто окно стилей (для градиентов стилей слоя).

 

Градиенты на градиентах

Комбинирование слоя заливки градиентом (Gradient Fill Layer) с градиентным стилем слоев (Gradient Layer Style) позволяет вам наложить два различных градиента, создавая более сложные и динамичные результаты. Чтобы соединить градиенты, вам нужно установить режим смешения для градиентов стилей слоя (Gradient Layer Style). Это позволит слою градиентной заливки (Gradient Fill Layer) проявиться через градиент стилей слоя (Gradient Layer Style). В примере, данном ниже, я использовал режим смешения Screen (хорошо для осветления) либо Multiply (хорошо для затемнения).

Рисунок 7.23. Центральная точка углового градиента может перетаскиваться курсором по холсту при открытом градиентном окне

Рисунок 7.24. Для комбинирования градиентов вам нужно установить режим смешивания для стиля градиентного слоя (Gradient Layer Style), т. е. Screen (хорошо для осветления) или Multiply (хорошо для затемнения)

Рисунок 7.25. Неразмытый градиент (слева) в сравнении с размытым (справа). Градиент справа выглядит более гладким (ровным)

 

Размытие градиентов

Добавление размытия в градиент дает более ровные результаты, потому что дает изысканно-узорчатый эффект или белый шум. Неразмытые градиенты часто содержат визуальную сегментацию (полосатость). Размытие даже больше важно, если ваш рисунок будет просматриваться на дешевых нематических жидкокристаллических экранах (TN LCD) c шестью битами на канал и некоторых других видах дисплеев, где присутствуют проблемы с постеризацией (приданием «плакатного стиля»). Photoshop может размывать слои градиентной заливки, а также градиенты, нарисованные с помощью градиентного инструмента, поэтому советую вам включать эту опцию. Градиенты, нарисованные в Illustrator, не могут размываться, так же как и векторные смарт-объекты (Smart Objects), которые вставляются в Photoshop из Illustrator.

Если вы используете прозрачность как часть градиента, он тоже не будет размываться, что иногда приводит к визуальной сегментации (полосатости). Для определенных случаев есть решение: если вы используете градиент с прозрачностью для того, чтобы осветлить область белым цветом, то использование неразмытого градиента с режимом смешивания слоев на экране (Screen layer blending mode) позволит вам размыть его. Та же техника применяется для затемнения, с режимом смешивания Multiply. Размытие цветов – это ювелирная работа. И подчас оно едва уловимо. В примере слева мы повысили контраст для того, чтобы выделить размытый паттерн. Градиент справа выглядит более ровным, потому что он размыт.

 

В реальной жизни большинство вещей имеет свою текстуру. Текстура может быть явно видимой (например, крупные волокна на деревянном брусе) или едва уловимой (например, тонкий узор очищенного алюминия).

Добавление текстуры может стать отличным способом при обозначении разных областей и поверхностей и придать элементам более тактильный, реалистичный вид.

Однако здесь есть небольшая сложность. Текстуры, как правило, основаны на растровом изображении, поэтому они выглядят как фотография. Как мы уже говорили, растровые изображения или растровые слои масштабируются неудачно, и их нужно избегать, где только возможно. Photoshop предлагает три способа добавления текстуры, которая также будет без разрушений изменять масштаб ваших документов: Pattern Fill Layers (Заливка слоев паттернами), Pattern Layer Styles (Стили заливки паттернами) и Smart Objects (смарт-объекты).

 

Создание паттерна

Чтобы создать паттерны в Photoshop мы можем использовать опцию выделения с помощью рамки (Marquee Selection tool) для выбора прямоугольной площади, а затем выбрать опции Edit → Define Pattern (Редактировать → Задать паттерн). После создания паттерн готов к использованию как через слой заполнения паттерном (Pattern Fill Layer), так и через паттерный стиль слоя (Pattern Layer Style).

Если вы собираетесь увеличить масштаб вашего документа, то создавать текстуру своего шаблона придется в большем, чем нужно, размере.

Если хотите проверить точно, как выглядят паттерны в определенных масштабах, то вам придется создавать версии для каждого нужного размера. Например, вы могли бы создать два шаблона для iOS текстуры: один для масштабирования в Retina-устройствах, а другой – для масштабирования в не-Retina-устройствах. Потом при экспорте всех финальных исходников изображения вы бы включили паттерны, используемые в ваших Pattern Fill Layers и Pattern Layer Styles.

 

Слои заливки паттерном

Слои заливки паттерном (Pattern Fill Layers) в точности соответствуют своему названию: это слои, заполняемые узорами. Они могут также факультативно содержать векторную маску, поэтому, даже если растровое изображение внутри слоя с паттерном смягчается при масштабировании, границы будут оставаться резкими. Двойной щелчок на миниатюру Pattern Fill Layer на панели слоев открывает опции, позволяющие вам установить масштаб паттерна независимо от масштаба документа.

 

Стили заливки паттерном

Стили заливки паттерном (Pattern Layer Styles) подобны заливкам паттерном (Pattern Fills), но применяются как стиль слоя. Это значит, что они не могут использоваться вместе с опциями Solid Color Fill Layers (Заливка слоев однотонным цветом), Gradient Fill Layers (Слой заливки градиентом) и даже с другими слоями Pattern Fill Layers (Заливка паттерном).

 

Смарт-объекты (Smart Objects)

В Photoshop смарт-объекты (Smart Objects) – это документы, расположенные внутри слоя, что дает идеальную возможность вставлять текстуру высокого разрешения в документ с низким разрешением. Смарт-объекты формируются, когда формируется их исходный файл. Смарт-объекты, созданные внутри Photoshop, формируются в их исходном размере, затем их масштаб увеличивается или уменьшается с использованием растрового масштабирования.

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

Чтобы создать смарт-объект в Photoshop, щелкните правой кнопкой мыши или кликните левой клавишей с зажатой клавишей Ctrl в слое или группе, затем выберите опцию Convert to Smart Object (Преобразовать в смарт-объект).

Смарт-объекты, созданные вставкой или импортированием файла из редактора Illustrator, по своей природе векторы, поэтому они могут масштабироваться в любой размер и, если нужно, формироваться заново. Смарт-объекты из Illustrator могут иметь множество заливок цвета, обводок и свойств, недоступных векторным слоям в Photoshop. Однако будьте осторожны: смарт-объекты из Illustrator не рисуются размытыми градиентами, поэтому у них могут быть проблемы со сглаживанием.

Чтобы создать смарт-объект из файла Illustrator, выберите File → Place from Photoshop (Файл → Вставить из Photoshop). Также возможно копирование объектов в Illustrator с последующей вставкой в Photoshop.

 

Все дизайнеры, разработчики и команды работают по-разному. Некоторые рассматривают дизайн как процесс, который проходит в параллели с разработкой. Другие – как задачу, которую лучше выполнить до написания кода. По возможности, я предпочитаю последнее, потому что могу делать быстрые итерации в дизайне без изменения кода.

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

 

Информация о шрифте

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

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

Кроме того, возможности кода – это обычно только часть того, что возможно в Photoshop. Заливка градиентом или сложные стили заливки текста в Photoshop может оказаться непростой, невозможной и нежелательной задачей в приложении или сайте.

Если вы разрабатываете дизайн для iOS, то значение 72 PPI в документе Photoshop задаст размер шрифта близкий к размеру в среде разработки Xcode: текст размером в 10 пунктов в документе Photoshop с масштабом 1х (320 на 480 пикселей для iPhone) будет эквивалентен тексту размером 10 пунктов в iOS. Но помните, что во внешнем виде текста будут некоторые различия в результате рендеринга между Photoshop и iOS.

 

Растягиваемые изображения

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

 

Изображения и плотность пикселей

Информация о PPI почти всегда игнорируется, когда изображения используются в Сети или как элементы интерфейса пользователя вприложениях iOS, Android, Windows Metro и Mac.

Тем не менее пиксельные размеры ваших изображений все-таки имеют значение, так что делайте их правильно. Для iOS проверьте, что ваши 2× изображения в точности удваивают размеры ваших 1× изображений и что элементы внутри изображений находятся в одинаковых положениях; ваши изображения Retina должны быть идентичны их меньшим аналогам, но и быть более детальными.

Помните, что изображение в формате PNG сохраняет свое пиксельное разрешение в пикселях на метр (PPM). Это может вызывать ошибки округления, когда величины преобразуются между PPI и PPM. Если вы когда-нибудь видели, как при сохранении изображения в формате PNG его разрешение изменялось с 300 до 299,999 PPI, то вы меня понимаете.

 

Сжатие PNG и приложения iOS

Обработка ваших изображений инструментами сжатия PNG, такими как OptiPNG, PNGcrush, AdvPNG или PNGOUT, может показаться классной идеей! Инструмент работает вовсю, «обрезая» килобайты и байты в каждом файле в надежде улучшить скорость скачивания приложения и ускорить запуск.

Но для кардинального увеличения производительности приложений iOS встроенная среда разработки Xcode перекодирует/пересжимает файлы PNG. Она предварительно умножает разряды альфа-канала в обратном порядке, и байты в красном, зеленом и синем каналах меняют последовательность на синий, зеленый и красный. Затем Xcode перекодирует изображения, используя утилиту PNGCrush. Результат оптимизируется для iOS, но, как побочный эффект, любое предшествующее сжатие остается необратимым из-за того, что изображения перестраиваются.

Определенно, есть причины для оптимизации ваших изображений для веба, есть хорошие инструменты, но если вы создаете приложения iOS в программной среде Cocoa и используете встроенное в программу Xcode сжатие PNG, то не получаете особых преимуществ от предварительного сжатия файлов.

 

Проверка устройств

Если вы разрабатываете дизайн для мобильных устройств, проверьте ваши готовые макеты на целевом или целевых устройствах. В этом много плюсов. Вы сможете протестировать эргономику и области нажатий, увидите дизайн в контексте, с характеристиками компоновки во всей красе. И у вас при этом будет роскошная возможность внести в разработку изменения.

Проверка устройств – дело важное, потому что типы экранов, теплота тонов, и даже субпиксельные паттерны значительно различаются. Поэтому вы, возможно, захотите «причесать» дизайн после того как увидите все на своих местах. Некоторые типы дисплеев, например AMOLED, могут выглядеть гораздо насыщеннее и с более высоким контрастом, чем обычные ЖК экраны компьютеров. Я уже не говорю о том, каким захватывающим зрелищем является просмотр вашего дизайна на устройствах.

Есть много способов посмотреть ваш готовый макет на мобильных устройствах. Сброс изображений себе на почту или использование таких сервисов, как Dropbox, срабатывают отлично, так же как и более нестандартные решения, такие как LiveView и Skala Preview. По возможности, проверяйте методом, который поддерживает качество изображения: 32-битовые PNG изображения прекрасны, но сжатие с потерями, например в формате JPEG могло бы показать все артефакты.

 

Экспорт всех изображений, необходимых для создания сайта или приложения, возможно, не самое интересное занятие в процессе разработки дизайна. Это, как правило, нудная работа, отнимающая много времени.

Сохранение изображений во многих масштабах, которые требуют iOS, Android, Windows Metro и другие платформы, еще усложняет задачу.

Но есть способы упростить или автоматизировать экспорт.

 

Скопировать объединенные данные

Разрезать ваш дизайн с помощью опции Copy Merged (скопировать объединенные данные) довольно легко: сделайте соответствующие слои видимыми, выделите элемент с помощью опции Marquee selection, выберите Edit → Copy Merged (Редактировать → Скопировать объединенные данные), потом File → New (Файл → Новый), нажмите Enter и затем Paste (Вставить). В результате получится новый документ с вашим изолированным элементом, установленном на минимально возможный размер. С этого момента все, что нужно, это сохранить изображение, используя команды Save As (Сохранить как) или Save For Web And Devices (Сохранить для сети и устройств).

Рисунок 7.26. Разрезать ваш дизайн с помощью Copy Merged достаточно легко: сделайте соответствующие слои видимыми, выделите ваш элемент с помощью опции Marquee selection, выберите Edit → Copy Merged, затем File → New, нажмите Enter и потом Paste

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

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

Вы могли бы создать экшен (операцию), который последовательно запускает опции Copy Merged, New, Paste. Это хоть немного сэкономило бы вам время и улучшило технологический процесс.

 

Экспортирование слоев в файлы

Если бы вам выпало счастье экспортировать множество одинаковых изображений (как правило, с идентичными размерами), вы могли бы использовать опцию Export Layers (экспортирование слоев в Photoshop) в Files script (Сценарий файла).

При выборе команды File → Scripts → Export Layers to Files (Файл→ Сценарии → Экспортировать слои в файлы), каждый слой вашего документа будет сохраняться как отдельный файл, с названием, которое соответствует названию слоя. Это означает, что, скорее всего, вы должны подготовить свой документ, объединив с растровыми слоями все элементы, которые хотите экспортировать. Процесс трудоемкий, но его можно ускорить, применив опцию Copy Merged. Также это может сократить итоговый файл, если вы хотите полностью удалить прозрачную область. Экспортировать слои в файлы удобно, если желаемый результат соответствует вариантам его использования.

 

Ломтики (Slices)

Photoshop-инструмент Slice tool (Нарезка ломтиками) позволяет вам определить прямоугольные участки для экспортирования в виде отдельных изображений с некоторыми ограничениями: на один документ может приходиться только один комплект ломтиков, и ломтики не должны перекрываться (если так будет, то сформируются прямоугольные ломтики меньшего размера). В 1990-е годы опция Slice tool была хорошим способом создания табличных веб-макетов, заполненных изображениями. В наши дни нам нужен более тщательный контроль над тем, как нарезаются изображения, особенно если мы хотим иметь эффективный и динамичный дизайн с прозрачными изображениями. Так или и иначе инструментом Slice tool можно отлично пользоваться.

Рисунок 7.27. С выбором команды File → Scripts → Export Layers to Files каждый слой вашего документа будет сохраняться, как отдельный файл, с названием, соответствующим названию слоя

 

Спрайты с ломтиками

Спрайты обычно используются в CSS и играх на OpenGL, где их использование может давать значительные преимущества в производительности. Спрайт – это большое изображение, которое состоит из более мелких графических элементов. При использовании спрайтов только одно большое изображение загружается в браузер, уменьшая количество HTTP-запросов. Подобное улучшение производительности происходит с OpenGL играми, где один файл, сохраненный в памяти GPU, может использоваться со ссылкой на множество меньших изображений в нем.

Рисунок 7.28. Спрайты требуют времени на создание, но они помогают автоматизировать экспортирование изображений

Рисунок 7.29. После создания спрайта с ломтиками все устанавливается корректно. Вы сможете экспортировать все изображения сразу же, используя команду Save for Web & Devices

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

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

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

Так как нас интересуют только ломтики, которые создает пользователь, возможно, вам захочется «щелкнуть» на команду Hide Auto Slices (Скрыть автоломтики) в окне опций при использовании инструмента Slice Select tool и отключить Show Slice Numbers (Показать количество ломтиков) – под Guides, Grid & Slices в настройке. Таким образом, будет удален ненужный беспорядок из Photoshop ломтиков пользовательского интерфейса. После создания спрайта с ломтиками все устанавливается корректно, вы можете экспортировать изображения сразу же, используя команду Save for Web & Devices. А чтобы убедиться, что вы все сделали как следует, вы можете увеличить масштаб до 200 %, сохранить все ваши изображения для дисплеев Retina, а потом добавить @2x к названиям файлов пакетным переименованием (или уменьшить масштаб, если вы сначала все создаете на размерах дисплеев Retina).

 

Ломтики на основе слоя

Если ваш элемент пользовательского интерфейса однослойный, а вы хотите, чтобы экспортируемое изображение было маленьким насколько это возможно, то рассмотрите использование опции Layer Based Slice. Для того, чтобы создать ломтик для выбранного слоя, используйте опцию New Layer Based Slice (Новый ломтик на основке слоя) из Layers menu (Меню слоев). Ломтики на основе слоя (Layer Based Slices) передвигаются, увеличиваются и уменьшаются вместе со слоем, к которому привязаны. Они также учитывают эффекты слоя: контуры и тени включены, и увеличивают размер ломтика на основе слоя. Меньше контроля, больше автоматизации!

 

Как я экспортирую

В течение нескольких лет я пользовался Copy Merged в качестве основного метода экспортирования и использовал Export Layers to Files, когда это имело смысл. Это был скудный выбор. Спрайты имеют так много плюсов, особенно для средних и больших проектов, что время на первоначальное их создание проходит очень быстро. Это еще более оправдано при экспорте множества комплектов изображений с разными пиксельными плотностями. Каждый комплект может экспортироваться несколькими кликами, а до проблем с названием или размером далеко благодаря автоматизированному процессу.

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

Рисунок 7.30. Отключение зеленого канала помогает увидеть разницу между макетом и настоящим приложением