50 причин не использовать Фотошоп для веб дизайна

Несколько лет назад я открыл для себя программу Adobe Fireworks. Открытие Fireworks началось с этой статьи. Сравнивать её с Фотошопом сложно, они решают совершенно разные задачи. Сегодня я перевел для вас замечательную статью по сравнению двух програм. Что выбрать для создания веб-сайтов, Фотошоп или Фаерворкс? Решать, конечно, вам. В любом случае я за расширение рамок и возможностей.

Photoshop против Fireworks

Я люблю Фотошоп. Это лучшая в мире программа для редактирования изображения. В этой статье я вовсе не хочу сказать, что Фотошоп недостаточно хорош. Я всего лишь хочу развеять заблуждение о том, что Фотошоп — лучший выбор для веб-дизайна.

Изначально Фотошоп был создан для фотомонтажа и создания фотоколлажей. Он не был создан для создания точечных пиксельных макетов для экранов компьютера. Он не был создан для редактирования таких макетов. Тем не менее, его используют для этих целей, просто потому, что пользователи знакомы именно с Фотошопом, они хотят работать именно в нем и точка. Пользователи так-же не знакомы с Adobe Fireworks, не знают что это, как в нем работать, не слышали о том, что Fireworks был создан как программа для создания веб-сайтов.

Пользователи часто пытаются сравнить Photoshop и Fireworks. Конечно, в Фотошопе можно делать все то же самое что и в Fireworks. Кстати, то же самое можно делать и в InDesign или в Иллюстраторе. Вопрос в другом. А на сколько это эффективно? Что касается Adobe InDesign, каждый дизайнер полиграфии прекрасно осведомлен о том, что создавать макеты журналов в Фотошопе крайне неэффективно и непрофессионально. Почему же Fireworks стал исключением?

Fireworks в чем-то напоминает InDesign. В InDesign мы создаем макеты для печати, а в Fireworks мы создаем макеты для компьютерных экранов. Фотошоп и иллюстратор, в этом ключе, стоит использовать как программы поддержки. То есть, мы создаем графику в Иллюстраторе или Фотошопе, чтобы перенести её в Fireworks, для дизайна, заточенного под экраны мониторов.

Нижележащий список демонстрирует экономию времени работы в Фаерворкс.

Комфортный, интуитивно понятный, точный до пикселя макет

1. Выравнивание пикселей

  В инспекторе настроек показаны координаты по оси X и Y как и ширина и высота выбранного объекта. Это позволяет редактировать объект с точностью до пикселя. Значения так же переносятся в файл стилей CSS для HTML. Изменения занимают секунды.

  Значения можно просмотреть на панели Info. Корректировать нельзя. Значения могут быть неточными, так как отображают местонахождение мыши. Изменения занимают минуты.

2. Быстрый доступ в информацию

  Окно подсказки выпадает при наведении курсором на объект. Если работаете с направляющими, нажмите Shift — это покажет расстояние между направляющими. Очень удобно.

  Не доступно

3. Округлые прямоугольники

  Не говоря о том, что прямоугольник является реальным вектором, который может быть изменен с небывалой точностью, есть возможности внести изменения в степень округлости прямоугольника. Изменения можно сделать за секунду, поменяв пару цифр.

  В Фотошопе есть инструмент Rounded rectangle tool, который рисует прямоугольники с округлыми углами, но значения нужно вписать до использования инструмента. Уже нарисованный прямоугольник можно поменять только напрямую, внося изменения в векторные точки инструментом Direct Selection Tool. Изменения занимают минуты.

4. Толщина линий и заливка цветом

  Цвет заливки и толщину контура можно поменять и настроить прямо на панели настроек. То же самое касается текстур или паттернов. Изменения занимают секунды.

  Все изменения цвета заливки, цвета контуров, толщины контура и стиля линии нужно добавлять через дополнительные диалоговые окна. Например диалоговое окно стилей. Эти окна громоздкие, путанные, не эффективные, требуют много лишних кликов и усложняют панель Слоев. Изменения занимают минуты.

5. Градиенты

  Создавать градиенты очень просто. Они легко настраиваются и редактируются. К тому же, доступно значительно больше типов градиента. Изменения занимают секунды.

  Инструмент Gradient tool не понятен интуитивно. Чтобы научиться им пользоваться предстоит долгая дорога ошибок и промахов. Конечно, можно использовать и стиль градиента Gradient Overlay. Однако настройки стиля тоже не очень простые, окно громоздкое, а постоянно менять настройки на лету не так просто и быстро. Изменения занимают минуты.

6. Сглаживание градиента

  В Fireworks вы можете активировать сглаживание градиента. Это повысит качество JPG, PNG и GIF изображений. Очень продумано!

  Доступно только для Gradient Tool, который не очень удобен для работы. Для стиля градиента не доступно. Не доступен.

7. Стили слоя и режимы наложения

  Fireworks имеет свои стили слоя и режимы наложения. Fireworks предлагает почти в два раза больше режимов наложения чем Фотошопе. В нем присутствуют стили слоя, которые повторяют стили слоя Фотошопа один в один. В Fireworks они называются Живыми эффектами. В дополнение Fireworks предлагает ещё несколько стилей, которых нет в Фотошопе. И режимы наложения и стили слоя легко настраивать в панели настроек. Изменения занимают секунды.

  Стили слоя нужно выбирать на панели слоев. Настройки делаются в дополнительном диалоговом окне. В дополнительное диалоговое окно нужно заходить через панель слоев. Чем больше стилей, тем больше становится панель слоев, так как стили прикрепляются списком к каждому слою, что замедляет работу. Изменения занимают минуты.

8. Масштабирование без искажений

  Fireworks предлагает 9-фрагментное масштабирование без искажения объекта. То есть можно масштабировать объекты с закругленными углами, не повреждая их. Это делается за несколько секунд инструментом 9-slice scaling tool

  Чтобы масштабировать объекты без искажений, они должны быть порезаны на несколько частей. Масштабировать можно только центральную часть. Остальные детали объекта крепятся после. В случае с векторной фигурой, маштабирование без искажения углов возможно лишь вручную, при помощи ручной манипуляции векторных точек. Занимает минуты времени.

9. Функции выравнивания

  В Фаерворксе расширенная панель выравнивания. Объекты могут быть выравнены относительно друг друга или относительно экрана. Можно изменить размер и соотношение между объектами. Выровнять по горизонтали и вертикали на основе процентного соотношения или пиксельного значения. Изменения занимают секунды.

  Не доступно — Фотошоп предоставляет только стандартные операции по выравниванию и размещению. Все остальное делается побочными приемами. Изменения занимают несколько минут.

10. Скрытые объекты

  Выделение объектов в Fireworks очень простое и понятное. Если навести мышкой на объект, он подсветится красным. Как только объект выбран он выделен синим. Тоже самое с инструментом sub-selection tool. Возможно даже выделить объекты, которые спрятаны за другими объектами. Изменения занимают секунды.

  Выделение не настолько интуитивно понятное, как в Fireworks. В любом случае, чтобы найти спрятанный элемент, нужно просматривать панель слоев. Нет ни одного способа найти спрятанные или скрытые слои, без необходимости поиска в панели слоев. Изменения занимают минуты.

11. Обрамление картинки текстом

  В Fireworks очень просто прицепить текст к векторной форме, чтобы выровнять его вокруг картинки. Изменения занимают секунды.

  Чтобы выровнять текст вокруг картинки требуется несколько векторных форм. Процес значительно сложнее. Требуется несколько минут.

12. Спецбуквы и заготовки текстов

  Fireworks содержит специальные символы. Символы можно вставлять при необходимости в текст и не только. Например значок ©.  В Fireworks так же можно записать необходимые куски текста, чтобы заполнять шаблонные макеты сайта. Весьма удобно!

  Не доступно

Оптимизированная для веб-дизайна среда

13. Макеты для сайтов, веб-баннеров

  В Fireworks  масса всевозможных полезных макетов и тем для документов. Например для веб-баннеров любых форматов или для системных иконок, варианты разрешения для мобильных телефонов, макетные сетки и так далее. Продуманно!

  Макетов нет совсем. Все макеты нужно создать или скачать из интернета. Не доступно

14. Панель слоев

  Так как массу настроек в Fireworks можно сделать из контекстной панели настроек, панель Слоев не является центральной панелью Фаерворкса. Туда вообще не придется заходить особенно часто. Выбранные объекты на рабочей области выделены голубым. И перемещаться по ним можно простой комбинацией Правый клик > Arrange или CTRL+ стрелочка вверх и вниз. Операции занимают секунды.

  В Фотошопе работа со слоями является основой основ. В принципе, без панели слоев нельзя ничего сделать . Для любых изменений нам нужно обратиться к панели слоев. Со временем слоев становится все больше и больше и за ними сложнее уследить. Большую часть времени придется провести именно в этой панели, что не самый эффективный способ работы. Также из панели сложно получить полный обзор за всем документом, так как панель разрастается порой до неимоверных размеров. Изменения занимают до нескольких минут.

15. Панель состояний для интерактивности мышки

  В «экранном» дизайне очень важно установить состояние мышки. И ещё важнее иметь должный контроль за этими элементами. Fireworks предоставляет панель состояний, которая позволяет контролировать различные состояния графики. Таким образом различные состояния графики при наведении на них мышкой могут быть зафиксированы и экспортированы в другие программы. Изменения занимают секунды.

  Не доступно — Фотошоп не является макетной программой, поэтому этих настроек у него просто нет. Пользователи пытаются решить эту проблему изменяя видимость элементов в панели Layer Coms. Занимает несколько минут

16. Передача слоев состояниям и страницам

  Ещё одна удобная возможность Fireworks  — его способность делиться и передавать слои состояниям и страницам. Это позволяет вам перекинуть слои парой щелчков мышки на другие страницы макета. Если элемент дизайна меняется, то в дальнейшем изменения затрагивают все страницы и состояния. Операция занимает пару минут.

  Не доступно — Так как в Фотошопе нет страниц и нет состояний, то и делиться слоями там не с чем. Изменения занимают часы.

Удобная работа с мульти страницами и подразделами.

17. Панель страниц (создает подразделы макета)

  Страницы в интернете состоят из суб страниц. Конечно, Fireworks предоставляет панель для регулирования страниц. Таким образом переключаться с одной веб-страницы на другую намного проще. Также намного проще ставить ссылки с одной страницы на другую. Пользуясь стрелочками на клавиатуре, вы быстро переключаетесь с одной страницы на другую. Изменения занимают минуты.

  Не доступно — Фотошоп не приспособлен для создания макетов. Поэтому возможностей раскладки на страницы у него нет. Пользователи обходят эти недостатки создавая различные вариации слоев в панели Layers Comps и, конечно, сохраня по 10 файлов. Изменения всех страниц такого макета могут занять часы.

18. Мастер страница (меняет все субстраницы)

  В Fireworks  есть мастер страница. Такая же как в InDesign-е. Она способна за один присест поменять дизайн элементов на всех суб страницах. Таким образом крос страничные изменения дизайна можно проделать за пару секунд.

  Не доступно — Фотошоп не приспособлен для создания макетов. Поэтому таких возможностей у него нет. Изменения страниц макетов может занять часы времени.

19. Стили

  Для повторяющихся элементов макета можно назначить стиль. Как и в CSS, стили можно применить к объекту, а затем поменять дизайн всех элементов с этим стилем за раз. В дополнение к стилям у Fireworks  присутствует коллекция дефолтных стилей, которые можно адаптировать под свои. Изменения занимают секунды.

  В Фотошопе тоже есть коллекция стилей, но их функционал очень недоразвит. Изменить ситуацию в лучшую сторону могут Смарт Слои. Смарт слои в Фотошопе, примерно тоже самое, что и Символы в Fireworks. Изменения могут занимать часы.

Создание пользовательского интерфеиса

20. Элементы пользовательского интерфэиса

  Все стандартные UI элементы, которые встречаются в веб-дизайне присутствуют в библиотеке Fireworks. Некоторые можно даже экспортировать в рабочий HTML, чтобы использовать в браузере. С помощью простого перетаскивания элементы можно поместить на рабочую область Fireworks. При помощи 9-фрагментного масштабирования элементы можно легко увеличить до нужного размера без искажения. В библиотеке Fireworks есть и другие полезные коллекции иконок, меню баров, компонентов флекс и так далее. В дополнение к имеющимся коллекциям можно сохранить и свои. Изменения осуществляются за секунды.

  В Фотошопе работа с элементами пользовательского интерфеиса очень громоздкая. Вам нужно скопировать скриншоты в Фотошоп. Вырезать и привести в должный вид. Другой вариант создавать все элементы самому. Изменения занимают минуты.

21. Символы

  Символы в Fireworks  похожи на символы в Флеше. Они создаются через F8. При создании можно выбрать графику, анимацию или кнопку. И они точно так же помещаются в библиотеку документа. Для изменения размера можно применить 9-ти фрагментное масштабирование. Символ отлично подходит для элементов графики вроде кнопок, иконок. В дополнение к вышесказанному символы можно легко перекинуть в Adobe Flash простым копи пэистом. Удобно!

  Единственное похожее в Фотошопе на символы — это Смарт слои. В условиях создания экранного дизайна символы имеют более широкий спектр применения чем Смарт слои. Не доступно

22. Настройки символов

  Благодаря настройкам символов все атрибуты символов и статусы иконок и UI элементы можно легко изменить и подкрутить. Изменения занимают секунды.

  Не доступно — Изменения очень сложны. Все делается обходными маневрами. Занимает минуты.

23. Pop-Up меню

  И вертикальное и горизонтальное выпадающее меню можно создать в Fireworks всего за пару кликов. Меню основано на CSS JavaScript-е. Удобно!

  Не доступно

24. Панель поведения

  Панель поведения работат так же как и в Дримвейвере. Вместе с ЯваСкриптом и состояниями вроде rollover, смена изображения, панель навигации. Все это можно создать в Fireworks. Очень удобно!

  Не доступно

25. Каркасы

  В Fireworks вы можете создавать настоящие каркасы (wireframes). К сожалению имеющаяся у Fireworks библиотека не имеет дефолтных каркасов, которые можно было бы взять за основу. Однако вы можете использовать темплы для каркасов, которые можно добавлять в библиотеку вручную.

  Не доступно

Подготовка макетов и веб-графики для интернета

26. Режем графику

  Работая с инструментом Slice tool можно разделить дизайн на различные элементы. Панель настроек позволяет вам позиционировать, масштабировать с точностью до пикселя и задавать каждому куску графики свое наименование. У кусков графики есть свой статус состояния. Например такой статус может реагировать на движение мышкой. Можно так же установить свои атрибуты, чтобы грамотно экспортировать графику в HTML. Например добавить blank ссылки, значение Alt и так далее. Пользуясь этими настройками можно создавать качественные прототипы для демонстрации заказчику. Пример прототипа Изменения вносятся за секунды.

  Дизайн можно разбить на сегменты инструментом Slice Tool. Настройки можно регулировать только в отдельном диалоговом окне сохранения.  Вносить изменения займет пару минут.

27. Создание интерактивных элементов, Часть 1

  При помощи разбивки графики на куски, страниц и панели состояния можно легко назначать интерактивные области.  Эти области будут реагировать на курсор мышки. Есть возможность создать идеальный прототип для демонстрации клиенту. Очень удобно!

  Не доступно

28. Создание интерактивных элементов, Часть 2

  Области можно экспортировать в HTML. Это позволит вам вставлять интерактивные элементы.  Например вы можете создать вполне рабочий прототип с элементами Флэш анимации, видео, Гугл картой и многим другим. Удобно! Пример прототипа

  Не доступно

29. Оптимизация веб-графики

  Для оптимизации есть очень практичная панель оптимизации. С этой панелью у вас есть доступ для каждого сегмента дизайна. Панель доступна прямо во время работы и вы можете включить предпросмотр прямо на лету. Изменения занимают секунды.

  Панель “Save for Web & Devices» необходимо включать каждый раз. Доступна она только при сохранении графики. Изменения занимают секунды.

30. JPEG сжатие и выборочная компрессия графики (доступно для текста)

  Хорошо известно, что Fireworks  генерирует JPG лучшего качества и того же размера. Есть даже специальные настройки для текста, которые позволяют исключить его из компрессии. Очень удобно!

  Не доступно

31. Экспорт индивидуальных областей выделения и сегментов

  Есть возможность экспортировать выбранные сегменты или области макета без самого макета.

  Не доступно

32. Отметки

  Инструмент Hotspot Tool позволяет пользователю создавать мульти ссылки, на прямоугольных облостях, а так же окружностях и треугольниках. Очень удобно!

  Нет доступно

33. Библиотека ссылок

  Гиперссылки, которые мы использовали в Fireworks  могут быть сохранены в URL-Библиотеку. В этом случае у вас всегда будет к ним быстрый доступ.

  Не доступно

34. Живая демонстрация

  Fireworks содержит кнопку превью, где вы можете просмотреть вашу веб-страницу и её интерактивные элементы, включая состояния, оптимизированную для веб-среды графику и эффекты мышки. Экспортировать и открывать в браузере не нужно. Очень продуманно!

  Не доступно

35. Просмотр в браузере

  F12 сгенерируют HTML версию страницы и отобразят её с оптимизированной веб-графикой в вашем браузере. Комбинация  Shift + Alt + F12 зайдет на шаг дальше и создаст превью для всех ваших страниц. Вы сможете кликать по ссылкам, проверять эффекты мышки и другие элементы. Пример (Preview all Pages)

  Не доступно

Создания интерактивных прототипов для обратной связи клиента

36. Интерактивные PDF

  Всего одним кликом мышки все прицепленные индивидуальные страницы могут быть экспортированы как интерактивный PDF фаил. Вы можете предоставить клиенту PDF с готовой навигацией для оценки работы. Таким образом вы сразу получите обратную связь ещё до того, как начали верстать сайт. Изменения занимают секунды. Пример (Interactive PDF)

  Так как в Фотошопе невозможно работать с мультистраницами, каждая страница должна быть экспортирована индивидуально и соеденина в один PDF файл отдельно. Ссылки со страниу на страницу тоже придется сделать вручную. Все это займет часы.

37. Панель истории в слаид шоу

  Скриншоты веб-страницы могут быть конвертированы в Флэш анимацию. Так намного проще создать презентацию веб-сайта. Пример (Slideshow)

  Не доступно

38. HTML Прототипы

  Фаерворкс может создать HTML страницы использую экспорт в HTML. Fireworks создает веб-страницы при помощи таблиц, которые можно залить на сервер. Клиенту можно дать ссылку для превью сайта, во время процесса разработки. Клиенту приходится частенько напоминать, что то, что он видит, не более чем прототип, а не настоящий сайт. Пример (Preview all Pages)

  Не доступно

39. AIR прототип

  Можно даже создавать законченный AIR прототип (Adobe Integrated Runtime). Причем он будет вести себя как настоящий готовый виджет. То есть свободно перемещаться по рабочему столу компьютера, и, конечно, интерактивные элементы. Круто!

  

Экспорт для производства (веб-разработка)

40. Экспортируйте графику во всех состояниях за один присест

  Используя различные опции вроде «Only Images», «Layer in files», «States to files” и “Pages to files” вы можете экспортировать всю необходимую графику для сайта за раз. Изменения делаются за секунды.

  Не доступно

41. CSS Экспорт

  Используя  “CSS and images» опцию есть возможность экспортировать готовые HTML & CSS фаилы для вашего веб-сайта. Эти функции достаточно сложные. В ближайшее время Adobe их усовершенствует.

  Не доступно

42. Фавикон

  У вас есть возможность сохранить графику напрямую в формат фавикона, который будет использоваться на веб-сайте.

  Не доступно

43. Управление цветом

  Не доступно так как не нужно. В Fireworks вы создаете экранную графику на экране для просмотра с экрана.

  В Фотошопе нужно аккуратно использовать правильные цветовой профиль вашего документа. Доступно.

44. Экспорт для библиотек Дримвейвера

  Часто используемые веб-компоненты могут быть экспортированы в Dreamweaver как DM-объекты. Не плохо!

  Не доступно

45. Flex темы

  Fireworks представляет набор flex компонентов в своей библиотеке. Эти компоненты содержат стандартные Флексовидные элементы дизайна.

  Не доступно

46. MXML экспорт

  В настройках экспорта есть экспорт в MXML. Вместе с возможностью создания Флекс компонентов, вы можете экспортировать MXML код напрямую. В дальнейшем код будет пригоден для работы с богатым функционалом Флекс.

  Не доступно

Интеграция с программным обеспечением Adobe

47. Flash интеграция

  Возможность переносить графику, анимацию и кнопки, созданные в Fireworks через copy-paste или просто перетащив мышкой в Flash. То же самое касается и других графических элементов. Fireworks может открывать SWF фаилы.

  Не доступно

48. Flash — Copy & Paste с невидимостью

  Графика, созданная в Fireworks может быть легко скопирована или перенесена мышкой из Fireworks в Adobe Flash. Невидимость и все эффекты будут сохранены.

  Не доступно. Картинки могут быть скопированы во Флэш тем не менее, но невидимость будет потеряна.

49. Командная работа

  Работая в команде над проектом, можно заменить библиотеку документа, символы и стили таким образом, что с ними сможет работать вся команда. Очень удобно!

  Не доступно

Ещё

50. Расширения

  Для Fireworks есть бесчисленное множество расширений, которые увеличивают арсенал программы. Искать Adobe Fireworks Расширения Большая часть доступна бесплатно

  Доступно лишь несколько расширений.

Ещё несколько причин (благодарю за поддержку)

51. PNG поддержка и экспорт

  Fireworks поддерживает 8, 24, и 32 BIT PNG фаилы с мульти-альфа-прозрачностью.

  Фотошоп поддерживает только 8 и 24битные PNG

52. Искать и заменить

  В Fireworks имеется очень мощный инструмент под названием «Find and Replace». С его помощью можно просматривать страницы, или связанные фаилы и заменять текст, ссылки, цвет. За один присест можно сделать необходимые изменения в целом макете. Удобно и экономит время.

  Не доступно

53. Anti-Alias сглаживание для графики

  На панели настроек в Fireworks можно активировать Anti-Alias сглаживание для контуров и заливок векторных объектов. Так же можно выбрать метод выравнивания контура относительно векторных точек.

  Не доступно

Заключение

Сравнение, приведенное в этой статье основано на жесткой оценке времени работы с обеми и программами при создании графики для веб. Создание и изменение макетов веб-страниц в Fireworks занимает секунды времени, в то время как в Фотошопе на это уходят минуты или даже часы. После беглого осмотра работы клиент чаще всего хочет что-то изменить или подкорректировать. Одно только применение мастер страницы, состояний, стилей и библиотеки позволяет вам поменять весь макет за считанные секунды. Я уже упоминал выше, что сравнение Fireworks и Фотошопа аналогично сравнению Photoshop и InDesign. Они просто созданы совершенно для разных задач. В веб-дизайне Фотошоп стоит использовать как программу поддержки для конкретных кусков графики.

Попробуйте поработать с Fireworks над вашим следующим веб-проектом. Вы заметите что пользоваться Fireworks очень просто. Особенно если вам знакомы программы семейства Adobe. Fireworks поможет вам сэкономить массу времени. В следующий раз, когда вы будете читать статьи с заголовком Фотошоп для веб-дизайна, вы будете смеяться. Удачного дня!

P.S. В лечебной практике широко используются bryker.ru лекарства китайской медицины, потому что они натуральные и эффективные. А так же доступны по цене и проверены временем.