Вольный перевод статьи опубликованной в Smaching Magazine графическим дизайнером из Хайдерабада (Индия), Ашишем Боджаватом.
Я использую Adobe Fireworks уже более десяти лет и рекомендую его всем ищущим оптимальное решение для экранного (веб и не только) дизайна. Много было сказано о назначении Fireworks, как приложения для дизайнера, но сегодня я хочу сосредоточиться над его другим преимуществом — расширяемости.
Fireworks предоставляет своим пользователям ещё большую свободу, когда дело доходит до расширения его возможностей. Он имеет процветающую экосистему расширений, которые добавляют много ценных возможностей.
В этой статье я постараюсь перечислить некоторые из моих избранных расширений. Это те расширения, которые помогли мне стать более продуктивным, при работе в Fireworks на протяжении многих лет. Кроме того, все они бесплатны.
Моя статья довольно подробна, и чтобы помочь вам ориентироваться в ней, вы можете использовать следующие ярлыки:
- Панель Grids
- Панель Guides
- Автофигура Smart Resize
- Панель Tables
- Автофигура Placeholder
- Набор команд Orange Commands
- Расширение QuickFire
Работа с расширениями в Fireworks
Fireworks легко дополняется расширениями — они устанавливаются с помощью менеджера расширений Adobe Extension Manager.
Прежде чем подробно рассмотреть расширения, которые я рекомендую, я поделюсь некоторыми рекомендациями для работы с расширениями в Fireworks. Эти советы касаются в основном Fireworks CS5 и CS5.1, но на деле есть лишь несколько незначительных различий между ними и CS6.
Вопросы, связанные с Windows Vista и Windows 7
Если вы используете Fireworks на Windows Vista или Windows 7 вы можете получить странные ошибки от менеджера расширений при попытке установить расширение. Запуск менеджера с правами администратора обычно решает эту проблему (щёлкните правой кнопкой мыши на ярлыке Extension Manage и выберите «Запуск от имени администратора»). Причина этой проблемы проста — некоторые старые расширения устанавливаются в Program Files, и операционная система, по соображениям безопасности, требует от администратора одобрения этих действий.
Где находятся установленные расширения?
Если вы устанавливаете расширения для Fireworks в первый раз, имейте в виду, что:
Команды, как правило, появляются в меню Commands.
Если расширение устанавливается в виде панели, вы найдете его в меню Window.
Если расширение устанавливается как автофигура, он может быть найден в панели Auto Shapes.
Команды, как правило, появляются в меню Commands.
Если расширение устанавливается в виде панели, вы найдете его в меню Window.
Если расширение устанавливается как автофигура, он может быть найден в панели Auto Shapes.
Описание расширений
Лучший способ узнать, как расширение должно работать, или в каком меню и подменю вы сможете найти его, это посмотреть на описание расширения в менеджере расширений. Однако, пожалуйста, обратите внимание, что Extension Manager позволяет разработчикам расширений обходиться только ссылкой на страницу с описанием.
Использование клавиатурных сокращений
Для команд которые вы используете чаще других, стоит назначить клавиатурные сокращения. Чтобы сделать это, перейдите в меню Edit → Keyboard Shortcuts для Windows или Fireworks → Keyboard Shortcuts для Mac, сделайте копию набора сокращений стоящего по умолчанию, затем выберите необходимую команду из списка и добавьте желаемую комбинацию. Fireworks даст вам знать, если комбинация которую вы хотите назначить уже используется. Вы можете переназначить комбинацию или выбрать другую.
Обновление расширений
Обновлять расширения в Fireworks довольно просто — нужно лишь открыть Extension Manager и если есть доступные обновления, вы увидите уведомление в списке расширений. Просто выделите расширение и нажмите кнопку «Update». Обратите внимание, что не во все расширения встроена автоматическая проверка обновлений.
![](https://habrastorage.org/r/w1560/storage2/b02/fda/ac1/b02fdaac1356eebd7201d447c902a2b6.png)
![](https://habrastorage.org/storage2/b02/fda/ac1/b02fdaac1356eebd7201d447c902a2b6.png)
Процесс обновления расширений.
1. Панель Grids
John Dunning — легенда сообщества Fireworks, его постоянно растущий список расширений занимает первое место по ценности и полезности. Его расширение Grids несомненно, является первым расширением к которому я обращаюсь каждый раз, когда начинаю новый проект.
Расширение Grids позволяет настроить сетку для вашего дизайна. Вы задаете параметры (ширина колонки, ширина желоба, число столбцов и т.д.), и получаете заданную сетку по высоте холста. Несколько настроек, которые я обычно использую для создания отзывчивого дизайна, я сохранил в качестве предустановок. И теперь я просто применяю соответствующие предустановки, прежде чем вставить содержимое содержимое страницы для его перестройки под сетку.
![](https://habrastorage.org/storage2/68f/b17/737/68fb17737fa79b264ce316a1f248ee7a.png)
Панель Grid: Типичные установки для сетки из 12 колонок.
Особенности панели видно из скриншота — настройка колонок, желобов, базовой линии, их позиционирование, а также управление только горизонтальными или вертикальными направляющими на выбор. Если вы когда-либо пытались создать сетку в Fireworks без этого расширения, вы вероятно потратили много времени.
Полезный совет: Используете Photoshop и хотите что-то подобное? Можете попробовать панель GuideGuide.
2. Панель Guides
Иногда может понадобиться создать просто ряд направляющих, без прочих атрибутов сетки. И если вы любите тонкий контроль над напраляющими вам может понравится панель Guides от Eugene Jude.
Панель предлагает вам несколько опций для добавления направляющих с использованием точных числовых значений: вы можете задать поля по обе (или все четыре) стороны холста, создать столбцы и строки, или добавить отдельные направляющие с конкретными координатами.
![](https://habrastorage.org/storage2/510/9ad/e79/5109ade794870789e62c4f1861cb69d3.png)
Вкладка General панели Guides.
Вы можете скопировать все направляющие на странице и вставить их в другую страницу или документ, или сохранить набор направляющих для последующего использования.
Эта панель действительно демонстрирует свои возможности при работе с выбранным объектом. Допустим, вам нужно добавить направляющие по границам или центру изображения — просто выберите объект, перейдите на вкладку Selection и выберите соответствующие задаче ячейки. Вы также можете указать размер смещения между объектом и направляющими. И если понадобится, кнопки внизу панели удалят все направляющие, только горизонтальные или только вертикальные.
![](https://habrastorage.org/storage2/1e9/c98/3c3/1e9c983c318fa02f78bb83b94ce4d6a8.png)
Добавление направляющих по центру выбранного объекта.
3. Автофигура Smart Resize
Поскольку Adobe Fireworks широко используется для проектирования пользовательских интерфейсов, очень активно используются группы из нескольких объектов — прямоугольников, текстовых полей, кнопок и т.д. Проблема, в том, что как только вы создали такую группу, изменение размеров может быть затруднительным. Вы не можете просто выбрать группу и изменить ширину или высоту только необходимых объектов, так как Fireworks просто растянет всё, в направлении вашей трансформации.
Вас выручит Smart Resize от John Dunning.
После того как вы выбрали группу, размер которой необходимо изменить, используйте Commands → Smart Resize → Attach, и команда конвертирует группу объектов в специальный смарт-объект с характерными желтыми маркерами, которые управляют размерами объекта.
![](https://habrastorage.org/storage2/978/5f0/651/9785f06518151766b873724106fc6e23.png)
Smart Resize: экономим время при изменении размера группы объектов.
Эти маркеры позволят вам изменять размер группы в любом направлении и магия заключается в том, что изменяется размер только тех элементов, которые занимают более 50% ширины или высоты группы, остальные элементы остаются в исходной позиции.
![](https://habrastorage.org/storage2/03e/361/217/03e361217941a459ff13be06471c8bf8.gif)
Автофигура Smart Resize в действии.
![](https://habrastorage.org/storage2/04c/a89/382/04ca89382680cc8b42b9bcd061a9367b.png)
Пример изменения текстового блока вместе с группой.
Есть еще много случаев, когда вы можете сэкономить время с этим расширением, например создание диалоговых окон и тому подобное. Это расширение очень помогает экономить время, особенно при создании условных макетов, где для поиска оптимальных интерфейсных решений действительно необходима возможность простых и быстрых изменений.
4. Панель Tables
Панель Table пожалуй самое недооценённое расширение.
Задача которую решает это расширение на вид может показаться довольно простой, но на деле оказывается сложной и утомительной: создание и редактирование таблиц в Fireworks. К сожалению, достойный функционал создания таблиц — редкость для графического редактора и Fireworks не является исключением. Все, начиная от принятия решения, следует ли использовать межстрочное выделение или выделять отдельные ячейки, или выравнивание объекты вручную каждый раз, после изменений в таблице — в Fireworks может доставлять массу неудобств.
Многое меняется с появлением расширения Tables.
![](https://habrastorage.org/storage2/6ff/acd/25d/6ffacd25d00a68dcdcd7206a8882ef4d.gif)
Панель Tables: создаём и редактируем таблицу.
Чтобы создать таблицу, достаточно расставить содержимое будущей таблицы «на глаз», в нужной вам последовательности, затем выделить все элементы таблицы и нажать кнопку «Create». Расширение использует каждый элемент как отдельную ячейку, а элементы в первой строке становятся заголовками столбцов. Вы можете изменить внутренний отступ, скрыть или показать контур таблицы и так далее — и что хорошо, всё всегда остается доступным для редактирования. Допустим, вы изменили текст в таблице, и теперь он слишком длинный для содержащей его ячейки — нажмите кнопку «Update» и таблица автоматически перестроится.
Помимо создания таблиц и сеток, можно использовать расширение и для других сценариев. Например для блока с цитатой — блок будет подстраиваться к размеру текста и кавычки будут оставаться по краям.
Я часто использую это расширение для простых кнопок при создании каркасов страниц и мне теперь не приходится вручную подстраивать ширину новой кнопки под её заголовок. Кроме того, в панели этого расширения вы можете установить разную ширину границ вокруг кнопки.
![](https://habrastorage.org/storage2/623/6cf/ef4/6236cfef4f4dc32fb626b231c90c4a8e.png)
Панель Tables: быстрое создание масштабируемой кнопки.
Tables довольно гибкое расширение имеющее много других опций. Вы можете вставить таблицу из текстового файла (с разделением столбцов пробелами или запятыми — .TXT или .CSV). Также можно импортировать таблицы из веб-страниц, предварительно преобразовав таблицу в текстовый формат с указанными выше условиями.
![](https://habrastorage.org/storage2/1b1/d12/5c8/1b1d125c818d533ec102aeb884716305.png)
Панель Tables предлагает большие возможности по настройке таблиц.
5. Автофигура Placeholder
Если вы широко используете Fireworks для условного прототипирования, вы, несомненно, осведомлены об отсутствии должного контроля над вашими заполнителями (плейсхолдерами). Я обычно создаю серый прямоугольник и добавляю к нему текст с высотой и шириной прямоугольника. Проблема в том, эти «метаданные» часто приходится менять вместе с размером и положением заполнителя. Обновление этой информации вручную и выравнивание текста так, чтобы он всегда находился в центре, доставляет неудобства.
John Dunning снова приходит на помощь, с его расширением Placeholder.
Создав заполнитель, с помощью автофигуры Placeholder на панели инструментов (в списке под стандартным инструментом Rectangle) — вы получите прямоугольник с необходимыми данными, которые автоматически обновляются при изменении размеров и положения этого объекта.
![](https://habrastorage.org/storage2/20d/ad4/352/20dad4352b5cd65c2f890c88b6db4696.png)
Автофигура Placeholder: Динамический заполнитель, которые всегда содержит актуальную информацию.
Вы можете указать какая информация будет отображаться в рамке. Помимо указанного вами текста можно отобразить высоту, ширину, координаты. Нажатие на перекрестье в центре заполнителя открывает диалоговое окно, где вы можете настроить его.
![](https://habrastorage.org/storage2/688/663/179/6886631792e89e16531d866cdf39c443.png)
Настройка автофигуры.
Кроме того, это расширение добавляет автофигуру в панель 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.
![](https://habrastorage.org/storage2/afe/7a3/dad/afe7a3dad0ea869e4606c441b5e9682d.png)
QuickFire: доступ к любой команде, панели и автофигуре в Fireworks с помощью нескольких нажатий клавиш.
Продемонстрирую, как я использую панель QuickFire, для увеличения своей производительности. Допустим, мне нужны три линии, которые необходимо выровнять относительно друг друга и добавить вертикальную тень на каждую из них. Вот как я это делаю:
![](https://habrastorage.org/storage2/dfa/f6b/dfa/dfaf6bdfa8f3800b528baf32b2cbebd2.gif)
QuickFire: молниеносное управление.
Полезный совет: когда вы открываете QuickFire и осуществляете поиск конкретной команды в списке, нажатие Enter выполняет выбранную команду и закрывает диалоговое окно, а удержание Shift выполняет выбранную команду, но оставляет открытыми QuickFire — это позволяет запускать несколько команд в строке, обходясь без лишних нажатий клавиш.
QuickFire предлагает много других способов повысить производительность. Это позволит вам:
- Быстро открывать панели.
- Добавлять символы из общей библиотеки.
- Вставлять автофигуры.
- Доступ к стандартному меню команд Fireworks.
- Применение текстур к выбранным объектам.
- Открытие последних файлов или создание новых из шаблонов.
- Выбор слоёв и страниц, а также перемещение или копирование выбранных объектов между слоями и страницами
Вы можете подробное ознакомиться с QuickFire на странице расширения.
Заключение
Как уже известно, я большой поклонник расширений и использую их довольно регулярно в дизайн-процессах с Adobe Fireworks. Расширений которые я использую ежедневно, гораздо больше, чем тех, которые я могу охватить одной статьёй — те, что описаны здесь лишь некоторые из них, которые наиболее важны в Fireworks, чтобы сделать жизнь дизайнера немного легче. И примите к сведению: возможно в продолжении к этой статье я постараюсь подробно рассмотреть еще несколько расширений, которые касаются некоторых других областей в рамках Fireworks.
Cписок полезных ресурсов
К сожалению, все англоязычные.
И наконец, я думаю, что эта статья должна завершаться списком сайтов, на которых можно узнать больше о лучших расширениях для Fireworks:
- Fireworks Interviews
Суть проекта заключается в интервьюировании дизайнеров со всего света, ежедневно использующих Fireworks в своей работе. Там также довольно много рекомендуемых расширений (с советами и рекомендациями) от умелых дизайнеров, таких как: Keith Lang, Nick Myers, Benjamin De Cock, Jonathan Snook и многих других. - Extending Fireworks
Блог о расширениях, командах и прочих дополнениях для Fireworks, интервью с их авторами и полезные советы. Этот сайт является относительно новым, но на нём уже есть ценная информация. - Fw Police
Содержит много бесплатных ресурсов для Adobe Fireworks — расширения, исходники и другие халявы :) Кстати, эти же ребята сейчас работают над новым проектом аналогичной тематики. - Adobe Fireworks: The Most Awesome Extensions
Дизайнер Mikko Vartio рассказывает о своих избранных расширениях. - Favorite Adobe Fireworks Extensions
Длинный список расширений, подготовленный UX-дизайнером Dave Hogue. - John Dunning’s extensions
Расширения от John Dunning. Стоит ознакомиться со всеми. - Aaron Beall’s extensions
Расширения от Аарон Beall, являющегося опытным пользователем и разработчиком для Fireworks и Flash). Есть несколько довольно полезных расширений. - Matt Stow’s extensions
Matt Stow имеет несколько расширений, которые помогут любому профессиональному веб-дизайнеру и разработчику. - Fireworks extensions | Adobe Exchange
Расширения опубликованные на сайте Adobe.