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

Вам понадобится

Фотография или другое изображение в цифровом формате;
Компьютер с установленной на нем лицензионной программой Corel Draw.

Инструкция

Рассмотрим способ, вам требуется закруглить один или несколько углов у прямоугольного по-разному.
Откройте в программе Corel Draw новый при помощи CTRL+N, или выбрать функцию «Создать» (Create) в выпадающем из меню «Файл» списка. Далее из того же списка выберите операцию «Импорт» или вызовите ее комбинацией клавиш CTRL+I. Далее, укажите в диалоговом окне путь к файлу изображения, и нажмите кнопку «Импорт» (Import). Ваше отобразится на данном листе.

На панели инструментов найдите свиток «Редактор узлов» (Node Editor), в нем выберите инструмент «Форма» (Shape). Также этот инструмент можно вызвать нажатием клавиши F10.

Справа от угла, который вам нужно закруглить, щелкните левой кнопкой мыши по границе изображения. Появится новый узел у изображения, дополнительно к четырем угловым. Далее, выберите опцию «Преобразовать в кривую» (Convert Line To Curve) на панели «Редактора узлов». Слева от вновь созданного узла появятся метки закругления.

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

Очень простым способом (с привлечением векторного объекта) можно одновременно округлить все углы у прямоугольного изображения. Не прибегая к вышеописанному способу редактирования узлов, нарисуйте рядом с импортированным изображением прямоугольник такого же размера инструментом «Прямоугольник» (Rectangle Tool) или вызовите инструмент клавишей F6.

Уже знакомым вам инструментом «Форма» щелкните по прямоугольнику и потяните мышкой за любой из его узлов к центру прямоугольника. Углы будут закруглены. Радиус закругления можно откорректировать тем же инструментом.
Отметьте свое изображение стрелочкой инструмента «Указатель» (Pick Tool).
Далее в списке главного меню найдите свиток «Эффекты» (Effects) и выберите опцию «PowerClip»и из выпадающего списка функцию «Поместить в контейнер» (Place Inside Container). Широкой стрелкой укажите на нарисованный вами прямоугольник с закругленными углами. Он станет рамкой, в которой разместится ваше изображение.

Я долго искал как можно закруглить углы при помощи Adobe Photoshop, но везде где-то не дописывают, либо написано неправильно. Как оказалось закруглить углы у любой картинки займёт не более 30 секунд, естественно после того как вы научитесь это делать.

И так чтобы выполнить такую несложную операцию необходимо запустить приложение и закинуть нужную нам картинку внутрь программы, либо воспользоваться Меню->Файл->Открыть->Нужная картинка.jpg.Я буду использовать обычное изображение природы.

Обратите внимание на правый нижний угол, в "Слоях" появилось фоновое изображение, его надо преобразовать в слой. Для этого жмём по фону правой кнопкой мыши и выбираем "Слой из заднего фона".

В результате данного действия, наш фон преобраузется в слой.

Создаём дубликат картинки, для этого жмём правой кнопкой мыши по Слой 0 и выбираем "Создать дубликат слоя".

Рисунок2

Скрываем с рабочей области "Слой 0". Чтобы скрыть слой необходимо нажать иконку ГЛАЗА рядом с названием слоя.

Выделяем нужную часть на изображение.

Как только вы отметили прямоугольником нужную часть картинки, нажмите правой кнопкой мыши внутри выделе и выберите пункт "Образовать выделенную область".

В диалоговом окошке жмём кнопочку ОК, растушёвку не трогаем.

Очень важный момент! Выделяем Слой 0 (Копия), затем нажимаем кнопку DELETE на клавиатуре. Слой 0 (копия) должен быть выделен обычным щелчком мыши.

Если всё сделано правильно, в Фотошопе вы увидите примерно вот такую картину. Теперь можно сохранить изображение например в png формате, и радоваться произведению искусства.

Есть ещё один момент, если вырезанный кусок в два а то и 3 раза меньше оригинального изображения, у него останется большая пустая область, её надо удалить. Для этого выбираем инструмент раскройка, и выделяем область изображения без пустой области.

Затем заходим в меню Редактировать->Скопировать.

Заходим в меню Файл->Создать, и просто нажимаем ОК. Программа автоматически подгонит ширину и высоту холста выделенного участка изображения.

В новом проекте "Без имени 1", а мы автоматически окажемся именно в нём, заходим в меню Редактировать->Вставить.

Сохранять картинку лучше всего с помощью пункта "Сохранить для Web". Во-первых можно вручную выбрать качество изображения в процентах, во-вторых размер изображения будет в несколько раз меньше чем если сохранять обычным способом.

И что у нас получилось на выходе.

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

1 голос

Доброго времени суток, уважаемые начинающие разработчики сайтов. Наконец-то я перехожу к рассказам о том, какие методы использовать для создания крутых сайтов. Сегодня я поведаю как за несколько минут обработать фотографию и тем самым сделать портал красивее, а длительность посещений существенно больше. Не верите? А зря…

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

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

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

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

Быстрый способ закруглить фотку

Итак, работать будем в фотошопе. Открываем изображение.

Находим инструмент «Прямоугольник со скругленными углами».

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

Не важно какой цвет вы выберете. Тащите объект по картинке, чтобы нужная вам область была внутри фигуры.

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

Теперь, удерживая кнопку CTRL, кликните по центру слоя, в котором находится только что нарисованный вами прямоугольник. Будьте внимательны, если тыркнете по тексту, то ничего не произойдет. Нажимать нужно именно в центр иконки с миниатюрным изображением.

Теперь убираем видимость. Для этого щелкните по «глазу» рядом со слоем.

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

Готово. Если вы собираетесь выставлять картинку на сайт, то можно ее сохраните, главное не ошибитесь с форматом.

Вам нужен именно png.

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

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

Просто выделяете ее (Ctrl+A) затем копируете (Ctrl+C) и вставляете в другое изображение (Ctrl+V).

Скругление для дизайнеров, ускоряем процесс работы над проектом

Допустим, вы работаете над каким-то важным крутым проектом. Все уже почти готово и вы хотите посмотреть, как оно будет выглядеть со скругленными углами. Не обязательно открывать по сто тысяч вкладок: обрезать — вставлять и так далее. Все можно сделать гораздо быстрее и проще.

Вот посмотрите на мой пример. Кстати, если хотите, то можете скачать этот psd- файл, открыть его фотошопом и попрактиковаться (скачать ).

Выделяем нужный нам слой. Я собираюсь работать с большим изображением совы. Поэтому зажимаю Ctrl и кликаю на центру миниатюрного изображения этого слоя. Не по тексту или глазу. По картинке с картинкой. Простите за тавтологию.

Первым делом ставим галочку напротив «применить эффект на границах». Затем ставим радиус.

К сожалению, придется выбирать на глаз. Здесь, как правило, ставят 15. Это стандарт, но, как вы понимаете, от него можно отходить.

Подбираем идеальный вариант.

Затем во вкладке «Выделение» находим «Инверсия».

Нажимаем кнопочку «del» на клавиатуре и готово.

Чтобы убрать ползающих муравьев по краям нужно нажать одновременно Ctrl и D.

Если вам понравились эти уроки, то можете найти еще. Для этого не обязательно искать по Youtube, что в голову придет. Можно изучить все фишки «от А до Я» по видео урокам. Получите бесплатную презентацию последней версии курса на русском фотошопе. В этом случае вы не только сможете делать элементарные вещи, но и научитесь выполнять сложную работу, увидите, как применяют простые навыки настоящие специалисты и что из этого получается.

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

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

Берете за основу первый способ обрезки из этой статьи, но вместо работы с прямоугольником выбираете многоугольник.

Не забудьте выставить «три стороны» в панели сверху, чтобы не морочить голову с преобразованием фигуры.

И, если не хотите, чтобы углы были такие же острые как у меня, просто выставите сглаживание в настройках.

Этот рисунок в psd формате вы можете скачать прямо из моего блога и поработать с ним (скачать ). Думаю, что улучшить его не проблема.

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

Как закруглить углы фотографии в фотошопе инструментом ПРЯМОУГОЛЬНИК СО СКРУГЛЕННЫМИ УГЛАМИ

1. Запускаем фотошоп, открываем нужную фотографию

2. Выбираем инструмент ПРЯМОУГОЛЬНИК СО СКРУГЛЕННЫМИ УГЛАМИ

3. В настройках инструменты можно задать радиус, на сколько сильно закруглить углы в фотошопе. Я выбрала 50 px

4. У нас выбран инструмент ПРЯМОУГОЛЬНИК СО СКРУГЛЕННЫМИ УГЛАМИ.
Теперь мышку подводим к левому верхнему углу, появился крестик он должен быть белого цвета, и тянем мышку в правый нижний угол, так чтоб крестик совпал с углом картинки, в этом случае крестик станет белым.
У нас появится фигура с закругленными углами.
Далее картинку в слоях перетаскиваем в верхний слой, как показано на скрине

5. Выделяем область закругления.
На картинке жмем правой кнопкой мыши выбираем Образовать выделенную область и ничего не меняем, - жмем ОК.

У нас появиться закругленное выделение

6.Заходим ВЫДЕЛЕНИЕ-ИНВЕРСИЯ или просто нажать Shift+Ctrl+I

7. Теперь нужно удалить выделенные углы с помощью кнопки Delete на клавиатуре.

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

Урок от Натальи Петровой: (blogs.mail.ru/mail/petrovanata11/62219DB24CD43D05.html)

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

Кнопка