Для того, чтобы работать с дизайн-макетами веб-разработчику необходим графический редактор. В наше время есть выбор среди специализированных графических редакторов для веб-разработки.
Ещё лет 10-15 назад для работы с дизайн-макетами многие использовали Photoshop.
Photoshop хорош, но в случае с разработкой сайтов - это не тот случай.
Когда мы разрабатываем сайт нам необходимо "вытащить" из дизайн-макета все изображения, шрифты, померить отступы и т.д. Для этих целей Photoshop крайне неудобен. Нужно потратить очень много времени, чтобы настроить Photoshop для наших целей, потому-что он предназначен для обработки и ретуши фотографий, а также для более специфичных для него задач.
Конечно, можно использовать Photoshop, но на сегодняшний день существуют более удобные графические редакторы, которые созданы специально для вёрстки сайтов.
В этой статье я расскажу о самых популярных графических редакторах, опишу их плюсы и минусы. Подробнее будет рассказано в следующих статьях, а пока коротко о каждом из них.
Avocode
Поддерживает платформы: Windows, Linux, MacOS
Стоимость: 15$ в месяц. Имеет 7-дневную бесплатную версию.
Avocode является очень хорошим и удобным сервисом. Его огромный плюс в том, что после установки не требуется никаких вспомогательных программ. Не важно где дизайнер создавал макет - Авокод готов работать с любым форматом, будь то Figma, Adobe XD, Scetch и т.д.
Плюсы редактора Avocode:
- Интеграция - больше не нужно заморачиваться с передачей ZIP архивов, так как любой современный графический редактор имеет интеграцию с Авокодом. Нарисовал дизайнер макет, допустим в Фигме, и отправил этот макет непосредственно из программы Figma в Авокод, а Авокод его примет и сразу откроет.
- Экспорт кода - Авокод создан для вёрстки сайтов и его функционал это подтверждает. Например, нажав на любой элемент на дизайн-макете (Заголовок, текст или картинку), мы увидим сгенерированный CSS код (есть поддержка - CSS in JS, Less, Saas, SCSS, Stylus, Styled Components). Этот код содержит все данные элемента: семейство шрифта, размер, цвет и т.д. Поэтому можно скопировать код и перенести его в редактор кода (конечно нужно знать, что копировать, а не всё подряд). Это значительно увеличивает скорость разработки сайта.
- Быстрый экспорт изображений - раньше для экспорта изображений из Photoshop требовалось совершить множество действий. Авокод же позволяет экспортировать изображения в 2 клика, что существенно ускоряет процесс разработки сайта.
- Удобство - удобный, быстрый, а главное мощный, потому как имеет интеграцию с многими другими графическими редакторами. Это некий мост между дизайнером и разработчиком.
Позволяет сконцентрироваться только на проекте избавляя от остальной головной боли (например, не нужно обсуждать с дизайнером в каком формате скинуть дизайн-макет, когда дизайнер сделал правки - разработчик их сразу увидел).
Это ещё не все плюсы данной программы.
Единственный минус - это цена, поэтому не подойдёт на начальном этапе, а в остальном - это отличный графический редактор.
Zeplin
Поддерживает платформы: Windows, MacOS
Есть бесплатная версия
Zeplin - это прямой конкурент Avocode. Zeplin, также как и Avocode - это некий комбайн, который имеет интеграцию с Figma, Adobe XD, Photoshop и Scetch. Но у него есть свои минусы и свои плюсы.
Минусы
Большой минус - это тот факт, что zeplin принимает файлы только путём интеграции с другим графическим редактором, а открыть локальный файл с компьютера сам не может.
Нужно иметь на компьютере любой другой графический редактор (photoshop, scetch, adobe xd или фигму). И уже из графического редактора экспортировать файл в zeplin. Следовательно, нужно иметь как минимум 2 графических редактора на компьютере.
Ещё один минус - это порог вхождения.
Авокод гораздо проще чем Zeplin, как говориться - запустил и работай. А вот Zeplin требует хорошего ознакомления, но поверьте, как только вы освоите его - Zeplin сэкономит вам кучу времени.
Плюсы
- Так же как и Avocode - Zeplin позиционирует себя как некий мост между дизайнером и разработчиком.
- Создание анимаций. На всех сайтах существуют интерактивные элементы, и Zeplin помогает понять как должен вести себя элемент при нажатии или клике, какие действия должны происходить когда грузится страница и так далее.
- Наличие бесплатной версии
- У данного редактора очень большая поддержка и широкое комьюнити. Стабильно выходят обновления и создаются новые плагины, упрощая нам жизнь.
- В данном редакторе есть весь функционал для удобной работы в команде. Вы вместе с дизайнером можете делать правки даже если находитесь далеко друг от друга.
- Поддерживает удобную работу с компонентами и стилями, что существенно экономит время.
- Генерирует CSS код, а если загрузить плагины, то сможет работать с множеством библиотек и языков программирования.
- Если вы работаете над большим проектом - Zeplin поможет вам правильно его структурировать. Вы никогда не запутаетесь в множестве файлов и всегда найдете нужные элементы.
Zeplin - это хорошее бесплатное решение для командной вёрстки сайтов. Требует больше времени, чтобы полностью разобраться в нём, но поверьте, когда разберётесь не пожалеете, что выбрали именно этот графический редактор.
Figma
Поддерживает платформы: Windows, MacOS
Есть бесплатная версия
Отличный графический редактор, который подойдёт как верстальщикам, так и дизайнерам.
Конечно, в основном, он заточен для дизайнеров, но и верстать из него тоже удобно.
Также как и предыдущие редакторы имеет основные плюсы для верстальщика:
- Удобно экспортировать изображения
- Удобно находить любые элементы на макете и получать их данные (Отступы, генерация CSS кода с нужными свойствами и т.д.)
- Легковесный и удобный, позволяет работать прямо из браузера, не скачивая программу
- Установив плагин Principle, позволит создавать анимации
Но и как же без минусов. Основной минус фигмы в том, что она умеет открывать файлы своего формата (.fig), а с основными известными форматами она не работает.
В связи с этим, придётся использовать ещё один графический редактор, который будет открывать файлы с другими расширениями. Только представьте, вам придётся разбираться сразу с двумя графическими редакторами, что негативно повлияет на вашу производительность.
Но, в целом, Figma является удобным графическим редактором в пределах файлов с расширением .fig
Adobe XD
Поддерживает платформы: Windows, MacOS
Бесплатный
Данный редактор подойдёт как верстальщикам, так и дизайнерам, но нацелен он, в первую очередь, для разработки прототипов.
Главная фишка Adobe XD - создание анимаций. То есть, вы можете сделать выпадающий список и сразу его продемонстрировать в программе.
Также можно увидеть как будут взаимодействовать все интерактивные элементы на сайте, что упрощает жизнь верстальщику, и не надо лишний раз ломать голову - "как же поведёт себя элемент при взаимодействии с ним?".
Что ещё привлекает в Adobe XD - это работа с большинством расширений, такими как: psd, ai, scetch и, конечно же, xd.
Также даёт возможность сразу увидеть все цвета и шрифты на макете, что существенно ускоряет процесс вёрстки.
А в остальном, он мало чем отличается от других графических редакторов. Все они плюс-минус одинаковые.
Scetch
Поддерживает платформы: MacOS
Стоимость: 9$ в месяц
Scetch является программой для дизайнеров и верстальщиков. Вышла она в 2010 году и являлась хорошей альтернативой Photoshop. Но была доступна только пользователям MacOS.
Программа специализирована для создания интерфейсов, легковесная и удобная. На мой взгляд, от фигмы скетч мало чем отличается, весь основной интерфейс у программ схож. Но Figma кроссплатформенная, а Scetch только для MacOS.
Многие кто давно работает с программой Scetch продолжают ей пользоваться, причём довольно успешно. Данный редактор до сих пор поддерживается разработчиками и имеет не малое комьюнити.
Marsy
Кроссплатформенный
Есть бесплатная версия
Довольно интересный графический редактор, который работает только в браузере. Имеет бесплатную версию и легковесный.
Этот сервис предназначен для верстальщиков, поэтому порог вхождения не высокий. Есть почти все необходимые инструменты для вёрстки, но плох тем, что поддерживает только PSD формат.
Ещё не хватает того, что данный редактор не может сразу предоставить все цвета и шрифты с макета. Всё это нужно смотреть вручную.
Если у вас нет ПО для работы с PSD файлами - это отличный вариант. Хороший, удобный и быстрый редактор.
Итоги
По моему мнению, самым удобным графическим редактором является Avocode. Лёгкий в усвоении и довольно мощный. В нём есть всё, что нужно веб-разработчику, но он платный.
За него необходимо платить каждый месяц, поэтому для обучения вряд-ли подойдёт. А вот для коммерческой разработки в самый раз.
Себе я установил несколько графических редакторов: Zeplin, Figma и Adobe XD.
Почему три графических редактора?
Zeplin-это основная программа, в которой я буду работать и изучать её. Она удобна для инспектирования макета (экспорт изображений, замер отступов, поиск всех цветов и шрифтов и т.д.)
Figma нужна только для того, чтобы экспортировать дизайн-макет в zeplin, поскольку zeplin не может открыть локальный файл с компьютера - только путём экспорта из другого редактора.
Adobe XD позволяет открывать файлы с такими расширениями как scetch, psd, ai и xd. Figma эти форматы не читает, и не все дизайнеры работают из фигмы.
В статье я указал основные, популярные графические редакторы. Если вы знаете другие удобные программы для вёрстки - пишите в комментариях. В следующих статьях я буду подробно рассматривать Zeplin, но если нужен обзор на другой графический редактор для вёрстки - обязательно пишите в комментариях.
