Css hat: Плагин, конвертирующий стили фотошопа в код css / Хабр

CSS Hat 2.0.5 & PNG Hat 1.1.8,графика

CSS Hat: волшебная кнопка, превращающая стили в Photoshop в CSS-код
Преобразование дизайна из Photoshop в веб-страницу всего за один клик – это не совсем свежая идея. Как только появились веб-дизайнеры, появилась и эта идея-мечта.

CSS Hat отличается от других приложений, которые вы могли видеть ранее. Это приложение не представляет собой полноценный WYSIWYG, направленный на то, чтобы вы могли создавать веб-сайты, не написав и строчки кода. Это приложение скорее направлено на возможность быстрого создания CSS3-стилей для конкретных элементов, используя процесс, который был популярен с десяток лет назад (а то и больше) прямо в Photoshop. Приложение великолепное!
Достаточно выделить слой и CSS Hat прямо в Photoshop сгенерирует CSS3, LESS, SASS, LCSS или Stylus –правила для элемента. Остается лишь нажать кнопку Copy и вставить код в файл с таблицами стилей.

Можно включить комментарии, префиксы -moz -webkit, свойства height и width, преобразовать название слоя в имя селектора.

PNG Hat: Мгновенный экспорт изображений, загрузка на сервер и HTML / CSS шаблонов — все готово к использованию с этим плагином для Photoshop.

Разработчик: Piffle, LLC
Язык интерфейса: Английский
Лечение: в комплекте
Тип лекарства: замена файлов (см. Спойлер «процедура установки»)

Системные требования:
Mac OS (10.7+) / Windows
• CSS Hat 2.0.5
Supports Adobe Photoshop CC 2014 only
• PNGhat 1.1.5
Supports Photoshop CS5, CS6, CC, CC 2014.1+

 Процедура установки:

• файлы для последующей замены находятся в архивах:
— Med/doctorCSShat2.0.5.zip
— Med/doctorPNGhat1.1.5.zip

• Для Msc OS X
— Смонтировать образ и запустить установщик.
— Запустить Фотошоп и само расширение, нужно для того, чтобы прописались настройки …) полностью завершить работу приложения
— Заменить файлы (файлы для замены включены в раздачу)

Заменяем тут:
~/Library/Application Support/Adobe/CEP/extensions/com. madebysource.csshat2/
~/Library/Application Support/Adobe/CEP/extensions/com.madebysource.pnghat/

• Для Windows
— Запустить установщик
— Запустить Фотошоп и само расширение, нужно для того, чтобы прописались настройки …) полностью завершить работу приложения
— Заменить файлы (файлы для замены включены в раздачу)

Заменяем тут:
%AppData%AdobeCEPextensionscom.madebysource.csshat2
%AppData%AdobeCEPextensionscom.madebysource.pnghat

• Установка вручную
— распаковать zip и прочитать инструкцию по установке

За файлы для замены, огромное спасибо Infernalload!

Вернуться на предыдущую страницу

Похожие новости

• Uplet 1.2
• Echofon 1.8.7
• Fuel for PowerPoint 1.4
• AppCleaner 2.3
• Обработка семейной фотосессии От и До (2014)
• EditReady 2.5.3
• ProPresenter 5.2.6 для Mac
• KMPlayer 0. 3.2 Beta
• Wells (2017)
• Disk Analyzer Pro 1.5.0
• DiskAid 6.7.6
• Media Rage 3.4.9
• Super Vectorizer 2.0.6
• Noizio 1.5
• Photo to Movie 5.0.4.2 (Mac OS)
• Mitti 1.3.1
• Contexts 3.7.1
• Sketch 53.1
• Fuel for Pages 1.5
• SoundBunny 1.1.2 — регулятор громкости для Mac

Теги

• графика

Секреты Расширений, Скриптов И Плагинов Photoshop Для Веб-Дизайна / WAYUP

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

Поэтому удобным решением является использовать плагины и расширения, которые специально и создаются для того, чтобы упростить и ускорить труд веб-мастера и художника. В этом материале мы рассмотрим самые необычные и удобные расширения для Photoshop, некоторые из которых бесплатные, а некоторые и платные. Так или иначе, платить или загружать со сторонних ресурсов – решать уже вам.

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

В общем, начинаем.

Мощный плагин, позволяющий упростить множественные действия со слоями в одном документе Photoshop.  Загрузить его можно бесплатно в виде демо-версии или приобрести полностью. Подходит для версий Photoshop CC 2015 и выше для Windows и Mac.

Например, можно переименовать сразу несколько слоев одним кликом мышки, что особенно удобно и полезно, если у вас большой документ или несколько однотипных, либо вы планируете часть слоев позднее дублировать в новый документ и с ними работать отдельно.

Также плагин позволяет найти некоторую группу одноимённых слоев и изменить их свойства разом, а не по одному. Существует также возможность автозаполнения, то есть во время набора названия слоя, появятся варианты имен, выделения их цветом. Все изменения в Renamy в окне Слои применяются автоматически, как и наоборот. Наглядно увидеть плагин в работе можно на сайте разработчиков и на видеоинструкции.

Еще один небольшой  и весьма полезный плагин, позволяющий в разы уменьшить кропотливую работу веб-дизайнера  при подготовке графических файлов или создании вексельной графики. Pixel2Vector бесплатен и поддерживается Photoshop CS5, CS6 и CC.

Компания The Orange Box создала возможность быстрой конвертации пиксельного изображения в векторное в один клик. Таким образом, теперь вы можете нарисовать что-то, написать кисточкой или карандашом, а затем, нажав одну кнопку, превратить в вектор сразу в Photoshop. Полученное изображение будет иметь векторный контур, который затем можно редактировать пером, увеличивать/уменьшать без потери качества.

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

Простой и легкий плагин для удобства создания активов из слоев и групп. Retinize It бесплатен и подходит для Photoshop CS5, CS6 и CC.

Будь то смарт-объект, форма или изображение, его можно в один клик экспортировать в 100%/200%/300% размере с сжатием и набором цветовой гаммы, формата файлов для правильного отображения на устройствах с системой iOS и экранами Retina.

Таким образом, если веб-мастер создаёт мобильную версию сайта или добавляет иконки разного размера, то как раз данный плагин будет удобен.

Расширение (наверное, одно из самых интересных) для создания быстрого и удобного макета сайтов. Плагин бесплатен и поддерживает работу с Photoshop CS6, CC & CC 2014. Работа новейших версий CC2015 и выше не поддерживается, только если через ручную правку реестра и файла версии.

Небольшой по размеру, но функциональный, он позволяет создать дизайн в несколько кликов. Здесь и макеты footer, и центральных секций, верхнего меню и прочее, и прочее. Таким образом, добавляя разные блоки и секции, можно собрать макет дизайн сайта, а затем редактировать его и накладывать текст, картинки, оформление, кнопочки и прочее, без чего дизайн не является дизайном и для чего, по сути, и нужны веб-дизайнеры.

Ниже мы привели примеры того, как можно создать макет на пустом документе и через нажатие кнопки New Template с добавлением модульной сетки. Вариаций много и все хорошо заменяется. Дополнительно на страничке разработчиков существует и наглядное видео того, как это работает.

Минималистический и удобный плагин для работы с форматом PNG. SuperPNG бесплатен и поддерживается всеми версиями, начиная с Photoshop CS3.

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

Плагин SuperPNG позволяет сократить размер файла, а качество, все же, он не трогает.

Альтернатива SuperPNG, разработанная на том же самом API.  Плагин платный и демо-версий нет. Несмотря на это, уникальность данного расширения в том, что он позволяет работать с пакетами файлов, поэтому, если вам нужно много PNG сжать, то TinyPNG чуть более удобен. Да и настроек побольше и оформление посимпатичнее.

TinyPNG также создает и JPG файлы, имеет много настроек и работает со слоями. То есть, выделив нужный слой в Photoshop, нажимайте по кнопке Export selected layers. Если же нажать на Show instruction, то появится большой psd файл с мини-учебником.

Весьма удобный и простой плагин, несмотря на то, что платный. Увы, демо-версии тоже нет, но за последние годы он становится самым популярным. Дело в том, что плагин позволяет создать для любого слоя и объекта на нем чистый код CSS3. Затем данный код можно перенести на создаваемый сайт в любой другой редактор или другое приложение. Будет это прямоугольник, кнопка, иконка или текстовой блок – совершенно неважно.

Код CSS3 создается автоматически, как только вы нарисуете объект и включите окно плагина Если решите заменить цвет (например, нашего прямоугольника), то и кодировка автоматически обновится. Если будет добавлен текстовой слой, то и для него будут описаны свойства. Если требуется CSS-код для нескольких слоев, то выделяйте их и плагин автоматически все напишет. Одним словом, для верстальщиков самое нужное.

Таким образом, для веб-дизайнеров и тех, кто не слишком дружит с версткой, такой плагин будет весьма полезен.

Бесплатная альтернатива плагину CSS Hat, поддерживающая работу разных версий Photoshop. Отличие же его в том, что работает он в онлайн-режиме через облако. То есть, необходимо выделить нужный слой  с элементом дизайна сайта (или объект на слое), нажать кнопку CSS3Ps и затем смотреть, как откроется окно браузера, сайт разработчиков и появится затем нужный код CSS3. Поскольку CSS3Ps представляет собой скрипт, а не расширение в «чистом виде», то доступен он в меню Файл->Сценарии.

Что удобнее для веб-дизайнера, сказать сложно. Кого-то устраивает обычное кодирование, кому-то важно off-line.

Плагин для тех, кто работает на Mac OS X, версий для Windows нет. Тем не менее, HTML Block полностью бесплатен и предлагает помощь в кодировании слоев и объектов Photoshop, используя для этого движок WebKit. Помимо создания кода, в отдельном окне будет отображаться и получаемый результат. То есть того, что будет видно в окне браузера.

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

 Установка расширений и плагинов

Удобнее всего устанавливать все расширения для Photoshop через отдельное приложение Adobe Extension Manager CC (CS5/CS6 и так далее). Оно бесплатное и доступно на сайте самого Adobe. Но это только в том случае, если плагин имеет вид архива с расширением ZXP.

В противном случае, необходимо устанавливать в C:\Program Files (x86)\Common Files\Adobe\CEP\extensions (если Win64) или смотреть прилагаемую инструкцию от разработчиков и других создателей плагина, так как разные версии (и сборки) Photoshop имеют разное расположение папок (а если версий на компьютере много…). Но и некоторые плагины устанавливаются в другие папки, как например CSS Hat и TinyPNG. Универсального рецепта нет.

Бывает, что некоторые плагины и расширения не поддерживают современные и новые версии Photoshop. Не обновили их разработчики, а поработать с ними хочется. Так, например, Velositey 2 не работает с CC2015 и выше. Но поскольку плагин бесплатный и распространяется с открытым исходным кодом (Open Source Code) на портале github. com, то и решение нашлось на просторах интернета. Нужно четко знать, какой у вас Photoshop, так как наши настройки для  CC2015 файла CSXS\manifest.xml такие (немного поправили комментарий с github).

 

Таким образом, он у нас заработал и не вызывает проблем. Аналогично и с другими бесплатными плагинами, что по какой-то причине не были обновлены разработчиками вовремя. Это вовсе не означает, что они устарели или вы занялись «пиратством». Разработчики изначально представляют его в открытом виде, а значит, и редактировать можно самостоятельно, просто кардинальных новшеств нет, «багов» нет, вот, возможно и решили сборку не обновлять, а ограничиться только github’ом. Это портал для разработчиков, где можно найти практически все приложения, плагины и прочее, что распространяются по лицензии Open Source. Здесь же ведутся и обсуждения улучшений, багов и прочего.

И самое главное, все расширения будут вам доступны, только если у вас в меню Окно есть пункт Расширения. Если у вас его нет, проверьте Редактирование->Настройки->Внешние модули. В противном случае вам нужна другая версия приложения, так как эта урезана. Есть и такие, увы.

Итоги

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

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

Надеемся, что вам понравились некоторые из них.

дизайнов, тем, шаблонов и графических элементов Css Hat, загружаемых на Dribbble

1. Посмотреть рождественские UX вещи

   Новогодние UX вещи

2. Посмотреть Snap Turtle Hat Co.

   Snap Turtle Hat Co.

3. Посмотреть Сара Го

   Сара Го

4. Посмотреть коллекцию веб-сайтов 2021

   Коллекция сайтов 2021

5. Онлайн-обучение Skillex

6. Посадка Gig Share на Webflow

7. Посмотреть фестивальное лето

   Праздничное лето

8. Веб-сайт DAT Webflow

9. Посмотреть сумасшедший виноград

   сумасшедший виноград

10. Просмотр Mytraffic — Главная

    Mytraffic — Дом

11. Посмотреть MR. Chicken&CO

    MR.Chicken&CO

12. Посмотреть 🍪 Анимацию баннера

    🍪 Анимация баннера

13. View Kalli — Адаптивные HTML-шаблоны

    Kalli — адаптивные HTML-шаблоны

14. Посмотреть ⭐️ Кнопка

    ⭐️ Кнопка

15. Посмотреть Lips Love Landing на Webflow

    Губы любят посадку на Webflow

16. Соль Fensea — проект Webflow

17. Посмотреть Бруно Навигация

    Бруно Навигация

18. Посмотреть веб-сайт JUO Studio Webflow

    Веб-сайт JUO Studio Webflow

19. Spaces Urbanistic Landing на Webflow

20. Посмотреть целевую страницу Coinread

    Целевая страница Coinread

21. Посмотреть шерстяную шапку Dunn Lumber

    Шерстяная шапка Dunn Lumber

22. Посмотреть версию CSS Glowin Drop

    Версия CSS Glowin Drop

23. Посмотреть Go Trade – живой проект в Webflow

    Go Trade — Живой проект на Webflow

24. Сircle Website — Webflow Concept

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще…

CSS Hat превращает стили слоя Photoshop в CSS3

Рассказ

Харрисон Вебер

История

Харрисон Вебер

Харрисон Вебер — редактор функций TNW в Нью-Йорке. Отчасти писатель, отчасти дизайнер. Оставайтесь на связи: Twitter @harrisonweber, Google+ и электронная почта. (показать все) Харрисон Вебер — редактор функций TNW в Нью-Йорке. Отчасти писатель, отчасти дизайнер. Оставайтесь на связи: Twitter @harrisonweber, Google+ и электронная почта.

CSS Hat — это простой и очень полезный плагин Photoshop, который генерирует CSS3 на основе ваших стилей слоя Photoshop. Это один из самых полезных плагинов Photoshop, которые я когда-либо видел, и теперь, после большого спроса (с тех пор, как он добился успеха на Mac), команда сегодня выпускает CSS Hat для Windows.

Конечно, этот 20-долларовый плагин не может сделать всю вашу работу за вас — в CSS3 есть ограничения, которые не позволяют ему точно отображать такие вещи, как атлас и узорные наложения (примечание: скоро появятся свойства шрифта) — но тем не менее, это отличная экономия времени, тем более, что CSS3 является новым и еще не вбитым в головы многих веб-дизайнеров.

После простого процесса установки вы можете получить доступ к плагину, выбрав Window > Extensions > CSS Hat . Оттуда просто выберите слой и нажмите на панель CSS Hat, где вы можете просмотреть и скопировать CSS, добавить комментарии, создать префиксы для конкретных поставщиков, добавить ширину и высоту выбранного слоя и многое другое.

Присоединяйтесь к TNW в Валенсии!

Сердце технологий приближается к сердцу Средиземноморья

Подробнее

В частности, вот что, по словам создателей, может делать CSS Hat:

Шляпа работает в Photoshop CS4 (или новее) и поддерживает следующие свойства слоя:

• слои заливки градиентом и сплошным цветом
Непрозрачность слоя
• и заливка
Эффекты слоя
• :
  • тень
  • внутренняя тень
  • внутреннее свечение
  • внешнее свечение
  • наложение градиента
  • цветная накладка
  • ход
• текстовых слоев:
  • экспорт цвета шрифта и тени текста (дополнительные функции находятся в разработке, предложите одну)
• ширина и высота
• радиус границы — нарисуйте прямоугольник или круг со скругленными углами, получите определения радиуса границы

На стороне экспорта CSS Hat выводит чисто основанный на стандартах CSS3, а также (необязательно) свойства с префиксами поставщиков для всех основных браузеров.

No related posts.