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

Adobe Muse CC

  • Алексей Клецель
  • 16 сентября 2013 г.
  • 22675

Adobe Muse CC


Тот факт, что в HTML изначально не было разделения на структуру и дизайн, на долгие годы затормозил создание по-настоящему удобных и при этом гибких визуальных редакторов сайтов. Даже такой сильный инструмент, как Adobe Dreamweaver, требует, как минимум, редакции кода, хорошего понимания строения HTML и CSS. И вот после нескольких лет разработки Adobe наконец «выкатывает» совершенно новую программу, позволяющую строить сайты в стиле… InDesign. 

Теперь даже дети знают, что InDesign — лучшая и очень удобная программа вёрстки. Об этом информировано также руководство Adobe, которое несколько лет назад выделило из команды разработчиков InDesign особый отдел. Именно он занялся созданием InDesign-подобной программы для веб-разработок. Этим объясняется поразительное сходство «ребёнка с соседом» — подобие Muse и InDesign. Логика ясна — знакомый интерфейс, метод действия и даже горячие клавиши помогут пользователям InDesign применить свои навыки в новой программе. Также Adobe с 1999 г. продвигала сам InDesign, который был по сути смесью лучшего из QuarkXPress и Illustrator, приправленной новыми функциями. Таким образом, мы получили хоть пока и простенькое, но удобное в освоении и уже применимое для реальной работы средство построения сайтов. Но, что важно, без необходимости отличать <img> от <div>.

Планирование

Среда планирования сайта

Интерфейс Muse поделен на пять разделов: Plan, Design, Preview, Publish и Manage — в соответствии с логикой и этапностью разработки. В режиме планирования мы имеем дело с окном, где вверху располагаются страницы, внизу — мастера. Да-да, это прямо как в InDesign: мастера можно присваивать страницам и другим мастерам простым перетаскиванием на миниатюру страницы или другого мастера. Страницы добавляются по бокам от существующих, а также вниз. Получается иерархическая карта сайта. 

Разделы Muse

Вы можете задавать модульную сетку с прилипанием к ней объектов за счёт знакомой по другим «адобовским» программам функции Smart Guide. «Умные направляющие» напоминают таковые из InDesign и чрезвычайно полезны в работе. На мастерах можно добавлять, кроме прочего, элементы, которые не будут прокручиваться и смогут находиться ниже или выше прокручиваемых элементов на странице. Кроме того, в режиме планирования можно (в дополнение к основному макету) создавать версии для планшета и смартфона со связанным и синхронизируемым контентом между всеми версиями сайта. 

Надо отметить, что проект разработки сайта представляет из себя один файл .muse (и набор графики к нему), содержимое которого при публикации конвертируется на лету в HTML, CSS, JS, PNG с добавлением картинок к файлам для скачивания (ZIP, PDF и т. п.).

Импорт графики

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

Предполагается, что дизайн, хотя его можно делать и в самой программе, приносится из Photoshop или Illustrator. Пока поддержка Photoshop реализована лучше, но понятно, что будущее — за векторной графикой. Подобный подход был в свое время реализован в (светлой памяти) Flash Catalyst. Вначале тоже лучше поддерживался Photoshop, но затем была проработана интеграция с Illustrator, который и стал в дальнейшем основным средством графической поддержки Fc.

Кроме использования в Muse обычной нарезки из графических редакторов есть несколько интересных решений. Так, Muse позволяет импортировать файлы PSD-картинкой или по слоям. Идея заключается в том, что дизайнер ставит макет, сделанный в Photoshop, фоновой картинкой. Потом импортирует этот файл ещё раз по слоям и расставляет их на фоновой картинке, удаляя её после полного восстановления макета в Muse. Такого рода файлы программа будет экспортировать как PNG или JPEG — по собственному усмотрению. Растрирование элементов было опробовано ещё в InDesign для создания ePub и DPS-проектов. Будем надеяться, что в будущих релизах Muse нам позволят управлять выбором формата и параметрами растрирования. А там и создание SD- и HD-контента из одного оригинала не за горами...

Мало того, в Muse совершенно нормально поставить картинку, уменьшить, маскировать, если надо, инструментом Crop, и так оставить. Программа сама создаст из PNG или JPEG изображение финального размера и экранного разрешения. Таким образом, создавая, скажем, галерею изображений, уже не обязательно отдельно возиться с миниатюрами. 

Дизайн графических и текстовых элементов

Из собственных инструментов в Muse имеются: прямоугольник, возможность задавать ему и импортированной графике контур, градиент, закруглённые углы, прозрачность, три эффекта. Все перечисленные параметры, а также настройки обтекания объекта и полей вокруг него (padding) можно сохранить как Graphic Style. Прямо как в InDesign или Illustrator — выбрав образец и щёлкнув по кнопке на соответствующей палитре. При изменении объекта, присвоенного к стилю, напротив последнего появляется знак +. Дизайнер может убрать изменения командой Clear Overrides (как в InDesign) или может нажать на стиль с плюсом правой кнопкой мыши и сделать Redefine Style, обновив стиль и изменив характеристики присвоенных ему объектов в масштабе всего сайта.

А ещё к вашим услугам палитры Transform и Align. Куда без них? Последняя функционально практически идентична таковой в Illustrator. Передвижение, вращение объектов, их размеры — всё в пикселях. Пока не реализовано задание относительных величин (процентов или Em). Зато есть прикрепление объектов к верхнему, нижнему краям браузера и по углам. Можно также задать прозрачность и выбрать эффекты: тень, фаска, свечение и параллакс-прокручивание. Последнее добавлено уже в СС-версии (я начинал работать с программой ещё до эпохи CC) и представляет из себя возможность задать разную скорость передвижения объектов при вертикальном прокручивании страницы. Таким образом, прокручивание основного материала страницы может двигаться с одной скоростью, а, скажем, фоновые элементы с более низкой, создавая что-то вроде стереоскопического эффекта.

Уже реализованы возможности работы с типографикой. Хотя ещё нет таких простых функций, как изменение регистра в прописные, — текст приходится перенабирать или копировать в нужном регистре из InDesign. Muse может работать с тремя типами шрифтов: Web Safe Fonts, Web Fonts и System Fonts.

Web Safe Fonts — список шрифтов, установленных на всех системах. Это то, на что мы полагались от начала эпохи «развитого» интернета.

Web Fonts — подключаемые шрифты. В Muse доступна библиотека бесплатных шрифтов Adobe Edge Web Fonts, включающая в себя и некоторые шрифты из Adobe Typekit и Google Web Fonts. Коммерческие шрифты из библиотеки включенного в Creative Cloud сервиса Adobe Typekit можно также использовать и в Muse, но пока это не стандартная возможность и выполняется с помощью несложной манипуляции с кодом.

System Fonts — остальные установленные шрифты; будут экспортированы как растровый файл.

Ну и, конечно же, текст сохраняется в стилях. Подобно другим «адобовским» программам, имеются два типа стилей: Paragraph и Character Styles. Стиль создается очень просто: делается пример и сохраняется в палитре. Редакция стиля (Redefine Style) делается методом, описанным выше. Из опций стиля есть только список присвоенных ему атрибутов, имя и тэг. Имена всех типов стилей желательно (хоть и не обязательно) набирать строчными буквами. С пробелами система справится сама, заменив их на дефисы в CSS. В абзацных и символьных стилях есть определённый выбор тегов. Однако, даже если вы ничего не понимаете в HTML, на установках по умолчанию это всё равно будет работать (<p> для абзацных и <span> для символьных). И наконец, еще раз подчеркну, что система стилей глобальная, работает на уровне всего проекта.

Интерактивность и виджеты

У каждого объекта (не только у кнопок) может быть четыре состояния: Normal, Rollover, Mouse Down и Active. Можно делать несколько тем оформления ссылок. Внутренние ссылки создаются простым выбором страниц сайта из выпадающего меню, где они представлены в соответствии с иерархией сайта. Также есть возможность легко и просто расставлять якоря и ссылки к ним.

Редакция компонента навигации

Кроме ссылок есть готовые модели навигации. В палитре Widget Library, раздел Menus есть заготовки вертикальной и горизонтальной панелей навигации. Суть этих панелей в том, что они умеют работать с иерархией сайта. Причём дизайнер сам решает, показывать ли только первый уровень или выпадающие меню подразделов. Также можно исключать страницы из навигационного меню.  Упомянутая палитра Widget Library по сути — библиотека готовых интерактивных компонентов: несколько типов слайдшоу, формы (бланк с заполняемыми полями), два типа меню, аккордеон, панель вкладок (Tabbed Panel), презентации, лента новостей и пр. Можно предположить, что Adobe будет не только расширять список, но, возможно, даст подключать сторонние компоненты. 

Выбор интерактивнных компонент в палитре Widgets Library
Редакция готового компонента: замена картинок, текстов, изменение относительного местоположения и настроек

Несколько слов по поводу бланков. Набор заполняемых полей требует поддержки сервера. В Muse это решено с помощью сервиса Business Catalyst, доступ к которому получают все, у кого есть абонемент на Creative Cloud (а значит, и Muse). В текущей версии Muse CC электронные заполняемые формы могут быть «завязаны» не только с хостингом Business Catalyst, но и с любым другим хостингом, главное, чтобы хостинг поддерживал PHP.  

Внедрение HTML и метаданных

Можно ставить и другие решения для форм. Технически это будет выглядеть как вставка HTML-фрагмента. Сервис, например, Wufoo, на котором вы собрали форму, отдает её в качестве HTML-кода, который вставляется в Muse командой Insert HTML. Этим способом можно принести массу компонентов, которых нет в Muse в готовом виде: виджет карт, YouTube-виджет, код Google Analytics и т. п. В программе везде есть возможность задавать метаданные для элементов и страниц, что помогает SEO-оптимизации.

У Adobe есть ещё одна перспективная разработка — анимационный редактор Edge Animate. Как и Muse — это совершенно новая программа, создающая анимацию и интерактивный контент в формате HTML/CSS/JS визуальным методом, почти или совсем без ручного кодирования. Кроме прочего, она прямо предназначена для работы с Muse. Из Edge анимация экспортируется как файл OAM (Edge Animate Deployment Package) и вставляется в Muse как картинка. Просто, как открыть дверь холодильника!

Предпросмотр и публикация

На любом этапе дизайнер может нажать на панели сверху кнопку Preview и посмотреть, как будет выглядеть страница и весь сайт. Другой вариант — на лету сгенерировать код и открыть сайт или страницу в браузере. В плане публикации предлагается три варианта: можно сохранить как HTML-код вместе с используемыми изображениями и ресурсами, опубликовать на любой хостинг с помощью прямой загрузки на FTP или использовать для публикации сервис Business Catalyst. Выше сервис Business Catalyst упоминался в связи с формами. Кроме форм и хостинга он предоставляет решение по статистике посещаемости и возможность дать клиенту править тексты и картинки прямо в браузере! Впоследствии дизайнер сможет в Muse синхронизировать отредактированные клиентом данные в Business Catalyst со своим проектом.

Вердикт

Я перестроил свой сайт kletsel.com с помощью Muse. Имеющееся представление о веб-разработке помогло мне сделать более корректное с точки зрения браузера решение. Но в Muse можно легко обойтись и без «подкручивания» — в этом суть и преимущество нового редактора.  Все прошлые программы генерации HTML грешили генерацией путанных файлов с массой мусорного кода. Поэтому я попросил опытного веб-программиста посмотреть, что там нагенерировал Muse. К изумлению публики в моём лице программист отметил, что код на удивление чист и прост и (внимание!) вполне пригоден для последующей редакции человеком. В дополнение к перечисленным возможностям публикации, в Muse есть возможность экспорта сайта как папки со всеми HTML, стилями, скриптами, картинками и пр. Проще говоря, дизайнер теперь сам может оформить и сверстать сайт без обязательных знаний HTML-вёрстки. Не чудо ли?

Прошло лет пятнадцать (а это ничто по сравнению с вечностью) с момента появления Microsoft FrontPage — первого WYSIWYG-редактора сайтов, как дизайнеры получили действительно удобный и простой инструмент веб-разработки. Он позволяет не заниматься тегами, структурой и валидацией, а сконцентрироваться на том, что дизайнеры умеют лучше всего, — дизайне.

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

 

ПОХОЖИЕ СТАТЬИ
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. Тайный Покупатель — о ценах и сроках изготовления журнала.


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