Показать универсальный и быстрый способ вырезания картинки из макета для точного совмещения с фоном.
Часто технологам приходится готовить GIFы из картинок непрямоугольной формы, которые нужно наложить на неоднородный фон. Чтобы получить меньший объем файла и убрать края стыковки, фон из картинки необходимо вырезать:
Классический вариант решения этой задачи — использование инструментов Magic Wand или Magic Eraser. Но что делать, когда они бессильны?
Однажды я получил от дизайнера такой макет:
Исходник в PSD (ZIP, 525 КБ)
Для макета мне нужно было сохранить ленточку и коробочку (вместе с тенью) отдельной картинкой, которая накладывается поверх открытки и листа бумаги.
Но дизайнер нарисовал тень как-то странно: она находится в отдельном слое, который накладывается на фон в режиме Multiply, при этом нарисована на белом фоне. Объединение слоя ribbon and box со слоем shadow давало непредсказуемый результат. Как ни крути, а использовать «волшебные» инструменты тут бесполезно — слишком долго придется выделять все области отсечения. К тому же есть вероятность добавления в эту область нужных пикселей, которые сделают тень резкой и неестественной.
Сложная, на первый взгляд, проблема решается довольно просто. Все, что нужно сделать, — это найти разность между картинкой с ленточкой и коробочкой и картинкой без них.
1.
Выделяем все изображение (Ctrl+A), копируем видимую область (Edit → Copy Merged или жмем Shift+Ctrl+C), создаем новый документ (Ctrl+N) и вставляем в него картинку (Ctrl+V).
2.
Возвращаемся в исходный макет и, не снимая выделения, отключаем слои ribbon and box и shadow (то есть все, что связано с вырезаемыми объектами). Копируем фоновое изображение (следите, чтобы слой background был выделен) и вставляем его в недавно созданный документ. В итоге должен получиться документ с двумя слоями: с ленточкой-коробочкой и без них:
3.
Выделяем верхний слой (Layer 2) и меняем режим наложения с Normal на Difference:
4.
Жмем на иконку внизу палитры Layers и выбираем из выпадающего списка Threshold. В появившемся окошке перетаскиваем ползунок в крайнее левое положение:
5.
В результате мы получаем битовую маску, где черный цвет как раз представляет собой область отсечения:
Хозяйке на заметку
С помощью режима наложения Difference (разность) мы подсветили те области, которые отличаются в наших двух слоях. А с помощью настроечного слоя Threshold (порог) мы одновременно выполнили две задачи: закрасили области с яркостью больше единицы в белый цвет и подготовили слой для создания выделения (попробуйте, не создав этого слоя, выделить черный цвет в слое Layer 2).
И наконец, не снимая выделения со слоя Threshold в палитре Layers, выделяем все черные области с помощью Magic Wand (или с помощью Select → Color Range), отключаем слои Threshold и Layer 2, выделяем слой Layer 1 и жмем кнопку Delete. Смотрим на результат:
Мы получили изображение, которое идеально стыкуется с фоном. Этим методом я пользуюсь постоянно, он не раз выручал меня и в более сложных случаях.
Добавить наложение на фоновое изображение в TailwindCSS
Дом
Свяжитесь с нами
Войти
Добро пожаловать! Войдите в свою учетную запись
ваше имя пользователя
ваш пароль
Забыли пароль?
Политика конфиденциальности
Восстановление пароля
Восстановите пароль
ваш адрес электронной почты
Поиск
Когда вы работаете над индивидуальным дизайном, вам нужно добавить наложение, чтобы текст был виден поверх изображения. В TailwindCSS вы можете использовать классы backdrop-brightness , чтобы добавить наложение к изображению.
Добавление черного наложения в TailwindCSS
Tailwind предоставляет класс backdrop-brightness с различными значениями для добавления наложения на фоновые изображения. Вы можете добавить непрозрачность ко всему, что вы хотите контролировать наложением. Вот простой пример добавления фонового наложения на изображение в TailwindCSS. Вы можете проверить пример онлайн на сайте play.tailwind.com.
Черное наложение на изображение в TailwindCSS
XHTML
<дел> <дел
> <дел> Вот пример наложения черного на изображение
Приведенный выше код создаст наложение на изображение, как показано на скриншоте ниже.
Добавление цветного наложения на фоновое изображение
Вы можете использовать класс backdrop-brightness в сочетании с классами фона для добавления цветного наложения. Вы можете добавить непрозрачность цвета фона, чтобы изменить непрозрачность наложения. Вот простой пример цветного наложения.
цветное наложение на изображение с помощью TailwindCSS
XHTML
<дел> <дел
> <дел> Вот пример цветного наложения на изображение
Результат цветного наложения будет выглядеть следующим образом:
Как изменить цвет наложения
Вы можете управлять цветом и яркостью, изменяя классы. Класс bg-blue-600/30 в приведенном выше примере используется для добавления цветного наложения, и вы можете изменить цвет, а также прозрачность. Класс backdrop-brightness-75 используется для управления яркостью наложения. Вы можете указать свои собственные значения яркости и цвета.
Заключение
Добавление наложения на фон очень полезно для того, чтобы сделать текст видимым на любом изображении. Вы можете комбинировать цвет фона с классами яркости в TailwindCSS, чтобы добавить наложение на изображение.
Поиск
Последние статьи
Похожие статьи
Методы наложения CSS, Как создать наложение в CSS
Наложение прозрачного изображения
Следующий код CSS показывает, как наложить прозрачный цвет на изображения. Также вы можете увидеть, как наложить один div на другой div.
Наведите мышку на изображение…
Наложение прозрачного элемента div на изображение
Исходный код
Прозрачные фоновые изображения
В CSS нет такого свойства, как прозрачность. Свойство CSS3 для прозрачности — это непрозрачность, и оно является частью рекомендации W3C CSS3.
Подробнее о …. Как сделать фоновые изображения прозрачными
Добавление цветового наложения к изображениям
Следующий код css показывает, как сделать наложение цвета при наведении курсора на изображение. Когда вы добавляете цвет, он выглядит как прозрачный фон для изображения, потому что прозрачность наложения изменяется
Цветное наложение CSS-изображения при наведении
Наведите мышку на изображение. ..
Наложение цвета на изображение
Исходный код
Добавить наложение нескольких цветов к изображениям
Вы можете добавить наложение нескольких цветов на изображения при наведении курсора на изображение.
Наведите мышку на изображение…….
Прозрачные фоновые изображения
Исходный код
Наложение фона текста
В следующем коде показано, как задать наложение цвета фона текста при наведении указателя мыши. Здесь вы можете увидеть, как наложить текст на элемент div.
Наведите указатель мыши на текстовое поле …….
Гринпис является неправительственной
экологическая организация с
офисы в более чем сорока странах
и с международной координацией
тело в Амстердаме, Нидерланды
CSS Наложение цвета при наведении текста
Исходный код
Подробнее о CSS Hover Effects. .. CSS Image Hover
Гринпис является неправительственной
экологическая организация с
офисы в более чем сорока странах
и с международной координацией
тело в Амстердаме, Нидерланды
Поместите одно изображение поверх другого
Следующий код CSS показывает, как наложить изображение на другое изображение.
Наложение изображения при наведении CSS
Наведите мышку на изображение…….
Эффекты наложения изображений CSS
Исходный код
Несколько фоновых изображений
Следующий код CSS показывает, как расположить несколько изображений поверх другого изображения.
Наложение нескольких изображений
Наведите мышку на картинку….
Наложение прозрачного изображения при наведении
Исходный код
CSS наложение текста при наведении курсора на изображение
Как расположить текст поверх изображения? . . Из следующего кода CSS вы можете узнать, как накладывать текст на изображения.
Наведите мышку на изображение…
Тигр — самый крупный вид кошек,
достигая общей длины тела до
3,3 м и весом до 306 кг. Его
самая узнаваемая черта — узор
темных вертикальных полос на красновато-оранжевом
мех с более светлой изнанкой.
Наложение текста на изображения
Исходный код
Подробнее о наложении подписей к изображениям CSS…. Подписи к изображениям CSS
Тигр — самый крупный вид кошек,
достигая общей длины тела до
3,3 м и весом до 306 кг. Его
самая узнаваемая черта — узор
темных вертикальных полос на красновато-оранжевом
мех с более светлой изнанкой.
Прозрачные фоновые изображения, наложение прозрачного элемента div на изображение
Как расположить изображение поверх текста
Следующий код CSS показывает, как разместить изображение над текстом
Копируем фоновое изображение (следите, чтобы слой background был выделен) и вставляем его в недавно созданный документ. В итоге должен получиться документ с двумя слоями: с ленточкой-коробочкой и без них:
А с помощью настроечного слоя Threshold (порог) мы одновременно выполнили две задачи: закрасили области с яркостью больше единицы в белый цвет и подготовили слой для создания выделения (попробуйте, не создав этого слоя, выделить черный цвет в слое Layer 2).
В TailwindCSS вы можете использовать классы 
..
.. CSS Image Hover
. Из следующего кода CSS вы можете узнать, как накладывать текст на изображения.
