Как скруглить углы css

Скругление углов CSS, JavaScript

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

Чем плохи картинки?

Сторонники скругления «CSS only» традиционно упоминают о «размере кода» и «скорости загрузки». В теории скругление с помощью картинок не уступает CSS-способу ни в том, ни в другом. На практике иногда CSS бывает оптимальнее. Но представьте себе 20 одинаковых кнопок: картинка для них будет загружена одна, а HTML кода понадобится ровно в 20 раз больше, и он наверняка превзойдёт по размеру правильно сделанную картинку.

Вот тут и появляются грабли. Как сделать «правильно сделанную картинку» для скругления угла? Ну, нарисуем идеальную кривую в векторе. Скажем. в Кореле. Потом проэкспортируем в gif. Вот как будут выглядеть правые верхние углы первых 4-х из двадцати наших кругленьких кнопок:

И какой из этих углов «правильный»? Какую кнопку будем брать за основу? Художник может, конечно, позволить себе такое разообразие. Этакий лёгкий произвол, навеянный вдохновением. Верстальщик – нет. У верстальщика все углы должны быть, как солдаты, – подстрижены под одну гребёнку.

Можно, конечно, открыть сразу Gimp и терпеливо нарисовать идеальный уголок попиксельно. Только вот мы не знаем заранее, какой нам понадобится в очередной кнопке радиус скругления. И придётся рисовать много-много уголков: разнообразие радиусов помноженное на разнообразие цветов и толщину линий.

Почему HTML-CSS не идеальной решение?

Векторная графика выводится на печать принципиально медленнее, чем растровая. Устройства вывода (и на принтер, и на экран. ) не могут «печатать» формулы, – они могут отображать только точки, пикселы. То есть устройства вывода вообще не могут печатать векторную графику напрямую.

Браузер тоже выводит на экран точки; и картинку (уже состоящую из готового набора точек!) ему вывести проще. Графические элементы, созданные с помощью кода (HTML-CSS), браузер вообще не может вывести на экран непосредственно, – он всё равно сначала превращает все эти элементы (и даже шрифты!) в ту же самую пиксельную картинку, то есть обязательно растеризует все графические задачи, полученные в виде формул.

Поэтому мы должны чётко понимать, что «рисование» на HTML-CSS (да любое «рисование» вместо готового gif’а!) усложняет работу браузера, увеличивает количество вычислений. «Чистый» выигрыш в скорости тут можно получить лишь в случае большого объёма картинки (при замене его небольшим фрагментом HTML-кода) – за счёт времени загрузки.

И мы всё-таки отказываемся от картинок в пользу HTML-CSS, потому что так можно добиться большей «правильности» и однородности в скруглениях углов; потому что это технологичней – отображать всё разнообразие радиусов скругления и цветов фона с помощью формул (создаваемых по мере необходимости), а не хранить в виде кучи отдельных файлов.

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

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

HTML-код скруглений надо «считать» с помощью JavaScript

На самом деле, конечно, добросовестный разработчик должен здесь разделить вопрос на две части: «считать» и «на JavaScript». Потому что считать шаблоны (избавить верстальщика от рутины) можно ещё и на сервере. Но тогда возрастёт трафик между сервером и браузером (да и вычислительной нагрузки серверу добавится).

Нет, HTML с сервера должен идти максимально «чистый», простой (и, по возможности, короткий!) а всякие рюшечки и свистелочки типа уголков разумно передавать одной командой: «этому элементу добавить скругления номер 5». А команду выполнит JavaScript уже на клиенте. Или не выполнит, если JS отключён. И пользователь не увидит рюшечек. Это выбор пользователя.

Алгоритм и сущности

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

Из рисунка видно, что для иллюзии округлости видимая часть каждого последующего вынимаемого слоя пикселов должна увеличиваться в длину на один пиксел. То есть размеры видимых частей в пикселах будут "1", "2", "3", "4". Возьмём за основу алгоритма число – длину самой большой видимой части. Тогда общая глубина «выемки» будет равна сумме всех видимых частей (1 + 2 + 3 . ) плюс количество слоёв.

Для средней фигуры рисунка это будет 1 + 2 + (2) = 5; для правой (самой большой) фигуры: 1 + 2 + 3 + (3) = 9. Для следующей по сложности фигуры: 1 + 2 + 3 + 4 + (4) = 14. Закономерность достаточно простая. Полученное число будет равно общей (видимой и невидимой) длине каждого слоя и общему количеству слоёв (выемка – квадрат).

Сущности, с которым мы будем работать – это стопка слоёв толщиной в 1 px (пиксел) и шириной в максимальную ширину слоя. А может, и не так. Ведь ширину видимой части можно воплощать по-разному. Попробуем сделать её равно ширине самого слоя. Тогда стопка слоёв для средней фигуры будет выглядеть примерно так:

То есть материал потребовал сделать наоборот: опираться на ширину «невидимой» части слоёв. В кавычках – потому что по-настоящему невидимой она всё-таки быть не может, если мы сделаем её реально прозрачной, из-под неё будет виден фон основной фигуры (углы которой мы скругляем). То есть цвет «невидимой» части слоёв мы будем задавать явно, и он должен быть равен цвету фона, на котором лежит основная (скругляемая) фигура.

С учётом этих условий, функция генерации массива слоёв (точнее, классов CSS для этих слоёв) для верхнего левого угла может выглядеть так:

Для нижнего левого угла, очевидно, достаточно будет выполнить list.reverse() . Ну, а поменять левые углы на правые можно с помощью CSS.

Конечно, такое приближённое вычисление окружности работает только до входящего параметра d = 3. При значении 4 уже ясно видно, что скругление получается не в форме круга. Чтобы не возиться с формулами, можно использовать здесь готовые наборы параметров вида:

В принципе таких наборов не должно быть очень уж много. Создать их можно, «подсмотрев» пиксельную структуру закруглённых линий в каком-нибудь графическом редакторе.

Рисование

Функция addRound, добавляющая углы к заданному элементу, получилась у нас сейчас грубая и циничная, так как мы спешим. Она работает, да и ладно. Просто по очереди формируем из массива слоёв четыре угла и присоединяем, куда функция corners скажет (подробности в файле skrug.js).

Мы добавили там и вариант со сглаживанием. Он получился «неровный», но всё равно в общем-то работает.

Ближе к концу работы функция addRound формирует HTML-элемент, содержащий все 4 закругления (переменная container). Если кнопок (элементов, требующих скругления) много, нет необходимости запускать функцию addRound много раз, достаточно просто присоединить к каждой кнопке копию (cloneNode) элемента, на которй ссылается container. Нечто вроде небольшого кэширования.

Для полного счастья

В предлагаемом варианте осталось недоработанным вот что: для формирования контуров кнопок (а не просто скруглений фона) серверный скрипт должен знать некоторые условности. Они не то чтобы сложные (должно быть два элемента div, вложенных друг в друга, с classname "dark1" и "dark2"), но важен сам принцип – что в создании скруглений участвует сервер. А он не должен участвовать.

В идеале надо отправлять с сервера один признак (тот же classname), а уже JavaScript сам должен при необходимости оборачивать «кнопку» в два элемента "dark1" и "dark2".

Пример для работы

Веб-сайт в одной странице: самый короткий учебник HTML

  • Установка archlinux 2017-12-08
  • Галерея изображений
  • Блокнот, MS Word и LibreOffice Writer
  • Linux Mint в школе
  • Сайт третьего поколения
  • Как скрыть-отобразить элемент по щелчку на другом элементе?
  • Подсветка строк и столбцов HTML-таблицы
  • Ссылки next и previous на странице
  • HTML в веб-приложении
  • Информационные сущности или инфоблоки
  • Шаблон и Контроллер
  • Отделение данных от php кода
  • javascript внутри веб-приложения
  • ООП в PHP – антипаттерн
  • Конструктор HTML форм
  • Числа прописью с рублями, минутами и метрами
  • Календарь javascript (datepicker)
  • Что из чего следует в PHP-фреймворке «Friends»
  • PHP фреймворк, анти-MVC, без ООП
  • Идеальная функция setCookie
  • Отображение настроек для javascript сортировки
  • Что такое Контроллер mvc в вебе?
  • javascript сортировщики, сравнение алгоритмов
  • unobtrusive top.mail.ru
  • Простой сортировщик HTML таблиц, версия 0.03
  • Подсветка строк, столбцов и значений в HTML таблице
  • Отложенная загрузка javascript
  • Кэширование промежуточных результатов в веб-программировании
  • javascript и php: синхронизация сущностей
  • Скругление углов CSS, JavaScript
  • Javascript и логика представления (design pattern «JS-словари»)
  • Структура WYSIWYG-редактора сайта
  • Подсветка картинки при наведении мыши
  • Визуальные редакторы: для кого они?
  • Веб/2: сайты нового поколения
  • Как измерить скорость работы Javascript?
  • Функция для работы с className в javascript
  • Сортировщик HTML таблиц, версия 1
  • Сортировщик HTML таблиц: концепция и «нулевой цикл»
  • Как с очень высокой скоростью найти слово в большой таблице?
  • Как в большом списке найти слово с очень высокой скоростью?
  • HTML база данных лучше, чем Excel
  • Javascript база данных
  • Сортировщик HTML-таблиц, версия 1.3
  • Проверка условий в Javascript
  • Скрыть – показать HTML элементы с помощью Javascript
  • Таймеры в Javascript (setInterval, setTimeout)
  • Javascript фильтрация данных
  • Javascript: вопросы и ответы
  • Javascript: часто задаваемые вопросы
  • Редактирование таблицы MySQL: Javascript интерфейс
  • Редактирование таблицы MySQL в браузере
  • 10 лучших функций Javascript
  • Сортировка таблицы средствами JavaScript — DOM
  • DHTML: условная разметка для HTML кода
  • DHTML: защита форума
  • DHTML: хранение настроек пользователя
  • DHTML: проверка формы
  • DHTML
  • JavaScript
  • HTML таблицы
  • Самый быстрый браузер

Комментарии

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

Скачал на комп 3 файла и открыл – не работает, открыл исходный код страницы, а там ещё один файл нужен. С ним работает. Мудак.

Как скруглить углы в Фотошопе

Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.

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

  1. Простое сглаживание
  2. Сглаживание с использованием границ
  3. С помощью создания фигуры

Простое сглаживание

  1. Откройте любое изображение в фотошопе, например фотографию машины.
  2. Теперь выберете инструмент «Прямоугольное выделение» и выделите изображение, только не полностью, а так, чтобы со всех сторон оставалось немного места. Как закруглить углы на изображении в фотошопе?
  3. Теперь идите в меню «Выделение» — «Модификация» — «Сгладить» . Вам откроется небольшое окошко, где вам надо будет ввести радиус сглаживания. Ну тут всё зависит от размера исходного изображения. Для данного изображения я решил поставить 20 пикселей. Но чем больше картинка — тем желательно и больше ставить радиус. Тут экспериментируйте. В случае чего вы всегда можете отменить последнее действие и попробовать другое число. Как закруглить углы на изображении в фотошопе?
  4. Вы видите? Теперь углы на выделении закруглились. Но как вы понимаете это еще не все. Вам эту область нужно вырезать. Для этого идите в меню «Редактирование» и выберете пункт «Вырезать» или воспользуйтесь комбинацией клавиш CTRL+X. После этой манипуляции у вас исчезнет содержимое внутри выделенной области. Получилось? Отлично! Как закруглить углы на изображении в фотошопе?
  5. Теперь вам необходимо создать новый документ в фотошопе. Сразу говорю, что не надо выставлять никаких параметров ширины и высоты, так как после того, как мы вырезали изображение, эти параметры автоматически подстраиваются под параметры вырезанного объекта. Т.е. просто нажимаете ОК.
  6. Ну и последний штрих. Теперь вам надо вставить наш вырезанный объект. Для этого идите в меню «Редактирование» и выберете пункт «Вставить» , либо нажмите комбинацию клавиш «CTRL+V». Вот и всё. Как видите, теперь мы получили изображение с закругленными краями. Вам останется только сохранить это изображение.

Сглаживание с использованием границ

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

  1. Выделите всю область целиком. Для этого воспользуйтесь либо инструментом «Прямоугольное выделение», либо нажмите комбинацию клавиш CTRL+A. Как закруглить углы на изображении в фотошопе?
  2. Теперь выберете «Выделение» — «Модификация» — «Граница» . Вам вылезет небольшое окошко, где вы должны будете выбрать размер границы. Я поставил 15 пикселей. Вы можете поэкспериментировать. Как закруглить углы на изображении в фотошопе?
  3. Как видите у вас выделение стало двойным. Это нормально. И следующим шагом вам нужно сделать то же самое, что и в первом способе, а именно выбрать «Выделение» — «Модификация» — «Сгладить» . Поставьте там там радиус закругления. Я поставлю 30.
  4. Ну а теперь нажмите CTRL+X и у вас будет вырезана область вокруг вашего изображения и благодаря этому ваше основное изображение станет с закругленными углами. Правда тут останется фон вокруг картинки. Но он не будет заметен (если он белый конечно). Ну а если уж совсем напрягает, то вы сможете кадрировать изображение и ли что-нибудь другое, чтобы сделать убрать лишний фон. Ну а так сохраните, и всё будет good. Как закруглить углы на изображении в фотошопе?

С помощью создания фигуры

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

  1. Но для дальнейших действий нам понадобится одна фигура. Идите в панель инструментов и там выберете инструмент «Прямоугольник с закругленными краями» из группы инструментов «Фигуры» . Как закруглить углы на изображении в фотошопе?
  2. Теперь воспользуйтесь этим инструментом также, как и прямоугольным выделением, т.е. зажмите левую кнопку мыши в левом верхнем углу, а затем тяните всё это дело в правый нижний угол. Таким образом этот прямоугольник с закругленными краями должен закрыть нашу основную картинку. Как закруглить углы на изображении в фотошопе?
  3. Как вы заметили, фигура создалась на новом слое. Это-то нам и нужно. Вот только последовательность их нас не устраивает. Вам нужно поставить слой с картинкой поверх слоя с прямоугольником. Для этого зажмите левую кнопку мыши на слое с изображением и переместите его на одну позицию выше. Но перед этим нажмите на замочек, чтобы разблокировать слой. Тогда слой с машиной встанет поверх фигуры. Как закруглить углы на изображении в фотошопе?
  4. Теперь выделите слой с изображением и нажмите на нем правой кнопкой мыши, после чего выберите «Создать обтравочную маску». Как закруглить углы на изображении в фотошопе?

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

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

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

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

Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.

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

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

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

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

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

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

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

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

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

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

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

как закруглить углы

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

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

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

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

скругленные углы

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

скругляем углы в фотошопе

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

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

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

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

Картинка с закругленными углами

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

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

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

Как скруглить углы в Фотошопе

Задавайте новые формы
вашим фото

Linkedin Facebook Instagram Tinder коллаж

Сделайте смешную картинку, чтобы принять участие в Долли Партон Challenge в инстаграм. Все, что вам нужно, это выбрать 4 фотографии — строгую корпоративную для LinkedIn, семейную или дружескую для Facebook, гламурную для Instagram и романтическую для Tinder. Остальное сделает наш фоторедактор. Создавайте и делитесь в ваших соц сетях, давайте повеселимся!
Linkedin Facebook Instagram Tinder генератор мема.

bg

Рамки на фото

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

Обрезать фото в форме

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

1

2

Текст, стикеры

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

Фильтры, фоны

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

3

О сервисе

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

Конфиденциальность

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

Условия использования

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

Предложения по улучшению, сведения о ошибках отправляйте на email

© 2021 Скруглитель, все права защищены. Читайте Скруглитель блог

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

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

  • Как закруглить края в фотошопе
  • Как закруглить края на картинке
  • Как сделать закругленные углы в фотошопе
  • программа Adobe Photoshop
  • как сделать закругленные края
  • Как загнуть металлический лист в фотошоп
  • Как сделать картинку круглой
  • Как в Фотошопе затемнить углы
  • Как обрезать углы фотоКак обрезать углы фото
  • Как сделать размытые краяКак сделать размытые края
  • Как сделать круглую фотографиюКак сделать круглую фотографию
  • Как округлять края в PhotoshopКак округлять края в Photoshop
  • Как округлить углы в фотошопеКак округлить углы в фотошопе
  • Как закруглить края фото в фотошопеКак закруглить края фото в фотошопе
  • Как в Фотошопе закруглить углыКак в Фотошопе закруглить углы
  • Как закруглить края на фотоКак закруглить края на фото
  • Как в Фотошопе сделать контурКак в Фотошопе сделать контур
  • Как сделать закругленные краяКак сделать закругленные края
  • Как обрезать края в PhotoshopКак обрезать края в Photoshop
  • Как обработать край в PhotoshopКак обработать край в Photoshop
  • Как нарисовать кривую в фотошопеКак нарисовать кривую в фотошопе
  • Как сделать сглаживание краев в photoshopКак сделать сглаживание краев в photoshop
  • Как закруглить углыКак закруглить углы
  • Как сделать закругленные углыКак сделать закругленные углы
  • Как сделать контур в фотошопеКак сделать контур в фотошопе
  • Как затемнить края в фотошопеКак затемнить края в фотошопе
  • Как в Фотошопе выровнять фотоКак в Фотошопе выровнять фото
  • Как размыть края картинкиКак размыть края картинки
  • Как размыть края в фотошопеКак размыть края в фотошопе
  • Как сделать в Photoshop овальную рамкуКак сделать в Photoshop овальную рамку
  • Как закруглить углы у таблицыКак закруглить углы у таблицы
  • Как в Фотошопе вырезать овалКак в Фотошопе вырезать овал

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

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

  • Как сделать закругленные углы в фотошопе
  • Как сделать круглую фотографию
  • Как закруглить края на картинке
  • — компьютер
  • — программа Adobe Photoshop
  • — фотография

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

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

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

Затем на фотографии выделите фрагмент, который вы хотите использовать (например, в качестве аватарки). Если вы ошиблись, нажмите клавишу Esc и повторите выделение. После того, как нужный фрагмент будет выделен, нажмите в него правой кнопкой мыши и выберите пункт Make Selection… и нажмите ОК.

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

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

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

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

Выберите для заднего фона (Layer 2) цвет, наиболее близкий к тому, что установлен на странице, куда вы размещаете фотографию. Затем сохраните файл в формате jpg.

  • Как сделать картинку круглой
  • Как сделать закругленные углы
  • Как в прямоугольнике закруглить углы
  • Как загнуть металлический лист в фотошопКак загнуть металлический лист в фотошоп
  • Как сделать сглаживание краев в photoshopКак сделать сглаживание краев в photoshop
  • Как округлять края в PhotoshopКак округлять края в Photoshop
  • Как в Фотошопе затемнить углыКак в Фотошопе затемнить углы
  • Как округлить углы в фотошопеКак округлить углы в фотошопе
  • Как закруглить края фото в фотошопеКак закруглить края фото в фотошопе
  • Как в Фотошопе закруглить углыКак в Фотошопе закруглить углы
  • Как сгладить углыКак сгладить углы
  • Как обрезать края в PhotoshopКак обрезать края в Photoshop
  • Как закруглить края на фотоКак закруглить края на фото
  • Как нарисовать кривую в фотошопеКак нарисовать кривую в фотошопе
  • Как в Фотошопе выровнять фотоКак в Фотошопе выровнять фото
  • Как сделать закругленные краяКак сделать закругленные края
  • Как сделать контур в фотошопеКак сделать контур в фотошопе
  • Как закруглить углыКак закруглить углы
  • Как обрезать углы фотоКак обрезать углы фото
  • Как закруглить углы у таблицыКак закруглить углы у таблицы
  • Как затемнить края в фотошопеКак затемнить края в фотошопе
  • Как нарисовать свиток в ФотошопеКак нарисовать свиток в Фотошопе
  • Как в Фотошопе сделать контурКак в Фотошопе сделать контур
  • Как в Фотошопе добавить надписьКак в Фотошопе добавить надпись
  • Как в Фотошопе вырезать овалКак в Фотошопе вырезать овал
  • Как в Фотошопе вырезать рисунокКак в Фотошопе вырезать рисунок

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

Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.

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

Простое сглаживание

  1. Откройте любое изображение в фотошопе, например фотографию машины.
  2. Теперь выберете инструмент «Прямоугольное выделение» и выделите изображение, только не полностью, а так, чтобы со всех сторон оставалось немного места. Как закруглить углы на изображении в фотошопе?
  3. Теперь идите в меню «Выделение» — «Модификация» — «Сгладить» . Вам откроется небольшое окошко, где вам надо будет ввести радиус сглаживания. Ну тут всё зависит от размера исходного изображения. Для данного изображения я решил поставить 20 пикселей. Но чем больше картинка — тем желательно и больше ставить радиус. Тут экспериментируйте. В случае чего вы всегда можете отменить последнее действие и попробовать другое число. Как закруглить углы на изображении в фотошопе?
  4. Вы видите? Теперь углы на выделении закруглились. Но как вы понимаете это еще не все. Вам эту область нужно вырезать. Для этого идите в меню «Редактирование» и выберете пункт «Вырезать» или воспользуйтесь комбинацией клавиш CTRL+X. После этой манипуляции у вас исчезнет содержимое внутри выделенной области. Получилось? Отлично! Как закруглить углы на изображении в фотошопе?
  5. Теперь вам необходимо создать новый документ в фотошопе. Сразу говорю, что не надо выставлять никаких параметров ширины и высоты, так как после того, как мы вырезали изображение, эти параметры автоматически подстраиваются под параметры вырезанного объекта. Т.е. просто нажимаете ОК.
  6. Ну и последний штрих. Теперь вам надо вставить наш вырезанный объект. Для этого идите в меню «Редактирование» и выберете пункт «Вставить» , либо нажмите комбинацию клавиш «CTRL+V». Вот и всё. Как видите, теперь мы получили изображение с закругленными краями. Вам останется только сохранить это изображение.

Сглаживание с использованием границ

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

  1. Выделите всю область целиком. Для этого воспользуйтесь либо инструментом «Прямоугольное выделение», либо нажмите комбинацию клавиш CTRL+A. Как закруглить углы на изображении в фотошопе?
  2. Теперь выберете «Выделение» — «Модификация» — «Граница» . Вам вылезет небольшое окошко, где вы должны будете выбрать размер границы. Я поставил 15 пикселей. Вы можете поэкспериментировать. Как закруглить углы на изображении в фотошопе?
  3. Как видите у вас выделение стало двойным. Это нормально. И следующим шагом вам нужно сделать то же самое, что и в первом способе, а именно выбрать «Выделение» — «Модификация» — «Сгладить» . Поставьте там там радиус закругления. Я поставлю 30.
  4. Ну а теперь нажмите CTRL+X и у вас будет вырезана область вокруг вашего изображения и благодаря этому ваше основное изображение станет с закругленными углами. Правда тут останется фон вокруг картинки. Но он не будет заметен (если он белый конечно). Ну а если уж совсем напрягает, то вы сможете кадрировать изображение и ли что-нибудь другое, чтобы сделать убрать лишний фон. Ну а так сохраните, и всё будет good. Как закруглить углы на изображении в фотошопе?

С помощью создания фигуры

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

  1. Но для дальнейших действий нам понадобится одна фигура. Идите в панель инструментов и там выберете инструмент «Прямоугольник с закругленными краями» из группы инструментов «Фигуры» . Как закруглить углы на изображении в фотошопе?
  2. Теперь воспользуйтесь этим инструментом также, как и прямоугольным выделением, т.е. зажмите левую кнопку мыши в левом верхнем углу, а затем тяните всё это дело в правый нижний угол. Таким образом этот прямоугольник с закругленными краями должен закрыть нашу основную картинку. Как закруглить углы на изображении в фотошопе?
  3. Как вы заметили, фигура создалась на новом слое. Это-то нам и нужно. Вот только последовательность их нас не устраивает. Вам нужно поставить слой с картинкой поверх слоя с прямоугольником. Для этого зажмите левую кнопку мыши на слое с изображением и переместите его на одну позицию выше. Но перед этим нажмите на замочек, чтобы разблокировать слой. Тогда слой с машиной встанет поверх фигуры. Как закруглить углы на изображении в фотошопе?
  4. Теперь выделите слой с изображением и нажмите на нем правой кнопкой мыши, после чего выберите «Создать обтравочную маску». Как закруглить углы на изображении в фотошопе?

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

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

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

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

Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.

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

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