функция прибора Прямоугольник

В Photoshop CC много новых функций получил инструмент "Прямоугольник со скруглёнными краями" (Rounded Rectangle Tool). Одним из наиглавнейших нововведений является то, что Вы сможете поменять размер радиус скруглений, цвет заливки и обводки теснее после творенья фигуры.

Не считая того, создав обычную фигуру "Прямоугольник" (Rectangle Tool), Вы сможете конвертировать его прямоугольник со скруглёнными краями, используя панель параметров, которая автоматом раскрывается сходу после творенья фигуры.

В Панели параметров указаны все характеристики фигуры: вышина, ширина, цвета заливки и обводки, форма углов (скошенные, прямые), тип обводки и т.п.

Не считая того, Photoshop СС позволяет без каких-либо посторониих плагинов экспортировать данные CSS фигурs в буфер размена, но об этом позднее.

В этом уроке, изменив только лишь настройки фигуры в панели слоёв, из прямоугольника я получил сектор круга:

7

Для примера я создал обычную фигуру "Прямоугольник":

1

Как Вы видите, радиус скругления углов этой фигуры ноль, что показано в панели параметров (я обвёл эти параметры зелёным эллипсом), цвет обводки синий 0000ff, цвет заливки красный ff0000.

Давайте попробуем изменить радиус скругления. Я введу значение 20px в верхний нижний угол и нажму Enter. Итог:

2

Как видите, из обычного (Rectangle) наш прямоугольник перевоплотился в совершенно другую фигуру, Rounded Rectangle, или "Прямоугольник со скруглёнными углами".

Я могу ввести хоть какое другое значение радиуса и радиус поменяется сходу после нажатия Enter.

Но, как Вы, наверняка, заметили, я ввожу значение в окно ввода 1-го радиуса, а изменяются все четыре. Это происходит поэтому, что по умолчанию активна кнопка "Связать значение радиусов:

3

Если мы кликнем по ней, тем самым, отключив эту опцию, то величины радиусов будут не связаны между собой, и я могу получить, к примеру, это:

4

Толщина обводки по умолчанию задана в пт, но я могу поменять эту величину на привычные мне пиксели, кликнув правой кнопкой мыши по окну ввода:

5

А сейчас давайте представим, что вдруг из прямоугольной фигуры, которую я показал в начале, мне понадобилось сделать сектор круга с радиусом 200 пикселей и углом меж радиусами 90 и шириной обводки 5 пикс.

Я ввожу значение ширины и вышины по 200 пикс., меняю единицы измерения ширины обводки на пиксели и ввожу значение 5. Потом я ввожу величину радиусов трёх углов, одинаковую нулю, а величину оставшегося угла подгоняю вручную ползуном (рядовая формула расчёта длины дуги L = R/360 здесь не подойдёт из-за необыкновенностей построения кривых Безье). Итог:

6

Итак, я получил из прямоугольника сектор круга:

7

А сейчас об экспорте фигуры в код CSS. Нет ничего проще. Идём Слои --gt; Копировать CSS и данные фигуры копируются в буфер обмена компьютера.

Раскрываем, текстовый редактор, к примеру, Notepad++, творим новый документ и вставляем туда код.