Нужен ли фотошоп веб разработчику

Обновлено: 07.07.2024

Пожалуй, в современном мире не встретить ни одного человека, который бы не слышал о такой программе как Adobe Photoshop да и вообще о компании Adobe. А все потому, что хотим мы этого или нет, мы живем в мире digital, где огромный процент информации мы получаем именно в цифровом формате, что, конечно, подразумевает невероятное количество изображений, фото, вижуалов, видео, рекламы и многого другого.

Photoshop превращает простые картинки в шедевры. Его универсальность сделала его востребованным во всем мире, потому что это одна из лучших программ для редактирования фотографий. Adobe Photoshop удобен в использовании и предоставляет множество инструментов, которые можно легко и быстро освоить. Наши глаза уже прилично насмотрелись и стали слегка избалованными по части качественного визуального контента, особенно после того, как на пик популярности взошел Instagram. Мы легко можем отличить хорошее фото от любительского, так же, как и качественную рекламу от деятельности так называемых «мастеров фотошопа».

И как минимум одна причина из тысячи освоить этот инструмент, пройдя курсы веб-дизайна, чтобы иметь возможность выделяться на общем фоне некачественного визуального контента, который загрязняет нашу среду. А вот еще несколько:

Может быть, раньше у вас не было возможности изучить основы рисунка или записаться на курсы живописи, но вы всегда хотели найти способ покреативить. С помощью тысяч обучающих программ (tutorials), найденных в Интернете, вы можете легко выразить свои творческие идеи посредством Photoshop и обработки фото. Кстати, из обычного хобби это может перерасти в хороший способ заработка и изучение основ ui/ux.

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

Одной из самых современных тенденций в digital сфере является техника коллажа: от самого простого в SMM до самого сложного в рекламе или иллюстрации. Этот новый способ подачи изображения позволяет совмещать и объединять изображения и фотографии, комбинировать их части, накладывать и совмещать с разными эффектами и типографикой ради максимальной передачи идеи и возможности получить эмоциональный отклик пользователя. Поэтому независимо от того, работаете вы над большим сайтом или просто хотите запостить запись на фейсбуке, этот тренд будет самым мощным инструментом.

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

Очень часто нам необходимо качественно изобразить и презентовать свою идею, чтобы на нее положительно отреагировали. Это может быть необходимо для большой презентации в компании, частной встречи с коллегами, запуска нового проекта или даже в личных целях. Здесь могут пригодиться мудборды (moodboard). Набор правильно подобранных, обрезанных и комбинированных изображений поможет вам максимально передать на экране то, что вы представляете у себя в голове. Помимо этого вы, наконец, можете отойти от шаблонных презентаций и создавать качественный уникальный визуальный продукт, чтобы по-настоящему захватить внимание зрителя.

Сайты, баннеры, реклама в Facebook, имейл-рассылки и личные подписи – все это создается в Photoshop. Прежде чем сайт станет кодом, он сначала должен стать макетом, где можно: создавать, изменять, перемещать и работать с любыми элементами будущего сайта, чтобы выбрать наиболее подходящий стиль и подачу информации, которая будет способствовать развитию бизнеса.

Так что же можно сделать с помощью программы Adobe Photoshop? В нем можно сделать абсолютно все: создавать современные текстовые эффекты, коллажи из фотографий, графику для сайтов, контент для блогов и социальных сетей, различные фантастические изображения, спецэффекты, фоновые изображения и еще миллионы всего, что окружает нас каждый день. Хоть порой мы этого даже не замечаем.

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

Графический редактор — второй по важности инструмент верстальщика после редактора кода. Дизайнеры создают макеты сайтов и приложений и передают готовые файлы в вёрстку. Верстальщик получает из них всю необходимую информацию: тексты, иллюстрации, цвета, положения элементов на странице и расстояния между ними.

Есть много графических редакторов, и как из них выбрать непонятно. Поэтому возьмём две популярные программы — Photoshop и Figma — и сравним их.

Photoshop — мощный графический редактор, основное предназначение которого — работа с растровой графикой. Он вышел в 1990 году и за это время собрал большое сообщество пользователей. В исследовании инструментов дизайна от 2019 года он занимает четвёртое место из десяти самых популярных инструментов.

Figma — онлайн-редактор для создания интерфейсов и прототипов. Он появился в 2016 году, но успел обогнать Photoshop по количеству пользователей почти в 4 раза. В том же исследовании инструментов дизайна Figma занимает второе место по количеству пользователей.

Чтобы выбрать редактор, сравним удобство интерфейсов и совместной работы, варианты использования ПО и его установки, минимальные требования к компьютеру.

Хоть Фигма, хоть Фотошоп

Всё равно нужно уметь верстать, чтобы не ругаться с программистами.

Нажатие на кнопку — согласие на обработку персональных данных

Интерфейс

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

Figma

В Figma есть две основные рабочие области — графический редактор и менеджер файлов.

Менеджер файлов нужен для настройки аккаунта и управления файлами и проектами. Здесь можно создать команду, отредактировать настройки аккаунта, просмотреть текущие и недавние проекты, подключить новый плагин.

Окно менеджера проектов Figma

Менеджер проектов в Фигме

Вторая рабочая область в Figma — графический редактор. Здесь дизайнеры делают макеты, а верстальщики находят иллюстрации, тексты, параметры объектов для вёрстки.

Графический редактор в Figma

Графический редактор внутри Figma

Photoshop

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

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

Окно Photoshop с множеством инструментов

Окно Photoshop с множеством инструментов

Можно немного облегчить жизнь, если оптимизировать рабочее пространство. Для этого достаточно скрыть инструменты и панели, которые не нужны для вёрстки. Тогда лишняя информация не будет отвлекать, а найти нужный инструмент станет проще.

Ниже — пример того, как может выглядеть Photoshop верстальщика.

Окно Photoshop, настроенное для работы

Окно Photoshop, настроенное для работы верстальщика

Способ установки

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

Есть два варианта — десктопное приложение и браузерная версия. Приложение нужно установить на компьютер, а браузерный редактор работает сразу без всяких установок.

Figma

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

У этой реализации есть свои недостатки. Figma не работает без интернета и может тормозить, если видеокарта недостаточно мощная. Для доступа к локальным шрифтам на компьютере придётся установить небольшую программу Figma Font Helper.

Разработчики Figma побеспокоились об удобстве пользователей и создали десктопное приложение для Windows и Mac OS. В нём есть те же функции, что и в браузерной версии. Недостаток приложения в том, что оно не работает без интернета и через прокси-сервер. Тем, у кого прокси-соединение, подойдёт только браузерная версия.

Photoshop

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

Стоимость

Не все графические редакторы бесплатные. Об этом нужно помнить, чтобы рассчитать силы и понять, есть ли деньги на покупку или регулярное продление подписки.

Figma

Figma — условно бесплатный графический редактор. У него есть 3 варианта использования: начальный, для профессионалов и для организаций.

Начальный тариф бесплатный с доступом к безлимитному облачному хранилищу, количество пользователей, которые могу просматривать проекты, не ограничено. В нём есть лимиты:

  • не более 2 пользователей могут редактировать макет одновременно;
  • не более 3 проектов в работе в одной команде;
  • история действий с файлами и проектами хранится 30 дней.

Тарифы для профессионалов и организаций платные. Профессионалы платят по 12 долларов за пользователя в месяц при оплате на год вперёд или по 15 долларов помесячно. Для студентов и преподавателей этот тарифный план бесплатный. Правда, придётся подтвердить факт учёбы в университете.

Организации платят по 45 долларов за пользователя в месяц. Причём заплатить придётся сразу за весь год, помесячной оплаты нет. Тариф подходит командам от 9 пользователей.

Список тарифов в Figma

Тарифные планы в Figma

Photoshop

Photoshop — платная программа, которую можно попробовать бесплатно в течение 7 дней. Чтобы начать работать в редакторе, нужно купить подписку. Есть три варианта подписок — для частных лиц, бизнеса и учащихся.

Тарифные планы в Photoshop

Тарифные планы в Photoshop

Совместная работа

Удобство в работе — важный параметр при выборе графического редактора. Верстальщик получает макет, показывает свёрстанные проекты клиенту, получает правки и отрабатывает их. Чем проще этот процесс, тем меньше ошибок и лишней работы у всех членов команды.

Figma

Фигма — Google Docs в мире дизайна.

В Figma могут работать одновременно несколько человек. На тарифе Starter — не более 2 пользователей с функциями редактора. Все изменения автоматически сохраняются в облаке.

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

Совместная работа команды над проектом в Figma

Совместная работа команды над проектом в Figma

Photoshop

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

Предпросмотр навыка

Получите профессиональный навык

Совместная работа команды над проектом в Photoshop

Совместная работа команды над проектом в Photoshop

Требования к компьютеру

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

Figma

Браузер: Chrome 58+, Firefox 57+, Safari 11+, Microsoft Edge 16+.

ОС для браузерной версии: Windows 8.1, MacOS 10.10 (Yosemite), любые ОС Linux и Chrome, которые поддерживают перечисленные браузеры.

Видеокарта:: Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850.

ОС для десктопного приложения: macOS 10.11 (OS X El Capitan), 64-разрядная версия Windows 8.

Photoshop

Минимальные системные требования для установки Photoshop на ОС Windows и macOS

Минимальные системные требования для установки Photoshop на ОС Windows и macOS

Что выбрать

Дизайнеры всё чаще выбирают Figma. Но Figma не может полноценно заменить Photoshop. В ней нет многих возможности, которые нужны дизайнерам. Например, в Figma нельзя работать с растровой графикой. Поэтому верстальщику полезно знать оба редактора. Особенно тем, кто планирует работать с разными клиентами. Но осваивать одновременно два редактора трудно. Лучше выбрать один, разобраться в нём и постепенно изучать второй.

Figma подойдёт тем, кто хочет начать работать быстро прямо из браузера, в удобной среде, совместно с коллегами, при этом не платить за ПО. Про работу в Figma мы пишем в нашем блоге, например, «Старт в Figma для верстальщика», и рассказываем на курсах для верстальщиков в HTML Academy.

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

В этом материале мы собрали основные аргументы за и против двух программ, чтобы вы сами смогли решить, какую из них выбрать.

В чем плюсы программы Photoshop?

Идеальна для работы с растровой графики

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

Позволяет создавать сложные, креативные макеты

Фотошоп позволяет веб-дизайнеру использовать не только готовые файлы из фотостоков, но и дорабатывать их до нужного вида. Например, вырезать людей, полностью менять фон, изменять цветовую гамму, создавать креативные и сложные коллажи. Зная лишь базовый инструментарий Photoshop, можно простенькую картинку превратить в настоящий шедевр.

Более привычная и для заказчиков, и для разработчиков

Согласитесь, что чаще всего вас просят прислать макет в формате *.psd? Потому что Фотошоп для большинства людей, отдаленных от веб-дизайна — это что-то привычное, понятное и точно работающее. А вот находить разработчиков, которые верстают сайты не из макетов в *.psd, сложнее.

В чем минусы Photoshop?

Сложность в изучение

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

Неудобно работать с векторной графикой

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

Большой размер программы и отсутствие десктопной версии

Действительно, нормально работать в Photoshop на старом ноутбуке вряд ли выйдет. Он занимает много оперативной памяти, из-за чего ПК может сильно тормозить и виснуть. Но, с другой стороны, это отличный повод задуматься о смене техники. Чем не мотивация работать лучше и стараться повысить свой доход?

В чем плюсы программы Figma?

Есть возможность работать над макетом коллективно

Удобно, если вы работаете над макетом с другим дизайнером. Устроена эта функция почти так же, как и в Google Диск — все пользователи-редакторы подписаны, у них разные цвета курсоров. А если нужно что-то уточнить друг у друга, это реально сделать прямо в Фигме, без мессенджеров, с помощью комментариев.

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

Можно обойтись без установки на ПК

Это отлично, если у вас пока старая, медленная техника и нет возможность в ближайшее время купить новую. Хотя программа все равно немного тормозит работу ноутбука даже с десктопной версии. А если вам такой вариант покажется неудобным, всегда есть возможность установить приложение на ПК. Это дает чуть больше возможностей для дизайна.

Функция «Компоненты»

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

Конечно, в Photoshop тоже есть подобная функция «Смарт-объекты», но имеет меньше свойств, из-за чего является не такой удобной, чем тот же инструмент в Фигме.

Удобно работать с векторной графикой

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

Еще есть векторная сеть, благодаря которой можно передвигать не отдельные векторные точки, а целые линии без «ломания» геометрии. В других программах для веб-дизайнеров с этим проблемы.

В чем минусы Figma?

Без версии на ПК и без интернета нельзя ничего делать

Если вы решили пока не загружать приложение на ПК, то будьте готовы к тому, что любые прерывания интернет-соединения будут блокировать доступ к программе. А если вдруг у вас получится что-то делать в этот момент, то изменения не будут сохранены.

Подходит только для сайтов с простым дизайном

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

Adobe для веб-дизайнеров предлагает большой ассортимент приложений, каждое из которых удобно по-своему и выполняет разные задачи. Но почему во всем мире выбор падает на привычный и удобный Photoshop, что в нем есть особенного и что предлагают другие приложения?

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Веб-дизайн многогранен и включает в себя не только работу над макетом по принципу «что где будет располагаться», но и создание необходимых изображений, обработку фотографий, различных элементов пользовательского интерфейса, иконок, клипартов, продумывание типографики и сочетания шрифтов и многое-многое иное. Поскольку веб-дизайнеры создают визуальный макет, то использование Photoshop более чем удобно и понятно. Но между тем, различные мастера в мире стараются пользоваться огромным набором приложений компании Adobe и при создании одного только макета задействуют и Illustrator, и Fireworks, и InDesign, даже новейший Experience Design (XD).

«Но зачем так много?» - спросите вы. «Какой от них может быть толк и есть ли он вообще?». Ответ и прост и сложен. Дело в том, что с одной стороны, все продукты Adobe предназначены для разных целей, с другой – кто к чему привык, а с третьей – они имеют интеграцию друг с другом. Впрочем, отличительные и особенные нюансы у каждого приложения все же есть и мы ниже постараемся их рассмотреть. Если грамотно использовать возможности каждого отдельного продукта, то создание дизайна сайтов станет проще, а может, и быстрее в некоторых моментах.

Наша цель не рассказать о конкретной работе в каждом приложении, но обратить внимание на их особенности, цели, задачи, решаемые ими. Если вы уже выбрали в чем работать, а это 99,9% Photoshop, то продолжайте совершенствоваться именно в этом, а прочее оставляйте для дополнительных возможней и расширения навыков.

Photoshop в веб-дизайне

Изначально приложение было создано для редактирования и ретуши растровых изображений и работе с фотографиями. Спустя 25 лет приложение позволяет создавать и редактировать 3D-объекты, работать с освещением в изображениях, цветностью, слоями, создавать анимацию и прочее.

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



Illustrator в веб-дизайне

Приложение для векторной графики. При этом можно создавать как отличные клипарты, так и иконки, крошечные favicon без потери качества и появления пикселей, как в случае с растровой графикой. Разумеется, что при необходимости обработки логотипа, так же подойдет данное приложение.

Но если рассматривать Illustrator с точки зрения веб-дизайна и макета сайта, то он не подходит как таковой. Как минимум, откорректировать фотографию вы не сможете и со шрифтами «поиграться» тоже. Что уж говорить о разметке и вёрстке, анимации. Впрочем, последнее обновление Illustrator CC (2017.1) от 5 апреля 2017 года позволяет обрезать растровое изображение без сторонних программ. В результате, обрезанные части не сохраняются, а размер общего файла уменьшается. Тем не менее, полноценно работать с изображениями в Иллюстраторе все же невозможно, но некоторые веб-мастера умудряются создавать макеты сайтов в формате AI и отсылать их заказчикам.


InDesign в веб-дизайне

Приложение, которое до сих пор поддерживается Adobe и предназначено для макетов печатной продукции (брошюр, плакатов, журналов, листовок). Но между тем, работать с сайтом тоже можно, хотя сложнее и сохранить в PSD не получится, а импорт этого формата бывает корявым частенько. Зато можно обрабатывать большие объемы текста. Настраивать колонки, поля, стиль. Назначить нумерацию для страниц, перемещать макеты, упорядочивать и многое другое.



Приложение обладает готовыми модульными сетками, есть панелька для просмотра готовых страниц, даже, например, можно создать шаблон footer и закрепить его один раз на все страницы. Можно даже редактировать AI и PSD. Но для работы Landing Page, с промо-станицами все равно потребуется Photoshop. Если же ваш сайт предназначается для большого количества текста или заказчик заказал макет множества страниц (более3-4) и готов их увидеть даже в PDF формате, то создать его в InDesign реально и удобно.

Глубокий анализ

Мысль о том, что логотипы и иконки проще создавать в Photoshop – не самая лучшая, ибо векторная графика в приложении превращается в растр. Для того чтобы искажения и пиксели были не видны, такой растр должен иметь очень высокое разрешение, что будет являться, по сути, уже вексельной графикой. Если готовую векторную картинку вставить из Illustrator – она будет пиксельной. Именно поэтому удобнее иметь или наборы готовых изображений в векторе или Illustrator на компьютере, дабы была возможность работы с вектором.

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

Но вот в чем проблема. InDesign создает макеты страницы на основе готовых и имеющихся у него шаблонов. Даже сверстать их может и сгенерировать CSS и HTML. НО! Этот код не будет оптимизирован для различных браузеров. Как говорится: «код будет грязным». Очистка его превратиться в сложную рутину, которая у веб-разработчика отнимет колоссальное количество времени, а автоматический вариант не справится и вовсе. Именно поэтому Photoshop имеет большее преимущество, даже несмотря на то, что творческий процесс занимает большее количество времени. InDesign подойдет только тогда, когда заказчику нужен макет большого сайта с несколькими страницами, разными по содержанию и с большим количеством текста.

Почему не подойдет Photoshop? Потому что придется создавать отдельные PSD для каждой страницы и прорисовывать отдельно (InDesign есть шаблоны), а настроить между ними (страницами) связь и активные ссылки не получится. Более того, создать все страницы в одном PSD тоже не вариант – размер файла будет большим и затем уже верстальщикам будет неудобно разбираться, что и где. Именно поэтому при работе над большими страницами, над Landing Page – Photoshop лучшее, что может быть.


Если говорить о Illustrator и InDesign , то они похожи, с той разницей, что Иллюстратор не имеет возможности создания нумерации страниц и шаблонов книг. Но зато AI поддерживает монтажные области для создания брошюр или перевода макетов в формат PDF. В дальнейшем такой макет удобно представлять заказчикам/клиентам/партнерам. То есть Illustrator держится некоторым особняком от прочих приложений и выполняет особую роль в веб-дизайне.


Существует и такое приложение у Adobe, как Fireworks . Точнее существовал, но об этом чуть позже. Задача приложения – обработка растровых и векторных изображений для сайтов. Особенность в том, что в нем удобно делать элементы пользовательского интерфейса. Даже есть возможность проверить их работоспособность, добавить анимацию и прочее. В Photoshop это делать кропотливее. Поэтому многие известные веб-мастера имеют это приложение тоже на компьютере и сочетают в создании макета сайтов и PS, и Fw. Плюсом является то, что объекты, созданные в Fw можно переводить в CSS и HTML и затем уже вставлять непосредственно на страницы сайта. Да и код создается чистым.



Adobe Experience Design

Но сейчас программа более не поддерживается и на смену ей уже приходит Adobe Experience Design или XD . Доступна она в бета-версии для Windows и Mac бесплатно на официальном сайте. Что это за зверь? Adobe XD создаётся для макетов интерфейсов мобильных приложений, сайтов. То есть, если InDesign создан все же для полиграфии и печатной продукции, а возможность создания документов для Web как бонус, то Adobe XD создается, наоборот, для разработки «цифровой продукции», мобильных интерфейсов, десктопных. Существует совместимость с Illustrator, Photoshop, можно создавать кнопочки, макеты, элементы, работать с ссылками, переходами, анимацией, видео. И еще много всего. Можно создавать макет и видеть его в действии.




Между тем, некоторые веб-дизайнеры не стремятся на него переходить. Выглядит приложение уж больно «сырым» и многих возможностей, к которым люди уже привыкли и в Fireworks, и в Photoshop попросту нет. Да, шаблоны и принципы создания макетов разрабатывались Adobe при поддержке многих именитых специалистов, но реализовано все это еще не слишком успешно. При получении заказа на создание дизайна сайта гораздо быстрее открыть PS и нарисовать в нем, что-то создать и перенести из Fw или AI. Времени затрачивается гораздо меньше.

Так что выбирать

Итак, Adobe для веб-дизайнеров предлагает большой ассортимент приложений, каждое из которых удобно по-своему и выполняет разные задачи. Но при этом нужно понимать, что главное при создании дизайна сайтов – сделать быстро и качественно. Соответственно, выбор падает на привычный и удобный Photoshop и Illustrator для работы с вектором. Но не стоит забывать и о Fireworks, даже не смотря на то, что он не поддерживается уже, им продолжают пользоваться во всем мире. Свои непосредственные функции и задачи он выполняет. А стремиться заменять его на Adobe Experience Design тоже вопрос спорный, ибо до сих пор в версии для Mac функционала больше, чем в версии для Windows.

Цель нашего материала была не рассказать вам: «О, смотрите, это же уникальная вещь, пользуйтесь только ею!». Нет! Мы хотели просто напомнить, какие продукты у Adobe существуют для упрощения и ускорения работы веб-дизайнера и верстальщика. Рассмотреть заблуждения и нюансы этих программ, которые обычно становятся явными только после нескольких часов кропотливой работы в них.

Photoshop действительно самая удобная программа для дизайна-сайта, InDesign подойдет для макета, Illustrator – для векторных картинок, Fireworks/ Adobe Experience Design – совокупное приложение для веб-дизайна, растровых и векторных изображений. Здесь же отметим, что некоторые веб-мастера вообще стараются в своей работе не использовать Photoshop вообще и все делать только в Fireworks, даже в нынешнее время. Или не пользуются продуктами Adobe, но это же внутрикорпоративные особенности. Так или иначе, это отдельная тема, тем более что с каждым годом Photoshop продолжает улучшаться, а Fireworks переходит в формат XD.

Читайте также: