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

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

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

Задачи, выполняемые этим плагином, ясны из названия. Плагин выполняет преобразование фотографии в картины, причём картины разные - от рисунков углём...
готовый
Плагин Flaming Pear Flood 1.40 (язык - русский и английский) для Photoshop, который Вы можете бесплатно скачать по ссылкам в конце статьи, позволяет...
плагин для поиска и скачивания изображений в Photoshop
C помощью бесплатного плагина Pictura мы можем искать и скачивать изображения непосредственно из интерфейса Photoshop, а загрузка изображения в...
Фильтр Извлечь (Extract), не вошедший в комплект Photoshop SC5
По ссылке в конце этой странички Вы можете скачать фильтр "Извлечь" (Extract), не вошедший в стандартный комплект поставки Photoshop SC5. В архиве...