Бесплатный плагин к 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:

Теги:

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

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

Плагин для создания готовых векторных иконок
C помощью бесплатного плагина Flaticon Вы можете найти и вставить готовую векторную иконку в Ваш документ PSD, не покидая программы Photoshop. Плагин...
Плагин для быстрой работы со слоями
Layrs Control 2 - это бесплатный плагин для Photoshop, позволяющий упростить рутинную работу со слоями. Плагин подходит для версий Photoshop CS6 и...
3D тень для текста
Плагин 3D Shadow предназначен для создания трёхмерной тени от какого-либо предмета - текста, фигуры и т.п., также, что очень важно, плагин может...
интерфейс  Perfect Resize
В этой статье пойдёт речь о плагине для Adobe Photosop OnOne Perfect Resize Professional Edition 7.0.2, скачать который Вы сможете бесплатно по...