Как вырезать картинку из фона
HTML и CSSXSLTJavaScriptИзображенияСофтEtc
| Задача. | Показать универсальный и быстрый способ вырезания картинки из макета для точного совмещения с фоном. | ||
Часто технологам приходится готовить GIFы из картинок непрямоугольной формы, которые нужно наложить на неоднородный фон. Чтобы получить меньший объем файла и убрать края стыковки, фон из картинки необходимо вырезать:
Классический вариант решения этой задачи — использование инструментов Magic Wand или Magic Eraser. Но что делать, когда они бессильны?
Однажды я получил от дизайнера такой макет:
Исходник в PSD (ZIP, 525 КБ)
Для макета мне нужно было сохранить ленточку и коробочку (вместе с тенью) отдельной картинкой, которая накладывается поверх открытки и листа бумаги.
Сложная, на первый взгляд, проблема решается довольно просто. Все, что нужно сделать, — это найти разность между картинкой с ленточкой и коробочкой и картинкой без них.
| 1. | Выделяем все изображение (Ctrl+A), копируем видимую область (Edit → Copy Merged или жмем Shift+Ctrl+C), создаем новый документ (Ctrl+N) и вставляем в него картинку (Ctrl+V). |
| 2. | Возвращаемся в исходный макет и, не снимая выделения, отключаем слои ribbon and box и shadow (то есть все, что связано с вырезаемыми объектами). |
| 3. | Выделяем верхний слой (Layer 2) и меняем режим наложения с Normal на Difference: |
| 4. | Жмем на иконку внизу палитры Layers и выбираем из выпадающего списка Threshold. В появившемся окошке перетаскиваем ползунок в крайнее левое положение: |
| 5. |
Копируем фоновое изображение (следите, чтобы слой background был выделен) и вставляем его в недавно созданный документ. В итоге должен получиться документ с двумя слоями: с ленточкой-коробочкой и без них:Хозяйке на заметку | С помощью режима наложения Difference (разность) мы подсветили те области, которые отличаются в наших двух слоях. |
