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

Скачать с Depositfiles.com

Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]

Оцените автора
( 88 оценок, среднее 4 из 5 )
RuGraphics
Добавить комментарий