Содержание
Закругление углов фигур и текста в Photoshop
Дизайн и графика » Photoshop
Автор Дмитрий Евсеенков На чтение 3 мин Просмотров 1.6к.
Обновлено
В этом уроке я расскажу, как в Photoshop из острых углов букв текста, фигур и предметов сделать мягкие, закругленные углы при помощи простых методов маскирования и фильтров.
Используя этот метод, Вы сможете задать нужный радиус угла, чтобы получить скруглённый край для любого предмета, в т.ч. и букв текста. Данный метод можно использовать даже для закругления углов фотографии.
Вот результаты применения этого способа скругления острых углов:
Давайте начнем с векторной фигуры звезды с острыми углами (хотя метод прекрасно работает с любыми, острыми, прямыми и тупыми углами).
Создаём такую фигуру звезды, это одна из стандартных фигур Photoshop:
Теперь нам надо растеризовать фигуру. Для этого в панели слоёв кликаем по слою с фигурой и выбираем пункт «Растеризовать слой» (Rasterize Layer). Затем применяем Фильтр —> Размытие —> Размытие по Гауссу (Filter —> Blur —> Gaussian Blur).
Значение размытия зависит от линейного размера изображения и величины радиуса скругления, которое Вы хотите получить. Я выбрал значение 4 пикселя:
На всякий случай, создаю копию слоя с размытой фигурой, нажав Ctrl+J.
Зажмите клавишу Ctrl и кликните по иконке слоя в панели слоёв, чтобы создать выделенную область вокруг фигуры. Пройдите по вкладке главного меню Выделение —> Уточнить край (Select —> Refine Edge). Режим просмотра (вверху диалогового окна) выбираем «на чёрном»:
Параметр «Сгладить» (Smooth) отвечает за радиус угла, так что его Вы можете подобрать по вкусу, а вот значения «Растушёвка» (Feather) и «Контрастность» (Contrast) надо задать обязательно 0 пикс.
и 100% соответственно.
Нажимаем ОК, диалоговое окно «Уточнить край» закрывается и в документе снова появляются «бегущие муравьи». Нам осталось только кликнуть по значку создания слой-маски внизу панели слоёв, этим мы создадим слой-маску из выделенной области.
Результат:
Панель слоёв выглядит так:
Как можно увидеть на предпоследнем изображении, углы у нас закруглены, но вдоль краёв внутри фигуры появился ненужный цветовой переход (это случилось из-за размытия). Чтобы исправить это зажимаем клавишу Ctrl и кликаем по иконке маски слоя:
Вокруг фигуры появляется выделение. Затем обязательно кликаем по иконке слоя, выбираем желаемый цвет в цветовой палитре и нажимаем Ctrl+Delete для заливки выделения. Я взял исходный цвет фигуры Готово:
Вот как можно закруглить уголки в тексте, применив описанный выше метод:
Кроме того, если слой-маску наложить на исходный файл и частично её удалить, можно добиться действия на отдельные участки фигуры или текста.
Оцените автора
( 7 оценок, среднее 4 из 5 )
Делаем закругленные углы картинок в Фотошопе
На некоторых сайтах, в дизайне которых нет острых углов, иллюстрации в статьях и новостях также имеют закругленные края. Очень часто веб-дизайнеры не задумываются над тем, что делать такие иллюстрации с закругленными углами владельцу сайта будет сложно, у него не обязательно есть нужные знания Photoshop. Впрочем, заказчик сайта сам виноват. Требуя, чтобы все было красиво, он часто не задумывается над тем, как он потом будет добавлять изображения с заокругленными краями в статьи и новости на своем сайте.
В этом уроке Photoshop мы увидим как просто закруглить углы рисунка на примере аватарки, не ограничиваясь добавлением простой рамки толщиной в 1px:
Когда мне впервые было нужно закруглить углы в иллюстрации для сайта, ответ для меня был неочевиден.
Я погуглил и наткнулся на пару переводных инструкций, которые были слишком заумными для новичка – мучиться с каналами, путями, размытием, направляющими и прочими инструментами для продвинутых пользователей 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. Нарисованную в новом слое фигуру можно двигать с помощью стрелок на клавиатуре.
Ее форму можно менять, нажав на клавиатуре комбинацию горячих клавиш Photoshop 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).
Как добавить закругленные углы к изображениям и фигурам в Photoshop
Хотите ли вы добавить закругленные углы к своим фигурам или изображениям в Photoshop, это легко сделать за пару кликов. В более поздних обновлениях Photoshop этот процесс стал намного проще, поскольку вы просто щелкаете и перетаскиваете мышь, чтобы скруглить края формы или контура. Вот как это сделать.
Чтобы скруглить угол фигуры в Photoshop, выберите нужный инструмент «Форма» (U) и создайте фигуру на холсте. Выбрав слой формы, щелкните любой из синих кружков рядом с каждым углом поля преобразования. Перетаскивание их внутрь отрегулирует угловой радиус вашей фигуры.
Как и все остальное в Photoshop, скругление углов изображений и фигур можно выполнять разными способами. Это был всего лишь один из способов скругления углов фигур, но есть и другие варианты, о которых я расскажу ниже.
Далее вы узнаете, как применить закругленные углы к изображению и экспортировать изображения со скругленными углами в качестве дополнительного творческого штриха.
Итак, приступим!
Как скруглить углы фигур в Photoshop
Вот два способа скругления углов фигур за несколько простых шагов.
Способ 1. Использование опорных точек фигуры
Сначала выберите фигуру на панели инструментов. Для моего примера я выбрал прямоугольник. Прямоугольник — это форма по умолчанию, отображаемая на панели инструментов. Чтобы использовать другую фигуру, нажмите и удерживайте значок прямоугольника. Затем используйте всплывающее меню, чтобы выбрать нужную форму.
После этого перейдите на панель параметров и установите режим рисования на Форма.
Затем измените цвет заливки и обводки фигуры, если хотите, на панели параметров .
После настройки параметров фигуры щелкните и перетащите по холсту, чтобы создать фигуру.
Если вы хотите сохранить пропорции фигуры, например, чтобы создать круг или квадрат, удерживайте Shift при рисовании на холсте. Когда вы закончите создавать свою фигуру, вы заметите маленькие синие точки в каждом ее углу.
Чтобы добавить к фигуре закругленные углы, щелкните и перетащите любую из ее синих точек внутрь. Это скруглит все углы фигуры одновременно. Чем сильнее вы потянете синие точки внутрь, тем округлее станут углы фигуры.
Вы также можете независимо изменить округлость определенного угла. Для этого выберите угол, который хотите скруглить. Затем щелкните одну из его синих точек и потяните внутрь, удерживая Alt (Win) или Option (Mac).
Если вы довольны результатом, нажмите .
Введите на клавиатуре, чтобы подтвердить действие и отменить выбор формы.
Способ 2. Изменение свойств фигуры
Существует еще один способ скругления углов фигуры, на этот раз с помощью панели свойств. Сначала создайте фигуру, как показано ранее в этом уроке.
Затем на панели свойств найдите значки углового радиуса.
Если вы не видите панель свойств, выберите Окно > Свойства.
Чтобы изменить значения радиуса угла на панели свойств, наведите указатель мыши на один из значков радиуса угла, пока курсор не превратится в значок руки.
Затем перетащите мышь вправо, чтобы увеличить радиус угла, или влево, чтобы уменьшить его. Либо введите любое значение в одно из полей радиуса угла.
При изменении одного из углов Photoshop автоматически изменяет значения всех остальных углов.
Это потому, что все углы фигуры связаны друг с другом на панели свойств. Вы можете увидеть это по значку цепочки рядом с ними.
Нажав на значок цепочки, вы можете разъединить углы формы и отрегулировать определенный угол, не затрагивая остальные.
После разъединения углов введите значение в поле радиуса угла, которое вы хотите изменить.
Как только вы это сделаете, выбранный радиус угла будет изменен.
Вы можете использовать изученные здесь методы для скругления углов любой формы, которую вы создаете в Photoshop.
Как скруглить углы изображения в Photoshop
Чтобы скруглить углы изображения в Photoshop, выберите инструмент «Прямоугольник» с режимом рисования «Путь». Создайте прямоугольный путь, затем щелкните синие круги в поле преобразования, чтобы настроить угловой радиус пути. Теперь нажмите Make Selection в верхней панели и добавьте выделение к маске слоя.
Давайте разберем это подробнее.
Чтобы скруглить угол изображения в Photoshop, сначала перенесите нужное изображение в Photoshop. Для этого перейдите в File > Open или нажмите Control + O (Win) или Command + O (Mac).
Затем перейдите на панель «Слои» и дважды щелкните изображение, удерживая Alt (Win) или Option (Mac), чтобы разблокировать его.
После этого перейдите на панель инструментов и выберите Инструмент «Прямоугольник» ( U ).
Затем измените режим рисования на Путь на панели параметров .
Затем щелкните и перетащите изображение, чтобы нарисовать прямоугольный контур. Старайтесь рисовать контур близко к краям изображения, но не слишком близко, иначе не хватит места для скругления углов вашего изображения.
После рисования контура щелкните и потяните одну из синих точек внутрь, чтобы одновременно изогнуть все границы.
Чем сильнее вы потянете синюю точку вниз, тем округлее станут границы изображения. Если вы довольны результатом, переходите к Панель параметров и нажмите Сделать выбор.
Затем выберите значение радиуса растушевки.
Feather Radius смягчает края кистей, изображений, фигур и других элементов в Photoshop. Большой радиус растушевки сделает края вашего изображения размытыми, а малый радиус сделает их более резкими.
Для достижения наилучших результатов я рекомендую установить нулевой радиус растушевки, поскольку острые края лучше, чем размытые края, когда речь идет об изображениях со скругленными углами. Нажмите OK, чтобы подтвердить свой выбор.
Это приведет к успешному выбору.
Теперь перейдите на панель «Слои» и щелкните значок маски слоя.
Это обрежет изображение со скругленными краями.
Как добавить рамку к изображениям со скругленными углами
После скругления углов изображения вы можете добавить к нему рамку.
Сначала выберите слой, содержащий изображение со скругленными углами, и щелкните его миниатюру.
Затем нажмите кнопку fx в нижней части Панель слоев .
Затем выберите «Инсульт» во всплывающем меню.
Появится множество опций, которые поначалу могут сбивать с толку. Но не волнуйтесь, я скажу вам, какие настройки стоит изменить, когда дело доходит до границ изображения.
Размер управляет шириной обводки. Я рекомендую вам выбрать значение больше 30, чтобы сделать эффект границы более заметным. В моем случае я выбрал 136.
В Позиция можно выбрать между Внутри , Снаружи или Центр . Я рекомендую вам выбрать внутри , иначе эффект границы будет распространяться на прозрачную область изображения, что может разрушить эффект округления.
Что касается Режима наложения , вы должны установить его на нормальный, так как не рекомендуется смешивать изображение с его границей.
Непрозрачность управляет уровнем прозрачности штриха. Установите непрозрачность границы на 100%, так как лучше сделать границу как можно более заметной.
Переходя к Fill Type , вы можете выбрать один из нескольких вариантов. Это Color , Gradient и Pattern.
1. Цвет
Вы можете легко изменить цвет рамки изображения. Для этого дважды щелкните заливку цветом, чтобы открыть панель выбора цвета, где вы можете выбрать любой желаемый цвет.
2. Градиент
Вы можете применять градиенты к границам изображения и настраивать их разными способами.
Вы можете дважды щелкнуть поле градиента, чтобы увидеть все цвета градиента, доступные для вашей границы.
Вы также можете изменить стиль градиента, угол и масштаб.
В стилях , вы можете выбрать из линейных, радиальных, угловых, отраженных, ромбовидных, и Shape Burst . Эти настройки сильно влияют на внешний вид градиента.
Градиентный стиль, настроенный на взрыв формы Градиентный стиль, настроенный на ромб
При изменении Angle , цвета градиента будут перетекать друг в друга с разных позиций.
Масштаб обратно пропорционален контрасту. Чем меньше масштаб, тем больше контраст градиента, и наоборот. Для сбалансированного контраста между цветами градиента установите масштаб на 100%.
Градиент с масштабом 10 % Градиент с масштабом 100 %
3. Узор
Параметр Узор позволяет добавить предустановленный узор Photoshop к границе. Если у вас есть сохраненные шаблоны, вы также можете применить их.
Как экспортировать закругленные углы с прозрачным фоном
Когда вы закончите закругление углов изображения, вы должны экспортировать его в формате PNG. Экспорт в формате PNG гарантирует, что изображение будет экспортировано с прозрачностью и, следовательно, со скругленными углами.
Если вы сохраните изображение в формате JPEG, например, вместо закругленных углов ваше изображение получит белый фон снаружи границы.
Чтобы сохранить изображение, перейдите в Файл > Сохранить копию.
Затем выберите место на компьютере для сохранения изображения. Не забудьте установить тип файла PNG.
Наконец, нажмите кнопку Сохранить , чтобы сохранить изображение.
Теперь ваше изображение будет экспортироваться со скругленными углами и прозрачным фоном, поэтому независимо от того, где вы поделитесь им, закругленные края останутся видимыми!
Удачного редактирования!
Как скруглить углы изображения
НАЧИНАЮЩИЙ · 8 МИН
Научитесь рисовать и изменять прямоугольники со скругленными углами, используя этот образец файла.
Что вам понадобится
Получить файлы
Примеры файлов для практики (ZIP, 162 КБ)
Знакомство с файлом
Откройте файл edit-rounded-rectangles.psd в Photoshop. См. панель «Слои» в правой части рабочего пространства.
Если вы его не видите, перейдите в «Окно» > «Слои». На панели «Слои» щелкните значок «Фон» слой.
Нарисуйте прямоугольник
Выберите инструмент Rectangle Tool на панели инструментов в левой части рабочего пространства. Если вы не видите панель инструментов, выберите Windows > Инструменты. Выберите белый цвет для цветовой заливки в параметрах в верхней части рабочего пространства. Задает заливку прямоугольника белым цветом. Выберите «Нет цвета» для обводки.
Обратите внимание, что появляются ярко-синие направляющие, помогающие расположить прямоугольник. Поместите курсор в место пересечения направляющих в верхнем левом углу. Нажмите и перетащите из этого угла в правый нижний угол, отпустив мышь, чтобы завершить прямоугольник.
Добавьте закругленные углы с панели свойств
Когда вы закончите рисовать прямоугольник, обратите внимание, что панель свойств открывается автоматически.
Если вы его не видите, перейдите в «Окно» > «Свойства». На панели «Свойства» измените угловой радиус только что нарисованного живого прямоугольника. Введите «65 пикселей» в качестве радиуса угла. Панель «Свойства» применяет настройку радиуса угла ко всем углам прямоугольника, поскольку на панели есть связанные углы (значок цепочки), выбранные по умолчанию.
Применение обводки
На панели «Свойства» вы можете изменить обводку и заливку фигуры. Щелкните значок цвета обводки. На появившейся панели образцов цвета выберите голубой цвет, чтобы добавить цветную обводку к прямоугольнику. Измените ширину обводки на «15 pt», чтобы сделать цветную обводку толще.
Настройка существующего прямоугольника
Чтобы отредактировать уже нарисованный прямоугольник, его необходимо сначала выделить. Нажмите «A» на клавиатуре, чтобы выбрать Инструмент выбора пути или щелкните, чтобы выбрать этот инструмент на панели инструментов.