Я часто верстаю 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 шаблона. Перед работой, макет должен быть загружен в ваш аккаунт, бесплатный объем которого ограничен двумя гигабайтами.
Плюсы
Экспорт слоёв в векторные и растровые форматы, подсказки с расстояниями между слоями, экспорт параметров слоя в CSS, прозрачная работа с Retina, экспорт градиентов — вот это вот всё прямо в браузере;
Минусы
Макет нельзя редактировать, только переключать видимость слоёв;
Способы вёрстки фронтенда в Linux
Я часто верстаю HTML-страницы. Верстаю на ноутбуке с Ubuntu. Да, небольшой разрыв шаблона: в Linux есть инструменты для разработки, но вот с продуктами от Adobe не сложилось. Существует несколько путей спасти ситуацию.
Пройдемся по возможным способам вёрстки PSD макетов, при отсутствии Windows или OS X, которые я попробовал. Если вам известны еще способы, расскажите об этом в комментариях.
Способ 1: Вёрстка из PNG
Берется растровая версия макета в PNG, из которой руками вырезается нужная графика, а затем, с помощью Pixel Perfect, подгоняются отступы и размеры шрифта.
Плюсы
Минусы
Способ 2: GIMP
GIMP — местный батька графических редакторов. Умеет открывать PSD и работать со слоями. Поддержка PSD здесь неполная: не видны эффекты наложения и странно рендерятся векторные объекты. Просите дизайнера растрировать слои. Но даже так нельзя быть уверенным в точности рендеринга.
Способ 3: Виртуализация
Несколько лет назад я запускал в виртуалке Windows XP с Photoshop CS3. Самый стабильный способ из возможных.
Плюсы
Минусы
Способ 3: Photoshop под Wine
Внезапно, Photoshop работает в Wine! Часто просто падает, ломает инструменты или перестаёт сохранять изменения, но работает. Если для вас не проблема 3-4 раза перезапустить редактор по ходу работы, то жить можно.
Способ 4: Adobe Assets
Adobe Assets — веб-сервис, часть Adobe Creative Cloud, в котором можно бесплатно извлечь ассеты из PSD шаблона. Перед работой, макет должен быть загружен в ваш аккаунт, бесплатный объем которого ограничен двумя гигабайтами.
Плюсы
Минусы