Как в фотошопе скруглить углы: Работа с инструментом «Прямоугольник» в Photoshop

Содержание

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

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

В этом уроке Photoshop мы увидим как просто закруглить углы рисунка на примере аватарки, не ограничиваясь толщиной в 1px :

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

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

Закругляем все углы рисунка с помощью формы Photoshop

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

1. Открываем Фотошоп. В уроке используется моя любимая версия Adobe Photoshop CS3 , но подойдет и любая другая версия, установленная на вашем компьютере.

2. Открываем исходный рисунок, края которого мы будем закруглять. Если рисунок отличается по размеру и форме от того, который нам нужен, нужно и/или в Фотошопе перед началом закругления углов.

3. Нажимаем на клавиатуре Ctrl+A чтобы выделить весь рисунок, затем нажимаем Ctrl+C , чтобы его скопировать. Открываем новое окно в Фотошопе (Ctrl+N ) и вставляем в него скопированный рисунок (Ctrl+V ). При этом фон в новом окне должен быть либо , либо того цвета, который должен окружать рисунок с закругленными краями на сайте.

4. Создаем новый слой (Ctrl+Shift+N ). И в этом новом слое с помощью инструмента Rounded Rectangle Tool (U) рисуем квадрат или прямоугольник нужного размера:

5. Цвет фона нарисованного прямоугольника не имеет значения. Параметр Radius , характеризующий степень закругленности угла, для этого урока равен 8 , но вы можете изменить его по своему усмотрению:

6. Нарисованную в новом слое фигуру можно двигать с помощью стрелок на клавиатуре. Ее форму можно менять, нажав на клавиатуре Ctrl+T и растягивая затем фигуру с помощью мыши. Если тянуть за угол, удерживая клавишу Shift , размер фигуры будет меняться пропорционально. В результате всех этих действий мы добьемся того, что фигура с заокругленными краями будет такого размера и формы, которые нам нужны:

7. Удерживая клавишу

Ctrl кликаем по превью слоя в панели слоев Layers (у нас это красный квадрат). Это позволит нам выделить красный прямоугольник с закругленными углами, о чем свидетельствует появившаяся пунктирная линия по его границе:

8. В панели слоев Layers переходим на нижний слой с основным изображением и нажимаем комбинацию Ctrl+Shift+I (или Select -> Inverse в главном меню Photoshop). Это позволит выделить область, которая лежит за пределами красного квадрата с закругленными уголками.

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

Layers нажимаем на иконку глаза возле слоя с красным квадратом). Нажимаем на клавиатуре M и кликаем в любом месте на холсте рисунка, чтобы снять выделение на готовом изображении аватарки с закругленными углами. Если фон мы установили прозрачным, получим следующее:

10. Рисунок без острых углов готов. Можно и использовать как аватарку или иллюстрацию на сайте.

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

Если нужно закруглить только один угол рисунка, а остальные при этом должны остаться острыми, вышеописанная инструкция тоже отлично подойдет для использования. Для этого достаточно сделать с помощью комбинации Ctrl+T размеры красного прямоугольника больше, чем редактируемая картинка. При этом края красного квадрата будут заканчиваться за пределами холста и такой прямоугольник можно наложить на рисунок так, чтобы только один угол накладывался на видимую область рисунка, а остальные остались за его пределами. С помощью инвертирования и удаления выделенной части рисунка мы закруглим только один нужный угол картинки, а остальные углы останутся острыми. Аналогично можно быстро и просто закруглить любое количество углов любого изображения.

Также для создания картинки с неровными краями или любыми другими подобными эффектами можно использовать картинку с такими неровными краями или закругленными углами, скачанную с какого-нибудь сайта. При этом нужно удалить фон, не относящийся к картинке, например, с помощью инструмента Magic Wand Tool (W) .

Узнать больше про продвижение мобильных приложений вы можете на сайте advertmobile.net. Этот сервис предлагает мотивированные установки в больших объемах для разработанного вами приложения, а также их грамотную раскрутку в App Store и Google Play.

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

  • Фотография или другое изображение в цифровом формате;
  • Компьютер с установленной на нем лицензионной программой 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). Широкой стрелкой укажите на нарисованный вами прямоугольник с закругленными углами. Он станет рамкой, в которой разместится ваше изображение.

1 голос

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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) или перейдя в меню Редактирование-Выполнить заливку заливаем выделение нужным цветом, например, черным , как на исходной фигуре. Отключаем видимость исходного слоя с фигурой и получаем вот такую фигуру со скругленными углами:

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

Значение размытия зависит от линейного размера изображения и величины радиуса скругления, которое Вы хотите получить. Я выбрал значение 4 пикселя:

На всякий случай, создаю копию слоя с размытой фигурой, нажав Ctrl+J.

Зажмите клавишу Ctrl и кликните по иконке слоя в панели слоёв, чтобы создать выделенную область вокруг фигуры. Пройдите по вкладке главного меню Выделение —> Уточнить край (Select —> Refine Edge). Режим просмотра (вверху диалогового окна) выбираем «на чёрном»:

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

Панель слоёв выглядит так:

Как можно увидеть на предпоследнем изображении, углы у нас закруглены, но вдоль краёв внутри фигуры появился ненужный цветовой переход (это случилось из-за размытия). Чтобы исправить это зажимаем клавишу Ctrl и кликаем по иконке маски слоя:

Вокруг фигуры появляется выделение. Затем обязательно кликаем по иконке слоя, выбираем желаемый цвет в цветовой палитре и нажимаем Ctrl+Delete для заливки выделения. Я взял исходный цвет фигуры Готово:

Вот как можно закруглить уголки в тексте, применив описанный выше метод:

Кроме того, если слой-маску наложить на исходный файл и частично её удалить, можно добиться действия на отдельные участки фигуры или текста.

Как в фотошопе сделать закругленные края. Делаем закругленные углы картинок в фотошопе

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

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

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius , например так:

Border-radius: 10px;

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

Блок с прямыми углами

Блок с закругленными углами

Закругление углов у картинок

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

Вот изображение без CSS обработки

А теперь с загругленными углами:

Border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

Border-radius: 10px; border: 5px #ccc solid;

а затем и тени:

Border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;

Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:

Border-radius: 10px; box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

Border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px , то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:

Alignnone { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG :

Img { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

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

Последнее обновление:18/01/16

Как на картинке закруглить углы в фотошопе

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

Для тех, кто любит все посмотреть, небольшой видеоролик “как закруглить углы в фотошопе”:

В первую очередь, Вам нужен фотошоп. Где его взять, вариантов два:

  • купить на официальном сайте
  • найти на торрентах

Какой вариант выбрать, решать Вам.

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

Справа, на превью картинки, есть маленький замочек, который блокирует редактирование исходного изображения (фонового слоя). Чтобы создать новый слой и работать уже с ним, щелкаем на нем 2 раза левой кнопкой мыши, в появившемся окошке ничего не меняем, нажимаем «Да».

Если замочка нет, то одно из двух:

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

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

Выбираем в инструментах “Прямоугольник со скругленными углами”.

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

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

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

С помошью меню Выделение → Инверсия выделяем все, что вне прямоугольника со скругленными углами, и удаляем выделенное клавишей Delete.

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

Мы получили картинку с закругленными углами. Сохраняем ее для Web: Файл → Сохранить для Web и устройств. Выбираем Preset: PNG-24, Transparency и жмем Save. В формате PNG-24 картинка сохраняется с прозрачным фоном, для того чтобы ее можно было встроить в любой дизайн сайта.

Все то же самое можно сделать с инструментом «Эллипс», тогда Вы получите круглую картинку или в рамке эллиптической формы.

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

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

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

Шаг 1

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

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получение изображения или его детали, которая имеет необходимую форму, без надобности дальнейшего редактирования;

Получение оригинального и красивого оформления для фотографии.

Итак, запустив Фотошоп, необходимо добавить тот файл, который будут обрезать. Для этого можно воспользоваться пунктами меню «Файл», «Открыть» или просто перетянуть фотографию в рабочую среду программы. Для того чтобы закруглить края в Фотошопе, нужно предварительно придать изображению соответствующий размер. Сделать это можно через «Изображение», «Размер» или, предварительно создав новый документ с заданными размерами, переместить в него искомый файл. Там его можно будет деформировать по собственному усмотрению, используя «Редактирование», «Трансформация».

Подготовив таким образом рабочий образец, можно перейти непосредственно к процедуре того, как закруглить края в Фотошопе. Для этого понадобиться найти на панели слева один из инструментов, который называется «прямоугольник» (вызывается клавишей «U»), и выбрать из перечня его разновидностей — «со скругленными краями». Пользователь может настроить угол скругленных краев при помощи опции «радиус», которая станет доступна на верхней панели.

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

Для того чтобы понять, как закруглить края в Фотошопе, нужно нажать правой кнопкой по слою с полученным прямоугольником и выбрать «Образовать выделенную область». После чего на основной панели вверху нажать «Выделение», «Инверсия». Затем остается перейти на слой с основным изображением и применить команду «Delete», которая осуществляется нажатием соответствующей кнопки на клавиатуре или через «горячую» кнопку «D». Полученный результат остается только сохранить через меню «Файл», «Сохранить» для «родного» PSD-формата. Или можно, используя «Сохранить как…», получить результат в любом другом распространенном формате.

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


Закруглить углы в фотошопе. Как быстро сделать закругленные углы картинки, фотографии и любого другого объекта в Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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


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


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


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


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


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


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


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

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) или перейдя в меню Редактирование-Выполнить заливку заливаем выделение нужным цветом, например, черным , как на исходной фигуре. Отключаем видимость исходного слоя с фигурой и получаем вот такую фигуру со скругленными углами:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получение изображения или его детали, которая имеет необходимую форму, без надобности дальнейшего редактирования;

Получение оригинального и красивого оформления для фотографии.

Итак, запустив Фотошоп, необходимо добавить тот файл, который будут обрезать. Для этого можно воспользоваться пунктами меню «Файл», «Открыть» или просто перетянуть фотографию в рабочую среду программы. Для того чтобы закруглить края в Фотошопе, нужно предварительно придать изображению соответствующий размер. Сделать это можно через «Изображение», «Размер» или, предварительно создав новый документ с заданными размерами, переместить в него искомый файл. Там его можно будет деформировать по собственному усмотрению, используя «Редактирование», «Трансформация».

Подготовив таким образом рабочий образец, можно перейти непосредственно к процедуре того, как закруглить края в Фотошопе. Для этого понадобиться найти на панели слева один из инструментов, который называется «прямоугольник» (вызывается клавишей «U»), и выбрать из перечня его разновидностей — «со скругленными краями». Пользователь может настроить угол скругленных краев при помощи опции «радиус», которая станет доступна на верхней панели.

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

Для того чтобы понять, как закруглить края в Фотошопе, нужно нажать правой кнопкой по слою с полученным прямоугольником и выбрать «Образовать выделенную область». После чего на основной панели вверху нажать «Выделение», «Инверсия». Затем остается перейти на слой с основным изображением и применить команду «Delete», которая осуществляется нажатием соответствующей кнопки на клавиатуре или через «горячую» кнопку «D». Полученный результат остается только сохранить через меню «Файл», «Сохранить» для «родного» PSD-формата. Или можно, используя «Сохранить как…», получить результат в любом другом распространенном формате.

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

Как сделать закругленные углы css

Приветствую вас, дорогие читатели!

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

Навигация по статье:

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

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

<div class=”round-corner”> </div>

<div class=”round-corner”>

</div>

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner{ height:100px; width:200px; background:#2F73B6; }

.round-corner{

height:100px;

width:200px;

background:#2F73B6;

}

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

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

Например:

border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

Как закруглить углы картинки при помощи CSS?

Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.

Для картинки CSS код будет выглядеть так:

.content img { border-radius: 20px; }

.content img {

border-radius: 20px;

}

Вот что получится:

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

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

  1. 1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

    .round-corner{ border-radius: 20px; }

    .round-corner{

    border-radius: 20px;

    }

    Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

  2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

    Выглядеть это будет так:

    <style> .round-corner{ border-radius: 20px; } </style>

    <style>

    .round-corner{

    border-radius: 20px;

    }

    </style>

  3. 3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style. Для картинки это будет выглядеть так:

    <img src=”images/pic.png” style=” border-radius: 20px;”

    <img src=”images/pic.png” style=” border-radius: 20px;”

Первый вариант конечно предпочтительней, но если он вызывает у вас определённые трудности, то воспользуйтесь любым другим.

Как ещё можно закруглить углы при помощи CSS?

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

  1. 1.На первом месте – левый-верхний угол
  2. 2.На втором – правый верхний угол
  3. 3.На третьем – правый нижний угол
  4. 4.На четвёртом – левый нижний

Задавая разные значения можно получить следующие варианты закругления углов:

Для этого нужно прописать:

border-radius: 0 80% 0 80%;

border-radius: 90% 100% 0 100%;

border-radius: 100% 100% 0 0;

border-radius: 100% 25% 25% 100%;

border-radius: 100%/50%;

border-radius: 100%;

Как видите всё просто! Надеюсь, что у вас не возникнет проблем с созданием закруглённых углов при помощи CSS!

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

Если будут какие то вопросы – пишите их в комментариях. На этом сегодня всё! До встречи в следующих статьях 🙂

Точная обрезка изображений в презентации Power Point

Как обрезать слайд в презентации?

PowerPoint позволяет сделать такую обрезку в один клик.

  1. Нажмите и выберите изображение на слайде.
  2. Перейдите в раздел «Работа с рисунками»> «Обрезка» из выпадающего меню выберите «Обрезать по фигуре». Опция «Обрезать по фигуре»
  3. В раскрывающемся списке выберите требуемое соотношение сторон и примените его к изображению.

Как обрезать рисунок по контуру в повер поинт?

Обрезка до стандартных пропорций

  1. Чтобы добавить рисунок в файл Office (например, документ Word, презентацию PowerPoint или книгу Excel), на вкладке Вставка нажмите кнопку Рисунки.
  2. Щелкните рисунок.
  3. В разделе Работа с рисунками на вкладке Формат в группе Размер щелкните стрелку под кнопкой Обрезать.

Как в повер поинт редактировать фото?

Как отредактировать изображение средствами PowerPoint?

  1. Щелкните по изображению левой кнопкой мыши.
  2. Захватите изображение левой кнопкой мыши за один из узлов и нажмите клавишу «shift» на клавиатуре.
  3. Не отпуская левой кнопкой мыши и клавиши «shift» на клавиатуре, перетащите угол изображения в нужное место (для увеличения или уменьшения размера).

Как обрезать видео в презентации Powerpoint 2007?

Монтаж видео

  1. В обычном режиме щелкните рамку видео на слайде. …
  2. Откройте вкладку Воспроизведение и нажмите кнопку Монтаж видео.
  3. Чтобы определить, где необходимо обрезать видеоклип, в диалоговом окне Монтаж видео нажмите кнопку Воспроизвести.

Как вырезать слайд?

В области слева щелкните правой кнопкой мыши эскиз слайда, который нужно удалить (для выбора нескольких слайдов нажмите и удерживайте клавишу CTRL, чтобы выбрать несколько идущих подряд слайдов, нажмите и удерживайте клавишу SHIFT), и щелкните пункт Удалить слайд.

Как сделать закругленные углы в фотошопе?

Итак, открываем картинку в фотошопе, у которой нужно закруглить углы и переходим в «Слои». нажимаем клавишу Ctrl и кликаем один раз по слою с изображением, чтобы его выделить. Должна появиться пунктирная рамка вокруг картинки. Теперь в верхней панели меню выбираем пункт Выделение — Модификация — сгладить.

Как вставить фотографию в фигуру в Powerpoint?

Вставка рисунка в фигуру

  1. Щелкните фигуру, в которую вы хотите добавить рисунок.
  2. На вкладке Форматв группе Стили фигур щелкните стрелку Заливка фигуры.
  3. В папке или расположении с рисунком, который вы хотите вставить, щелкните файл рисунка и нажмите кнопку Вставить.

Как закруглить углы картинки в ворде?

По крайней мере, в Word 2007 года вы можете создать форму и заполнить ее требуемым изображением. Например, чтобы закруглить углы изображения … Msgstr «Вставить> Фигуры> Скругленный прямоугольник». Затем с выбранной формой выполните «Инструменты рисования> Заливка фигуры> Рисунок» и выберите нужное изображение.

Как обрезать картинку по контуру в ворде?

откройте вкладку «Формат» — при выделении рисунка в майкрософт ворд 2013, 2016 появится опция «Работа с изображениями»; нажмите на опцию «Обрезка» в крайней правой части панели управления; выберите тип кадрирования; наведите курсор на нужный маркер и, удерживая левую клавишу мышки, переместите его в искомую точку.

Как изменить цвет картинки в презентации?

Как изменить цвет рисунка в PowerPoint

  1. Выберите рисунок, у которого нужно изменить цвет (желательно, чтобы рисунок был в формате . png). При выборе рисунка отображается раздел ФОРМАТ.
  2. Выберите ФОРМАТ > Цвет.

Как редактировать презентацию в Power Point?

Чтобы изменить файл, выполните указанные ниже действия.

  1. В веб-браузере перейдите к файлу в OneDrive.
  2. Щелкните имя файла, чтобы открыть его в Веб-приложение PowerPoint.
  3. Нажмите кнопку изменить презентацию, а затем выберите команду изменить в Веб-приложение PowerPoint.

12.8. Закруглить углы

Радиус границы

Углы закругляются выбором квадранта круга в каждом углу и удалением области вне выделения. «Радиус границы» это радиус круга в углу.

В примерах ниже фильтр был применён к изображению 100×100 точек с разным значением радиуса границы. При радиусе равном 50-ти четыре квадранта образуют круг с диаметром в 100 точек. Больший радиус возможен, но с неожиданными последствиями.

Рисунок 17.272. Примеры радиуса границы


Добавить тень

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

Смещение тени по X/Y

Смещение по X и Y определяют, где будет помещена тень по отношению к изображению. Смещение измеряется в точках. При больших значениях параметра тень будет казаться далеко, при маленьких — ближе к изображению.

Рисунок 17.273. пример смещения тени

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

Радиус размывания

Если выбран параметр Добавить тень, то можно указать радиус размывания, используемый фильтром «Тень». Изображение будет увеличено в обоих направлениях в зависимости от величины радиуса размывания и от смещения тени.

Добавить фон

При выборе этого параметра (выбран по умолчанию) фильтр добавляет под активный слой слой фона, заполненный текущим цветом фона. Размер нового слоя зависит от радиуса размывания и от смещения тени.

Работать с копией

При выборе этого параметра фильтр создаёт новое окно, содержащее копию изображения с эффектом фильтра. Исходное изображение остаётся неизменным.

Закругление квадратных углов с помощью Photoshop — функции

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

Вы можете легко добавить углы к своим фотографиям с помощью Photoshop CS4 или CS5 — просто выполните эти простые шаги, и ваши фотографии будут готовы для публикации в Интернете!

1. В Photoshop выберите File-> New. Создайте документ размером 250 на 250 пикселей (с разрешением 300 пикселей на дюйм) и выберите прозрачный фон; когда закончите, нажмите «ОК».

2. Щелкните инструмент «Заливка» и залейте документ сплошным белым цветом.

3. Используйте инструмент Elliptical Marquee Tool, чтобы создать круг во всю ширину и высоту документа. Умные направляющие (Вид-> Показать-> Умные направляющие) могут упростить этот процесс; пурпурные линии появятся, когда вы будете на одном уровне с каждым краем. Если размер или расположение круга неправильное, выберите Select-> Modify-> Expand или Contract, чтобы отрегулировать размер. Используйте клавиши со стрелками на клавиатуре, чтобы переместить круг (не используйте инструмент «Перемещение» на панели инструментов).

4. Выберите Edit-> Clear (или нажмите клавишу Delete), чтобы удалить кружок. В результате получается прозрачный круг и непрозрачные углы.

5. Выберите Изображение-> Размер холста. Установите новую ширину и высоту 125 на 125 пикселей и выберите привязку кадрирования к левому верхнему углу. Щелкните ОК. Затем вас предупреждают, что вам нужно обрезать фотографию до меньшего размера; для продолжения нажмите «Продолжить», а затем «ОК».

6. Теперь у вас есть верхний левый угол. Выберите Select-> All, а затем Edit-> Copy.Откройте фотографию, к которой вы хотите добавить углы, а затем выберите «Правка»> «Вставить».

7. Убедитесь, что функция Snap активна (View-> Snap) и что она настроена на привязку к краям документа (View-> Snap To-> Document Bounds), а затем с помощью инструмента «Перемещение» перетащите свой угол. вверху слева.

8. Чтобы разместить угол вверху справа, выберите Layer-> Duplicate Layer на панели Layers (которая дает вам копию Layer 1), выберите Select-> All, а затем выберите Edit-> Transform-> Flip Horizontal.

9. Выберите Layer-> Merge Down, чтобы объединить два угловых слоя.

10. Чтобы разместить углы внизу, выберите Layer-> Duplicate Layer и выберите Select-> All, но на этот раз выберите Edit-> Transform-> Flip Vertical.

11. Выберите Layer-> Merge Down, чтобы снова объединить два угловых слоя в один.

12. Последний шаг — сделать углы прозрачными. Сначала выберите Select-> Deselect. Теперь посмотрим на панель слоев. Если слой, на котором находится ваша фотография, называется «Фон», щелкните слой, удерживая клавишу Control (или щелкните правой кнопкой мыши) и выберите «Слой из фона».При желании дайте слою имя (по умолчанию он называется Layer 0) и нажмите OK. Теперь щелкните свой слой с углами и выберите Layer-> Layer Style-> Blending Options. В разделе «Расширенное наложение» уменьшите непрозрачность заливки до 0, а затем во всплывающем меню «Нокаут» выберите «Глубокая». Чтобы зафиксировать изменения, нажмите ОК.

Когда вы закончите углы, выберите «Файл»> «Сохранить как». Чтобы сохранить каждый слой файла, выберите формат PSD; чтобы выровнять файл, но сохранить прозрачность углов, выберите формат PNG; или, чтобы выровнять файл и зафиксировать белые углы, выберите формат JPG.Затем загрузите свои фотографии и предупредите своих друзей — вы будете удивлены, насколько хорошо они откликнутся на ваши новые хитрые углы!

закругленных углов Action | Уроки Photoshop

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

Я покажу вам и расскажу, как создать экшен для этой техники в Photoshop. Не обращайте внимания на текст, выделенный фиолетовым курсивом, если вы не хотите выполнять какие-либо действия.

1. Сначала создайте новое действие и назовите его «Закругленные углы». Нажмите Запись.

2. Выберите инструмент «Прямоугольник со скругленными углами». Установите радиус закругленных углов на 600 пикселей (вы можете изменить это позже, если хотите более или менее изогнутые края).

3. Установите «Параметры прямоугольника со скругленными углами», как показано ниже.

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

5. Нажмите Ctrl + T, чтобы вызвать «Свободное преобразование». До того, как преобразование было выполнено, это будет выглядеть так:

Перетащите правый нижний угол вверх, чтобы он выглядел так, он будет привязан к размеру изображения, круто, да!?:

Нажмите клавишу ВВОД, чтобы завершить преобразование.

6. Установите флажок рядом с состоянием действия «Преобразовать текущий путь», чтобы вы могли преобразовать прямоугольник со скругленными углами в соответствии с размером отдельных изображений при использовании действия в будущем.

7. Вот и легкие детали. Ctrl + щелчок по миниатюре формы, чтобы загрузить выделение. Вокруг фигуры будут марширующие муравьи. В палитре слоев перетащите слой-фигуру на значок корзины.

Ваш документ должен выглядеть так (это не та же фотография, конечно, ха-ха):

8. Нажмите Ctrl + J, чтобы создать слой фотографии из выделенной области. Выберите фоновый слой. Нажмите значок в виде черно-белого круга в нижней части палитры слоев, чтобы создать новый слой «Solid Color».

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

9. Теперь, когда вы только что выбрали слой, щелкните фоновый слой в палитре слоев, удерживая нажатой клавишу «Shift». Теперь, когда выделены слой Solid Color и фон, щелкните правой кнопкой мыши любой из них и выберите «Объединить слои».

10. Нажмите «Стоп» на палитре «Действия» , и все готово!

Посетите мой другой блог на WordPress или мой:
Tumblr
Flickr
Lookbook.nu
Twitter

Нравится:

Нравится Загрузка …

Теги: 2010, действие, Adobe, Adobe Photoshop, CS, CS2, изогнутые углы, изогнутые края, Flickr, руководство, справка, как, фото, фотография, фотография, фотографии, Photoshop, Photoshop Action, Photoshop CS2, Photoshop tut, фотошоп tuts, rach, rachel, rachelmarie, rachymarie, круглые углы, закругленные углы, скриншоты, подросток, подросток, тут, учебник, учебные пособия, tuts, винтаж, wordpress

Эта запись была опубликована 22 января 2010 г. в 3:20 и находится в папке Photoshop, Vintage.Вы можете следить за любыми ответами на эту запись через канал RSS 2.0. Вы можете оставить отзыв или откликнуться со своего сайта.

Закругленные углы с клипсирующей маской

Изображение закругленных углов с рамкой

Я был в Pioneer Woman. Недавно она попросила читателей присылать свои фотографии с закругленными углами. Закругленные углы, конечно, придают вашей фотографии особый вид, а некоторые фотографии особенно хорошо смотрятся с закругленными углами.

Недавно я был в кофейне «Фотография». У нее есть пара руководств по созданию раскадровок с обтравочными масками.

У вас когда-нибудь было что-то, что вы хотели бы сделать в Photoshop, и это не значит, что указания Photoshop такие ужасные, но вы должны знать, что эта вещь, которую вы хотите сделать, называется, чтобы вы могли найти ее. Я думаю, что указания Photoshop по этому поводу довольно ясны. Если вы не нашли мой чистый, просто посмотрите Adobe Help в Photoshop и введите «Clipping Mask».

Pioneer Woman дает вам одну технику создания закругленных углов. Именно так я делал изображения с закругленными углами до сих пор. Но, только что узнав об «обтравочных масках», я думаю, что именно обтравочные маски — это самый простой способ сделать это. Итак, я включаю небольшой учебник.


  1. Откройте изображение.
  2. Выберите инструмент прямоугольной формы. Это автоматически создаст новый слой. Выберите скругленный тип прямоугольника (вы делаете это на панели инструментов формы в верхней части окна) и выберите, какой радиус вы хотите для закругленных углов.Я работал с полноразмерным изображением, поэтому выбрал 300 пикселей. Также убедитесь, что цвет вашей фигуры черный.

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

  3. Теперь сделайте снимок и сделайте его верхним слоем над закругленным прямоугольником. Вы можете сделать это, щелкнув этот слой и перетащив его над другим слоем.
  4. Теперь нажмите и удерживайте ALT (CMD на Mac), возьмите мышь и щелкните ею на линии между вашим изображением (внизу) и прямоугольником (вверху).Вы увидите этот маленький символ, когда нажмете ALT и наведете курсор на линию. Это символ обтравочной маски.

  5. Теперь у вас должна быть обрезанная версия этого верхнего слоя (ваше изображение), и теперь у него будут закругленные углы. Сохранить.


Если вы хотите добавить черную рамку вокруг закругленного изображения, вы можете легко сделать это, объединив видимые слои (не сглаживая), щелкнув изображение правой кнопкой мыши и выбрав «Слой из фона» , щелкнув правой кнопкой мыши и выбрав параметр смешивания, выберите обводку, сделайте цвет черным или другим желаемым цветом, выберите ширину и положение внутри.Это даст вам границу.

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

Выбор III. в фотошопе — Digiretus.com

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

Открыть фото в Photoshop

Если вы хотите закруглить края в Photoshop , вы обычно выбираете нужный прямоугольник с помощью инструмента выделения прямоугольника (нажмите M для активации) и нажмите Select / Modify / Smooth , чтобы указать, сколько пикселей вы хотите вырезать. . В этом примере значение 20 пикселей дает хорошие скругленные углы. Но действительно ли они красивые и круглые? Судя по всему, нет.

Другой способ

Вы можете добиться гораздо лучших результатов, если будете использовать кривые. Нажмите U и выберите из опций прямоугольник с закругленными углами, обозначенный стрелкой (второй слева). Это инструмент для рисования фигур, но контур (кривую) можно легко преобразовать в выделение. Выберите первый вариант слева для кривых и также укажите здесь значение в 20 пикселей. Теперь вы можете выделить желаемую область или даже всю картинку.Таким образом вы нарисуете контур (кривую). Кривые представляют собой контуры, которые можно произвольно формировать с помощью инструмента Pen . (Кривые не обязательно являются изогнутыми линиями.) Их можно легко преобразовать в выделение.

Переход в выделение

Теперь щелкните правой кнопкой мыши внутри нарисованного контура и выберите Сделать выделение . Задайте Радиус пера из 0 . Если вы установите более высокое значение, весь выбор будет иметь мягкую кромку.Выберите Anti-aliased , чтобы получить действительно красивые и круглые углы!

Выглядит лучше, не правда ли?

обычный метод выбора / преобразование кривой

Контуры, которые у вас теперь есть, округлены гораздо точнее.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *