В этом разделе своего сайта я решил разместить уроки фотошоп , которые могут пригодиться Вам при создании дизайна сайта. Думаю, не лишним будет, с моей стороны, перед началом обучения фотошопу, представить Вам горячие клавиши фотошоп . Используя горячие клавиши фотошоп , вы облегчите себе работу и сэкономите время. .
Первый мой урок 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 вместо инструмента "прямоугольник со скругленными углами " выбираем инструмент "эллипс", "многоугольник" или "произвольную фигуру". Дальше все действия проделываем те же, что мы проделывали, чтобы получить скругление углов .
Последнее обновление:18/01/16
Как на картинке закруглить углы в фотошопе
При оформлении блогов неоднократно уже делала скругленные углы на изображениях, но то, что делается не так часто и недостаточно автоматически, быстро забывается. И я снова сетовала на то, что надо описывать сделанную работу сразу же. Поэтому вот сейчас почти по горячим следам опишу последовательность действий. Правда, из-за болезни «горячие следы» получились уже далеко не горячие.
Для тех, кто любит все посмотреть, небольшой видеоролик “как закруглить углы в фотошопе”:
В первую очередь, Вам нужен фотошоп. Где его взять, вариантов два:
- купить на официальном сайте
- найти на торрентах
Какой вариант выбрать, решать Вам.
Итак, запускаем фотошоп. Открываем картинку, у которой надо закруглить углы в фотошопе (Файл → Открыть). Если размеры картинки больше, чем Вам необходимо, можно изменить размеры (Изображение → Размер изображения).
Справа, на превью картинки, есть маленький замочек, который блокирует редактирование исходного изображения (фонового слоя). Чтобы создать новый слой и работать уже с ним, щелкаем на нем 2 раза левой кнопкой мыши, в появившемся окошке ничего не меняем, нажимаем «Да».
Если замочка нет, то одно из двух:
либо в Вашей версии фотошопа фоновый слой можно редактировать (что сомнительно, но вдруг)
либо описанное выше можно сделать с помощью другой операции: сверху, в строке меню, выбираем “Слои”, в открывшемся подменю выбираем “Новый” и по стрелочке – “из заднего плана”, и в открывшемся таком же окошечке нажимаем “Да”.
Выбираем в инструментах “Прямоугольник со скругленными углами”.
Выбираем сверху на панели настроек режим: «Контуры». Устанавливаем радиус, чтобы закруглить углы в фотошопе. Я выбрала 40 пикселей, Вы можете выбрать подходящий для Вашей картинки.
Рисуем на картинке прямоугольник нужного размера: ставим курсор (он приобретает форму крестика) в нужную точку слева-сверху и, не отпуская кнопки мыши, ведем в противоположный угол до нужной точки. На нашу картинку лег прозрачный прямоугольник со скругленными углами.
Правой кнопкой мыши кликаем на прямоугольнике. В контекстном меню выбираем «Образовать выделенную область», радиус растушевки поставим 1 пиксел и нажимаем кнопку «Да».
С помошью меню Выделение → Инверсия выделяем все, что вне прямоугольника со скругленными углами, и удаляем выделенное клавишей Delete.
Если Вы накладывали прямоугольник не на всю картинку, то лишний прозрачный фон можно удалить с помощью последовательности команд Изображение → Тримминг → На основе прозрачных пикселов → Да.
Мы получили картинку с закругленными углами. Сохраняем ее для Web: Файл → Сохранить для Web и устройств. Выбираем Preset: PNG-24, Transparency и жмем Save. В формате PNG-24 картинка сохраняется с прозрачным фоном, для того чтобы ее можно было встроить в любой дизайн сайта.
Все то же самое можно сделать с инструментом «Эллипс», тогда Вы получите круглую картинку или в рамке эллиптической формы.
Итак, сегодня мы с Вами узнали, как закруглить углы в фотошопе у любой картинки.
Сейчас изображения с закругленными краями пользуются популярностью. Сделать это совсем не сложно, особенно если заготовить шаблон для дальнейшей работы.
Вам понадобится
- программа Adobe Photoshop
Инструкция
Инструкция
На некоторых сайтах, в дизайне которых нет острых углов, иллюстрации в статьях и новостях также имеют закругленные края. Очень часто веб-дизайнеры не задумываются над тем, что делать такие иллюстрации с закругленными углами владельцу сайта будет сложно, у него не обязательно есть нужные знания Photoshop . Впрочем, заказчик сайта сам виноват. Требуя, чтобы все было красиво, он часто не задумывается над тем, как он потом будет добавлять изображения с заокругленными краями в статьи и новости на своем сайте.
В этом уроке Photoshop мы увидим как просто закруглить углы рисунка на примере аватарки, не ограничиваясь толщиной в 1px :
Когда мне впервые было нужно закруглить углы в иллюстрации для сайта, ответ для меня был неочевиден. Я погуглил и наткнулся на пару переводных инструкций, которые были слишком заумными для новичка – мучиться с каналами, путями, размытием, направляющими и прочими инструментами для продвинутых пользователей Photoshop даже профессионалу лень, а для новичка такой процесс может показаться непонятным и нудным. Немного подумав, я нашел свой способ как быстро и просто закруглить края нужного мне рисунка.
Закругляем все углы рисунка с помощью формы 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. Нарисованную в новом слое фигуру можно двигать с помощью стрелок на клавиатуре. Ее форму можно менять, нажав на клавиатуре 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) .
Узнать больше про продвижение мобильных приложений вы можете на сайте advertmobile.net. Этот сервис предлагает мотивированные установки в больших объемах для разработанного вами приложения, а также их грамотную раскрутку в App Store и Google Play.
Скругленные углы на фотографии выглядят достаточно интересно и привлекательно. Чаще всего такие изображения применяются при составлении коллажей или создании презентаций. Также картинки со скругленными углами можно использовать в качестве миниатюр к постам на сайте.
Вариантов использования много, а способ (правильный) получить такое фото всего один. В этом уроке я покажу, как скруглить углы в Фотошопе.
Открываем в Фотошопе фотографию, которую собираемся редактировать.
Затем создаем копию слоя с водопадом под названием «Фон» . Для экономии времени воспользуемся горячими клавишами CTRL+J .
Копия создается для того, чтобы оставить нетронутым исходное изображение. Если (вдруг) что-то пойдет не так, можно будет удалить неудачные слои и начать заново.
В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей.
Я задам значение в 30 пикселей, так будет лучше видно результат.
Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование» горячими клавишами CTRL+T . На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта.
Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER .
Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку» Посмотрите скрин, там указано, где данная функция находится.
Функция заставляет объекты автоматически «Прилипать» к вспомогательным элементам и границам холста.
Как видим, вокруг фигуры образовалось выделение. Теперь переходим на слой-копию, а со слоя с фигурой снимаем видимость (см. скриншот).
Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки.
Инвертируем выделение горячими клавишами CTRL+SHIFT+I . Теперь выделение осталось только на углах.
