Прямоугольник со скругленными углами (Rounded Rectangle).
Радиус
угла определяет скруглением углов
прямоугольника.
Радиус
скругления по умолчанию задает в окне
установок: Редактирование>Установки>
Основные
(Edit>Preferences>General).
Поле «Радиус угла» (Corner
radius).
Изменить
радиус скругления интерактивно (при
работе с инструментом «Прямоугольник
со скругленными углами»):
в
окне «Прямоугольник со скругленными
углами» (которое появляется при щелчке
в рабочей области);
при
перетаскивании инструмента нажимать
клавиши «Стрелка вверх» или «Стрелка
вниз» (увеличить или уменьшит радиус
скругления), «Стрелка влево» (получить
прямые углы), «Стрелка вправо» (получить
углы с максимальным скруглением).
Скругление углов в Photoshop
Для достижения результата мы используем один из инструментов группы «Фигуры»
, а затем просто удалим все лишнее.
-
Открываем в Фотошопе фотографию, которую собираемся редактировать.
-
Затем создаем копию слоя с водопадом под названием «Фон»
. Для экономии времени воспользуемся горячими клавишами CTRL+J
. Копия создается для того, чтобы оставить нетронутым исходное изображение. Если (вдруг) что-то пойдет не так, можно будет удалить неудачные слои и начать заново. -
Идем дальше. А дальше нам понадобится инструмент «Прямоугольник со скругленными углами»
.В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей. Мы зададим значение в 30 пикселей, так будет лучше видно результат.
-
Далее рисуем на холсте прямоугольник любого размера (мы его потом будем масштабировать).
-
Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование»
горячими клавишами CTRL+T
. На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта. -
Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER
. -
Далее нам необходимо выделить полученную фигуру. Для этого зажимаем клавишу CTRL
и кликаем по миниатюре слоя с прямоугольником. -
Как видим, вокруг фигуры образовалось выделение. Теперь переходим на слой-копию, а со слоя с фигурой снимаем видимость (см. скриншот).
-
Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки. Инвертируем выделение горячими клавишами CTRL+SHIFT+I
. Теперь выделение осталось только на углах.
Давайте попробуем изменить радиус скругления. Я введу значение 20px в верхний нижний угол и нажму Enter. Результат:
Как видите, из обычного (Rectangle) наш прямоугольник превратился в совершенно другую фигуру, Rounded Rectangle, или «Прямоугольник со скруглёнными углами».
Я могу ввести любое другое значение радиуса и радиус изменится сразу после нажатия Enter.
Но, как Вы, наверное, заметили, я ввожу значение в окно ввода одного радиуса, а меняются все четыре. Это происходит потому, что по умолчанию активна кнопка «Связать значение радиусов:
Если мы кликнем по ней, тем самым, отключив эту опцию, то величины радиусов будут не связаны между собой, и я могу получить, например, это:
Толщина обводки по умолчанию задана в пунктах, но я могу изменить эту величину на привычные мне пиксели, кликнув правой клавишей мыши по окну ввода:
А теперь давайте представим, что вдруг из прямоугольной фигуры, которую я показал в начале, мне понадобилось создать сектор круга с радиусом 200 пикселей и углом между радиусами 90° и шириной обводки 5 пикс.
Я ввожу значение ширины и высоты по 200 пикс., меняю единицы измерения ширины обводки на пиксели и ввожу значение 5. Затем я ввожу величину радиусов трёх углов, равную нулю, а величину оставшегося угла подгоняю вручную ползуном (обычная формула расчёта длины дуги L = πRα/360°
здесь не подойдёт из-за особенностей построения кривых Безье). Результат:
Итак, я получил из прямоугольника сектор круга:
А теперь об экспорте фигуры в код CSS. Нет ничего проще. Идём Слои —> Копировать CSS и данные фигуры копируются в буфер обмена компьютера.
Открываем, текстовый редактор, например, Notepad++, создаём новый документ и вставляем туда код.
Вот какой SCC стиль данной фигуры выдал мне Photoshop:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
. border- border- border- background- position: left: top: width: height: z- } |
Мало того, что он не полный и не оптимизированный, да ещё и название класса на кириллице, что является грубейшей ошибкой.
Поэтому с родным фотошоповским экспортом CSS рекомендую пока повременить, лучше пользоваться бесплатным плагином CSS3Ps
, об установке и использовании этого плагина подробно рассказано , а ещё лучше ваять стили самому.
Урок 11 Как закруглить углы в фотошопе
Опять я сбиваюсь с графика! Эх… Ну, выпускаю уроки с опозданием на пару часов, надеюсь, это не так критично. Сегодня у нас в уроке речь пойдет о том, как закруглить края в фотошопе. Все бы ничего, и урок не отличался бы от тех что вы видели на других сайтах, но я сам раньше искал и знаю какие методы там предлагают. Не слушайте их! Слишком муторно, слишком долго. Я Вам предлагаю способ, как округлить углы фотошопе буквально в пару кликов!
Берем стоковую фотографию, кстати, это я делаю на гудфоне. Не реклама Используем выделение, как у меня на скришоте:
Переходим в вкладку ( Выделение > Модификация > Сгладить )
Внимание! Тут могут возникнуть трудности у некоторых. В некоторых версиях фотошопа нету «Сгладить», за то есть «Оптимизировать»
Так что, не пугайтесь, если не найдете «Сгладить». Это одно и тоже.
Здесь мы выбрали радиус закругления.
Теперь, как Вы видите, у вас область выделение уже с закругленными углами.
Осталось вырезать изображение.
И теперь создаем новый файл. Размер там выставляет автоматический. И теперь просто вставляем картинку в новый файл.
Как вновь открыть окно свойств фигуры, если Вы его случайно закрыли
Отвечаю на вопрос читателей сайта. Если Вы закрыли окно свойств прямоугольника и Вам надо его случайно открыть, то:
Убедитесь, что выбрана нужная фигура. Если фигура не выбрана, то выбрать её можно с помощью инструмента «Выделение контура » (Path Selection Tool)
Открываем вкладку главного меню «Окно» (Window) и кликаем по строке «Свойства» (Properties). Скриншот на английском .Примечание.
О том, как русифицировать интерфейс Photoshop CS6, рассказано .
Эллипс.
Многоугольник.
Линия.
Произвольная фигура
. Позволяет создавать разнообразные фигуры, которые сразу заливаются цветом переднего плана. Для создания всех фигур, кроме произвольной фигуры, надо выбрать фигуру, поместить курсор в нужный участок изображения, и удерживая левую кнопку мыши, путем перемещения курсора создаем фигуру. Если после того как фигура создана нажать клавишу пробел, то фигуру можно переместить в любую точку изображения. Если держать нажатой клавишу Alt во время создания фигуры, то фигура будет создана из центра. Для создания произвольной фигуры, нужно ее выбрать в строке настроек инструментов в пункте Shape. Для изменения радиуса закруглений у фигуры прямоугольника с закругленными краями, в той же строке настроек, поставить нужное значение в пункте Radius.
Рука
– если изображение не помещается в рамку экрана, мы можем его перетаскивать.
Поворот вида.
Поворачивает полностью лист со всеми слоями.
Масштаб
— если навести курсор на изображение,он принимает форму,крестик в кружке, и с каждым щелчком левой кнопкой мыши изображение будет увеличиваться. Если нажать клавишу Alt, то с каждым щелчком, изображение будет уменьшаться.
Цветовые квадраты
-основной (верхний) цвет и фоновый (нижний) цвет.
Режим быстрой маски
. Вызывается кнопкой Q. полупрозрачное изображение (что-то вроде пелёночки прикрывающей рисунок), на котором можно рисовать как на самом обычном слое, а потом преобразовать эту маску обратно в выделение.
Режимы просмотра документов
. Первый, стандартный режим, ставится по умолчанию, второй-полный экран с полоской меню, третий-полный экран. Переключаться между режимами можно так же нажатием клавиши F.
Группа
1 (окно свойств инструмента появляется
при щелчке в области действия, а именно,
там, где должно начаться построение).
Rectangle Tool
Rectangle Tool — это самый обыкновенный прямоугольник. Просто выбирайте инструмент и рисуйте свой прямоугольник. В своих прошлых постах я уже говорил, что вектор в фотошопе не более чем векторная маска с заливкой. Прочитайте об этом подробнее в моей статье Shape Layer, Path и Fill Pixels в Фотошопе. Вся сакральность инструмента Rectangle Tool на этом заканчивается. Квадрат, он и в Африке квадрат. При этом, если вы хотите, чтобы примитив был определенного цвета, цвет стоит выставить заранее в меню Tools. Но если вы не выставили не беда, цвет всегда можно поправить в меню Options, которое выше. Конечно сам примитив для этого должен быть выделен в палитре слоев. 
Скругление углов картинки в Фотошопе
Скругление углов – это один из распространенных методов “украшения” фотографий для придания им более оригинального вида, что может быть как итоговым результатом, так и промежуточным, который будет использоваться в дальнейшем работе. Давайте посмотрим, каким образом эта процедура выполняется в Фотошопе.
- Выполняем скругление углов
- Заключение
Выполняем скругление углов
В качестве примера будем использовать картинку ниже.
Итак, чтобы скруглить углы фотографии в Фотошопе, выполняем следующие действия:
- Открыв в программе файл с изображением создаем копию исходного слоя (“Фон”) с помощью комбинации клавиш Ctrl+J.Примечание: На самом деле можно обойтись без дубликата и все манипуляции проводить с базовым слоем, но так удобнее – мы всегда можем удалить слой-копию, если нам что-то не понравится, и начать обработку фотографии заново, создав еще одну.
- Корректировка размера происходит путем сдвига в нужную сторону маркеров, расположенных по периметру прямоугольника – с помощью зажатой левой кнопки мыши. Для сохранения исходных пропорций нужно дополнительно удерживать клавишу Shift на клавиатуре. Чтобы применить новые размеры, жмем Enter.
Заключение
Таким образом, в том, чтобы скруглить углы фото в программе Photoshop нет ничего сложного. Весь процесс займет всего несколько минут, состоит из простых действий с применением простых инструментов и настроек.
Настройки векторных примитивов в Фотошопе
Обратите внимание на меню настроек. Здесь вы видите те же самые инструменты, что и в меню Tools
Они полностью идентичны. Прямоугольник, закругленный прямоугольник, элипс, линия, многогранник. Интерес представляет небольшая выпадающая менюшка. Скажу по секрету, я сам только что нашел в ней одну очень полезную функцию, о которой не знал.
- Square — эта функция автоматически соблюдает пропорции фигуры 1:1. То есть рисуются идеальные круги и квадраты. Зажимать Shift не обязательно.
- Fixed Sized — просто впишите нужные вам размеры и кликните по рабочей области один раз. У вас появится фигура с заданными параметрами. Вот он и фотошопный вариант иллюстратора. Верстать фигуры с определенными размерами не обязательно по линейке (Rulers).
- Proportional — соблюдает пропорции. Например 2:1
- Snap to pixels — а вот эту галочку я советовал бы всегда держать при себе. Дело в том что векторный контур не связан с растром. Вектор имеет идеальную форму, строится по математическим формулам. Пиксель решает проблемы заливки вектора, за счет полузаливки. Если вектор проходит по середине пикселя, то фотошоп заливает эти пиксели на половину.
Левая фигура нарисована с опцией Snap to pixels, в результате векторные контуры крепятся к пикселям. Правая фигура нарисована без опции Snap to pixels на глаз, в результате векторный контур проходит произвольно, пересекая пиксели по середине, а фигура выглядит расплывчато. Вот и представьте, чтобы добиться ровности фигур, я в ручную подправлял контуры, если они попадали посередине пикселей. Выделял точки, чуть чуть сжимал вектор. Приближал и делал на глаз. Столько времени извел, и даже не догадывался о такой замечательной галочке. Опция Snap to pixels привязывает вектор к пикселю. Очень полезная галочка. Советую включить сразу как установите Фотошоп на компьютер
Спасибо за внимание. На этом все
Как на картинке закруглить углы в фотошопе
При оформлении блогов неоднократно уже делала скругленные углы на изображениях, но то, что делается не так часто и недостаточно автоматически, быстро забывается. И я снова сетовала на то, что надо описывать сделанную работу сразу же. Поэтому вот сейчас почти по горячим следам опишу последовательность действий. Правда, из-за болезни «горячие следы» получились уже далеко не горячие.
Для тех, кто любит все посмотреть, небольшой видеоролик “как закруглить углы в фотошопе”:
В первую очередь, Вам нужен фотошоп. Где его взять, вариантов два:
- купить на официальном сайте
- найти на торрентах
Какой вариант выбрать, решать Вам.
Итак, запускаем фотошоп. Открываем картинку, у которой надо закруглить углы в фотошопе (Файл → Открыть). Если размеры картинки больше, чем Вам необходимо, можно изменить размеры (Изображение → Размер изображения).
Справа, на превью картинки, есть маленький замочек, который блокирует редактирование исходного изображения (фонового слоя). Чтобы создать новый слой и работать уже с ним, щелкаем на нем 2 раза левой кнопкой мыши, в появившемся окошке ничего не меняем, нажимаем «Да».
Если замочка нет, то одно из двух:
либо в Вашей версии фотошопа фоновый слой можно редактировать (что сомнительно, но вдруг)
либо описанное выше можно сделать с помощью другой операции: сверху, в строке меню, выбираем “Слои”, в открывшемся подменю выбираем “Новый” и по стрелочке – “из заднего плана”, и в открывшемся таком же окошечке нажимаем “Да”.
Выбираем в инструментах “Прямоугольник со скругленными углами”.
Выбираем сверху на панели настроек режим: «Контуры». Устанавливаем радиус, чтобы закруглить углы в фотошопе. Я выбрала 40 пикселей, Вы можете выбрать подходящий для Вашей картинки.
Рисуем на картинке прямоугольник нужного размера: ставим курсор (он приобретает форму крестика) в нужную точку слева-сверху и, не отпуская кнопки мыши, ведем в противоположный угол до нужной точки. На нашу картинку лег прозрачный прямоугольник со скругленными углами.
Правой кнопкой мыши кликаем на прямоугольнике. В контекстном меню выбираем «Образовать выделенную область», радиус растушевки поставим 1 пиксел и нажимаем кнопку «Да».
С помошью меню Выделение → Инверсия выделяем все, что вне прямоугольника со скругленными углами, и удаляем выделенное клавишей Delete.
Если Вы накладывали прямоугольник не на всю картинку, то лишний прозрачный фон можно удалить с помощью последовательности команд Изображение → Тримминг → На основе прозрачных пикселов → Да.
Мы получили картинку с закругленными углами. Сохраняем ее для Web: Файл → Сохранить для Web и устройств. Выбираем Preset: PNG-24, Transparency и жмем Save. В формате PNG-24 картинка сохраняется с прозрачным фоном, для того чтобы ее можно было встроить в любой дизайн сайта.
Все то же самое можно сделать с инструментом «Эллипс», тогда Вы получите круглую картинку или в рамке эллиптической формы.
Итак, сегодня мы с Вами узнали, как закруглить углы в фотошопе у любой картинки.
Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.
Вот чем я люблю фотошоп, так это тем, что во многих случаях одно и тоже дело можно сделать несколькими способами. Так и здесь. Давайте приступим к нашему фотошопству.