Подборка роликов о создании макета дизайна и сайта в 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 в виде серии уроков, но мне кажется это не самый удобный способ. Лучше скачать эти уроки (внимание торрент) полностью и смотреть локально.
    Поделиться публикацией

    Похожие публикации

    Комментарии 65

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

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

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

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

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

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

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

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

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

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

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

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

                                                    Самое читаемое