Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс

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

Чтобы создать смарт-объект в 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 могло бы показать все артефакты.

Техники для экспорта изображений из Photoshop

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

Сохранение изображений во многих масштабах, которые требуют 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

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

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

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

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

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