Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Всем привет! В интернете почему-то нет четкого ответа на вопрос – как избавиться от полупрозрачных и скрытых пикселей. Проблема в том, что при сохранении рисунка или картинки в PNG у неё появляются скрытые полупрозрачные пиксели. Изначально они не видны при рисовании, но когда картинку заливаешь на фон, в игру или в приложение, то они начинают проявляться как «дырки» и просвечивать.

Плюс такие картинки весят больше. Я все же смог найти ответ на иностранных форумах. Конечно, там разобраны не все моменты, поэтому я решил написать свою подробную и краткую статью, где я все собрал воедино. Для работы нам понадобится любая версия Photoshop. Сначала я вам покажу, как определить и найти такие пиксели, а потом мы их уберем с рисунка.

Как определить наличие полупрозрачных пикселей.

Давайте кратко расскажу, про структуру прозрачного PNG файла. Сам рисунок сохраняется в 4 каналах:

  • Red – красный слой.
  • Green – зеленый слой.
  • Blue – голубой слой.
  • Но есть ещё один слой «Alpha», который как раз и отвечает за прозрачность.

Наша задача увидеть этот слой и исправить его. Покажу на примере картинки «Ботана», который есть на нашей главной странице (если кому интересно можете посмотреть).

Для того, чтобы увидеть слой «прозрачности» нужно открыть окно «Каналы» – в верхнем меню открываем «Окно» (Window) и ставим галочку «Каналы» (Channels). Также убедитесь, чтобы стояла галочка «Слои» (Layers) – это окошко нам тоже понадобится.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Теперь у нас есть два рабочих окна, которые нам нужны, но в «Каналах» (Channels) нет альфа слоя.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Чтобы он появился, нам нужно зажать клавишу «Ctrl» на клавиатуре и выбрать основной слой «Layer 0».

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Мы выделили основной слой. Теперь в окне «Каналы» (Channels) станет активна кнопка «Save Selection as channel» – имеет вид темного квадрата со светлым кругом внутри.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Появится «Alpha 1» канал – просто нажмите, чтобы на него посмотреть.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Вот это и есть нужный нам Alpha канал с прозрачностью. Черный цвет – показывает полную прозрачность. Белый – непрозрачные точки. А вот любой оттенок серого – это полупрозрачные пиксели, от которых нам теперь надо избавиться.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

На глаз их достаточно сложно увидеть, но если вы хотите увидеть все полупрозрачные зоны, то нужно в верхнем меню открыть: «Изображение» (Image) – «Коррекция» (Adjustments) – «Уровни» (Levels).

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Теперь средний бегунок, который стоит на значении один (1,00) переводим в самое правое состояние.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Теперь смотрим на картинку. Как видите полупрозрачных точки оказалось ещё больше, чем я думал. Помимо зрачков у меня они есть на очках и в волосах. Нажимать «ОК» не нужно, так как в таком случае мы их сделаем ещё более прозрачными.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

План по избавлению

Итак, у нас есть два варианта:

  • Избавиться только от внутренних точек, но саму кромку оставить с прозрачностью –тогда края останутся более мягкими. Такой вариант подойдет для больших картинок.
  • Избавиться от всех полупрозрачных пикселей – тогда края будут рваными. Подходит для маленьких картинок. Например, в пиксельных играх.

Сначала мы сделаем жесткое выделение без использования ненужных точек. А потом зальем задний фон нужным цветом.

ШАГ 1: Жесткое выделение

1 Вариант: Выделение внутренних пикселей

Тут можно применить два способа:

  1. Опять заходим в «Уровни» (Levels), как мы это делали ранее, но теперь мы тот же самый средний бегунок переводим в самую левую сторону.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

  1. Второй вариант – это просто взять кисть, и закрасить выделение белым цветом.

ВНИМАНИЕ! Закрашивать нужно одним слоем – то есть в одно нажатие мышки. При повторных кликах рядом с кромкой вы будете терять полупрозрачные точки там, и края станут рваными.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Обязательно проверьте, чтобы цвет был чисто белым – это можно сделать в окне «Цвет» (Color).

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Или нажмите на сам цвет в палитре и посмотрите, чтобы стояли настройки:

  • RGB – все на 255.
  • # – ffffff.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Мы сделали выделение, теперь переходим ко второму шагу.

2 Вариант: Жесткое выделение всех полупрозрачных и непрозрачных пикселей

Здесь мы избавимся от всех ненужных точек – как от тех, которые находятся на кромке, так и внутри самой картинки. Возьмите кисть с белой краской и закрасьте все внутренние серые детали.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Теперь выберите инструмент заливка (G).

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Приблизьте картинку так, чтобы были видны полупрозрачные пиксели у кромки. И начните кликать и заливать до тех пор, пока они не станут полностью черными.

СОВЕТ! Если серые точки все никак не хотят закрашиваться, то зажмите кнопку «Ctrl» и опять нажмите на «Alpha» канал. А после заливайте дальше.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

По сути нам нужно постоянно выделять и заливать слой до тех пор, пока не останется серых пикселей. В самом конце на всякий пожарный я бы ещё зашел в «Уровни» – там нужно перетащить самый левый бегунок вправо.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Ещё раз выделите «Alpha» слой с помощью клавиши «Ctrl»

ШАГ 2: Заливка задника

Мы сделали жесткое выделение, теперь нам нужно перейти на саму картинку – просто кликните по основному слою левой кнопкой мыши, и «Alpha» канал пропадет.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Теперь нажмите на кнопку «Создать новый слой» (Create a new Layer) и поменяйте их местами так, чтобы основная картинка была выше. Выделяем наш дополнительный пустой слой.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Наша задача теперь сзади залить картинку сплошным цветом. Я выберу черный цвет, но вы можете выбрать любой другой. Лучше выбирать темные цвета. Ещё можно использовать телесный, если у вас на картинке человек. Но ещё раз повторюсь, старайтесь выбирать темный цвет, так как он будет лучше смотреться на любом фоне.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

ПРИМЕЧАНИЕ! Если дырки слишком большие, то основной цвет может сильно просвечивать, тогда придется их закрашивать вручную, выделяя цвет ближайших непрозрачных точек. В общем смотрите по ситуации.

Теперь я расскажу об одной проблеме, с которой может столкнуться каждый. При заливке края станут более темными или смешаются с тем цветом, которые вы используете. В таком случае нам нужно уменьшить выделение на 2-3 пикселя, чтобы оставить в покое те прозрачные точки, которые мы оставили по краям. Сначала отмените последнее действие, нажатием на клавиши «Ctrl+Z».

Для уменьшения выделения вверху выбираем: «Выделение» (Select) – «Модификация» (Modify) – Сжать (Contract).

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Так как я не знаю, сколько пикселей вы хотите оставить на кромке, то порекомендую поискать параметр самостоятельно. Мне хватило единицы. Обычно при рисовании этот параметр имеет значение 1-3.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Теперь опять заливаем основным цветом. Теперь осталось их объединить – в окне «Слои», нажмите правой кнопкой на любой и выберите «Слияние Видимых» (Merge Visible).

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Результат

А теперь я покажу вам, какой результат получится при использовании двух способов:

  • Слева – мы убрали все полупрозрачные пиксели внутри картинки, но оставили в кромке.
  • Справа – мы убрали все полупрозрачные пиксели и оставили только прозрачные и непрозрачные.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Также вы можете посмотреть, что уменьшился размер файла. Конечно не так много, как хотелось бы, но для проектов, где таких картинок очень много, подобный способ может стать настоящим спасением.

Убираем полупрозрачные пиксели в Photoshop: Бородач против Ботана

Бородач
Автор статьи
Бородач 646 статей
Сенсей по решению проблем с WiFiем. Обладатель оленьего свитера, колчана витой пары и харизматичной бороды. Любитель душевных посиделок за танками.
Понравилась статья? Поделиться с друзьями:
WiFiGid
Комментарии: 4
  1. Аватар
    Вадим

    Хоть где-то нормально все объяснено. Спасибо вам! :idea:

  2. Аватар
    Рома

    Всех благ автору, спасибо)

  3. Аватар
    Лера

    Кстати, для выделения лучше в: Select – Modify – установить Feather (Выделение – Модификация – Растушевка) в значение 0,2. Тогда по идее выделение будет более четкое. ;-)

    1. Бородач
      Бородач (автор)

      Спасибо, за дополнение – забыл про эту настройку. :oops:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

Adblock
detector