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

Скруглённые уголки

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код	Описание	Вид
div	Радиус скругления для всех уголков сразу.
div	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

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

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 4.

Рис. 4. Использование эллиптических уголков

Источник

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

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

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

Шаг 1

Шаг 2

Сочетанием клавиш Ctrl+Shift+N создаем новый слой.

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

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

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

Также при помощи комбинации клавиш Ctrl+T, вы можете изменить размер фигуры, путем ее растяжения при помощи мыши. Чтобы фигура не деформировалась при растягивании, нажмите и удерживайте клавишу Shift и тяните за углы, и тогда квадрат будет растягивать пропорционально.

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

Шаг 3

Шаг 4

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

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

Шаг 5

Шаг 6

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

Шаг 7

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

Шаг 8

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

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

Подробнее о форматах можно почитать здесь.

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

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

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

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

Как связать слои в фотошопе

Вы узнаете что такое связывание слоев, когда это полезно и все способы как создать связь. Также разберем обратный процесс — «развязывание» слоев и случаи, когда нужно добавить/убрать только один слой в связи.

92 пресета для Lightroom от Евгения Карташова

Персональная коллекция пресетов для Adobe Lightroom от фотографа Евгения Карташова. Пресеты предназначены для максимально быстрой обработки фотографий, сокращая время работы примерно до двух минут.

В каких цветовых режимах можно создать изображение в фотошопе

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

Описание инструмента «Цветовой эталон» в фотошопе

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

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

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

Спасибо. Хорошо объяснили!

Все гениальное просто!

после «вырезать» ничего не происходит, просто снимается веделение. что не так?

при этом остается белый фон?

Всё норм спасибо автору!

Да вообще суперский сайт и автор молодца. Всем рекомендую, постоянно тут сижу)))

Денис, на работе фидео залочено, но щас посмотрю, в любом случае, дополнительно отпишусь 🙂 Спасибо. 🙂

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

Михаил, Если я правильно понял, то само изображение, которое хочется сделать с закругленными краями, содержит по краям белый цвет и его оттенки. Когда вы убираете белый фоновый слой (по всей видимости ластиком или волшебной палочкой), то пропадают пиксели и с самого изображения.
Если это так, то вот Ваша ошибка:
1. Откройте исходное изображение. Оно должно быть Фоновым, т.е. единственным и первым на вашей палитре слоев.
2. Возможно будет на нем изображена иконка в виде замочка. Это значит, что фоновый слой заблокирован. Двумя щелчками вы его разблокируете.
3. Создаете новый слой для слоя-фигуры. Обратите внимание, что в итоге, на палитре слоев будет всего ДВА слоя: фоновый и фигура.
4. Рисуете фигуру. В комментарии я не буду подробно повторять что было, вообщем в итоге после инвертирования у вас должна быть выделена марширующими муравьями часть изображения, расположенная между краем слоя фигуры и краем самого документа.
5. Нажмите клавишу Delete и она будет удалена. Т.е. никакого ластика и палочки не надо, удаляется только то, что выделено. В результате ничего белого не остается, сразу будет прозрачный фон (поскольку мы удалили фрагмент фонового слоя, под которым ничего кроме пустоты нет).

Все это вы можете увидеть в прилагаемой видеозаписи, советую потратить на нее немного времени.

Да ну фигня, даже после тримминга остаются эти прозрачные поля возле углов. Кал этот фотошоп!

Источник

Как закруглить края в Фотошопе – простой способ

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

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

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

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

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

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

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

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

Источник

Скругление углов фигур в CorelDRAW

Графический редактор CorelDRAW является очень популярным инструментом для рисования различных фигур. Многие находят его более простым в сравнении с Photoshop, поэтому отдают предпочтение именно ему. Как создавать простые объекты, мы уже писали в этой статье. Сегодня мы поговорим о том, как закруглить углы в геометрических фигурах.

Почему это так актуально? Нарисовать прямоугольник, треугольник или любой другой объект не сложно. Но острые углы очень часто нужно сделать закруглёнными. Как добиться этого в программе CorelDRAW? Вы сможете узнать ответ на этот вопрос, прочитав сегодняшний материал.

Как скруглить края прямоугольника

Наиболее просто сделать круглыми углы можно в прямоугольнике. Для этого нужно воспользоваться инструментом «Форма» (он находится на панели инструментов с левой стороны экрана). Нажмите на него курсором, подведите к объекту, щёлкните по нему курсором. Должны появиться маркеры в каждом из углов. Нажмите курсором на любой из этих маркеров, абсолютно без разницы, за какой, и протащите в сторону. Чем дальше вы оттягиваете маркер, тем сильнее искривляется угол. Таким образом квадратик становится чем-то похожим на овал.

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

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

Как скруглить края треугольника и любого многоугольника

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

Выберите фигуру и вызовите контекстное меню правой кнопкой мыши. В нём выберите «Преобразовать в кривую».

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

Теперь обратитесь к верхнему меню «Окно» — «Окна настройки» — «Углы». Так меню выглядит в версии Corel Draw 2019, в более ранних версиях последний пункт может называться «Скругление/выемка/фаска». Выберите этот пункт и откроется окно скругления.

Меняя цифры в окне «Радиус», вы можете сделать желаемое скругление выбранных углов. Когда всё готово, нажмите кнопку «Применить», чтобы результат сохранился.

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

Заключение

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

Источник

Паруса Интернет – бизнеса

Все о заработке и бизнесе в Интернете, создании и продвижении сайтов, блогов, создании видео и презентаций

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

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

Очень часто веб-дизайнеры в своих работах изменяют формы геометрических фигур, картинок, фотографий и т.п., получая закругленные углы. Это придаёт проекту законченность и приятный дизайн.

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

1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css.

2. Закругление углов с помощью HTML кода без записи в файл стилей.

3. Картинки с закругленными углами. Рамка вокруг картинки HTML.

1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css

Рассмотрим первый способ получения прямоугольника с закругленными углами с помощью CSS и HTML кода с записью в файл стилей Style.css.

Что такое CSS

CSS – это Каскадная Таблица стилей (Cascading Style Sheets – CSS), использующая специальный код. С его помощью можно изменять шрифты, формы и цвета элементов, на страницах веб-приложений позиционировать элементы, включать фоновые изображения. CSS3 последняя версия данной разработки CSS.

Работать с CSS и HTML кодами и файлами легко и доступно. Главное всё делать очень внимательно и не спеша.

Делаем прямоугольник с рамкой в CSS

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

Заходим в админпанель WorPress, отмечаем слева пункты меню Дизайн=>Редактор, открываем файл Style.css и в конец файла добавляем этот блок. Не забывайте нажимать Save (сохранить).

Код цвета задаётся в шестнадцатеричной системе и может состоять из шести знаков (это его полный код) или из трёх знаков (сокращённый код). Сокращать код цвета можно в случае совпадения первой цифры со второй, третьей с четвертой и пятой с шестой. Например, код #BB00CC можно сокращённо записать так #b0c. Буквы A, B, C, D и F в коде цвета использовать только латинские.

Значение 3px в атрибуте border показывает ширину рамки.

После занесения стилей в файл Style.css мы можем показывать наш прямоугольник в любом месте сайта. Для этого размещаем тег HTML кода в том месте, где должен появиться наш прямоугольник. Тег имеет такой вид:

Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.

В результате выдачи получаем такой прямоугольник с рамкой.

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

Для закругления углов используется атрибут border-radius.

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

HTML-тег div выдаст нам прямоугольник в рамке с закругленными углами:

Как вставить в рамку текст

Для размещения в прямоугольнике текста необходимо в блок CSS добавить атрибут отступов текста от краёв padding, а HTML-тег будет содержать в себе нужный текст, например “pib9.ru”. Таким образом блок CSS имеет такой вид:

а HTML-тег для выдачи текста будет выглядеть так:

Получаем прямоугольник с закругленными углами и текстом:

Если из кода убрать атрибуты описания размеров прямоугольника width и height, то можно получить такие формы с закругленными углами:

В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.

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

В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.

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

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла, т.е.:

1. Левый верхний угол.

2. Правый верхний угол.

3. Правый нижний угол.

4. Левый нижний угол.

Таким получается прямоугольник с выбранными закруглениями только в верхних углах.

2. Закругление углов с помощью HTML кода без записи в файл стилей

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

HTML закругленные углы

Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы. Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.

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

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

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки?”.

Это делается очень просто, и сейчас мы этому научимся.

Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:

В атрибуте url(‘ ‘) вставляете ссылку на свою картинку.

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

Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.

Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:

Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.

Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:

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

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

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

Ссылку на картинку и размеры можно брать в админпанели: Медиафайлы=>Библиотека и возле выбранной картинки нажать: Редактировать.

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

Источник