Как сделать плашку прозрачную с размытием в фотошопе
Представь себе скан мятого листа. Так вот, надо сделать png с альфа каналом, так, что бы на нем были только помятости.
То есть, надо как минимум заменить белый на прозрачный, а лучше вообще оставить разницу между ровным и мятым листом.
В итоге должен получиться png файл, который, я смог бы накладывать поверх других документов.
UPD: Спасибо sumnix
Оригинал:
Результат:
Пример:
Оценить 1 комментарий
— Добавляете пустую маску к вашему слою;
— делаете Apply Image… на эту маску — выставляете Merged, Green, Multiply, 100% — ok;
— применяете curves/кривые на получившейся маске, подгоняя под уровень прозрачности из вашего задания (чем темнее маска, тем прозрачнее).
Всё, можно фон подложить для пущей наглядности.
Наверное я туговат, но не могу понять :(
Ребята, если не трудно, сделайте скриншотиков пару, чтобы понять что нужно
В фотошопе можно выделить цветовой диапазон (в меню Выделение), там выбираете белый цвет и играетесь с ползунками до нужного результата. Потом то что выделится удаляете.
Alt + Перетаскивание
Не уж то это так сложно? Или Вы написали это, потому что не умеете работать с Gimp.
p.s.
Давайте не продолжать этот бессмысленный спор — есть области, в которых Photoshop превосходит Gimp, и есть области, в которых Gimp превосходит Photoshop.
Я использовал английский фотошоп, поэтому перевод на русский может быть не точным
1. Отройте файл
2. Если это была картинка, то сначала делаем Ctrl+A, Ctrl+X, Ctrl+V
3. Ctrl+A
4. В доке управления слоями на слое Layer 1 создаем Clipping Mask (внизу кнопка, где создать новый слой, удалить слой)
5. Открываем док управления каналами Window > Channels
6. В нем будут 4 слоя + наша маска
7. Выбираем самый контрастный слой, например Red, остальные выключаем
8. Делаем на этом слое Ctrl+A, Ctrl+C
9. Включаем все слои, активным делаем нашу маску, Ctrl+V
10. Правим яркость, контрастность, уровни на этой маске, добиваясь наиболее приемлемого результата.
К сожалению, прозрачности нет.
Т.е. после пункта 9 — изображение принимает оттенки серого, но не становиться прозрачным.
Да, через маску результат лучше. Очень грамотно нужно выбрать диапазон, по секрету - лучше через инверсию, затем инвертируем маску и балуемся уровнями. Главное не путайте слои и каналы в слоях при использовании инструментов.
Относительно свежий тренд в дизайне интерфейсов—глассморфизм, о котором мы писали в статье о визуальных трендах 2021 года. Сегодня разберем его подробно.
Особенности глассморфизма:
Эффект прозрачного матового стекла
Вариации размытия и непрозрачности, создающие многослойный эффект
Тонкая светлая граница по краям в 1-2 px, имитирующая края стекла
Яркий фон или яркие элементы фона, подчеркивающие эффект размытия
Как и с любым другим трендом, важно не злоупотреблять глассморфизмом, используйте его аккуратно, чтобы он хорошо вписывался визуально. Избегайте переизбытка и следите, чтобы глассморфизм не вызывал затруднение и недопонимание у пользователя. При умеренном использовании этот эффект становится ярким акцентом, притягивающим внимание.
Не применяйте эффект к кнопкам и переключателям, их предпочтительно делать контрастными.
Используйте глассморфизм, например, как фон карточек или уведомлений. При этом важно убедиться, что контент в карточке хорошо читается на таком фоне.
Карточка с глассморфизмом на сайте virtualis.tours. Фон подобран правильно, не возникает проблем с прочтением
Плашки, имитирующие стекло
Чтобы добиться реалистичности, обратите внимание, как это работает в реальном мире
Чем ближе плашка в стиле глассморфизма к фону, тем меньше размытие фона.
Удаленность стекла от фона влияет не только на силу размытия, но и на прозрачность. Чем ближе плашка к фону, тем больше цвета она пропускает и плашка достаточно прозрачна. Если же плашка далеко от фона, прозрачность уменьшается.
Для максимальной реалистичности можно добавить эффект шума
Все, как с обычным матовым стеклом.
Выбор фона играет важную роль в создании глассморфизма. Фон не может быть слишком простым, не контрастным или со множеством мелких деталей.
Для этой задачи выбирайте яркий контрастный фон без мелких деталей, на котором стеклянные плашки будут хорошо выделяться.
Как сделать дизайнеру
С точки зрения дизайна сделать эффект глассморфизма достаточно просто.
Вот два видео урока для Фигмы и Фотошопа
Как сделать разработчику
Раньше единственным способом реализации глассморфизма было размещение размытой копии фона между нужным блоком и оригинальным фоном. Такой способ нес за собой много проблем с позиционированием размытого фона при адаптивной верстке или при динамичном положении элемента.
С появлением свойства backdrop-filter реализация стала намного проще.
Backdrop-filter (blur) позволяет размывать только изображение, находящиеся ниже нужного блока. Если фон блока будет непрозрачен, эффект не будет заметен, поэтому чаще всего backdrop-filter используется в совокупности с полупрозрачным фоном и тенями.
Код с разной степенью реализации данного эффекта. Как можно заметить, теперь он делается буквально в пару строк кода
Но нельзя полностью отказаться от старой реализации, новое свойство поддерживается еще не всеми браузерами. Пользователи FireFox, IE и некоторых мобильных браузеров не смогут увидеть эффекта размытости.
Выводы
Глассморфизм можно узнать по эффекту прозрачного матового стекла с тонкой границей по краям. Он максимально похож на настоящее матовое стекло
Используйте этот эффект аккуратно, он должен хорошо вписываться
Чтобы эффект выглядел реалистично, создавайте эффект глассморфизма с учетом того, как это работает в реальной жизни
Выбирайте яркий контрастный фон, избегайте простого не контрастного фона или фона с мелкими деталями
Дизайнеру создать эффект глассморфизма достаточно просто с помощью любого привычного инструмента
Разработчик с появлением нового свойства backdrop-filter может реализовать глассморфизм в пару кликов. Но не все браузеры поддерживают этот эффект.
Урок 1. Как размыть определенную часть фото в фотошопе?
Часто при обработке фото в фотошопе требуется размыть определённую часть его, допустим, скрыть важный элемент для создания интриги пользователю. В нашем случае, надо будет размыть область декольте на фото
Нажимаем инструмент "Прямоугольная область" и удерживая левую кнопку мыши (ЛКМ), выделяем нужную область изображения.
Жмем в верхнем меню "Фильтр" в выпадающем списке "Размытие" и "Размытие по Гауссу"
Как видите, интригующее место стало почти не разборчивым 😄
Урок 1.1 Как размыть фото или фон в photoshop целиком?
- Собственно, есть два пути размыть изображение. Для этого необходимо повторить действия согласно (Фото 1.1), с одним лишь нюансом - выделить мышкой придется всё фото ( КСТАТИ!А ведь можно и не выделять. );
- Либо же нажать сочетание клавиш "CTRL+A";
- Повторить действия из Фото. 1.2 и Фото. 1.3;
- Результат будет одинаков.
Урок 2. Как сделать эффект матового стекла в фотошопе?
Это наиболее практичный вариант, как размыть фото (фон), так как позволяет создать шаблон, в котором необходимо будет менять только фоновый рисунок.
Берем знакомую нам фотографию, допустим, жмем инструмент "Прямоугольник со скругленными углами", удерживая левую кнопку мыши (ЛКМ), выделяем нужную область изображения. Прямоугольник появится в виде отдельного слоя, как показано на Фото 2. ниже
Очень важно. Преобразуйте фоновый слой (на Фото 2 - это Слой 0) в "Смарт-объект". Нажимаем на нужный стой (Слой 0 здесь) правой кнопкой мыши (ПКМ) и выпадающем меню выбрать "Преобразовать в Смарт-объект"
Создаем копию фонового рисунка сочетанием клавиш CTRL+J (или CTRL+С и CTRL+V), либо же ПКМ в выпадающем меню выбрать "Создать дубликат слоя. ". Этот дубликат фонового слоя переместим на передний план как показано На Фото 2.1. Затем жмем на этот слой ПКМ и выбираем пункт "Создать обтравочную маску" (в данном фото 2.1 эти действия уже выполнены). На картинке появились края нашего будущего эффекта матового стекла.
Теперь, не покидая выделенный слой (который мы превралити в обтравочную маску) переходим к действиям показанным на Фото. 1.2 и Фото. 1.3. Причем у нас имеется возможность, при выделении слоя с прямоугольником, двигать его в любое место фона, сохраняя эффект матового стекла. И как вишенка на торте, так как Фоновый рисунок был преобразован в "Смарт-Объект" становится возможной замена его на любое другое фото смотрите видео ниже
В этом уроке вы узнаете как добавить эффект размытого фона без светящегося ореола вокруг основного объекта композиции.
Сложность урока: Легкий
В этом уроке я научу вас создавать эффект размытого фона без светящихся ореолов вокруг основного объекта композиции. Сперва мы воспользуемся инструментом Select and Mask (Выделение и маска), чтобы создать идеальное выделение основного объекта и вырезать его. Затем применим к фону фильтр Field Blur (Размытие поля).
Шаг 1
Открываем рабочее фото через меню File – Open (Файл – Открыть). Чтобы у нас осталась резервная копия неотредактированного фото, комбинацией клавиш Ctrl+J дублируем оригинальный слой.
Называем копию «Размытие» и отключаем видимость оригинального слоя нажатием на значок глаза рядом с названием слоя.
Шаг 2
Для начала нам нужно создать точное выделение модели на фото. Для этого мы воспользуемся инструментом Pen Tool (P) (Перо). Я не тратил время на выделение волос, потому что позже мы отдельно займемся доработкой этого участка.
Шаг 3
Далее, не удаляя выделение, берем Quick Selection Tool (W) (Быстрое выделение). Если вы пользуетесь версией Photoshop CC 19.1, то на верхней панели появится кнопка Select and Mask (Выделение и маска). Нажимаем на нее, чтобы открыть панель с параметрами выделения.
Если вы используете Photoshop CS6, то сперва применяем маску к слою с выделением, затем кликаем правой кнопкой по маске и выбираем Refine Mask (Уточнить маску). В результате у вас откроется окно почти с такими же настройками, как в Select and Mask (Выделение и маска).
Шаг 4
Открыв окно Select and Mask (Выделение и маска), выбираем инструмент Refine Edge Brush Tool (R) (Уточнить края) и проводим им по волосам, чтобы удалить фон. Как это работает? Инструмент проводит вычисления и определяет, где фон, а где детали модели.
Обратите внимание, что я не сохранил мелкие торчащие волоски. Вместо этого я заранее их удалил. Позже я напишу урок, в котором подробнее расскажу, как вырезать волосы и что делать с мелкими волосками. А пока давайте сосредоточимся на текущем уроке.
После работы инструментом, у вас должен получиться результат, как показано ниже.
Ниже вы можете сравнить результаты до и после использования Select and Mask (Выделение и маска).
Не закрываем окно с настройками Select and Mask (Выделение и маска) и опускаемся вниз до настроек Output Settings (Настройки экспорта). В меню Output To (Вывод в) выбираем New Layer with Layer Mask (Новый слой со слоем-маской). Это значит, что результат выделения будет отображен на отдельном слое с маской. Если хотите, можете активировать опцию Decontaminate Colors (Очистить цвета), чтобы убрать цветовые искажения.
После нажатия ОК на панели слоев появится еще один слой «Размытие копия» с маской.
Шаг 5
Теперь у нас есть идеально вырезанный объект, и мы можем заняться фоном. Для начала повторно выделяем модель, зажав клавишу Ctrl и кликнув по миниатюре маски на панели слоев.
Затем выбираем слой «Размытие»:
После этого переходим Select – Modify – Expand (Выделение – Модификация – Расширить):
Шаг 6
В открывшемся окне вводим 5 пикселей, чтобы расширить выделенную область на это значение. Расширение выделения позволит нам избежать свечения вокруг объекта.
После расширения выделения переходим Edit – Fill (Редактирование – Выполнить заливку) и в меню Content (Содержание) выбираем Content-Aware (С учетом содержимого). Настраиваем остальные параметры:
Шаг 7
Если отключить копию слоя «Размытие», то вы увидите, что человек практически полностью исчез. Photoshop клонировал разные участки фото и просто заполнил ими выделенную область.
Кликаем правой кнопкой по слою «Размытие» и выбираем Convert to Smart Object (Преобразовать в смарт-объект). Также не забудьте включить видимость копии слоя «Размытие».
Далее применяем Filter – Blur Gallery – Field Blur (Фильтр – Галерея размытия – Размытие поля).
Шаг 8
Теперь мы должны настроить фильтр. Сначала в центре документа добавляем две опорные точки (просто кликаем мышкой в том месте, где хотим добавить точку). Это создаст плавное размытие от верхней центральной границы документа к его центру. На панели справа устанавливаем Blur (Размытие) на 32 пикселя.
Если вы хотите размыть весь фон, то будет достаточно одной точки. Обратите внимание, что для каждой точки мы отдельно устанавливаем степень размытия.
Еще раз кликаем по документу, чтобы добавить вторую точку. Этой точкой мы указываем место, после которого размытие исчезает. Программа размоет участок только между этими двумя точками. Если размыть нижнюю часть фона, то результат получится не очень красивый. Поэтому устанавливаем размытие второй точки на 0 пикселей.
Шаг 9
Посмотрите ниже на результат размытия. Как видите, вокруг модели нет свечения:
Не забывайте, что фильтр Field Blur (Размытие поля) мы применяем к слою «Размытие». Не применяйте его к слою «Размытие копия».
Шаг 10
Если приблизить картинку, то мы увидим, что на фоне отсутствует легкий шум, который есть на модели.
Выбираем слой «Размытие» и переходим Filter – Camera Raw (Фильтр – Camera Raw).
На вкладке Effects (Эффекты) (значок fx) есть настройки Grain (Зерно). Просто тянем за ползунки, чтобы установить Amount (Величина), Size (Размер) и Roughness (Неровность), как показано ниже.
У этом уроке мы сделаем интересный, но лёгкий и полезный эффект размытия.
Начнём! Найдите картинку, которой Вы хотите придать этот эффект. Если хотите картинку из данного урока, то её можно скачать здесь Butterfly.jpg
Теперь дублируем этот слой (Ctrl+J) и спрячем копию (кликаем на глазике, который отображает видимость слоя) и переходим на нижний слой. Используем Image > Adjustments > Brightness/Contrast (Изображение>Коррекция>Яркость/контрастность) со следующими параметрами, чтобы сделать картинку немного темнее:
Посмотрим на результат:
Теперь возвращаемся к нашей спрятанной копии и делаем её видимой (вспомните про глазик). После применяем Filter > Blur > Gaussian Blur (Фильтр>Размытие>Размытие по Гауссу) с такими параметрами:
Теперь мы имеем что-то вроде этого:
Теперь давайте добавим какой-нибудь текст. Берём Horizontal Type Tool (Инструмент Горизонтальный текст) и напишем что-то вроде ‘The nature’.
Теперь Select > Load Selection (Выделение > Загрузить выделение), чтобы сделать выделение нажмите на галочку, вверху в опциях инструмента текст, иначе «загрузить выделение» будет не активное. После удалим слой с текстом, так как он нам больше не нужен.
Стоя на верхнем (размытом) слое нажимаем Delete что бы удалить выделенную область, снимаем выделение Ctrl+D.
Следующим шагом будет приготовление элементов (орнамент), которые используем позже. Я подготовил эти
Теперь у нас такая картинка:
Ставим opacity (непрозрачность) для этого слоя на 60%. Выделим размытый слой с природой (Ctrl+левый клик на иконке слоя в панели слоёв) и нажмите Ctrl+Shift+I для инвертирования выделения, после нажмите Delete чтобы очистить изображение у выделении.
Далее переходим на нижний слой, опять Ctrl+Shift+I и нажимаем Delete:
Снимаем выделение Ctrl+D. Наш эффект готов. Класно выглядит! Не так ли?
Читайте также: