• ×

    • Скругляем углы на фото в фотошопе. Как закруглить углы на изображении в фотошопе

    02.09.2019

    Скругленные углы на фотографии выглядят достаточно интересно и привлекательно. Чаще всего такие изображения применяются при составлении коллажей или создании презентаций. Также картинки со скругленными углами можно использовать в качестве миниатюр к постам на сайте.

    Вариантов использования много, а способ (правильный) получить такое фото всего один. В этом уроке я покажу, как скруглить углы в Фотошопе.

    Открываем в Фотошопе фотографию, которую собираемся редактировать.

    Затем создаем копию слоя с водопадом под названием «Фон» . Для экономии времени воспользуемся горячими клавишами CTRL+J .

    Копия создается для того, чтобы оставить нетронутым исходное изображение. Если (вдруг) что-то пойдет не так, можно будет удалить неудачные слои и начать заново.

    В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей.

    Я задам значение в 30 пикселей, так будет лучше видно результат.

    Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование» горячими клавишами CTRL+T . На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта.

    Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER .

    Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку» Посмотрите скрин, там указано, где данная функция находится.

    Функция заставляет объекты автоматически «Прилипать» к вспомогательным элементам и границам холста.

    Как видим, вокруг фигуры образовалось выделение. Теперь переходим на слой-копию, а со слоя с фигурой снимаем видимость (см. скриншот).

    Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки.

    Инвертируем выделение горячими клавишами CTRL+SHIFT+I . Теперь выделение осталось только на углах.

    CSS3-рамка дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.

    Закруглённые углы и рамки-изображения

    1. Закругление углов с помощью border-radius

    Поддержка браузерами

    IE: 9.0
    Firefox: 4.0
    Chrome: 4.0
    Safari: 5.0, 3.1 -webkit-
    Opera: 10.5
    iOS Safari: 7.1
    Opera Mini: —
    Android Browser: 4.1
    Chrome for Android: 44

    Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса . Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip .

    Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно.

    Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый и нижний правый угол , а второе — верхний правый и нижний левый .

    Значения, заданные через / , определяют горизонтальные и вертикальные радиусы . Свойство не наследуется.

    Варианты

    Div {width: 100px; height: 100px; border: 5px solid;} .r1 {border-radius: 0 0 20px 20px;} .r2 {border-radius: 0 10px 20px;} .r3 {border-radius: 10px 20px;} .r4 {border-radius: 10px/20px;} .r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;} .r6 {border-radius: 10px 20px 30px 40px/30px;} .r7 {border-radius: 50%;} .r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;} .r9 {border-bottom-left-radius: 100px;} .r10 {border-radius: 0 100%;} .r11 {border-radius: 0 50% 50% 50%;} .r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
    Рис. 1. Примеры различных вариантов закругления углов блока

    2. Рамки-изображения border-image

    Поддержка браузерами

    IE: 11.0
    Firefox: 15.0, 3.5 -moz-
    Chrome: 16.0, 7.0 -webkit-
    Safari: 6.0, 3.0 -webkit-
    Opera: 15.0, 11.0 -o-
    iOS Safari: 7.1
    Opera Mini: 8 -o-
    Android Browser: 4.4, 4.1 -webkit-
    Chrome for Android: 42

    Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} .

    При помощи такого простого изображения можно получить вот такие рамки для элемента.

    /* Пример 1 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: stretch; } /* Пример 2 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: round; }
    Рис. 2. Пример оформления границ блока с помощью изображения

    Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice .

    2.1. Ширина рамки-изображения border-image-width

    Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .

    border-image-width
    Значения:
    длина Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
    число Числовое значение, на которое умножается значение border-width .
    % Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
    auto Соответствует значению border-image-slice .
    initial
    inherit

    Синтаксис

    Div {border-image-width: 30px;} Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

    2.2. Ресурс рамки-изображения border-image-source

    Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.

    Синтаксис

    Div {border-image-source: url(border.png);}

    2.3. Элементы рамки-изображения border-image-slice

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

    Значения:
    число Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
    Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
    Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой.
    Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы.
    Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
    Числовое значение представляет количество px .
    % Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
    fill Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
    initial Устанавливает это свойство в значение по умолчанию.
    inherit Наследует значение этого свойства от родительского элемента.

    Синтаксис

    Div {border-image-slice: 50 20;}
    Рис. 4. Пример задания срезов рамки-изображения

    2.4. Повтор рамки-изображения border-image-repeat

    Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений.

    Синтаксис

    Div {border-image-repeat: repeat;} Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

    2.5. Смещение рамки-изображения border-image-outset

    Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений.

    Синтаксис

    Div {border-image-outset: 10px;}
    Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

    3. Смещение внешней рамки outline-offset

    Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline .

    /*Рисунок 1:*/ img { border: 1px solid pink; outline: 1px dashed grey; outline-offset: 3px; } /*Рисунок 2:*/ img { border-width: 1px 10px; border-style: solid; border-color: pink; outline: 1px dashed grey; outline-offset: 3px; } /*Рисунок 3:*/ img { border: 3px inset pink; outline: 1px dashed grey; outline-offset: 1px; }
    Рис. 7. Пример оформления изображения внешней рамкой

    4. Градиентная рамка

    Значением border-image может выступать не только изображение, но и градиентная заливка.

    Полупрозрачная рамка

    В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .

    * {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; background: #00E4F6; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%); border-image-slice: 1; }

    Почтовый конверт

    * {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px); }

    Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

    В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

    Код Описание Вид
    div { border-radius: 10px; } Радиус скругления для всех уголков сразу.
    div { border-radius: 0 10px; } Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
    div { border-radius: 20px 10px 0; } Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
    div { border-radius: 20px 10px 5px 0; } Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

    В примере 1 показано создание блока со скруглёнными уголками.

    Пример 1. Уголки у блока

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Радиус

    Меня - супплетивная форма винительного падежа от я.

    Результат данного примера показан на рис. 1.

    Рис. 1. Блок со скруглёнными уголками

    Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.

    Пример 2. Круглая кнопка

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Кнопка

    Результат данного примера показан на рис. 2.

    Рис. 2. Круглая кнопка

    В браузере Opera скругление к

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое