Adobe fireworks что это
Я использую Adobe Fireworks уже более десяти лет и рекомендую его всем ищущим оптимальное решение для экранного (веб и не только) дизайна. Много было сказано о назначении Fireworks, как приложения для дизайнера, но сегодня я хочу сосредоточиться над его другим преимуществом — расширяемости.
Fireworks предоставляет своим пользователям ещё большую свободу, когда дело доходит до расширения его возможностей. Он имеет процветающую экосистему расширений, которые добавляют много ценных возможностей.
В этой статье я постараюсь перечислить некоторые из моих избранных расширений. Это те расширения, которые помогли мне стать более продуктивным, при работе в Fireworks на протяжении многих лет. Кроме того, все они бесплатны.
Моя статья довольно подробна, и чтобы помочь вам ориентироваться в ней, вы можете использовать следующие ярлыки:
Работа с расширениями в Fireworks
Fireworks легко дополняется расширениями — они устанавливаются с помощью менеджера расширений Adobe Extension Manager.
Прежде чем подробно рассмотреть расширения, которые я рекомендую, я поделюсь некоторыми рекомендациями для работы с расширениями в Fireworks. Эти советы касаются в основном Fireworks CS5 и CS5.1, но на деле есть лишь несколько незначительных различий между ними и CS6.
Если вы используете Fireworks на Windows Vista или Windows 7 вы можете получить странные ошибки от менеджера расширений при попытке установить расширение. Запуск менеджера с правами администратора обычно решает эту проблему (щёлкните правой кнопкой мыши на ярлыке Extension Manage и выберите «Запуск от имени администратора»). Причина этой проблемы проста — некоторые старые расширения устанавливаются в Program Files, и операционная система, по соображениям безопасности, требует от администратора одобрения этих действий. Если вы устанавливаете расширения для Fireworks в первый раз, имейте в виду, что:Команды, как правило, появляются в меню Commands.
Если расширение устанавливается в виде панели, вы найдете его в меню Window.
Если расширение устанавливается как автофигура, он может быть найден в панели Auto Shapes. Лучший способ узнать, как расширение должно работать, или в каком меню и подменю вы сможете найти его, это посмотреть на описание расширения в менеджере расширений. Однако, пожалуйста, обратите внимание, что Extension Manager позволяет разработчикам расширений обходиться только ссылкой на страницу с описанием. Для команд которые вы используете чаще других, стоит назначить клавиатурные сокращения. Чтобы сделать это, перейдите в меню Edit → Keyboard Shortcuts для Windows или Fireworks → Keyboard Shortcuts для Mac, сделайте копию набора сокращений стоящего по умолчанию, затем выберите необходимую команду из списка и добавьте желаемую комбинацию. Fireworks даст вам знать, если комбинация которую вы хотите назначить уже используется. Вы можете переназначить комбинацию или выбрать другую.
Обновлять расширения в Fireworks довольно просто — нужно лишь открыть Extension Manager и если есть доступные обновления, вы увидите уведомление в списке расширений. Просто выделите расширение и нажмите кнопку «Update». Обратите внимание, что не во все расширения встроена автоматическая проверка обновлений.
Процесс обновления расширений.
1. Панель Grids
John Dunning — легенда сообщества Fireworks, его постоянно растущий список расширений занимает первое место по ценности и полезности. Его расширение Grids несомненно, является первым расширением к которому я обращаюсь каждый раз, когда начинаю новый проект.
Расширение Grids позволяет настроить сетку для вашего дизайна. Вы задаете параметры (ширина колонки, ширина желоба, число столбцов и т.д.), и получаете заданную сетку по высоте холста. Несколько настроек, которые я обычно использую для создания отзывчивого дизайна, я сохранил в качестве предустановок. И теперь я просто применяю соответствующие предустановки, прежде чем вставить содержимое содержимое страницы для его перестройки под сетку.
Панель Grid: Типичные установки для сетки из 12 колонок.
Особенности панели видно из скриншота — настройка колонок, желобов, базовой линии, их позиционирование, а также управление только горизонтальными или вертикальными направляющими на выбор. Если вы когда-либо пытались создать сетку в Fireworks без этого расширения, вы вероятно потратили много времени.
Полезный совет: Используете Photoshop и хотите что-то подобное? Можете попробовать панель GuideGuide.
2. Панель Guides
Иногда может понадобиться создать просто ряд направляющих, без прочих атрибутов сетки. И если вы любите тонкий контроль над напраляющими вам может понравится панель Guides от Eugene Jude.
Панель предлагает вам несколько опций для добавления направляющих с использованием точных числовых значений: вы можете задать поля по обе (или все четыре) стороны холста, создать столбцы и строки, или добавить отдельные направляющие с конкретными координатами.
Вкладка General панели Guides.
Вы можете скопировать все направляющие на странице и вставить их в другую страницу или документ, или сохранить набор направляющих для последующего использования.
Эта панель действительно демонстрирует свои возможности при работе с выбранным объектом. Допустим, вам нужно добавить направляющие по границам или центру изображения — просто выберите объект, перейдите на вкладку Selection и выберите соответствующие задаче ячейки. Вы также можете указать размер смещения между объектом и направляющими. И если понадобится, кнопки внизу панели удалят все направляющие, только горизонтальные или только вертикальные.
Добавление направляющих по центру выбранного объекта.
3. Автофигура Smart Resize
Поскольку Adobe Fireworks широко используется для проектирования пользовательских интерфейсов, очень активно используются группы из нескольких объектов — прямоугольников, текстовых полей, кнопок и т.д. Проблема, в том, что как только вы создали такую группу, изменение размеров может быть затруднительным. Вы не можете просто выбрать группу и изменить ширину или высоту только необходимых объектов, так как Fireworks просто растянет всё, в направлении вашей трансформации.
Вас выручит Smart Resize от John Dunning.
После того как вы выбрали группу, размер которой необходимо изменить, используйте Commands → Smart Resize → Attach, и команда конвертирует группу объектов в специальный смарт-объект с характерными желтыми маркерами, которые управляют размерами объекта.
Smart Resize: экономим время при изменении размера группы объектов.
Эти маркеры позволят вам изменять размер группы в любом направлении и магия заключается в том, что изменяется размер только тех элементов, которые занимают более 50% ширины или высоты группы, остальные элементы остаются в исходной позиции.
Автофигура Smart Resize в действии.
Пример изменения текстового блока вместе с группой.
Есть еще много случаев, когда вы можете сэкономить время с этим расширением, например создание диалоговых окон и тому подобное. Это расширение очень помогает экономить время, особенно при создании условных макетов, где для поиска оптимальных интерфейсных решений действительно необходима возможность простых и быстрых изменений.
4. Панель Tables
Панель Table пожалуй самое недооценённое расширение.
Задача которую решает это расширение на вид может показаться довольно простой, но на деле оказывается сложной и утомительной: создание и редактирование таблиц в Fireworks. К сожалению, достойный функционал создания таблиц — редкость для графического редактора и Fireworks не является исключением. Все, начиная от принятия решения, следует ли использовать межстрочное выделение или выделять отдельные ячейки, или выравнивание объекты вручную каждый раз, после изменений в таблице — в Fireworks может доставлять массу неудобств.
Многое меняется с появлением расширения Tables.
Панель Tables: создаём и редактируем таблицу.
Чтобы создать таблицу, достаточно расставить содержимое будущей таблицы «на глаз», в нужной вам последовательности, затем выделить все элементы таблицы и нажать кнопку «Create». Расширение использует каждый элемент как отдельную ячейку, а элементы в первой строке становятся заголовками столбцов. Вы можете изменить внутренний отступ, скрыть или показать контур таблицы и так далее — и что хорошо, всё всегда остается доступным для редактирования. Допустим, вы изменили текст в таблице, и теперь он слишком длинный для содержащей его ячейки — нажмите кнопку «Update» и таблица автоматически перестроится.
Помимо создания таблиц и сеток, можно использовать расширение и для других сценариев. Например для блока с цитатой — блок будет подстраиваться к размеру текста и кавычки будут оставаться по краям.
Я часто использую это расширение для простых кнопок при создании каркасов страниц и мне теперь не приходится вручную подстраивать ширину новой кнопки под её заголовок. Кроме того, в панели этого расширения вы можете установить разную ширину границ вокруг кнопки.
Панель Tables: быстрое создание масштабируемой кнопки.
Tables довольно гибкое расширение имеющее много других опций. Вы можете вставить таблицу из текстового файла (с разделением столбцов пробелами или запятыми — .TXT или .CSV). Также можно импортировать таблицы из веб-страниц, предварительно преобразовав таблицу в текстовый формат с указанными выше условиями.
Панель Tables предлагает большие возможности по настройке таблиц.
5. Автофигура Placeholder
Если вы широко используете Fireworks для условного прототипирования, вы, несомненно, осведомлены об отсутствии должного контроля над вашими заполнителями (плейсхолдерами). Я обычно создаю серый прямоугольник и добавляю к нему текст с высотой и шириной прямоугольника. Проблема в том, эти «метаданные» часто приходится менять вместе с размером и положением заполнителя. Обновление этой информации вручную и выравнивание текста так, чтобы он всегда находился в центре, доставляет неудобства.
John Dunning снова приходит на помощь, с его расширением Placeholder.
Создав заполнитель, с помощью автофигуры Placeholder на панели инструментов (в списке под стандартным инструментом Rectangle) — вы получите прямоугольник с необходимыми данными, которые автоматически обновляются при изменении размеров и положения этого объекта.
Автофигура Placeholder: Динамический заполнитель, которые всегда содержит актуальную информацию.
Вы можете указать какая информация будет отображаться в рамке. Помимо указанного вами текста можно отобразить высоту, ширину, координаты. Нажатие на перекрестье в центре заполнителя открывает диалоговое окно, где вы можете настроить его.
Настройка автофигуры.
Кроме того, это расширение добавляет автофигуру в панель Auto Shapes (оба инструмента делают одно и тоже).
Полезный совет: если у вас есть несколько заполнителей, вы можете выбрать их и изменять все одновременно.
6. Orange Commands
Orange Commands от Ale Muñoz — швейцарский армейский нож для Fireworks.
В отличие от других расширений этого обзора, Orange Commands представляет набор из более чем сотни команд, направленных на повышение эффективности всех задач в Fireworks. От выравнивания объектов и установки направляющих вокруг них, до объединения двух текстовых объектов в один. Более того, набор команд не только бесплатен, но и с открытым исходным кодом, что позволяет любому пользователю со смекалкой дополнять его своими командами!
Вот несколько моих любимых команд:
- Команда Stroke Alpha в подменю Alpha упрощает изменение прозрачности обводки объекта.
- Если вы хотите добавить нумерацию страниц, чтобы файлы после экспорта были расположены в определенной последовательности — установите их в нужном порядке на панели Pages, затем выберите команду Numberize в подменю Pages — команда добавит порядковый номер перед именем каждой страницы. Изменили порядок страниц? Повтор команды обновит их нумерацию. А команда De-Numberize избавит вас от нумерации, если это необходимо.
- Нужно поменять местами два объекта? Поможет команда Swap.
- Fireworks имеет клавиатурные сокращения для выравнивания нескольких объектов друг с другом, но вам всё равно понадобиться панель Align, если вы хотите выровнять объекты относительно самого холста. Вот где группа команд Center on canvas в подменю Align вступает в игру.
- Вы можете использовать Space horizontal и Space vertical в подменю Align для выравнивания выбранных объектов с заданным расстоянием между ними.
Это всего лишь небольшая часть того, что может Orange Commands. Ознакомьтесь с документацией для того, чтобы узнать какие ещё возможности вам доступны.
Примечание от переводчика: полный список команд Orange Commands я недавно разбирал у себя в блоге.
Полезный совет: расширение Orange Commands поставляется со своим набором клавиатурных сокращений — смотрите раздел «Instalation».
7. QuickFire
Большое количество расширений может серьёзно затруднять доступ до нужной команды, а бесчисленные клавиатурные сокращения для быстрого доступа ко всем командам, панелям и элементам меню в Fireworks — не панацея.
Здесь может помочь QuickFire. Это простой интерфейс доступа к нужным командам Fireworks, без медленного копания в различных меню и подменю.
После установки QuickFire, назначьте ему горячую клавишу и перезапустите Fireworks. Откройте панель QuickFire и начните печатать имя нужной команды. Вы увидите всё, что соответствует тому, что вы набираете, вместе с иконками, чтобы легко различать панели, команды, автофигуры, страницы и многое другое! Наиболее релевантный пункт будет первым в списке и готовым к запуску нажатием Enter.
Продемонстрирую, как я использую панель QuickFire, для увеличения своей производительности. Допустим, мне нужны три линии, которые необходимо выровнять относительно друг друга и добавить вертикальную тень на каждую из них. Вот как я это делаю:
Полезный совет: когда вы открываете QuickFire и осуществляете поиск конкретной команды в списке, нажатие Enter выполняет выбранную команду и закрывает диалоговое окно, а удержание Shift выполняет выбранную команду, но оставляет открытыми QuickFire — это позволяет запускать несколько команд в строке, обходясь без лишних нажатий клавиш.
QuickFire предлагает много других способов повысить производительность. Это позволит вам:
- Быстро открывать панели.
- Добавлять символы из общей библиотеки.
- Вставлять автофигуры.
- Доступ к стандартному меню команд Fireworks.
- Применение текстур к выбранным объектам.
- Открытие последних файлов или создание новых из шаблонов.
- Выбор слоёв и страниц, а также перемещение или копирование выбранных объектов между слоями и страницами
Заключение
Как уже известно, я большой поклонник расширений и использую их довольно регулярно в дизайн-процессах с Adobe Fireworks. Расширений которые я использую ежедневно, гораздо больше, чем тех, которые я могу охватить одной статьёй — те, что описаны здесь лишь некоторые из них, которые наиболее важны в Fireworks, чтобы сделать жизнь дизайнера немного легче. И примите к сведению: возможно в продолжении к этой статье я постараюсь подробно рассмотреть еще несколько расширений, которые касаются некоторых других областей в рамках Fireworks.
Узнайте, почему компания Adobe больше не занимается активной разработкой некоторых приложений Creative Cloud, например Edge Animate и Fireworks, и некоторых услуг, например Creative Cloud Market.
Чтобы сосредоточить свои усилия на возможностях, приоритетных для наших клиентов, мы иногда прерываем активное развитие продукта или услуги. Часто базовые возможности этих продуктов и услуг доступны в других приложениях Adobe.
- Fireworks CS6
- Edge Animate, Edge Inspect, Edge Reflow и Edge Code. Все продукты Adobe Edge были удалены из Creative Cloud. Дополнительные сведения приведены в разделе Окончание разработки семейства продуктов Edge.
- Creative Cloud Market. Чтобы узнать, как получить доступ к бесплатным кистям, шаблонам и ресурсам, см. статью «Сервис Creative Cloud Market больше недоступен».
Если вы оформите подписку на план Creative Cloud «Все приложения», вы сможете загружать некоторые приложения, которые больше не выпускаются.
Обратите внимание, что не все приложения, которые больше не выпускаются, будут доступны.
Откройте приложение Creative Cloud для настольных ПК. (Нажмите значок на панели задач Windows или в строке меню macOS.)
Нажмите значок «Учетная запись» в правом верхнем углу и выберите Настройки .
Выглядит ли ваш экран по-другому? См. инструкции для ранних версий приложения Creative Cloud для настольных ПК.
Выберите вкладку Приложения на боковой панели и включите опцию Показывать старые приложения .
В нашей стране данный графический редактор не снискал популярности. Так уж сложилось, что стоимость пакета Adobe Creative Suite у нас в среднем равна стоимости интернет-трафика на его скачивание, либо стоимости носителя, на который его записывают. Отчасти поэтому все используют Adobe Photoshop и Adobe Illustrator для создания веб-дизайна. Ну вот сейчас, лично для меня, пришло время задуматься о лицензионности софта.
Я сам не являюсь веб-дизайнером, я программист. Основные задачи, которые я решаю с помощью графического редактора — это минимальная модификация растровой и векторной графики, нарезка готового дизайна, оптимизация изображений, создание прототипов и т.п. Photoshop и Illustrator без проблем решают эти задачи, однако их в состоянии решить и Fireworks. А теперь вспомним про стоимость Photoshop + Illustrator (700$ + 600$) и сравним со стоимостью Fireworks (300$).
Таким образом, вряд ли Fireworks заинтересует дизайнеров, уже работающих в Photoshop, его основные пользователи — это программисты, верстальщики, проектировщики и небольшая часть дизайнеров (во всяком случае в России).
Подборка роликов о Fireworks
Покопавшись в рунете на предмет наличия видео о Fireworks на русском языке я наткнулся на некий вакуум. Все имеющиеся ссылки вели на Youtube. Вот к нему я обратился, а результаты поиска под хабракатом. Кому будут интересны эти ролики? Прежде всего программистам, отчасти верстальщикам, которые хотят понять как создается веб-дизайн и почему им не всегда нужен Photoshop.
Процесс создания сайта в Fireworks
За короткий временной промежуток ролика создать полноценный сайт конечно не получится. Поэтому здесь не до тщательной прорисовки дизайна, да и возможности Fireworks заведомо уступают Photoshop. Получаемая верстка, основана на таблицах. Это скорее прототип, чем реальный сайт, но для простеньких задач может и подойти. Цель статьи и этих роликов в том, чтобы показать возможности Fireworks, что он во многих случаях способен заменить Photoshop и Illustrator. Мне как программисту было интересно понаблюдать за работой дизайнера и освоить некие простейшие действия.
Ролик от ML Web Consulting
Очень симпатичный ролик в 2 частях. Сначала в Fireworks создается макет дизайна сайта, потом проект экспортируется в Dreamweaver, немного правится и сайт готов. По ролику создания сайта заняло 20 минут, но у автора уже были заготовки. Но все же за небольшой срок получился достаточно симпатичный дизайн и рабочая верстка на таблицах.
Ролик от NeaceDesign
Здесь уже все по честному. Автор ролика за 10 минут создал сайт-портфолио фотографа. Получилось просто и симпатично.
Ролики от crearegroup
В этих роликах показан процесс создания сайта (прототипа) от получения макета в формате Photoshop, до готового сайта, немного модифицированного в Dreamweaver. Всего 15 минут вместе с объяснениями.
Ролики от flashwebcenter
На эти ролики публикую ссылки. Качество записи не очень хорошее, не всегда слышен комментарий. Да и решения по дизайну лично мне кажутся несколько странными. Зато весь процесс показан от начала до конца, всего 30 минут на сайт.
Я считаю, что Adobe Fireworks самая недооцененная программа для прототипирования интерфейсов. В некоторых подразделениях нашей компании именно Fireworks является основным инструментом для юзабилити специалистов. При этом мы почти не используем анимационные возможности программы. В этой статье я хочу рассказать, почему мы считаем эту программу лучшей именно для рисования интерфейса.
Wireframes или чистовой дизайн
Многие юзабелисты принимают за аксиому идею, что интерфейс сначала нужно реализовать в виде wireframes, отладить, согласовать, а уже потом «раскрашивать». Некоторые считают, что дизайном должен заниматься другой человек (я проектирую, а красоту наводит дизайнер). На первый взгляд это абсолютно верный подход, позволяющий экономить время, фокусироваться на логике взаимодействия, разделить обязанности и т.д.
Однако разбиение проектирования графического интерфейса на два этапа имеет и свои минусы. Часто цвет, нестандартный размер, графические приемы оформления — все это не просто добавляет «симпатичности» серым квадратикам, но и полностью меняет восприятие интерфейса пользователем. Именно поэтому я всегда недолюбливал wireframes и старался делать интерфейс сразу «на чистовую». Стоит оговориться, что мы в Digital Design в основном проектируем утилитарные системы, где какой-то особой «красоты» не требуется, так зачем рисовать серые прямоугольнички, если без проблем можно сразу нарисовать «закругленные и градиентные».
Вот пример интерфейса, который я недавно проектировал и одновременно работал над графическим оформлением:
А вот интерфейс от Ивана Филиппенко, еще одного любителя Fireworks:
Мы не потратили времени больше, чем если бы проектировали эти интерфейсы в InDesign, Visio или Axure, а выглядят экраны гораздо приятнее, чем в перечисленных программах. А т.к. для подобных профессиональных систем более гламурное оформление и не требуется, мы упразднили один этап, без ухудшения качества. Да, в Фотошопе тоже можно подобное нарисовать, но времени это займет больше.
Photoshop или Fireworks
Я много лет работал в Photoshop и считаю, что этот замечательный инструмент породил миф о том, что чистовой дизайн корректировать сложно и нужно отложить это на самый конец проектирования. Я раньше сам яростно отстаивал достоинства Фотошопа и отрицал его недостатки: ничего, что много слоев, я знаю волшебные клавиши ctrl и shift, я умею работать в Шопе быстро. Но в конце концов мы признали преимущество Fireworks и дружно перешли на него.
Вот несколько причин, почему Fireworks лучше подходит для визуализации интерфейсов:
- в одном файле хранятся все страницы (Pages) интерфейса, а Master Page позволяет не хардкодить повторяющиеся элементы;
- при этом размеры холста могут быть различными для каждой страницы;
- каждая страница имеет множество состояний (States), поэтому если мне нужно показать всплывающее окно на странице или разворачивание пункта, не приходится постоянно включать/выключать слои;
- слои не плодятся как кролики, ими при желании можно вообще не пользоваться (хватает Pages+States), но если и пользуешься, то не обалдевая от их количества, а используя возможности их шаринга между разными страницами;
- имеется библиотека символов и можно создавать свои символы с определенными свойствами, в том числе и переменными, это позволяет гибко и быстро менять повторяющиеся элементы интерфейса, типа кнопок, иконок и т.п.;
- старые добрые стили (Styles) и фильтры (Filters) дополняют гибкости и позволяют не забывать полезные фотошоповские привычки;
- прекрасная работа с объектами, как в векторном редакторе (просто выделил рамкой и сгруппировал или просто передвинул, никаких удержаний горячих клавиш) и при этом адекватная работа с растром как по отображению, так и по редактированию;
- про анимацию, нарезку и экспорт я не говорю, потому что это само-собой подразумевается.
Если кому-то будет полезно, я покажу какое расположение панелей в Fireworks я использую. Как видите, основные панели это Pages, States, Layers, а также библиотеки символов и свойства выделенного символа (картинка кликабельна):
А если все же не на чистовую?
Создавать сначала упрощенную визуализацию все же бывает полезно. У нас есть подразделение, которое занимается приложениями для iPad, на этой платформе как-то принято делать все гламурно и красиво. Ну, знаете, стеклянная буква на гранитном основании, по которой катится капля росы :) Рисовать такое сразу — это действительно вредно, отвлекаешься сам и отвлекаешь заказчика (да и не все умеют рисовать росу на стекле).
Но и тут Fireworks очень помогает. Помещаешь все повторяющиеся элементы или в Master Page или в библиотеку символов и думаешь только о логике и расположении. А когда нужно наложить текстуры, достаточно лишь поменять символы из библиотеки. Вот пример одного планшетного прототипа (автор Ольга Соколова):
Кстати, мы часто продаем кастомизации нашего планшетного продукта. Как правило заказчики просят поменять цвет, текстуру и здесь грамотно разработанный макет очень помогает.
Ложка дегтя
Безусловно Adobe Fireworks не завоевал заслуженной популярности не только из-за конкуренции Фотошопа. Неродной для Адоба интерфейс полумутировавший из Макромедии не добавляет ему поклонников. Но главная проблема программы — низкая стабильность. Впрочем, это проблема скорее платформы Виндоуз, на Маке программа работает довольно хорошо (хотя и не идеально). Ну про ресурсо потребление я думаю упоминать не стоит, все же это дизайнерский инструмент.
Читайте также: