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

+56

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

avocode

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

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

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

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

Общий вид Avocode 


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

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

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

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

Работа линейки



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

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

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

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

 Готовый код стилей

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

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

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

Экспорт картинки

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

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

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


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

 

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

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

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

Понравилась статья? Поделись с друзьями:
Читайте также
Блок похожих статей с помощью Tagger
Блок похожих статей с помощью Tagger
Рассмотрим вариант создания блока похожих статей с учетом тематики статьи.
Запуск gulp на хостинге beget
Запуск gulp на хостинге beget

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

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

Комментарии (0)

    Голосуйте за нас - Премия - РИФ Воронеж 2017
    Категории
    События студии все
    Популярное
    Последнее