Веб-разработка

индекс
236,88

Подборка роликов о создании макета дизайна и сайта в Adobe Fireworks

Что такое Fireworks и зачем он нужен


Fireworks и HabrahabrВ нашей стране данный графический редактор не снискал популярности. Так уж сложилось, что стоимость пакета Adobe Creative Suite у нас в среднем равна стоимости интернет-трафика на его скачивание, либо стоимости носителя, на который его записывают. Отчасти поэтому все используют Adobe Photoshop и Adobe Illustrator для создания веб-дизайна. Ну вот сейчас, лично для меня, пришло время задуматься о лицензионности софта.

Я сам не являюсь веб-дизайнером, я программист. Основные задачи, которые я решаю с помощью графического редактора — это минимальная модификация растровой и векторной графики, нарезка готового дизайна, оптимизация изображений, создание прототипов и т.п. Photoshop и Illustrator без проблем решают эти задачи, однако их в состоянии решить и Fireworks. А теперь вспомним про стоимость Photoshop + Illustrator (700$ + 600$) и сравним со стоимостью Fireworks (300$).

Частенько бывает, что Fireworks не справляется с отображение родных файлов Photoshop и Illustrator. Возникают глюки с отображением некоторых эффектов. В таких случаях обычно помогает эталонный скриншот, который позволяет понять где проблема и при возможности исправить ее. Также есть альтернативные редакторы (Gimp, Pixelmator), которые открывают исходный файл, но уже со своими глюками, которых нет в Fireworks.

Таким образом, вряд ли 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 минут на сайт.

Первый ролик: часть 1, часть 2, часть 3

Второй ролик: часть 1, часть 2, часть 3

Подробные видеокурсы


В Youtube встречаются ролики, рассказывающие о работе в Fireworks в виде серии уроков, но мне кажется это не самый удобный способ. Лучше скачать эти уроки (внимание торрент) полностью и смотреть локально.
+31
1 марта 2010, 03:33
131

комментарии (65)

+6
fStrange #
пользуюсь Файреворком еще со времен существования замечательной компании Макромедиа, очень жаль что она ныне не существует ибо куплена Адобом.

удобнейшая штука для верстки и оптимизации картинок, Фотошоп излишне монструзен и долго грузится для таких мелких задач.
+6
Kukalyakin #
Адобовцы привнесли в громоздкие продукты макромедии единство стиля и четкость интефейсов. Думаю, оно пошло на пользу нам же с вами.
+3
xaerom #
Тоже недоумеваю над всем этим скулежом. Ну купили, ну поменяли логотип, но команда наверняка как была так и осталась.
Да и ясно что чем больше денег у компании, тем больше она будет вкладывать в рекламу и разработку продукта.

Фаерворкс имхо уж шибко глючная вещица, что перечеркивает все его плюсы для меня :(
+1
aps #
>Ну купили, ну поменяли логотип,
1. Попутно убили FreeHand и HomeSite
Причем FH __тогда__ устойчиво работал как на MAC так и на PC, а его конкуренты этим не отличались. AI через ж… работал в WIN, Corel — через ж… на Mac.
2 Из DreamWeaver'а сделали монстра, который жрет неимоверное количество ресурсов. Но это вообще фирменный стиль Adobe
+1
kompo #
до сих пор пользуюсь homesite'ом, никак не могу найти подходящую замену…
0
aps #
Упретесь в UTF — найдете.
0
kompo #
;-) несколько лет тому назад уже уперся, поэтому с тех пор и ищу.

для utf8 использую pspad, но душа просит большего.
0
Zigzag #
Top Style новый для UTF.
0
fatal #
Сам пользуюсь, да. Но, жаль, редактор в нём в подмётки не годится всяким PSPad и Notepad++.
0
Zigzag #
ну я уже не стал предлагать NP++ =)

вообще NP++ меня перестал радовать после почти 5ти лет использования. ну когда там появится человеческая поддержка снипетов? =(
0
aps #
Я с удивлением обнаружил что жив мой самый первый инструмент HTMLPad Я на нем еще в прошлом веке работал до HomeSite.
Посмотрите, может понравится. По удобству и основным функциям вполне сопоставим с HomeSite. В версии 2010 естественно намного превосходит. Стоит совсем недорого, да и серийники можно найти. Сделал наш бывший соотечественник.
www.blumentals.net/
0
kompo #
милый, но он не умеет по ftp разворачивать дерево, а к этому быстро привыкаешь.
0
webhead #
В точку, я как раз вчера об этом разговаривал с другом-программистом. HomeSite юзаю уже лет 10 и замены адекватной найти не могу, все устраивает, очень удобный редактор, поддержки UTF нет — единственный минус.
Как можно сайты в Дриме криэйтить ума не приложу.
+1
fStrange #
в данном случае продукты потеряли в «заметности».

тот же Файреворкс был заметен в пакете от Макромедии но не ничем не примечателен на фоне Адоб Фотошоп
0
Kukalyakin #
Перестанет быть нужнум — убьют, делов-то.
–1
fStrange #
да убить то дело нехитрое
особенно если есть своя разработка

но юзеру нужен выбор
0
fatal #
Это макромедийные-то программы были громоздки?!
Посмотрите на ЦС 3-4! Это неповоротливый и глючный монстр!
0
Mordraug #
Единственное, наверное, что в фаерворске реально клёвого – реалтайм эффекты на векторные слои. Что наводит на мысли дизайна иконок.
0
MyOtheHedgeFox #
Я их и делаю в нём, к слову. =) Сочетание вектора и растра очень удобно.
Символ рядом с моим ником (и на Хабрахабре, и в моём проекте), а также некоторые иконки для игровых кланов (работаю в онлайн-игре корректором-редактором-затейником, временами помогаю игрокам по мелочам) делал именно в Fireworks. Отличная программа для редактирования gif-png.
0
MyOtheHedgeFox #

Вектор, уже готовый фон, векторные бортики и градиентная маска. Достаточно легко поменять все детали.
0
Malamut #
Но с этим справится любой векторный редактор. Ладно, почти любой :-D Зачем же тратить 300$ тогда?
0
MyOtheHedgeFox #
Fireworks при увеличении позволяет просматривать файл как растр (хоть ты там и векторы использовал). Именно для маленьких иконок и удобно: для полностью векторных или детализированных рисунков это минус.
+1
Malamut #
О, а вот это прикольно. Вечно экспортировать для просмотра растра надоедает))
0
MyOtheHedgeFox #
Но самих векторов не видно, и они пристыковываются к пикселям.
Увеличил, исправил и уменьшил.
0
MyOtheHedgeFox #
И привычка, само собой. Впервые начал работать именно с этим редактором. Само собой, бесплатно: стыдно требовать деньги за то, что ты сделал на не совсем современной и взломанной версии.
+1
Malamut #
Привычка — дело плохое))) Я привык к фотошопу с корелом, но когда дело дошло до реального их применения, оказалось что цена непомерна, аналогов — навалом, да ещё и на моём компе ни тот, ни другой не работают))) Я предпочёл быстренько перепривыкнуть, и нисколько не жалею)))
0
MyOtheHedgeFox #
Photoshop не понимаю. Совсем. Поэтому не люблю сайты и раздачи со множеством уроков для них и использую символьные шрифты, а не кисти.
0
Malamut #
А оно хоть чем-нибудь лучше GIMP+Inkscape? Реально интересует этот вопрос, ибо на фотошоп с иллюстратором для резки фоток и наложений градиентов денег жалко)))
0
MyOtheHedgeFox #
Для фотографий — нет, для gif или png — да. Несложные градиенты тоже можно делать.
0
Malamut #
Стоп-стоп. GIMP с gif и png работает идеально. Уж с чем с чем, а с этими двумя форматами ни разу проблем не видел. Что же такого в вашем файреворксе крутого, что именно к форматам хранения относится? О_О
0
MyOtheHedgeFox #
Оптимизация, особенно для png. PNG8 с прозрачностью — хитрость именно для Fireworks. К тому же в нём удобно редактировать простую анимацию (в GIMP с ней трудно).
0
Malamut #
Хм. Ну оптимизировать PNG можно при желании спец. тулзой, которая умеет все хитрости формата задействовать))) Собственно так и делаю. А с анимацией да, не сталкивался, ибо как-то это обычно немного не нужно. Меня конечно в первую очередь интересует работоспособность всего этого. Наличие всяких фильтров, необходимых инструментов. Я просто как раз для всякого веба прочно подсел на GIMP с инкскейпом и сейчас думаю в одной фирме не покупать ничего для дизайнеров. Поэтому так и присматриваюсь ко всяким обзорам)))
0
MyOtheHedgeFox #
PNG8 + полупрозрачность я нигде не подмечал в других программах.
0
Malamut #
Момент. Как-то я это делал)))
+1
Malamut #
А, ну конечно! Старый добрый pngquant)))
0
MyOtheHedgeFox #
Есть ли gui не для Виндов?
0
Malamut #
А зачем ему вообще GUI? о_О Это ж не редактор, а оптимизатор! Может и есть, никогда для обработки файлов не искал GUI))) Зато умеет всё, как и обещал))) Просто и элегантно))) На самом деле конечно есть ещё всякие pngtools, там тоже много забавного можно сделать. А вы что, файерворксом не в винде работаете?))))
0
MyOtheHedgeFox #
Ubuntu и WINE. =)
+1
MyOtheHedgeFox #
Да, да, самолёт из топора, но восьмая версия нормально работает.
0
Malamut #
Ну что за раздолбайство!))) Пользовать всякие виндовые тулзы для веб-дизайна, когда столько прекрасных инструментов есть прямо под носом ;) Я понимаю, если бы вы были каким-нибудь промышленным дизайнером и ратовали за CMYK или ещё за что, но ради png и gif'а платить 300$))) Нее)))
P.S. Ubuntu + GIMP + консоль для пакетной обработки — наше всё)))
0
MyOtheHedgeFox #
Третий пункт как раз и выглядит черезчур таинственным.

GIMP не нравится отсутствием моментальных эффектов и более-менее внятным обращением с векторными объектами (да, его не делали для этого, но держать два редактора открытыми — путаешься, что в каком делать).
0
MyOtheHedgeFox #
То есть: извините, но не могу внятно назвать причину. -.-
0
Malamut #
Не, ну да, но это всё дело привычки ;) Я ж не считаю GIMP идеальным редактором, просто подходящим))) Ну а в третьем пункте всё просто. Я например музыку конвертирую примерно так: find dir/ -iname "*.wav" — exec oggenc -q 7 {} \; Ну и графику тоже так удобно делать. Десять буков — и всё оформление в нужном тебе формате с нужной оптимизацией. Потом вручную можно ещё отдельные картинки погонять. Ну в общем и целом всё крайне просто))))
+1
MyOtheHedgeFox #
К слову, проверьте хабрапочту, пожалуйста.
0
MyOtheHedgeFox #
Также он сохраняет исходники в сильно напичканном png. Сразу можно просмотреть в любой программе. Но исходник в десятки раз больше.
НЛО прилетело и опубликовало эту надпись здесь
0
XeNum #
Fireworks лучше справляется с открытием psd файлов, чем Gimp. Меньше глюков, да и текст не растеризуется (может сейчас уже добавили просмотр текстовых слоев?). Как замена фотошопу именно для дизайна и эффектов мне больше всего понравился Pixelmator (60$), но только под Mac.
0
Malamut #
Ещё б он не справлялся)))
P.S. Храню всё в xcf)))
–3
Xumepa #
ИМХО, у этого софта какой-то… американизированный что ли интерфейс (я про менталитет). Ни один софт для проектирования не заменит бумажку с карандашом. А уж в чем делать продакшн — абсолютно все равно, кому как удобнее, народ умудряется даже в Индизайне фигачить.
0
magicwinter #
Было время, когда рисовал сайты исключительно в Fireworks, но затем перешел на фотошоп. Буквально в пятницу переустанавливая CS решил посмотреть, что же сейчас есть fireworks. Загрузил последний макет, над которым работал в фотошопе, опечалился жутчайшим тормозам фарворкса… (
НЛО прилетело и опубликовало эту надпись здесь
0
MyOtheHedgeFox #
Можно группировать или накладывать Flatten Selection.
0
magicwinter #
группы не спасают. у меня макет хорошо разбит по группам.
а flatten selection убивает же возможность дальнейшего редактирования. )
0
MyOtheHedgeFox #
Если делать что-то серьёзное, то тогда верно.
+1
webhead #
Спасибо за статью. Добавлю в мемориз, обязательно посмотрю подборку.
В Файрворксе сделал не один десяток сайтов, очень люблю этот редактор и давно использую, на Фотошоп в обозримом будущем пересаживаться не собираюсь. FW CS4 не порадовал сменой интерфейса и тормознутостью, загубят продукт =(
+2
asterian #
Пользуюсь Fireworks'ом уже года 4 именно как дизайнер сайтов. Переманиваю на него всех подопечных. 90% задач для веба на нем решается быстрее, чем в Photoshop'e (специально замеряли). Раньше не хватало сложных фильтров (типа GMLMatting, портировать его не получилось), сейчас привык обходиться без них.
Тут проскакивало, что после покупки Adob'ом уже не торт — согласен, в развитии отстает от нативных продуктов, на CS4-версию пересаживаться практически незачем (пользуюсь 8-кой, еще макромедиевским).
0
cognitive #
Поддерживаю!
Fireworks очень удобный редактор для создания дизайна сайтов. Плохо, что многие обходят стороной этот продукт, так как он более оптимизирован под веб чем Photoshop.
Самое оптимальное решение — это использовать Fireworks как основу и Photoshop для доработки отдельных элементов. ИМХО
0
lol2Fast4U #
Я хотел поставить триал CS4, а он не работает на case-sensitive file system.
Я специально при установке OS X выбрал case-sensitive, потому что это правильно.
Gimp.app нативный работает, хоть и слегка неприятный интерфейс (кнопки и менюшки, на которые наведена мышь, не подсвечены. глюк такой)
+1
SowingSadness #
Бл*, как же меня бесят буржуи, которые делают эти ролики. Большую часть времени — они болтают, а не делают.

И ладно когда еще в графическом редакторе объясняют как и что делать, так недавно смотрел тестирование антивирусов, так там он начал тестирование, только лишь в середине видео! >.
0
vite7 #
Пытался себя заставить пересесть на него, но так и не смог. Не смотря на то что он входит в лицензию CS4 Design Premium и надо бы использовать и его, раз уплочено, по прежнему работаю в PS + AI. Причина — тормознутость. FW CS4 иногда задумывается на самых простых операциях на 1-2 сек. Злит страшно. Хотя скорость создания сайтов в нем выше на порядок. Чувствуется когда инструмент заточен точно под веб дизайн.
+1
ney #
Некоторое время назад использовал Adobe Photoshop Elements. Стоит всего $ 79,99.
Нормально открывает PSD, умеет работать со слоями. Мне, как веб-разработчику, полностью подошёл для нарезки графики.

Один из минусов — некорректно отображаются названия слоёв на русском языке. Но это не так принципиально, ИМХО.
+1
XeNum #
А насколько корректно отображает дизайн? Так же как и в большом фотошопе или некоторые эффекты теряет?
+1
ney #
Я не заметил разницы, эффекты ни разу не терялись. Все PSD выглядели как в большом фотошопе.
0
fom #
Все бы хорошо в Фаерворксе, но нет пунктирного подчеркивания для текста как в Индизайне! :-) А еще нет возможности сделать линком выделенный текст и вообще в одном текстовом фрейме применять несколько стилей неполучится. Если не использовать стили а вручную оформить, то при экспорте в хтмл все сольется в один стиль — печально

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.