Данный урок достаточно простой, но результат будет радовать глаз – аккуратные закругленные углы ваших снимков. А добиться этого очень просто, имея в арсенале Adobe Photoshop любой версии, и снимок, который необходимо обработать.
Закругление углов снимка происходит в несколько этапов:
1. Откройте изображение в Photoshop. Для этого нажмите «Файл» и «Открыть» или сочетание клавиш на клавиатуре Ctrl+O.
2. Создайте новый слой, нажав «Слои», затем «Новый слой».
3. В левой части программы располагается вертикальная панель инструментов. В ней вы найдете инструмент «Прямоугольник». В данный момент не он нам нужен, поэтому кликаем по нему правой кнопкой мыши и выбираем инструмент «Прямоугольник со скругленными углами».
4. В верхней части программы появится панель настроек данного инструмента. Здесь можно задать желаемый радиус скругления углов, т.е. можно усилить или уменьшить скругление. По умолчанию параметр имеет значение 10 пикселей. Обратите внимание, что для работы с инструментом у вас должен быть активирован параметр «Контуры», который также располагается на панели настроек.
5. Выделите все изображение, начиная с верхнего левого угла и заканчивая правым нижнем.
6. Кликните по изображению правой кнопкой мыши и выберите параметр «Образовать выделенную область». Появится пунктир выделения.
7. Теперь перейдите в горизонтальную панель инструментов и откройте вкладку «Выделение», а затем выберите «Инверсия».
8. Теперь все наоборот – выделено не само изображение, а ненужные углы. Для того чтобы убрать их, просто нажмите на клавиатуре сочетание клавиш Ctrl+Delete.
9. Теперь снимите выделение, нажав на клавиатуре Ctrl+D. Наслаждайтесь результатом!
Не забудьте сохранить готовую фотографию на компьютер.
В этом разделе своего сайта я решил разместить уроки фотошоп , которые могут пригодиться Вам при создании дизайна сайта. Думаю, не лишним будет, с моей стороны, перед началом обучения фотошопу, представить Вам горячие клавиши фотошоп . Используя горячие клавиши фотошоп , вы облегчите себе работу и сэкономите время. .
Первый мой урок Photoshop расскажет Вам о том как закруглить углы фото.
При изготовлении сайтов частенько приходится сталкиваться с проблемой как закруглить углы рисунка, или как закруглить углы фото. В этом уроке Фотошоп я научу Вас как закруглить углы рисунка в фотошоп . Так же этот урок Фотошоп позволит Вам закруглить углы фотографии. Надеюсь, это и так Вам понятно. Ведь для Фотошоп и картинка и фотография всё едино. В своей работе я пользуюсь Adobe Photoshop SC5, русская версия. Ну не силён я в языках.
Сегодняшний мой урок посвящен закруглению углов фото в фотошоп. Давайте вместе сделаем фотографию с скругленными углами как у меня на картинке.
1. Чтобы осуществить закругление углов в Фотошопе , откроем с помощью Фотошоп нужную нам картинку (фотографию). Для примера я взял одну из фотографий своего фото архива.
2. Приводим размеры рисунка к нужным нам параметрам. Для этого нажимаем ALT+CTRL+I. Откроется окно "Размер изображения". Задаем необходимые нам размеры. Можно и просто обрезать картинку до нужного размера.
3. Выделяем рисунок (CTRL+A) (появится пунктирная линия по периметру) и копируем его (CTRL+C); Копируем фото для того, чтобы исходное изображение осталось без изменений, посте того, как мы осуществим закругление углов в Фотошопе . Хотя можно работать и на оригинале, но тогда, когда закругленные углы будут готовы, мы просто сохраним фото как другое изображение.
4. Открываем новое окно (CTRL+N), задаём нужные размеры изображения и нажимаем "ОК". Прошу обратить внимание, что я задал фон - "прозрачный". Вы можете сразу задать фон, требуемого Вам цвета;
5. Вставляем в новое окно скопированный рисунок (CTRL+V) и создаём новый слой (CTRL+SHIFT+N). В Этом слое с помощью инструмента "прямоугольник со скругленными углами " рисуем прямоугольник нужного размера. Цвет прямоугольника значения не имеет. Выбор инструмента производится путём нажатия на правую кнопку мыши. Или простым нажатием клавиши (U). Радиус закругления устанавливаем по своему усмотрению (см. рисунок ниже);
При необходимости Вы можете переместить нарисованную фигуру с помощью стрелок на клавиатуре или с помощью мыши, удерживая нажатой левую клавишу. Предварительно не забудьте активировать на панели инструментов "перемещение" (верхняя кнопка). Также Вы можете изменить размер фигуры. Для этого нажмите (CTRL+T) и растяните фигуру до нужных размеров с помощью мыши, удерживая левую клавишу. Если Вы хотите изменить размер с сохранением пропорций, Вам необходимо удерживать SHIFT, и растягивать за угол фигуры.
6. Переходим в панель слоёв. Удерживая CTRL кликаем левой клавишей мыши по превью (картинке) слоя прямоугольника. Появится пунктирная обводка фигуры.
7. Переходим на нижний слой. Для этого в панели слоёв кликаем справа от картинки. В нашем случае - слоя 1. Выделение голубым цветом перейдёт на слой 1.
8. Нажимаем CTRL+ SHIFT+I. Появится пунктирное выделение по границе той части картинки, которая находится за пределами нашего прямоугольника имеющего закруглённые углы .
9. Нажимаем на клавиатуре DEL. Часть изображения, что находится за пределами прямоугольника будет удалена.
10. Вновь активируем слой с прямоугольником. Удаляем его, нажав на иконку корзины.
11. Нажимаем клавишу "М" и кликаем левой клавишей мыши в любое место изображения. Выделение убрано. готовы. Можно сохранять изображение, которое мы получили осуществив&закругление углов в Фотошопе , в нужном нам формате.
Если такое изображение будет использовано для создания дизайна сайта, сохраняйте его для Web и устройств (ALT+SHIFT+CTRL+S).
12. Внимание! Если у Вас по краям изображения со скругленными углами остались прозрачные пикселы, Вам необходимо выполнить тримминг. Для этого нажмите "Изображение", выберите "Тримминг", в появившемся окне установите настройки как у меня на картинке и нажмите "Ok". Размер холста приобретет размер изображения, а все лишние прозрачные пикселы будут удалены.
Данный урок фотошоп можно использовать и для получения овальных фотографий, и для получения фигурных фотографий. Для этого в п.5 вместо инструмента "прямоугольник со скругленными углами " выбираем инструмент "эллипс", "многоугольник" или "произвольную фигуру". Дальше все действия проделываем те же, что мы проделывали, чтобы получить скругление углов .
Я долго искал как можно закруглить углы при помощи Adobe Photoshop, но везде где-то не дописывают, либо написано неправильно. Как оказалось закруглить углы у любой картинки займёт не более 30 секунд, естественно после того как вы научитесь это делать.
И так чтобы выполнить такую несложную операцию необходимо запустить приложение и закинуть нужную нам картинку внутрь программы, либо воспользоваться Меню->Файл->Открыть->Нужная картинка.jpg.Я буду использовать обычное изображение природы.
Обратите внимание на правый нижний угол, в "Слоях" появилось фоновое изображение, его надо преобразовать в слой. Для этого жмём по фону правой кнопкой мыши и выбираем "Слой из заднего фона".
В результате данного действия, наш фон преобраузется в слой.
Создаём дубликат картинки, для этого жмём правой кнопкой мыши по Слой 0 и выбираем "Создать дубликат слоя".
Рисунок2
Скрываем с рабочей области "Слой 0". Чтобы скрыть слой необходимо нажать иконку ГЛАЗА рядом с названием слоя.
Выделяем нужную часть на изображение.
Как только вы отметили прямоугольником нужную часть картинки, нажмите правой кнопкой мыши внутри выделе и выберите пункт "Образовать выделенную область".
В диалоговом окошке жмём кнопочку ОК, растушёвку не трогаем.
Очень важный момент! Выделяем Слой 0 (Копия), затем нажимаем кнопку DELETE на клавиатуре. Слой 0 (копия) должен быть выделен обычным щелчком мыши.
Если всё сделано правильно, в Фотошопе вы увидите примерно вот такую картину. Теперь можно сохранить изображение например в png формате, и радоваться произведению искусства.
Есть ещё один момент, если вырезанный кусок в два а то и 3 раза меньше оригинального изображения, у него останется большая пустая область, её надо удалить. Для этого выбираем инструмент раскройка, и выделяем область изображения без пустой области.
Затем заходим в меню Редактировать->Скопировать.
Заходим в меню Файл->Создать, и просто нажимаем ОК. Программа автоматически подгонит ширину и высоту холста выделенного участка изображения.
В новом проекте "Без имени 1", а мы автоматически окажемся именно в нём, заходим в меню Редактировать->Вставить.
Сохранять картинку лучше всего с помощью пункта "Сохранить для Web". Во-первых можно вручную выбрать качество изображения в процентах, во-вторых размер изображения будет в несколько раз меньше чем если сохранять обычным способом.
И что у нас получилось на выходе.
Для тех кому не понятно как у меня получилось закруглить углы, я специально записал видео, которое поможет вам в этой не сложной задаче.
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div { border-radius: 10px; } | Радиус скругления для всех уголков сразу. | |
| div { border-radius: 0 10px; } | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div { border-radius: 20px 10px 0; } | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div { border-radius: 20px 10px 5px 0; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображения
HTML5 CSS3 IE 9+ Cr Op Sa Fx
25.07.2016 27.01.2018
В этом уроке вы узнаете, как в фотошоп сгладить острые углы у фигур.
Для начала, давайте создадим фигуру. Сделать это можно, выбрав в панели инструментов инструмент Произвольная фигура (Custom Shape Tool). Горячая клавиша вызова подменю инструментов для создания векторных фигур - U.
Для того, чтобы этот инструмент стал активным, есть два способа:
1. С зажатой клавишей Shift щелкнуть по группе инструментов и откроется подменю для выбора нужного инструмента;
2. Длинное нажатие левой кнопки мыши по группе инструментов также откроет подменю.
Загружаем в фотошоп все имеющиеся фигуры (щелкаем по миниатюре фигуры в верхней панели и нажимаем на «шестеренку» справа для открытия дополнительных настроек):
Из выпадающего списка выбираем фигуру с острыми уголками, например, такую звездочку с 10 углами:
При создании фигуры не забываем удерживать клавишу Shift - это поможет сохранить пропорции.
Теперь необходимо растрировать фигуру - щелчок правой клавишей мыши по слою с фигурой-Растрировать слой.
Радиус подбираем в зависимости от размера холста и желаемого результата, я выбрала 6 пикселей.
Теперь нам нужно загрузить выделение слоя с фигурой, для этого с зажатой клавишей Ctrl щелкните по миниатюре слоя с фигурой на панели слоев.
При активном выделении нажимаем кнопку «Уточнить край» (Refine Edge ):
Откроется меню настроек, в котором нам нужно параметр Растушёвка (Feather) оставить на 0 , а параметр Контрастность (Contrast) увеличить максимально, до 100%. Параметр Сгладить (Smooth) настраиваем на свой вкус, именно он поможет скруглить углы фигуры. В случае с 10-гранной звездой я его выставила на максимум, у вас же могут быть совсем другие настройки.
В параметре Вывод в … оставляем настройку, установленную по умолчанию - выделение .
Нажимаем клавишу Enter для применения настроек. Создаем новый слой и при помощи инструмента Заливка (Paint Bucket Tool) или перейдя в меню Редактирование-Выполнить заливку заливаем выделение нужным цветом, например, черным , как на исходной фигуре. Отключаем видимость исходного слоя с фигурой и получаем вот такую фигуру со скругленными углами:
Вот и все. В этом уроке мы научились скруглять углы у фигур в фотошоп. Надеюсь, урок был вам полезен.
