CSS вёрстка под GNU/Linux или верстаем макеты из .psd без Photoshop

CSS вёрстка под GNU/Linux или верстаем макеты из .psd без Photoshop

Как верстать HTML/CSS макеты под GNU/Linux без фотошопа? Зачем верстальщику нужен Photoshop? Сегодня будут ответы на все эти вопросы!

Действительно, покупать Photoshop ради вёрстки глупо. Нам по большей части нужно просто адекватно распарсить .psd файл, выудить нужные ресурсы и инфу. Мы не собираемся там ничего рисовать. Тем более, с этим хорошо справляется Gimp, нам не нужен поприетарный софт для этого. Но, заказчики часто скидывают .psd макеты для вёрстки, и с этим приходится жить. Кто-то ставит винду с фотошопом в виртуалке, кто-то пытается запускать его под wine и прочие костыли. Ну, не переходить же в винду из-за какого-то Фоштопа, верно? Верно!

Как быть? Всё на самом деле ещё лучше! Забудьте о Photoshop, Винде и прочих костылях — они вам больше не понадобятся!

Комплект молодого бойца:

  • Sublime Text
  • Brackets с плагином Extract
  • Adobe Assets
  • ???
  • PROFIT

Честно говоря, Sublime Text в этом списке необязателен. Если вы используете какой-то другой редактор или IDE — продолжайте ;) Я же использую Sublime для всего. По-моему, он идеален, и Brackets с ним никак не сравнится. А теперь давайте обо всём по порядку.

Скачиваете и устанавливаете себе последнюю версию редактора Brackets от Adobe. Если нет из коробки, то установите к нему плагин Extract. Это можно сделать прямо в интерфейсе редактора через менеджер дополнений.

В Brackets откройте интерфейс плагина Extract и войдите под своим логином и паролем от Adobe ID. Если его у вас нет, зарегистрируйтесь и получите его. Загрузите нужный .psd макет. После загрузки вы уже сможете им манипулировать, но сам плагин(как и Brackets) достаточно сырой, не поддерживает кириллицу, многие возможности недоступны. Brackets со своим плагином сделали своё дело, загрузили наш .psd в облако Adobe.

UPD: В сервисе Assets, можно загружать файлы сразу через браузер. Не нужно устанавливать какие либо сторонние приложения, вроде их cloud клиента или brackets. Возможно данная возможность была уже давно, просто я не сразу её нашёл. Тем не менее, теперь всё стало ещё проще и приятнее ;)

Теперь заходим на сайт Adobe Assets: assets.adobe.com (и пройдём регистрацию, если ещё у вас нет ID). Тут-то нас и ждёт всё самое интересное! Вы можете легко манипулировать внутренностями .psd! Получать css-код элементов, быстрое копирование текста, размеры элементов и многое другое, вам такое в фотошопе и не снилось. Очень легко можно извлекать любую графику, ничего нарезать не нужно. По поводу css — не путайте это с генераторами говнокода вроде Dreamweaver, Adobe Muse и прочей ерундой. Там не генерируется весь css полностью, а только часть некоторых элементов. Скажем, размер и фон нужного блока, какие-то другие его свойства, градиенты, можно сразу брать готовым css-кодом, что очень удобно. Теперь процесс вёрстки упростится в разы!

Вот и всё. Теперь мы можем верстать из .psd макеты html/css под GNU/Linux без всяких костылей и фотошопов, а ещё удобнее и быстрее чем раньше! И не только под GNU/Linux, этот же способ верстать без Photoshop подойдёт для Windows и Mac OS. К сожалению, почему-то нет возможности загружать .psd через сайт Adobe (или я не нашёл такую возможность), поэтому приходится использовать Brackets с плагином Extract. Можете конечно попробовать и его использовать для разработки, но он не может нормально обрабатывать большие файлы, может просто зависнуть или вылететь. Есть ещё в нём фича Live Preview — но мне она не показалась удобной. Да и такое вроде можно делать и в Sublime, через спец плагин. Мне больше удобнее такое делать сразу в браузере, а потом оттуда копировать в редактор. Я пробовал делать в Brackets один проект, в итоге доделывал проект уже в Sublime Text :) У меня всё, удачи!

comments powered by Disqus