Adobe fireworks что это
Adobe Fireworks (также известный как FW) — растровый и векторный графический редактор для веб-дизайнеров и разработчиков, позволяющий быстро создавать, редактировать и оптимизировать изображения для веб-сайтов, эскизы веб-сайтов и веб-приложений.
Содержание
О редакторе
Fireworks CS4 содержит библиотеку готовых настроек и хорошо интегрирован с Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver и Adobe Flash. Интерфейс программы очень похож на интерфейс обычного графического редактора. После того как Adobe приобрела компанию Macromedia (разработчика Flash, Dreamweaver), программа заменила собой Adobe ImageReady.
Версии
Версия (№) | Дата выпуска | Что нового: |
---|---|---|
«MX 2004» (7.0) | ||
«8» (8.0) | ||
«CS3» (9.0) | Апрель 2007 | Панель Pages (создание мнгостраничных документов); масштабирование без геометрических искажений (9-slice scaling); интеграция с Adobe Bridge CS3; Adobe Photoshop CS3 и Adobe Illustrator CS3. |
«CS4» (10.0) | Ноябрь 2008 | Новый пользовательский интерфейс; экспорт PDF; экспорт CSS; обновления панели «Стили»; настраиваемые и повторно используемые ресурсы; улучшенная работа со шрифтами; интеграция Adobe ConnectNow; интеграция Adobe Kuler; улучшенное рабочее пространство. |
«CS5» (11.0) | 29 апреля 2010 | Визуализация с точностью до пикселов; поддержка рабочих процессов приложений Adobe Flash; шаблоны проектов; поддержка Adobe Swatch Exchange; интеграция с Adobe Device Central; улучшенные возможности расширения. |
См. также
Ссылки
Bridge • Device Central • Dynamic Link • Version Cue
- Программное обеспечение по алфавиту
- Программное обеспечение для Mac OS X
- Программное обеспечение Adobe
Wikimedia Foundation . 2010 .
Полезное
Смотреть что такое "Adobe Fireworks" в других словарях:
Adobe Fireworks — Fireworks Entwickler Adobe Aktuelle Version CS5 (10. Mai 2010 (Deutschland)) Betriebssystem … Deutsch Wikipedia
Adobe Fireworks — Développeur Adobe Systems Dernière version … Wikipédia en Français
Adobe Fireworks — Infobox Software name = Adobe Fireworks caption = Fireworks CS3 on Windows Vista developer = Adobe (formerly Macromedia) latest release version = CS4 (10.0) latest release date = release date and age|2008|9|23 latest preview version = latest… … Wikipedia
Adobe Fireworks — Para otros usos de este término, véase Fireworks (desambiguación). Este artículo o sección necesita referencias que aparezcan en una publicación acreditada, como revistas especializadas, monografías, prensa diaria o páginas de Internet fidedignas … Wikipedia Español
Adobe Creative Suite — Developer(s) Adobe Systems Initial release September 1, 2003; 8 years ago (2003 09 01) … Wikipedia
Adobe Bridge — Adobe Creative Suite Entwickler: Adobe Systems Aktuelle Version: CS4 (23. September 2008 (Vorstellung), Oktober 2008 (USA), November 2008 (Deutschland)) Betrie … Deutsch Wikipedia
Adobe Version Cue — Adobe Creative Suite Entwickler: Adobe Systems Aktuelle Version: CS4 (23. September 2008 (Vorstellung), Oktober 2008 (USA), November 2008 (Deutschland)) Betrie … Deutsch Wikipedia
Adobe Illustrator — Ai Desarrollador Adobe Systems … Wikipedia Español
Adobe Photoshop — Adobe Photoshop … Википедия
Adobe Systems — Adobe Systems, Incorporated Тип … Википедия
В нашей стране данный графический редактор не снискал популярности. Так уж сложилось, что стоимость пакета 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 минут на сайт.
Подробные видеокурсы
В Youtube встречаются ролики, рассказывающие о работе в Fireworks в виде серии уроков, но мне кажется это не самый удобный способ. Лучше скачать эти уроки (внимание торрент) полностью и смотреть локально.
Я считаю, что 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 не завоевал заслуженной популярности не только из-за конкуренции Фотошопа. Неродной для Адоба интерфейс полумутировавший из Макромедии не добавляет ему поклонников. Но главная проблема программы — низкая стабильность. Впрочем, это проблема скорее платформы Виндоуз, на Маке программа работает довольно хорошо (хотя и не идеально). Ну про ресурсо потребление я думаю упоминать не стоит, все же это дизайнерский инструмент.
P.S. Уже упомянутый Иван Филиппенко утверждает, что если поставить значения для антиалиасинга текста «4 time, 190, 10», то он станет «как в браузере» и решится извечная проблема веб-дизайнеров. Впрочем, я попробовал и особого улучшения не заметил, хотя сам факт настроек радует, возможно кто-то из читателей предложит лучшие настройки.
Компания Adobe прекратила разработку программы Fireworks. См. раздел Почему компания Adobe прекратила разрабатывать это приложение?.
Руководства
Руководства пособия разного уровня для широкого круга пользователей.
Руководство пользователя
Получите оперативные ответы на вопросы и ознакомьтесь с пошаговыми инструкциями.
Устранение неполадок и Справка
Загрузка и установка
Как загрузить и установить Fireworks?
С мая 2013 г. компания Adobe не занимается активной разработкой программы Fireworks, но вы можете установить предыдущую версию. Дополнительная информация приведена в разделе Почему компания Adobe прекратила разрабатывать это приложение?.
Почему не удается установить Fireworks?
Решения для исправления ошибки, связанной со сбоем при установке, приведены в разделе Ошибка: «Сбой установки» настольного приложения Creative Cloud. Чтобы устранить другие проблемы, связанные с загрузкой, установкой и обновлением, обратитесь к этому руководству по устранению проблем загрузки и установки.
Как восстановить идентификатор Adobe ID или пароль?
Можно ли установить Fireworks на другой компьютер?
Вы можете установить приложение Fireworks только на два компьютера. Если вы хотите установить приложение на третий компьютер, потребуется деактивировать его на одном из двух предыдущих компьютеров. Узнайте, как войти в приложения Adobe, чтобы их активировать.
Управление учетной записью
Как изменить пароль?
Войдите в систему на странице учетной записи Adobe с помощью своего идентификатора Adobe ID и пароля. После этого перейдите на вкладку Конфиденциальность и защита и щелкните Изменить в разделе Пароль. Дополнительные сведения об изменении пароля и других данных учетной записи приведены в разделе Управление учетной записью Adobe ID.
Как изменить информацию о кредитной карте?
Как обновить или изменить свою подписку?
Сменить тариф Creative Cloud очень просто. Следуйте этим пошаговым инструкциям, чтобы обновить или изменить тариф.
Как аннулировать подписку и что произойдет с моими файлами?
После отмены подписки доступ к бесплатным возможностям Creative Cloud сохраняется, как и все файлы, сохраненные вами на устройство. Вы не сможете получать доступ к приложениям или большинству служб, а размер вашего облачного хранилища уменьшится до 2 ГБ. Узнайте о том, как отменить подписку Creative Cloud, и ознакомьтесь с условиями подписки Adobe.
Большинство дизайнеров, работающих над сайтами или мобильными приложениями привыкли пользоваться программой Adobe Photoshop. Однако по определенным параметрам Adobe Fireworks обладает рядом преимуществ перед традиционным Photoshop.
Выделим основные преимущества и некоторые специфические черты Fireworks. В конце статьи размещено видео, в котором наглядно демонстрируются некоторые аспекты функционала программы.
1. Работа с объектами
1.1 Выделение
При наведении на объект вокруг него возникает красный прямоугольник (или вершины прямоугольника, если это группа), сообщающий о том, что его можно выбрать. Выбранный объект подсвечивается синим цветом. По моим ощущениям, выбор и перемещение объектов в Fireworks осуществляется проще и быстрее, чем в Photoshop, где подобный функционал отсутствует.
1.2 Группы: быстрая работа с объектами
Работа в Fireworks во многом основана на группировке и разгруппировке объектов. Это позволяет верстать макеты гораздо быстрее, чем в Photoshop, где быстрая работа с группами невозможна. Там группировка элементов ведет к созданию папки, а для того чтобы позже выбрать папку, нужно обращаться к панели слоев. В Fireworks нет проблем с быстрым выбором как целой группы, так и ее составляющих без использования панели слоев.
Принцип работы в программе можно описать как «что вижу на рабочем пространстве, с тем и работаю» (по аналогии с концепцией WYSIWYG) — это позволяет не отвлекаться и работать быстрее. Кропотливое присваивание названий каждому слою и каждой папке (например, «header», «footer» и т. п.) совершенно не нужно — проще изобразить все состояния интерфейса и пояснить их прямо на макете, смотреться будет нагляднее.
Сочетания клавиш: группировка — ⌘+G, разгруппировка — ⇧+⌘+G.
Меню: группировка/ разгруппировка — Modify → Group/Ungroup.
1.3 Простота использования слоев
Этот пункт непосредственно связан с предыдущим: отсутствие папок в рабочих файлах позволяет перемещать слои по иерархии документа ничем не ограничиваясь и ничего не усложняя (тем не менее, функционал папок предусмотрен). Манипуляции со объектами обычно ограничиваются элементарным перемещением выше или ниже в иерархии слоев. Повторюсь, что панели слоев уделяется минимальное внимание. В этом плане Fireworks похож на Illustrator.
Сочетания клавиш: перемещение выше/ниже — ⌘+↑/↓, наверх/вниз всех слоев — ⇧+⌘+↑/↓.
Меню: перемещение выше/ниже и т. п. — Modify → Arrange → Bring Forward/Bring Backward и т.п.
1.4 Выравнивание элементов
Интерфейс выравнивания располагается в панели Align. Помимо выравнивания элементов относительно друг друга, имеющегося и в Photoshop, предусмотрено выравнивание элементов относительно всего холста. Очень удобно при работе с макетами с отцентрированной версткой.
1.5 Выделение «позади» объекта
Выделение «позади» объекта
Инструмент для выделения «позади» объекта называется Select Behind Tool, он спрятан в выпадающем меню инструмента Pointer Tool. Он позволяет выделять объекты, спрятанные под перекрывающим их объектом, без смещения последнего в сторону или отключения его видимости. Причем можно осуществлять выбор любого из множества объектов, сложенных «в стопку». Для этого необходимо несколько раз кликнуть по расположенному сверху объекту и выбрать соответствующий по списку — от верхнего к нижнему.
Сочетания клавиш: выбрать инструмент Select Behind Tool — V или 0 (при необходимости нажать два и более раз).
1.6 «Умные» направляющие (Smart Guides)
При перемещении объекта возникают пунктирные направляющие, показывающие в каком положении этот элемент выравнивается с другими объектами на холсте. Можно включить/выключить «прилипание» объекта к направляющим.
Сочетания клавиш: показать Smart Guides — ⌘+\, прилипание к Smart Guides — ⇧+⌘+\.
Меню: показать Smart Guides: View → Smart Guides → Show Smart Guides, прилипание к Smart Guides: View → Smart Guides → Snap to Smart Guides.
1.7 Распределение
Распределение объектов на одинаковом расстоянии
Панель Align (см. пункт 1.4) содержит блок Space, позволяющий распределять объекты на равном расстоянии как в горизонтальном, так и в вертикальном направлении.
2. Стили
2.1 Копирование стилей
Копирование стилей с одного объекта на другой
Стиль объекта может представлять собой много составляющих (или атрибутов, attributes), например цвет заливки, обводка, гарнитура, кегль и т. п. Копирование одного стиля с одного объекта на другой делается очень быстро: выбираем исходный объект, нажимаем ⌘+C. Затем выбираем целевой объект и нажимаем ⇧+⌥+⌘+V.
Сочетания клавиш: скопировать стиль — ⌘+C, вставить стиль — ⇧+⌥+⌘+V.
Меню: скопировать стиль — Edit → Copy, вставить стиль — Edit → Paste Attributes.
2.2 Паттерны
Выбор заливки паттерном в панели Properties
В Fireworks объекту можно назначить заливку в виде паттерна, которым может стать любое изображение. При этом объект можно легко трансформировать без нарушения рисунка паттерна, если манипулировать узловыми точками контура объекта.
2.3 Линии
Настройка параметров линии в панели Properties
Линии, созданные векторным инструментом Line Tool (клавиша N), можно кастомизировать (настраивать). Иногда нужно изобразить подчеркнутую ссылку. Для этого в панели Properties необходимо нажать на кнопку Edit Stroke, в графе Dash изменить значение на Single Dash. Длину штрихов и промежутков между ними можно настроить там же.
2.4 Градиенты
Работа с градиентами в Fireworks построена проще и удобнее, чем в Photoshop. Имеются две узловые точки: круглая обозначает начало градиента, квадратная — его конец. Последняя также определяет длину градиента. Никаких нескольких всплывающих окон, как в Photoshop (одна из ужасных черт программы).
2.5 Скругленные углы
Настройка скругленных углов в панели Properties
Создав прямоугольник при помощи инструмента Rectangle Tool (клавиша U), выбираем в панели Properties в поле Roundness необходимое значение, а также единицу измерения скругленности углов. Полученный прямоугольник можно трансформировать, манипулируя его вершинами, при этом скругленные углы будут сохраняться.
3. Символы
Символы представляют собой объекты, которые можно копировать многократно, сохраняя некоторые свойства и изменяя другие. Например можно создать символ кнопки с возможностью растягивания ее по ширине и возможностью изменения текста на ней. Изменив цвет одной кнопки, вы поменяете его во всех остальных копиях символа кнопки.
Сложные символы называются component symbols. В них можно настраивать множество параметров, пользуясь панелью Symbol Properties. Например, в случае с символом кнопки — это цвет заливки, шрифт, цвет текста и т. п.
Особое свойство символа — возможность масштабирования с сохранением всех его граней (9–slice scaling). Его желательно создавать и настраивать на этапе создания символа.
4. Маски
Работа с масками в Fireworks осуществляется быстро и понятно. Самый простой способ: Располагаем поверх слоя векторный объект, который будет являться маской. Выделяем оба объекта, кликаем правой кнопкой мыши и выбираем Group As Mask.
5. Привязка к пикселям
Выравнивание объекта по пиксельной сетке
Fireworks ориентирован на создание экранной графики. Векторные объекты создаются с изначальной привязкой к пикселям. Если же, в результате манипуляций с объектом или импорта графики извне привязка нарушается, ее всегда можно восстановить, нажав сочетание клавиш ⌘+K.
К сожалению, в программе имеется баг: иногда при повторном открытии файлов, можно обнаружить что в векторных объектах, не переведенных в кривые (paths), привязка к пикселям сбивается, и грани объектов становятся нечеткими. Поэтому рекомендуется как можно чаще переводить в кривые векторные объекты типа прямоугольников.
Сочетания клавиш: выровнять по пиксельной сетке — ⌘+K.
Меню: выровнять по пиксельной сетке — Modify → Snap To Pixel.
6. Исходные файлы
Рабочие файлы программы Fireworks сохраняются с разрешением png. Их преимущества заключаются в том, что эти файлы:
- весят гораздо легче аналогичных по содержанию psd-файлов.
- могут быть просмотрены на любом компьютере без пересохранения в какие-то другие форматы (многие люди не могут открыть psd-файлы на своем компьютере). Это увеличивает скорость передачи и демонстрации файлов другим людям.
7. Импорт из Adobe Photoshop/Adobe Illustrator
В Fireworks открываются файлы в формате psd, однако с некоторыми ограничениями и багами. К сожалению, этот механизм не был проработан компанией Adobe до конца.
Векторную графику можно импортировать из программы Illustrator. В частности удобно пользоваться стандартным Copy→Paste. Точность отображения графики при этом сохраняется (для достижения наибольшей точности я рекомендую в Illustrator производить над объектами операцию expand, доводя их до максимально простых контуров).
8. Экспорт параметров в CSS
Панель CSS Properties
Удобной характеристикой программы для создания веб-сайтов является экспорт свойств объектов в CSS. К ним могут относиться цвет (это может быть градиент), тени, шрифт и т. п. — все, что может быть описано свойствами CSS. Для осуществления этой операции используется панель CSS Properties.
Сочетания клавиш: вызвать панель CSS Properties — Fn+⌘+F7.
Меню: вызвать панель CSS Properties — Window → CSS Properties.
9. Прототипы
Fireworks также является полноценным инструментом для создания прототипов веб-сайтов и мобильных приложений. Работая в программе, вы можете одновременно доводить до совершенства дизайн и экспортировать макеты в прототип. На выходе можно получить набор html-файлов, по ссылкам в которых можно «покликать» и представить себе, как будет работать будущий сайт.
Видео
В качестве дополнения к статье я записал видео, для того чтобы наглядно показать некоторые описанные выше принципы работы программы.
Заключение
На сегодняшний день Fireworks входит в состав Adobe Creative Cloud, хотя, к большому сожалению, компания Adobe отказалась от дальнейшего развития этого достойного продукта (чем адепты Fireworks во всем мире были несказанно расстроены), пообещав создать адекватные аналоги, которых, однако, мы не видим до сих пор.
Читайте также: