101 СПОСОБ ЗАРАБОТАТЬ НА ПЕЧАТИ

Самые «трогательные» интерфейсы

  • Алексей Клецель
  • 1 апреля 2015 г.
  • 4093

Аввакум

Пророк Аввакум говорит: «Видят люди и удивляются, ибо в наши времена творятся такие дела, что вы не поверили бы, если бы вам об этом рассказали ранее». Все сегодня, от крупных корпораций до парикмахерских, надеются на то, что у клиента в кармане есть айфон (или что-то на Android или WinPhone) — современный смартфон с сенсорным экраном, интернетом и геолокацией. Для подобных устройств выпускают приложения и создают мобильные версии сайтов. Дизайнер должен адаптироваться под требования рынка, изучать подходы проектирования и дизайна сенсорных интерфейсов, новый инструментарий, новые возможности. Но можно этого не делать и рано или поздно оказаться на обочине прогресса…

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

Генератор

В конце прошлого века все производители графических редакторов внезапно озаботились интеграцией функционала для создания веб-графики. В 1999 г. в Photoshop и вскоре в Illustrator появилась функция Save for Web, позволявшая резать макет сайта для последующей сборки в таблице — самым модным тогда способом (и на самом деле единственным) контролировать взаимное расположение элементов в HTML.

Времена изменились, и многие, наверное, помнят, как однажды пару лет назад поздним вечером, когда в Калифорнии было утро, появилась в Photoshop функция Adobe Generator. Для тех, кто это событие так и проспал, поясню: Adobe Generator — это методика, позволяющая именовать слои и группы в Photoshop как файлы. А программа их будет (по команде File • Generate • Image Assets) автоматически сохранять в папке рядом с файлом проекта Photoshop. Это полезно для быстрого обновления веб-графики, а также создания версий графики для экранов разного разрешения. Например, слой под именем logo.png будет сохранён как файл PNG-24; слой logo.png8 — как PNG-8. Adobe Generator позволяет задавать имена посложнее. Так имя слоя/группы figure.jpg70, 200% figure.jpg60 сохранит слой как два файла: первый — как JPEG качества 70%, второй — увеличенный в два раза как JPEG качества 60%.

В непростом 2014 г. неутомимые адобовские программисты добавили в Adobe Generator возможность создавать вложенные папки. Для этого в имя слоя/группы надо добавить имя вложенной папки по схеме subfolder/logo.png, где на место subfolder надо подставить имя вложенной папки, которую вы хотите создать или использовать.

Извлекатор

Пока недоумевающая публика засоряла форумы вопросом: «А где Adobe Generator для Illustrator?», всё те же адобовские программисты развивали идею Adobe Generator в Photoshop. На его основе несколько месяцев назад была создана функция Extract Assets (извлечение ресурсов).

Следующий этап эволюции генератора — «извлекатор»

С «Извлекатором» достаточно просто именовать (латинскими буквами без пробелов) слои и папки, не обязательно добавлять расширения. Далее вы выделяете слои или папки, которые хотите сохранить как файлы, и выбираете File • Extract Assets. В открывшемся окне извлечения ресурсов можно назначить сохранение выделенного файла в одном или нескольких форматах. Если надо — назначить размер будущего файла в пикселях или процентах. Обратите внимание на кнопки создания копий в масштабе: вверху справа — кнопки 2x, 3x и т. п. Под шестерёнкой рядом можно также настроить, какие тут будут кнопки и какой каждая будет добавлять суффикс файлам. По умолчанию в двухкратном размере добавляется суффикс к имени @2x (стандарт Apple).

Extract Assets учитывает маски при определении габаритов будущего файла. В процессе Extract Assets переименовывает слои, добавляя расширения в стиле Adobe Generator, и наоборот — может использовать определение расширения из имени слоя, сделанное для Adobe Generator. Т. е. обе функции взаимодополняемые и взаимозаменяемые.

Особенности «Извлекатора»

Поддерживаемые форматы: PNG-8, PNG-24, PNG-32, JPEG, GIF, SVG. Примечания: PNG-32 это не CMYK, как подумали многие, узнав друга. Это PNG-24 с альфа-каналом (т. е. RGB с поддержкой прозрачности). Google определяет в спецификациях использование PNG-24 с прозрачностью именно как PNG-32. Поддержка векторного формата SVG имеет свои особенности. Так, в SVG Photoshop на текущем этапе развития может сохранять только векторные слои (shape layers). К сожалению, векторные смарт-объекты рассматриваются как растровый контент — функция Extract Assets не может «заглянуть» внутрь смарт-объекта. По этой же причине увеличение — создание файлов двухкратного размера и подобных — просто «размазывает» отображаемую версию слоя. Т. е. увеличенные версии не создаются на основе содержимого смарт-объекта. Думаю, что эта досадная особенность огорчает не только автора, но и руководство Adobe. И сейчас упорные адобовские программисты дорабатывают функцию Extract Assets. Как уже догадался читатель, временный выход — работать сразу в двухкратном размере, а функцией Extract Assets уменьшать контент.

 

Масштабируемая векторная графика

SVG — открытый формат и тоже пришелец из прошлого века. Данная технология позволяет использовать векторную графику в браузере, причём сам SVG является текстовым XML-файлом. Из последнего факта следует, что в него можно встраивать CSS и JS-код, описание объектов в SVG-коде можно вставлять в HTML (это нужно, чтобы снизить уровень энтропии Вселенной, уменьшив количество обращений к серверу и ускорив загрузку страницы). Однако из того, что SVG — это XML-файл, следует также, что он становится слишком громоздким при сохранении контента, состоящего из большого количества объектов и точек. Поэтому в SVG рекомендуется сохранять относительно несложную графику.

Хотя Adobe разрабатывает SVG давно, причём одно время он даже позиционировался как альтернатива флешу, настоящее продвижение началось только тогда, когда за дело взялся Google и интегрировал поддержку SVG в Chrome без плагина и поддержку SVG-сниппетов (фрагментов) внутри HTML. Между прочим, Muse позволяет вставлять SVG-сниппеты. Для этого достаточно в Illustrator CC скопировать объект в буфер обмена и вставить командой Insert HTML на страницу Muse.

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

Вот некоторые изменения:

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

Появилась новая функция Responsive Design. Будучи включённой, она убирает из файла абсолютные значения в размерах графики. Это позволяет пропорционально масштабировать графику в браузере.

Метод поддержки текста (Type) по умолчанию установлен на SVG, т. е. стандартный метод из спецификации формата вместо старого, подходящего для адобовского плагина поддержки SVG в браузере.

Для значения Decimal Places задано 1. Т. о. дробные координаты точек будут обозначены с не более чем одной цифрой после запятой.

Интересно, что SVG, сделанный в Photoshop, не совсем понятен программе Illustrator. В нём дизайн объектов описан с помощью внедрённых CSS стилей, в то время как сам Illustrator обычно вписывает атрибуты дизайна объекта прямо в его код. SVG, сохранённые в Photoshop, Illustrator открывает как объекты, окрашенные чёрным.

WireMagic

Из новинок, связанных с Illustrator, упомяну библиотеку WireMagic (wuwacorp.com/wiremagic/). Это библиотека графических стилей Illustrator для создания прототипов. Графические стили очень хорошо продуманы, очень гибкие в использовании. Хорошие вещи не даются бесплатно, WireMagic стоит почти 276 миллардов зимбабвийских долларов или всего 19 долларов США.

Muse, SVG и отзывчивый дизайн

Есть ещё одна тема, вокруг которой публика имеет тенденцию нервничать, — где же отзывчивый (responsive) дизайн в Adobe Muse? Один из рассказов классика ивритской литературы Йосефа Агнона повествует от первого лица, как один старый еврей из диаспоры пишет ему в Иерусалим и просит прислать горсть святой земли — положить в могилу. Но у главного героя не получается. Возможно, время ещё не пришло. Он пишет ему вновь, но на Масличной горе орудуют разбойники, и Агнон никак не может пробраться туда, чтобы набрать земли. «Время, видимо, ещё не пришло», — снова отвечает тот. Наконец Агнон сумел побывать на Масличной горе и выслать своему другу землю из Иерусалима. И вот с кораблем из Одессы приходит письмо от сыновей того еврея: он успел получить посылку, хоть и был уже при смерти, — она пришла вовремя.

С помощью палитры Content, изменяя текст в любой версии (дектопной или мобильной), дизайнер получает автоматический обновлённый текст в другой версии сайта

Так вот, время отзывчивого дизайна в Muse, очевидно, ещё не пришло. Muse — это про адаптивный дизайн. Десктопная и мобильная версии создаются отдельно и не подгоняются по ширине экрана, сайт определяет, где он показывается, а сервер отображает соответствующую версию. Надеюсь, мы получим отзывчивый дизайн в Muse задолго до того, как окажемся при смерти. И удивимся, что проектировать такой сайт будет не просто.

Тем временем разработчиками было сделано маленькое, но полезное нововведение, позволяющее легче создавать и поддерживать десктопную и мобильную версии сайта — панель Content. Перед тем, как скопировать текстовый объект в мобильную версию из десктопной или наоборот, он выделяется и в палитре Content, где ему присваивается уникальный тег. Впоследствии, изменяя текст в любой версии, дизайнер получает автоматический обновлённый текст в другой версии сайта.

Другое важное нововведение, касающееся разработки сайтов под экраны разного разрешения, — появившаяся поддержка SVG в Muse. Можно импортировать файл, а можно вставить его методом копирования из Illustrator. Смысл SVG в Muse в том, что, во-первых, векторные элементы дизайна независимы от разрешения и, во-вторых, когда таки появится отзывчивый дизайн в Muse (да и сейчас в ряде случаев), будет очень кстати способность векторных элементов без потери качества легко подгоняться под разные экраны.

И ещё хозяйкам на заметку. Muse — это программа вёрстки интерактивных проектов без кода. Она разработана для облегчения создания интерактивного дизайна. Если вдуматься, можно легко прийти к заключению, что Muse — это также отличная программа для прототипирования интерфейсов почти любого типа. Она с лёгкостью может заменить в этой области InDesign, любимый многими специалистами по UX.

Обязательный инструмент

И напоследок будет уместным упомянуть сервис TestFlight (testflightapp.com). Купленный в 2014 г. Apple и интегрированный в iTunes Connect TestFlight позволяет создавать группы бета-тестирования и направлять «билды» программ тестировщикам «по воздуху», прямо на их айфоны и айпады, минуя iTunes. TestFlight сегодня доступен прямо из iTunes Connect. На взгляд автора TestFlight — инструмент, который каждый разработчик мобильных программ должен освоить.

Развитие фиксированного макета

С тех пор как летом мы рассказывали о появлении в InDesign возможности создавать публикации ePub фиксированного макета (fixed layout), этот функционал заметно расширен. В FL ePub стала поддерживаться создаваемая InDesign анимация и объекты с несколькими состояниями (multi-state objects, MSO). Надо отметить, что генерация панелью Animation в InDesign HTML-кода (а не только флеш) была реализована ещё в InDesign CS6. Но тогда, очевидно, время ещё не пришло. Метод создания анимации, разработанный специально для целей издательства, и MSO, являющийся важным элементом в DPS, — суть важные составляющие основанных на HTML публикаций для мобильных устройств. Это делает FL ePub, как минимум, достойным внимания.

Ещё не хватает поддержки областей прокрутки, image sequence, ряда других элементов, а главное — способности InDesign экспортировать любой дизайн в FL ePub. Тем не менее массовое внедрение FL ePub, сделанных без кода, где-то рядом.

Мотивация

Легенда гласит, что проект айфона на определённом этапе был на грани срыва, потому что инженерам никак не удавалось научить телефон блокировать сенсорный экран, когда пользователь подносит его к уху. Можно представить, как они пришли с этим к Джобсу, и он сказал им что-то вдохновляющее (надо полагать, в стиле предложений, от которых нельзя отказаться), и у них получилось. Далее кучка азиатских клонеров, разобрав и изучив айфон, наделала свои такие же, только с большим экраном, с ОС от «Корпорации Добра», дешевле и, наверняка, из переплавленных печатных машин. Теперь у каждого в кармане айфон или другой смартфон с похожими возможностями, у многих — планшет, и мы просто не можем игнорировать возможность делать проекты для такой внушительной аудитории — всего мира.

Об авторе: Алексей Клецель (www.kletsel.com, alexey@kletsel.com; г. Холон, Израиль), сертифицированный эксперт и инструктор по Illustrator, InDesign и Adobe DPS.

ПОХОЖИЕ СТАТЬИ
Ricoh Ri 1000
Ricoh Ri 1000

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

Итоги 2019 года в полиграфии
Итоги 2019 года в полиграфии

Год прошёл, самое время подвести его итоги. Давайте вспомним обо всех его важных событиях в мире и России в полиграфической отрасли — от слияний и поглощений до новых продуктов, выставок и кадровых перемен.

European Carton Excellence Award 2019
European Carton Excellence Award 2019

Лучшая европейская картонная упаковка 2019 года по версии ассоциации Pro Carton.

Рабочие лошадки для рекламных производств
Рабочие лошадки для рекламных производств

Выбираем универсальный рулонный принтер (принтер/каттер) для интерьерного оформления и наружной рекламы самых популярных в рекламной индустрии форматов — с шириной печати до 183 см.


Новый номер

Тема номера — «Мобильные приложения для полиграфистов». В номере — итоги 2019 года в полиграфии, интервью с Horizon International, встреча с RMGT. «Например» о типографии PMG и Design Studio 3D. Справочник покупателя по широкоформатным (до 1,8 м) принтерам для рекламных производств. Лучшая европейская картонная упаковка. Обзор Ricoh Ri 1000. Тайный Покупатель — о ценах и сроках изготовления журнала.


Голосование
Что сдерживает переход на цифровую печать упаковки и этикетки?
    Проголосовало: 61