Опять я сбиваюсь с графика! Эх… Ну, выпускаю уроки с опозданием на пару часов, надеюсь, это не так критично. Сегодня у нас в уроке речь пойдет о том, как закруглить края в фотошопе . Все бы ничего, и урок не отличался бы от тех что вы видели на других сайтах, но я сам раньше искал и знаю какие методы там предлагают. Не слушайте их! Слишком муторно, слишком долго. Я Вам предлагаю способ, как округлить углы фотошопе буквально в пару кликов!
Берем стоковую фотографию, кстати, это я делаю на гудфоне. Не реклама:D
Используем выделение, как у меня на скришоте:
Переходим в вкладку ( Выделение > Модификация > Сгладить ). Внимание! Тут могут возникнуть трудности у некоторых. В некоторых версиях фотошопа нету «Сгладить», за то есть «Оптимизировать». Так что, не пугайтесь, если не найдете «Сгладить». Это одно и тоже.
Здесь мы выбрали радиус закругления.
Теперь, как Вы видите, у вас область выделение уже с закругленными углами.
Осталось вырезать изображение.
И теперь . Размер там выставляет автоматический. И теперь просто вставляем картинку в новый файл.
Вам понадобится
Инструкция
Рассмотрим способ, вам требуется закруглить один или несколько углов у прямоугольного по-разному.
Откройте в программе 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). Широкой стрелкой укажите на нарисованный вами прямоугольник с закругленными углами. Он станет рамкой, в которой разместится ваше изображение.
Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.
В результате выдачи получаем такой прямоугольник с рамкой .
Для закругления углов используется атрибут border-radius .
Мы могли бы добавить только этот атрибут. Он нормально отображает результат закругления в новых версиях браузеров, но у многих пользователей ещё остались старые версии, где этот атрибут работает некорректно. Поэтому для совместимости мы добавим ещё несколько описаний этого атрибута, привязанного непосредственно к определённым браузерам, в наш блок в файле Style.css, получив следующий код:
HTML-тег div выдаст нам прямоугольник в рамке с закругленным и углами :
а HTML-тег для выдачи текста будет выглядеть так:
|
pib9.ru
|
Получаем прямоугольник с закругленными углами
и текстом:
Если из кода убрать атрибуты описания размеров прямоугольника width и height , то можно получить такие формы с закругленными углами:
1. Без текста
В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.
В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.
Распишем значения радиуса закругления для каждого угла, указывая нули там, где отменяем закругление. Например, отменим закругление в третьем и четвертом углах. Наш код примет такой вид:
1. Левый верхний угол.
2. Правый верхний угол.
3. Правый нижний угол.
4. Левый нижний угол.
Таким получается прямоугольник с выбранными закруглениями только в верхних углах.
Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:
Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.
Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы . Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:
Первый способ закругления углов можно применять, когда одна и та же форма, не меняя стили, используется больше одного раза. Второй способ применяется для форм, стили которых используются один раз.
Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта , очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки ?”.
Это делается очень просто, и сейчас мы этому научимся.
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:
В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами:
Скругленные углы на фотографии выглядят достаточно интересно и привлекательно. Чаще всего такие изображения применяются при составлении коллажей или создании презентаций. Также картинки со скругленными углами можно использовать в качестве миниатюр к постам на сайте. Вариантов использования много, а способ (правильный) получить такое фото всего один. В этом уроке мы покажем, как скруглить углы в Фотошопе.
Для достижения результата мы используем один из инструментов группы «Фигуры» , а затем просто удалим все лишнее.
В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей. Мы зададим значение в 30 пикселей, так будет лучше видно результат.
Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку» . Посмотрите скриншот, там указано, где данная функция находится. Она заставляет объекты автоматически «прилипать» к вспомогательным элементам и границам холста.
Группа 1 (окно свойств инструмента появляется при щелчке в области действия, а именно, там, где должно начаться построение).
Рисует прямоугольник путем перетаскивания курсора.
Чтобы нарисовать квадрат или круг, нажмите клавишу «Shift» и, не отпуская ее, перетащите курсор по диагонали, пока не получите квадрат нужного размера.
Свойства прямоугольник (ширина и высота) задаются при рисовании и указываются в правом верхнем углу (при условии, что включен режим быстрых направляющих) либо в диалоговом окне «Прямоугольник» (Rectangle), (в той точке, где должно начаться построение прямоугольника).
Радиус угла определяет скруглением углов прямоугольника.
Радиус скругления по умолчанию задает в окне установок: Редактирование>Установки> Основные (Edit>Preferences>General). Поле «Радиус угла» (Corner radius).
Изменить радиус скругления интерактивно (при работе с инструментом «Прямоугольник со скругленными углами»):
в окне «Прямоугольник со скругленными углами» (которое появляется при щелчке в рабочей области);
при перетаскивании инструмента нажимать клавиши «Стрелка вверх» или «Стрелка вниз» (увеличить или уменьшит радиус скругления), «Стрелка влево» (получить прямые углы), «Стрелка вправо» (получить углы с максимальным скруглением).
Рисует эллипс путем перетаскивания курсора.
Рисует многоугольник путем перетаскивания курсора по диагонали или по дуге, поворачивая фигуру.
Свойства многоугольника (радиус и количество сторон) задаются в диалоговом окне «Многоугольник» (Poligon), которое появляется при щелчке в той точке, где должно начаться построение прямоугольника.
Для добавления и удаления сторон многоугольника нажимайте клавиши «Стрелка вверх» и «Стрелка вниз».
6.Звезда (Star ) .
См. многоугольник.
Свойства звезды: Radius 1 – расстояние от центра звезды до наиболее близких к нему точек; Radius 2 – расстояние от центра звезды до наиболее далеких от него точек; Points (Концы) – количество концов звезды.
Группа 2 (окно свойств инструмента появляется при щелчке в области действия, а именно, там, где должно начаться построение, или при двойном щелчке по инструменту)
1. Отрезок линии (Line Segment ) .
В окне «Свойства отрезка линии» (Line Segment Tool Options) указываются следующие параметры: длина линии, угол наклона, Окрашивать линии в текущий цвет заливки (Fill line).
2.Дуга (Arc ) .
В окне «Параметры инструмента «Отрезок дуги»(Arc Segment Tool Options») сперва необходимо определить точку, из которой будет нарисована дуга, на локаторе неподвижной точки.
Свойства дуги:
Length X - Axis (Длина по оси Х) – толщина дуги.
Length Y - Axis (Длина по оси Y) – высота дуги.
Type (Тип) – тип контура объекта: открытый или закрытый.
Base Along (Вдоль) – направление дуги по осям (X или Y).
Slope (Наклон). Направление наклона дуги: вогнутая дуга – отрицательное значение; выгнутая дуга – положительное значение; прямая линия – нулевое значение.
Fill Arc (Окрашивать дугу в цвет заливки).
3. Спираль (Spiral ) .
В окне «спираль» указываются свойства спирали:
Radius (Радиус) – расстояние от центра до самой дальней точки спирали.
Decay (Рост) – величина, на которую каждый виток спирали будет уменьшаться по сравнению с предыдущим витком.
Segments (Число сегментов) – количество сегментов в спирали; каждый полный виток спирали состоит из четырех сегментов.
Stale (стиль) – направление спирали.
