Всем привет! В интернете почему-то нет четкого ответа на вопрос – как избавиться от полупрозрачных и скрытых пикселей. Проблема в том, что при сохранении рисунка или картинки в PNG у неё появляются скрытые полупрозрачные пиксели. Изначально они не видны при рисовании, но когда картинку заливаешь на фон, в игру или в приложение, то они начинают проявляться как «дырки» и просвечивать.
Плюс такие картинки весят больше. Я все же смог найти ответ на иностранных форумах. Конечно, там разобраны не все моменты, поэтому я решил написать свою подробную и краткую статью, где я все собрал воедино. Для работы нам понадобится любая версия Photoshop. Сначала я вам покажу, как определить и найти такие пиксели, а потом мы их уберем с рисунка.
Как определить наличие полупрозрачных пикселей.
Давайте кратко расскажу, про структуру прозрачного PNG файла. Сам рисунок сохраняется в 4 каналах:
- Red – красный слой.
- Green – зеленый слой.
- Blue – голубой слой.
- Но есть ещё один слой «Alpha», который как раз и отвечает за прозрачность.
Наша задача увидеть этот слой и исправить его. Покажу на примере картинки «Ботана», который есть на нашей главной странице (если кому интересно можете посмотреть).
Для того, чтобы увидеть слой «прозрачности» нужно открыть окно «Каналы» – в верхнем меню открываем «Окно» (Window) и ставим галочку «Каналы» (Channels). Также убедитесь, чтобы стояла галочка «Слои» (Layers) – это окошко нам тоже понадобится.
Теперь у нас есть два рабочих окна, которые нам нужны, но в «Каналах» (Channels) нет альфа слоя.
Чтобы он появился, нам нужно зажать клавишу «Ctrl» на клавиатуре и выбрать основной слой «Layer 0».
Мы выделили основной слой. Теперь в окне «Каналы» (Channels) станет активна кнопка «Save Selection as channel» – имеет вид темного квадрата со светлым кругом внутри.
Появится «Alpha 1» канал – просто нажмите, чтобы на него посмотреть.
Вот это и есть нужный нам Alpha канал с прозрачностью. Черный цвет – показывает полную прозрачность. Белый – непрозрачные точки. А вот любой оттенок серого – это полупрозрачные пиксели, от которых нам теперь надо избавиться.
На глаз их достаточно сложно увидеть, но если вы хотите увидеть все полупрозрачные зоны, то нужно в верхнем меню открыть: «Изображение» (Image) – «Коррекция» (Adjustments) – «Уровни» (Levels).
Теперь средний бегунок, который стоит на значении один (1,00) переводим в самое правое состояние.
Теперь смотрим на картинку. Как видите полупрозрачных точки оказалось ещё больше, чем я думал. Помимо зрачков у меня они есть на очках и в волосах. Нажимать «ОК» не нужно, так как в таком случае мы их сделаем ещё более прозрачными.
План по избавлению
Итак, у нас есть два варианта:
- Избавиться только от внутренних точек, но саму кромку оставить с прозрачностью –тогда края останутся более мягкими. Такой вариант подойдет для больших картинок.
- Избавиться от всех полупрозрачных пикселей – тогда края будут рваными. Подходит для маленьких картинок. Например, в пиксельных играх.
Сначала мы сделаем жесткое выделение без использования ненужных точек. А потом зальем задний фон нужным цветом.
ШАГ 1: Жесткое выделение
Тут можно применить два способа:
- Опять заходим в «Уровни» (Levels), как мы это делали ранее, но теперь мы тот же самый средний бегунок переводим в самую левую сторону.
- Второй вариант – это просто взять кисть, и закрасить выделение белым цветом.
ВНИМАНИЕ! Закрашивать нужно одним слоем – то есть в одно нажатие мышки. При повторных кликах рядом с кромкой вы будете терять полупрозрачные точки там, и края станут рваными.
Обязательно проверьте, чтобы цвет был чисто белым – это можно сделать в окне «Цвет» (Color).
Или нажмите на сам цвет в палитре и посмотрите, чтобы стояли настройки:
- RGB – все на 255.
- # – ffffff.
Мы сделали выделение, теперь переходим ко второму шагу.
Здесь мы избавимся от всех ненужных точек – как от тех, которые находятся на кромке, так и внутри самой картинки. Возьмите кисть с белой краской и закрасьте все внутренние серые детали.
Теперь выберите инструмент заливка (G).
Приблизьте картинку так, чтобы были видны полупрозрачные пиксели у кромки. И начните кликать и заливать до тех пор, пока они не станут полностью черными.
СОВЕТ! Если серые точки все никак не хотят закрашиваться, то зажмите кнопку Ctrl и опять нажмите на «Alpha» канал. А после заливайте дальше.
По сути нам нужно постоянно выделять и заливать слой до тех пор, пока не останется серых пикселей. В самом конце на всякий пожарный я бы ещё зашел в «Уровни» – там нужно перетащить самый левый бегунок вправо.
Ещё раз выделите «Alpha» слой с помощью клавиши Ctrl
ШАГ 2: Заливка задника
Мы сделали жесткое выделение, теперь нам нужно перейти на саму картинку – просто кликните по основному слою левой кнопкой мыши, и «Alpha» канал пропадет.
Теперь нажмите на кнопку «Создать новый слой» (Create a new Layer) и поменяйте их местами так, чтобы основная картинка была выше. Выделяем наш дополнительный пустой слой.
Наша задача теперь сзади залить картинку сплошным цветом. Я выберу черный цвет, но вы можете выбрать любой другой. Лучше выбирать темные цвета. Ещё можно использовать телесный, если у вас на картинке человек. Но ещё раз повторюсь, старайтесь выбирать темный цвет, так как он будет лучше смотреться на любом фоне.
ПРИМЕЧАНИЕ! Если дырки слишком большие, то основной цвет может сильно просвечивать, тогда придется их закрашивать вручную, выделяя цвет ближайших непрозрачных точек. В общем смотрите по ситуации.
Теперь я расскажу об одной проблеме, с которой может столкнуться каждый. При заливке края станут более темными или смешаются с тем цветом, которые вы используете. В таком случае нам нужно уменьшить выделение на 2-3 пикселя, чтобы оставить в покое те прозрачные точки, которые мы оставили по краям. Сначала отмените последнее действие, нажатием на клавиши Ctrl + Z.
Для уменьшения выделения вверху выбираем: «Выделение» (Select) – «Модификация» (Modify) – Сжать (Contract).
Так как я не знаю, сколько пикселей вы хотите оставить на кромке, то порекомендую поискать параметр самостоятельно. Мне хватило единицы. Обычно при рисовании этот параметр имеет значение 1-3.
Теперь опять заливаем основным цветом. Теперь осталось их объединить – в окне «Слои», нажмите правой кнопкой на любой и выберите «Слияние Видимых» (Merge Visible).
Результат
А теперь я покажу вам, какой результат получится при использовании двух способов:
- Слева – мы убрали все полупрозрачные пиксели внутри картинки, но оставили в кромке.
- Справа – мы убрали все полупрозрачные пиксели и оставили только прозрачные и непрозрачные.
Также вы можете посмотреть, что уменьшился размер файла. Конечно не так много, как хотелось бы, но для проектов, где таких картинок очень много, подобный способ может стать настоящим спасением.
Хоть где-то нормально все объяснено. Спасибо вам!
Всех благ автору, спасибо)
Кстати, для выделения лучше в: Select – Modify – установить Feather (Выделение – Модификация – Растушевка) в значение 0,2. Тогда по идее выделение будет более четкое.
Спасибо, за дополнение – забыл про эту настройку.