Сделать закругленные края. Скруглённые уголки

Данный урок достаточно простой, но результат будет радовать глаз – аккуратные закругленные углы ваших снимков. А добиться этого очень просто, имея в арсенале Adobe Photoshop любой версии, и снимок, который необходимо обработать.

Закругление углов снимка происходит в несколько этапов:

1. Откройте изображение в Photoshop. Для этого нажмите «Файл» и «Открыть» или сочетание клавиш на клавиатуре Ctrl+O.


2. Создайте новый слой, нажав «Слои», затем «Новый слой».


3. В левой части программы располагается вертикальная панель инструментов. В ней вы найдете инструмент «Прямоугольник». В данный момент не он нам нужен, поэтому кликаем по нему правой кнопкой мыши и выбираем инструмент «Прямоугольник со скругленными углами».


4. В верхней части программы появится панель настроек данного инструмента. Здесь можно задать желаемый радиус скругления углов, т.е. можно усилить или уменьшить скругление. По умолчанию параметр имеет значение 10 пикселей. Обратите внимание, что для работы с инструментом у вас должен быть активирован параметр «Контуры», который также располагается на панели настроек.


5. Выделите все изображение, начиная с верхнего левого угла и заканчивая правым нижнем.


6. Кликните по изображению правой кнопкой мыши и выберите параметр «Образовать выделенную область». Появится пунктир выделения.


7. Теперь перейдите в горизонтальную панель инструментов и откройте вкладку «Выделение», а затем выберите «Инверсия».




8. Теперь все наоборот – выделено не само изображение, а ненужные углы. Для того чтобы убрать их, просто нажмите на клавиатуре сочетание клавиш Ctrl+Delete.


9. Теперь снимите выделение, нажав на клавиатуре Ctrl+D. Наслаждайтесь результатом!


Не забудьте сохранить готовую фотографию на компьютер.

Прямые углы изображений нравятся всем. Но все-таки бывают случаи, когда эти самые углы требуется закруглить. Тогда Вам на помощь вновь придет программа фотошоп. В этой статье разберем один из многих способов как это можно сделать. Имейте ввиду, мой способ предполагает также и небольшое отсечение изображения по краям, это, своего рода, жертвоприношение во имя округлых углов.

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

Шаг 1

По умолчанию, все изображения, открываемые в фотошопе становятся фоновым изображением. Фотошоп именует такой слой как «Фон», а также блокирует его от лишнего редактирования. Об этом нам сигнализирует маленькая иконка замочка.

Чтобы разблокировать такой слой, нужно дважды кликнуть по нему. Появится диалоговое окно «Новый слой». Ничего не изменяйте, просто нажмите на ОК. Теперь замочек должен исчезнуть.

Шаг 5

На панели слоев кликните на самый первый слой с нашим исходным изображением и нажмите сочетание клавиш Ctrl+Shift+I . В итоге у нас должна выделиться вся область вне границ нашего квадрата. Это называется . Присмотритесь внимательней, что изменилось:

Шаг 6

Теперь нажмите комбинацию клавиш Ctrl+X (редактирование — вырезать ) для удаления выделенной области. Выделение должно исчезнуть, а там, где когда-то было изображение, появится шахматный фон (прозрачность).

Шаг 7

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

Шаг 8

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

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

Итак, все готово. Изображение с закругленными углами будет выглядеть так:

А как сделать только, например, один закругленный угол?

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

Надеюсь инструкция вам помогла и вы сможете сделать что-нибудь классное! Успехов.

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

25.07.2016 27.01.2018

В этом уроке вы узнаете, как в фотошоп сгладить острые углы у фигур.

Для начала, давайте создадим фигуру. Сделать это можно, выбрав в панели инструментов инструмент Произвольная фигура (Custom Shape Tool). Горячая клавиша вызова подменю инструментов для создания векторных фигур - U.

Для того, чтобы этот инструмент стал активным, есть два способа:

1. С зажатой клавишей Shift щелкнуть по группе инструментов и откроется подменю для выбора нужного инструмента;

2. Длинное нажатие левой кнопки мыши по группе инструментов также откроет подменю.

Загружаем в фотошоп все имеющиеся фигуры (щелкаем по миниатюре фигуры в верхней панели и нажимаем на «шестеренку» справа для открытия дополнительных настроек):

Из выпадающего списка выбираем фигуру с острыми уголками, например, такую звездочку с 10 углами:

При создании фигуры не забываем удерживать клавишу Shift - это поможет сохранить пропорции.

Теперь необходимо растрировать фигуру - щелчок правой клавишей мыши по слою с фигурой-Растрировать слой.

Радиус подбираем в зависимости от размера холста и желаемого результата, я выбрала 6 пикселей.

Теперь нам нужно загрузить выделение слоя с фигурой, для этого с зажатой клавишей Ctrl щелкните по миниатюре слоя с фигурой на панели слоев.

При активном выделении нажимаем кнопку «Уточнить край» (Refine Edge ):

Откроется меню настроек, в котором нам нужно параметр Растушёвка (Feather) оставить на 0 , а параметр Контрастность (Contrast) увеличить максимально, до 100%. Параметр Сгладить (Smooth) настраиваем на свой вкус, именно он поможет скруглить углы фигуры. В случае с 10-гранной звездой я его выставила на максимум, у вас же могут быть совсем другие настройки.

В параметре Вывод в … оставляем настройку, установленную по умолчанию - выделение .

Нажимаем клавишу Enter для применения настроек. Создаем новый слой и при помощи инструмента Заливка (Paint Bucket Tool) или перейдя в меню Редактирование-Выполнить заливку заливаем выделение нужным цветом, например, черным , как на исходной фигуре. Отключаем видимость исходного слоя с фигурой и получаем вот такую фигуру со скругленными углами:

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

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство 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 скругление к применяется некорректно, если не задана граница через свойство border .

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

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Вы сами себе учитель

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

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

В этой небольшой статье рассмотрим пример создания в фотошопе "тонкой" рамки толщиной в 1 - 2 пикселя с закругленными краями . Данные рамки (и их фрагменты) широко используются дизайнерами и веб-мастерами при верстке макетов и создании шаблонов для сайтов. Применяются для обрамления статей, меню, кнопок и т.д.

Итак приступим:

1. Создадим новый документ (Верхнее меню "Файл" - "Новый") с размерами, например, 500 на 500 пикселов. Содержимое фона: прозрачное.

2. Идем в Панель инструментов (расположена слева), выбираем инструмент "Прямоугольная область" (М). На нашем документе рисуем прямоугольную область. Параметры инструмента "Прямоугольная область": "Новая выделенная область", "Растушевка: 0 пикс.", "Стиль: нормальный" (Рис. 1) .

3. В верхнем меню выбираем вкладку "Выделение" - "Модификация" - "Оптимизировать" (Рис. 2) . Значение радиуса возьмем, например, равное 20 пикселям. Жмем "Да". Видим, что углы нашего выделенного прямоугольника закруглились на величину выбранного значения (20 пикс.) (Рис. 3) .

4. В верхнем меню выбираем "Редактировать" - "Выполнить обводку". Ставим параметры обводки. Ширина: 2 пикс. (для наглядности). Цвет возьмем какой-нибудь красный. В этой же вкладке установим: "Позиция относительно границы: по центру (можно выбрать значения "внутри" и "снаружи")", "Наложение: Режим нормальный", "Непрозрачность: 100%", "Сохранить прозрачность: пусто". Жмем кнопку "Да" (Рис. 4) . Снимаем выделение - комбинацией клавиш на клавиатуре "Ctrl + D" и получаем нужную нам рамку толщиной 2 пикселя красного цвета с закругленными краями (Рис. 5) . Теперь ее фрагменты или рамку целиком можно использовать для оформления какого-либо шаблона, баннера и т.п.

Рис. 1	Рис. 2
Рис. 3	Рис. 4
Рис. 5	Рис. 6

Для примера, и лучшей визуализации я создал новый слой с заливкой белым цветом, переместил его ниже слоя с нашей рамкой и создал еще несколько аналогичных рамок с размытыми толщиной, цветами и закруглением углов (Рис. 6) .