Инструментът за заоблен правоъгълник получи много нови функции във Photoshop CC. Едно от най-важните нововъведения е, че можете да промените размера на радиуса на филето, цвета на запълването и щриха, след като формата е създадена.
Също така, след като създадете обикновена форма на инструмента Rectangle Tool, можете да я трансформирате в заоблен правоъгълник, като използвате панела със свойства, който автоматично се отваря веднага след като създадете формата.
Панелът със свойства съдържа всички параметри на формата: височина, ширина, цветове за запълване и щрих, форма на ъгъла (скосен, прав), тип щрих и др.
В допълнение, Photoshop CC ви позволява да експортирате данни за CSS форми в клипборда без добавки на трети страни, но повече за това по-късно.
В този урок, като промених само настройките на формата в панела със слоеве, получих кръгъл сектор от правоъгълник:
Например създадох правилна форма на правоъгълник:
Както можете да видите, радиусът на ъгъла на тази фигура е нула, което е показано в панела със свойства (оградих тези опции със зелен овал), цветът на контура е син 0000ff, цветът на запълване е червен ff0000 .
Нека опитаме да променим радиуса на заобляне. Ще въведа стойност от 20px в горния долен ъгъл и ще натисна enter. Резултат:
Както можете да видите, от обичайния (Правоъгълник) нашият правоъгълник се превърна в напълно различна форма, Заоблен правоъгълник или „Заоблен правоъгълник“. Мога да въведа всяка друга стойност на радиуса и радиусът ще промяна веднага след натискане на Enter.
Но, както вероятно сте забелязали, въвеждам стойност в полето за въвеждане на един радиус и всичките четири се променят. Това е така, защото бутонът „Стойност на радиуса на връзката:“ е активен по подразбиране.
Ако щракнем върху него, като по този начин изключим тази опция, тогава стойностите на радиуса няма да бъдат свързани и мога да получа например това:
Теглото на щриха по подразбиране е зададено в точки, но мога да променя тази стойност на обичайните си пиксели, като щракна с десен бутон върху полето за въвеждане:
А сега нека си представим, че внезапно от правоъгълната форма, която показах в началото, трябваше да създам кръгов сектор с радиус 200 px и ъгъл между радиусите 90° и ширина на линията 5 px .
Въвеждам стойност за ширина и височина от 200 пиксела., променете единиците на ширината на чертата на пиксели и въведете стойност 5. След това въвеждам стойност за радиусите на трите ъгъла, равна на нула, и коригирам стойността на оставащия ъгъл ръчно с плъзгача (обичайната формула за изчисляването на дължината на дъгата еL=?R?/360°няма да работи тук поради особеностите на конструирането на криви на Безие). Резултат:
И така, получих кръгъл сектор от правоъгълник:
А сега относно експортирането на формата в CSS код. Няма нищо по-лесно. Да отидем на Слоеве ->Копиране на CSS и данните за формата се копират в клипборда на компютъра.
Отворете текстов редактор, например Notepad++, създайте нов документ и поставете кода там.
Това е SCC стилът, който Photoshop ми даде за тази форма:
1 2 3 4 5 6 7 8 9 10 11 12 |
.Rectangle_1 { border-width: 5px; цвят на границата: rgb(0, 0, 255); стил на границата: плътен цвят на фона: rgb(255, 0, 0); позиция: абсолютна; ляво: 15px; отгоре: 25px; ширина: 190px височина: 190px; z-индекс: 2; } |
Не само че не е пълен и не е оптимизиран, но и името на класа е на кирилица, което е груба грешка.
Затова препоръчвам да изчакате малко с родния Photoshop CSS експорт, по-добре е да използвате безплатния плъгинCSS3Ps, инсталирането и използването на този плъгин е описано подробно тук, а още по-добре, скулптурирайте стиловете сами.
Как да отворите отново прозореца със свойства на формата, ако случайно сте го затворили
Отговор на въпрос от читатели на сайта. Ако сте затворили прозореца със свойства на правоъгълника и трябва случайно да го отворите, тогава:
Уверете се, че желаната форма е избрана. Ако формата не е избрана, тогава можете да я изберете с помощта на инструмента за избор на път
Отворете раздела на главното меню „Прозорец“ (Window) и щракнете върху реда „Свойства“ (Properties).Екранна снимка на английски. Как да русифицирате интерфейса на Photoshop CS6 е описано тук.