За най-новите версии на Photoshop има много интересен безплатен плъгинCSS3Ps за експортиране на форми с техните стилове на слоеве в CSS стилове. Плъгинът експортира стилове като текстови слоеве, рамка, радиус, сянка, градиентно запълване и други, можете да прочетете повече на официалния им уебсайт.
Но искам да ви предупредя веднага, приставката CSS3Ps за всички векторни форми на Photoshop работисамо с фигури! Ако преобразувате фигура в обикновена пътека, приставката няма да може да опише правилно формата й в CSS.
Инсталация и работа на плъгина с проверка на функционалността на CSS кода показах в кратко видео:
И сега още.
Подготовка
Първо, ако използвате Photoshop CC, ще трябва да инсталирате Adobe Extension Manager CC (Extension Manager е вграден в CS6 и по-долу). Програмата се инсталира с помощта на приложението Adobe Creative Gloud. Ако има проблеми с това приложение, тогава можете да изтеглите Extension Manager от официалния уебсайт на Adobe или от връзките в долната част на тази страница. Трябва да разопаковате архива и да щракнете двукратно върху файла AdobeExtensionManager_CC_LS20.exe в папката Extension Manager CC. Нуждаем се и от самия плъгин, това е файлът CSS3Ps.zxp, той също е в архива или можете да го изтеглите от официалния сайт на плъгина CSS3Ps.
Инсталиране на приставка
Ако Adobe Photoshop работи, затворете го
Щракнете двукратно, за да отворите файла CSS3Ps.zpx за подходящата версия на Photoshop (не забравяйте, че ако имате Photoshop CC, тогава Adobe Extension Manager CC трябва да бъде инсталиран)Това действие стартира Adobe Extension Manager, където кликваме върху бутона Приемам
Натискането на бутона за приемане стартира инсталацията, съгласете се с въпроса, ако приложението не е подписано, щракнете върху OK. След като процесът на инсталиране приключи, ще видите ред, който оградих в червено:
Можете да стартирате Adobe Photoshop
Работа с плъгина
Първо нарисувах фигура без линия и запълних формата на сектор от кръг, как да направя такъв контур, прочетете тук. След това приложих към него стиловете на слоя Gradient Overlay, Stroke и Drop Shadow. Ето какво получих:
Отворете панела с добавки през Window ->Extensions ->CSS3Ps (Window ->Extensions ->CSS3Ps). След това щракнете върху този панел и приставката ще свърши останалото!
Автоматично отваря прозорец на браузъра с фигурно изображение и CSS код:
Копирайте кода и това е. Разбира се, името на CSS класа тук е изписано на кирилица, което е недопустимо, т.к Photoshop с интерфейс на руски език, но името на класа все пак трябва да се промени. Ето кода (вмъкнах мое собствено име на свойството в CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
сектор { ширина: 200px; височина: 200px; -webkit-border-radius: 195px 0 0; -moz-border-radius: 195px 0 0; радиус на границата: 195px 0 0 цвят на фона: 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); кутия-сянка: 3px 4px 17px 1px rgba(0,0,0,.87); рамка: плътни 3px 6177a9; фоново изображение: -webkit-линеен градиент (128deg, 0a00b2, f00 50%, fffc00); фоново изображение: -moz-линеен градиент (128deg, 0a00b2, f00 50%, fffc00); фоново изображение: -o-линеен градиент (128deg, 0a00b2, f00 50%, fffc00); фоново изображение: линеен градиент (-38 градуса, 0a00b2, f00 50%, fffc00); } |
И тук е div със стил erfpfyysv по-горе, вграден в кода на тази страница, моля, имайте предвид, че това не е картина, а div със стил CSS:
Изтегляне на приставка и мениджър на разширения:
Изтегляне от Depositfiles.com