Photoshop против Sketch битва за чистейший HTML/CSS

0

Еще в марте я написал статью, в которой изложил 3 причины использования Sketch и сравнил функцию “Export” с функцией Photoshop “Extract Assets”.

Тогда, на мой взгляд, Sketch выигрывал с небольшим преимуществом. Однако image assets не единственный тип  активов, который вы можете взять из состава макета. В этой статье мы рассмотрим, как оба приложения справятся с такой деликатной задачей, как генерация HTML/CSS кода.

Метод 1: старый способ с Photoshop

1431402975iUa8lSS-Imgur-e1431402998346

С появления CS6, Adobe позволил их сообществу создавать свои собственные расширения для Photoshop. Это привело к созданию многих инструментов извлечения кода, как CSS Hat и CSS3Ps, который является бесплатным.

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

Метод 2: экспорт кода в Sketch

Стили слоев в приложении Sketch очень CSS-ориентированные (это, в конце концов, инструмент дизайна пользовательского интерфейса), так что очень легко щелкнуть правой кнопкой мыши и “Copy CSS Attributes”. “Shadow”, например, принимает четыре значения; X, Y, Blur и Spread, и это непосредственно переносится в CSS box- shadow: X Y Blur Spread. На мой взгляд, это самая простая форма извлечения кода.

1431065218Rectangle-1-Screen-Shot-2015-03-23-at-18.55-w800

Однако приложение Sketch, конечно, все еще довольно новое и у него нет помощника-приложения для редактирования кода. Я не знаю, намерен ли Bohemian Coding исправить это (было бы замечательно), но сейчас Sketch не имеет возможности расширения рабочего процесса с точки зрения кодирования.

Это означает, что мы должны переключаться между приложением Sketch и каким-нибудь редактором кода, чтобы вручную заполнить этот пробел между стилями Sketch и переносимым кодом.

Метод 3: извлечение кода с Adobe Brackets

За последние 18 месяцев Adobe прогрессировал; есть ряд мобильных приложений для снимка векторов, цветов из реальной жизни с помощью камеры устройства, и эти снимки автоматически синхронизируются с вашим аккаунтом Creative Cloud.

Но самым впечатляющим является сотрудничество Brackets и Photoshop. Brackets – редактор с открытым исходным кодом для фронтенд разработчиков, созданный с HTML, CSS и JavaScript. Несмотря на возможности “Live Preview” и интеграции с Edge Web Fonts, его пользовательский интерфейс довольно минимален, потому что вы добавляете только необходимые функции.

Импорт документов Photoshop в Brackets

С выходом Brackets 1.0, веб-разработчики теперь могут импортировать документы Photoshop в Brackets и извлекать информацию о дизайне, такую как цвета, шрифты и другие атрибуты CSS во время кодирования, даже если Photoshop не установлен на их компьютере.

Фактически, подписчик Creative Cloud может отправить вам “общую ссылку”, которую можно скопировать в Brackets, что позволяет начать расширение, не имея файла вообще. Давайте попробуем.

Во-первых, найдите боковую панель и иконку подсказки “Extract for Brackets (Preview)” – нажмите на нее, и вы увидите, образец документа Photoshop со всеми неповрежденными слоями, где вы можете переключать эти слои, как если бы вы были в самой программе Photoshop. Brackets очень хорошо вводит вас в курс дела, я постараюсь, чтобы он был кратким.

Измерение расстояния между двумя слоями

Вы можете измерить расстояние между двумя слоями в Sketch, нажав на первый слой, удерживая клавишу Shift, а затем щелкнув второй слой. Я сделал то же самое в Extract for Brackets и понял, что я могу скопировать значение в буфер обмена и использовать его в своей таблице стилей, не выходя из приложения. В действительности вы можете держать клавишу Shift и скопировать любое значение в буфер обмена.

Быстрое кодирование с подсказками CSS

CSS подсказки это уникальная функция, и она показывает, что Brackets развиваются, несмотря на то, что Dreamweaver СС все еще существуют. Наш следующий шаг – выбрать слой из PSD и извлечь все стили из него.

Итак, сначала выберите слой, а затем перейдите в таблицы стилей. Когда наступит время объявить стиль, Brackets не только предложит подробные подсказки кода на основе вашего ввода, но также предложат уже определенные значения на основе выбранного вами слоя.

1431065223Screen-Shot-2015-03-20-at-22.46-w800

Одним недостатком является то, что функция не вводит автоматически атрибуты стиля в зависимости от поставщика браузеров, однако есть расширение для этого, если вам это нужно.

Вердикт

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

Преобразование PSD в CSS код в рабочем процессе стиля split-screen, даже без PSD на вашем компьютере, является лучшей функцией, которую я видел в последние месяцы.

А самое лучшее это то, что Brackets бесплатен, независимо от того, есть ли у вас Photoshop или подписаны ли вы на Creative Cloud.

Поделиться: