Способы вёрстки фронтенда в Linux

Я часто верстаю HTML-страницы. Верстаю на ноутбуке с Ubuntu. Да, небольшой разрыв шаблона: в Linux есть инструменты для разработки, но вот с продуктами от Adobe не сложилось. Существует несколько путей спасти ситуацию.

Пройдемся по возможным способам вёрстки PSD макетов, при отсутствии Windows или OS X, которые я попробовал. Если вам известны еще способы, расскажите об этом в комментариях.

Способ 1: Вёрстка из PNG

Берется растровая версия макета в PNG, из которой руками вырезается нужная графика, а затем, с помощью Pixel Perfect, подгоняются отступы и размеры шрифта.

Плюсы

  • Самый быстрый и простой вариант;

Минусы

  • Нельзя копировать текст, на лету определять размер шрифта, переключать слои и прочий интерактив;
  • Сложности с иконками и полупрозрачными элементами;

Способ 2: GIMP

GIMP — местный батька графических редакторов. Умеет открывать PSD и работать со слоями. Поддержка PSD здесь неполная: не видны эффекты наложения и странно рендерятся векторные объекты. Просите дизайнера растрировать слои. Но даже так нельзя быть уверенным в точности рендеринга.

Способ 3: Виртуализация

Несколько лет назад я запускал в виртуалке Windows XP с Photoshop CS3. Самый стабильный способ из возможных.

Плюсы

  • Фотошоп работает в нативном окружении, этим всё сказано. Работает так, как должнен работать;

Минусы

  • Накладные расходы на виртуализацию. Для работы нужно мощное железо и SSD, иначе тормозит неимоверно;

Способ 3: Photoshop под Wine

Внезапно, Photoshop работает в Wine! Часто просто падает, ломает инструменты или перестаёт сохранять изменения, но работает. Если для вас не проблема 3-4 раза перезапустить редактор по ходу работы, то жить можно.

Способ 4: Adobe Assets

Adobe Assets — веб-сервис, часть Adobe Creative Cloud, в котором можно бесплатно извлечь ассеты из PSD шаблона. Перед работой, макет должен быть загружен в ваш аккаунт, бесплатный объем которого ограничен двумя гигабайтами.

Adobe Assets

Плюсы

  • Экспорт слоёв в векторные и растровые форматы, подсказки с расстояниями между слоями, экспорт параметров слоя в CSS, прозрачная работа с Retina, экспорт градиентов — вот это вот всё прямо в браузере;

Минусы

  • Макет нельзя редактировать, только переключать видимость слоёв;
  • Нельзя работать оффлайн;