Adobe Creative Suite 6: ставка на HTML5

Alan Stafford. Adobe Creative Suite 6: More HTML5 Power. PCWorld, August 2012, c. 34.

Новый язык разметки веб-страниц — HTML5. Ориентированный на него пакет Adobe Creative Suite 6 представляет собой коллекцию инструментов для создания и редактирования веб-страниц и мультимедийных файлов. В его состав входят 14 приложений, сгруппированных в четыре основных варианта поставки (некоторые из них включают в себя расширенные версии программ): Design Standard за 48,960 тыс. руб., Design and Web Premium за 71,554 тыс. руб., Production Premium также за 71,554 тыс. руб. и Master Collection за 97,916 тыс. руб. (цены указаны в онлайн-магазине Adobe за полные версии. — Прим. ред.) Почти все программы пакета можно приобрести и по отдельности. Приложение Photoshop (редактирование изображений) предлагается за 26,362 тыс. руб., Premiere Pro (редактирование видео) — за 30,128 тыс. руб., Dreamweaver (компоновка веб-страниц) — за 15,064 тыс. руб.

В пакете Creative Suite 6 нашли отражение самые последние технологические достижения, начиная от поддержки Photoshop CS6 и Premiere Pro CS6 аппаратных ускорителей графических процессоров и заканчивая умением Dreamweaver CS6 создавать приложения для смартфонов практически в любой ОС для мобильных устройств и переносить полученные результаты в облако. В этой статье мы рассмотрим три основных приложения пакета.

Dreamweaver CS6

Интерес веб-мастеров к мультимедийной платформе Adobe Flash уклонно падает, тогда как популярность HTML5, напротив, стремительно растет. Новое приложение Adobe Dreamweaver CS6 предлагает инструменты для создания конструкций HTML5, ориентированных на настольные и планшетные компьютеры, а также на смартфоны.

Гибкие макеты, гибкий дизайн. Постоянно увеличивается трафик всех веб-сайтов, но мобильных — особенно быстрыми темпами. Новый инструмент Fluid Grid Layout, содержащийся в Dreamweaver CS6, помогает создавать макеты веб-страниц для экранов самых разных размеров, начиная от тех, что в смартфонах, и заканчивая установленными в планшетных и настольных компьютерах.

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

Лично у меня создание макетов Fluid Grid Layout не вызывало особых затруднений, но размеры контейнеров при этом изменялись слишком медленно, а функция отмены операции зачастую вообще не срабатывала. В интерфейсе Dreamweaver появились новые кнопки, при нажатии на которые на экране смартфона, планшетного или настольного компьютера возникает окно предварительного просмотра контента.

Палитра CSS Transitions (слева), панель образцов jQuery (справа)

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

Все на месте. Предыдущая версия Dreamweaver позволяла делать мобильные приложения (а также мобильные веб-сайты), но это требовало определенных усилий. Необходимо было загрузить и установить на компьютер пакет Android Software Developer's Kit, указав приложению Dreamweaver, где его следует искать.

В прошлом году Adobe приобрела компанию PhoneGap, разработавшую платформу для создания мобильных приложений. И теперь приложения можно загружать на сайт PhoneGap.com непосредственно из среды Dreamweaver CS6, используя новые палитры PhoneGap.

Проектирование интерфейса приложения осуществляется с помощью новой панели образцов jQuery. Внешний вид кнопок можно моделировать и изменять в среде Adobe Fireworks, получая в результате адаптированный к особенностям конкретного браузера текст HTML5. Пользователям предлагается также выбрать дизайн приложения на сайте Theme-Roller компании jQuery Mobile и загрузить его в Dreamweaver CS6.

Из всех приложений пакета Creative Suite именно программа Dreamweaver CS6 получила наибольшее число полезных нововведений. Она развивается быстрее других и предлагает множество дополнительных функций для плодотворной творческой деятельности в Сети.

Photoshop CS6

Последняя версия важнейшего для Creative Suite приложения Photoshop CS6 позаимствовала ряд чудесных свойств у приложения Premier Pro, добавив к ним собственные волшебные элементы.

Улучшенное аппаратное ускорение, обеспечиваемое возможностями графических процессоров. Новый механизм Mercury Graphics Engine задействует аппаратные ускорители графических процессоров точно так же, как мощный механизм Mercury Playback Engine приложения Premiere Pro CS6. Аппаратное ускорение графических процессоров также поддерживают отдельные инструменты в Photoshop CS6, в том числе некоторые фильтры, существенно переработанный инструмент обрезки краев и трехмерные функции CS6 Extended.

Чтобы испытать работу нового механизма, я открывал изображение из 20 слоев, имеющее объем 600 Мбайт, на рабочей станции, оснащенной двумя процессорами Xeon четырехлетней давности. При этом я включал и выключал аппаратное ускорение графики. В обоих случаях картинка открывалась за одно и то же время, да и с перемещением ее по экрану никаких затруднений не возникло.

Ряд инструментов, например новый фильтр Oil Paint, отказывается работать с отключенным аппаратным ускорением. Зато если включить ускорение, и этот фильтр, и инструмент Liquify просто летают.

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

Новый инструмент Photoshop Perspective Crop — обратите внимание на выравнивание верхнего края деревянного бруска

Отлично зарекомендовал себя новый инструмент Perspective Crop. Он поможет нарисовать рамку кадрирования под углом, выравнивая перспективу или искажая изображение. Причем пользователь сам настраивает положение углов рамки.

Наибольшее же впечатление на меня произвела функция Content-Aware Move. Как и другие средства Photoshop, относящиеся к категории content-aware («с учетом содержимого»), этот инструмент анализирует имеющиеся пикселы и переносит выделенный фрагмент в другую часть изображения. Например, если человек сфотографирован на неудачном фоне, можно выделить область вокруг него и наложить на нее понравившийся фон. При этом изображение самого человека остается незатронутым, несмотря на достаточно грубое выделение.

Что с текстом? Ранее в некоторых проектах (особенно там, где надо встраивать текст) мне приходилось выбирать между Photoshop и Adobe InDesign. Теперь придется реже обращаться к другим приложениям, поскольку в Photoshop появились дополнительные инструменты для работы с текстом: меню Text и ряд новых управляющих элементов, в том числе средства, предназначенные для правильного форматирования порядковых числительных и дробей. Новый механизм рендеринга делает буквы более ясными и четкими. Можно вставлять текст автоматически, не указывая место его размещения, или копировать стиль текстового блока, применяя его к другому фрагменту.

В Photoshop появились новые управляющие элементы меню Text, включая средства форматирования порядковых числительных и дробей

В Photoshop уже давно была функция Save for Web, позволяющая сохранять редактируемые файлы для веб-страниц, но, в отличие от Adobe Fireworks, она не умеет сжимать изображения. Если инструменты Photoshop нужны вам для работы с веб-графикой, отредактируйте в Photoshop изображение, сохраните его, откройте записанный файл в приложении Fireworks и экспортируйте оттуда окончательный вариант изображения.

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

В палитре Layers появились фильтры. Нажав на кнопку, вы можете отобразить только текстовые, обычные пиксельные или корректирующие слои, формы, смарт-объекты или комбинацию перечисленных типов. Фильтр переключается одним щелчком мыши.

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

Photoshop CS6 работает с 70 различными видеоформатами, позволяя добавлять слои (дорожки), обычное видео, аудиопереходы, эффекты и т.п., а затем экспортировать результаты в одном из трех видеоформатов с помощью встроенного механизма Media Encoder.

Premiere Pro CS6

В предыдущих версиях своего флагманского приложения редактирования видео компания Adobe существенно повысила скорость выполнения отдельных операций. Место для дальнейшего роста производительности нашлось и в версии CS6. Кроме того, у Premiere Pro CS6 значительно расширен функционал.

Привлекательный внешний вид, простое управление. На первый взгляд приложение Premiere Pro CS6 очень похоже на своих предшественников — интерфейс антрацитового цвета и т.п. Однако компания Adobe сделала свою программу более гибкой и настраиваемой. Например, панель Project может многократно увеличивать размеры отображенных на экране исходных клипов — при их максимальной величине на 24-дюймовом дисплее моего монитора поместилось только четыре.

Встроенный компонент Media Browser обеспечивает просмотр находящихся в компьютере файлов и перетаскивание их в проект. Функция Hover Scrub позволяет воспроизводить клип, просто проводя по нему мышью. Щелкните на клипе и на экране появится шкала времени. В представлении Project с помощью клавиатурных команд можно задать начальную и конечную точки. Это очень удобно при грубой обрезке клипов.

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

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

Функция Premiere Pro CS6 Uninterrupted Playback позволяет непрерывно воспроизводить файл, одновременно занимаясь чем-то иным, например корректируя цвета (или даже проверяя электронную почту в другой программе). Ранее при переходе к другой задаче воспроизведение останавливалось.

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

Панель трехуровневой цветокоррекции имеет управляющие элементы для настройки теней, полутонов и бликов

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

Новая функция Premiere Pro Adjustment Layers, как и в Photoshop, позволяет добавлять корректирующий слой и применять к нему нужные эффекты. Все изменения отразятся на дорожках, расположенных ниже, что поможет сделать слои согласованными. Включите видимость корректирующего слоя, и его воздействие отразится на всех нижележащих слоях. Довольно утонченное, но очень полезное дополнение.

Графические процессоры. При включенном механизме Mercury Playback Engine мне удалось экспортировать за 2 мин 18 с короткую, но сложную последовательность высокой четкости в Premiere Pro CS6. Когда я отключил в CS6 компонент Mercury Playback Engine и экспортировал тот же проект, применив только два процессора Xeon, на выполнение задания ушло 14 мин 30 с. Понятно, что при активном использовании Premiere Pro покупка графического процессора или видеокарты (но не ЦП) станет хорошим вложением денег.

Автономный компонент Media Encoder, поставляемый вместе с Premiere Pro CS6 и другими продуктами Creative Suite, представляет собой отдельное 64-разрядное приложение. Полученные результаты можно выводить сразу в нескольких видеоформатах, и Media Encoder будет обрабатывать эти файлы одновременно. К сожалению, по-прежнему не поддерживаются видеоформаты WebM и Ogg, адаптированные к особенностям HTML5.

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