Перед началом
Сохраните многослойную копию. Если объект уже находится на отдельном слое, скройте фон. Если фон нужно отделять, начинайте с выделения и маски, а не с необратимого удаления пикселей.
Текстовое объяснение схемы
Маска → Проверка на двух фонах → PNG / WebP. Логотип с мягкой тенью требует полупрозрачных пикселей. JPEG для такой задачи не подходит: свободное место будет заполнено цветом, а не прозрачностью. Для простой одноцветной эмблемы рассмотрите SVG.
Как сделать
- Создайте маску слоя и уточните края при увеличении. Для волос и полупрозрачных материалов не превращайте весь край в жёсткий контур. Чёрный на маске скрывает, белый показывает, серый даёт частичную видимость.
- Подложите по очереди тёмный и светлый цвет. Белый ореол, незаметный на белом, станет виден на тёмном. Корректируйте маску и загрязнённые цвета края, сохраняя возможность вернуться назад.
- Экспортируйте PNG или поддерживающий альфа-канал WebP. Откройте результат на странице с двумя разными фонами и убедитесь, что полупрозрачные участки действительно просвечивают.
.mark { background: transparent; }Разберём пример
Логотип с мягкой тенью требует полупрозрачных пикселей. JPEG для такой задачи не подходит: свободное место будет заполнено цветом, а не прозрачностью. Для простой одноцветной эмблемы рассмотрите SVG.
Проверьте результат
Проверьте внешний край, тень и отверстия внутри букв. Посмотрите файл в браузере, а не только в Photoshop. Убедитесь, что в изображение не попала нарисованная шахматная сетка.
Где легко ошибиться
Opacity всего слоя ослабляет и фон, и сам объект. Чтобы убрать только фон, нужна маска или выделение, а не общее снижение непрозрачности.
Источники и продолжение
- Adobe — Export settings
- Прозрачность и полупрозрачность в Photoshop — 2009-05-05 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.