Бесплатный плагин к Photoshop для экспорта фигур в CSS

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

Но сразу хочу предупредить, плагин CSS3Ps из всех векторных форм Photoshop работает только с фигурами (Shapes)! Если Вы преобразуете фигуру в обычный контур, плагин не сможет верно описать в CSS его форму.

Установку и работу плагина с проверкой работоспособности CSS-кода я показал в коротком видео:



А теперь подробнее.

Подготовка

Для начала, если Вы пользуетесь Photoshop CC, Вам потребуется установить Adobe Extension Manager CC (в версиях CS6 и ниже Extension Manager встроен). Программа устанавливается с помощью приложения Adobe Creative Gloud. Если с этим приложением имеются проблемы, то скачать Extension Manager можно с официального сайта Adobe или по ссылкам внизу этой странички. Надо распаковать архив и в папке Extension Manager CC дважды кликнуть по файлу AdobeExtensionManager_CC_LS20.exe. Также нам понадобится сам плагин, это файл CSS3Ps.zxp, он также находится в архиве, либо скачать его можно с официального сайта плагина CSS3Ps.

Установка плагина

Если программа Adobe Photoshop запущена, закройте её
Двойным щелчком открываем файл CSS3Ps.zpx для соответствующей версии Photoshop (напоминаю, если у Вас Photoshop CC, то должен быть установлен Adobe Extension Manager CC)
Это действие запускает Adobe Extension Manager, где мы нажимаем кнопку "Принять" (Accept)

1

Нажатие кнопки принять запускает установку, соглашаетесь с вопросом, если приложение не подписано, нажимаете ОК. После окончания процесса установки Вы увидите строку, которую я обвел красным овалом:

2

Можете запускать Adobe Photoshop

Работа с плагином

Сначала я нарисовал фигуру без обводки и заливки в форме сектора круга, как сделать такой контур, читайте здесь. Затем я применил к ней стили слоя "Наложение градиента", "Обводка" и "Тень". Вот, что вышло у меня:

3

Открывается панель плагина через Окно --> Расширения --> CSS3Ps (Window --> Extensions --> CSS3Ps). Далее кликаем по этой панели и плагин всё остальное делает сам!

Автоматически открывается окно браузера с изображением фигуры и кодом CSS:

4

Копируем код и всё. Конечно, имя класса CSS здесь написано на кириллице, что недопустимо, т.к. Photoshop с русскоязычным интерфейсом, но имя класса так и так следует изменить. Вот этот код (имя свойства CSS я вставил своё:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.sector
{
        width: 200px;
        height: 200px;
        -webkit-border-radius: 195px 0 0;
        -moz-border-radius: 195px 0 0;
        border-radius: 195px 0 0;
        background-color: #616161;
        -webkit-box-shadow: 3px 4px 17px 1px rgba(0,0,0,.87);
        -moz-box-shadow: 3px 4px 17px 1px rgba(0,0,0,.87);
        box-shadow: 3px 4px 17px 1px rgba(0,0,0,.87);
        border: solid 3px #6177a9;
        background-image: -webkit-linear-gradient(128deg, #0a00b2, #f00 50%, #fffc00);
        background-image: -moz-linear-gradient(128deg, #0a00b2, #f00 50%, #fffc00);
        background-image: -o-linear-gradient(128deg, #0a00b2, #f00 50%, #fffc00);
        background-image: linear-gradient(-38deg, #0a00b2, #f00 50%, #fffc00);
}

А вот встроенный в код этой странички div с erfpfyysv выше стилем, обращаю внимание, что это не рисунок, а div со стилем CSS:


Скачать плагин и Extension Manager:

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

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

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

интерфейс  Perfect Resize
В этой статье пойдёт речь о плагине для Adobe Photosop OnOne Perfect Resize Professional Edition 7.0.2, скачать который Вы сможете бесплатно по...
Ico
С помощью плагина ICOFormat.8bi Вы можете сохранять любые документы, открытые в программе Фотошоп, в виндовсовском формате иконок *ico. Плагин...
зона действия контрольно точки плагина
Почти каждый фильтр плагинов линейки Nik Collection, бесплатно скачать которые вы можете на этой странице, имеет так называемую контрольную точку....
плагин Analog Efex Pro от Nik Collection
Analog Efex Pro - бесплатный плагин, преобразует современный цифровой снимок в фотографию, сделанную классической плёночной камерой. Плагин имеет...