Графический редактор Avocode для frontend-разработчика

Настало время поговорить о графических редакторах применительно к фронтенду.



Сегодня многие начинающие (и не только) разработчики вслед за дизайнерами пользуются общеизвестным Adobe Photoshop. Верстальщики вынуждены, вооружившись линейкой и интуицией, пытаться разгадать - что же изобразил творец, какой отступ между этими элементами, какое расстояние между строками и т.д.

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

Есть ли какая-то альтернатива Photoshop, что остановит эти страдания? Есть! В этой статье я хотел бы немного рассказать о графическом редакторе Avocode.

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

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

Здесь же только необходимое:

• рука для перетаскивания,
• выделение слоя,
• линейка,
• пипетка,
• нарезка.

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

Одна из главных причин любить Avocode – это то, что

При выделении элемента в правой части экрана видим уже готовый CSS-код

Кроме того, при желании можно получать код препроцессоров Less, Sass и для других инструментов разработчика.
Есть возможность задавать свои переменные, куда выводить свойства стилей, что полезно для верстающих с препроцессорами.
Текст элементов также удобен для копирования.

Приятным дополнением является то, что коды или цвета пипетки автоматически отправляются в буфер обмена и не приходится копировать вручную (к слову об избавлении от рутинных мелочей). Но нужно отметить, что в крайне редких случаях Avocode может ошибиться с определением кода стиля (например, спутать значение font-weight), и тут нужно держать ухо востро.

Удобно реализованы экспорты из макета

Мы можем экспортировать картинке как по-отдельности, так и все вместе, слив их в один; выбрать масштаб экспортированного изображения от x0.25 до x4; выбрать расширение (включая и SVG). При этом можно выбрать сразу несколько вариантов экспорта.

Текст же можно экспортировать просто текстом, картинкой или html-кодом.

В Avocode реализована система контроля версий

Порядок работы программы таков: мы создаем проект, загружаем туда макеты.

1. Хранится все это в облаке, к которому имеет доступ команда разработчиков данного проекта.
2. Новые участники приглашаются по ссылке.
3. Разработчики могут оставлять свои комментарии, что, например, существенно улучшает взаимодействие между дизайнером и верстальщиком. Также можно определить у кого из участников, какие возможности доступа к проекту.
4. В случае загрузки новых макетов или других важных изменений члены команды получают оповещения об изменениях.

В общем о пользе такого подхода для командной работы говорить не приходится.

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

Цена вопроса?
У Avocode гибкий прайсинг оплаты, поэтому под него может подстроиться любая компания.
А еще доступен 14-дневный бесплатный пробный период, чтобы оценить все возможности программы.

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

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

Блок похожих статей с помощью Tagger

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

Запуск gulp на хостинге beget

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

Некоторые сложности адаптивной верстки

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

Написать комментарий