У прозрачных пикселей тоже есть чувства или артефакты png'шек с прозрачностью. Редактирование на уровне пикселей

13.04.2019

Имеется два ползунковых регулятора: Непрозрачность (Opacity) и Заливка (Fill). Подвигая их в разные стороны, можно заметить, что изображение, в конечном счете, только лишь одинаково меняет свою прозрачность. Возникает резонный вопрос: «Чем же отличается непрозрачность от заливки, какая между ними разница?»

В программе фотошоп ничего просто так нет, поэтому отличие все-таки есть, давайте разберем все по полочкам.

Как я уже сказал, оба этих параметра воздействуют на прозрачность слоя, т.е. влияют на то, как сильно будут просвечиваться ниже расположенные слои. Как правило, для этой цели мы пользуемся параметром Непрозрачность (одно его название уже нам о многом говорит), но Заливка тоже справляется с этой задачей.

Но все меняется, когда в ход вступают . О том, что это такое, можно говорить долго, вкратце: это разного рода эффекты и наложения, применяемые к слою в целом, например, тень, обводка, свечение, градиент, тиснение и др.

Если вы примените к своему изображению один или несколько стилей, то параметр Заливка, будет вести себя совершенно по-другому — будет меняться содержимое слоя . Давайте рассмотрим на примере как это выглядит.

На этом исходном изображении я в сравнении покажу как работают непрозрачность и заливка:

Изменим на палитре слоев значение непрозрачности до, например, 50%. Смотрим что получилось:

Теперь для наглядного сравнения установим 50% значение для Заливки у другого текстового слоя, вот что получилось:

Ни какой разницы! В точности такой же результат.

Вернем текст обратно к 100% и на этот раз применим такие стили слоя, как: тень, обводка, тиснение и, пускай, внутреннее свечение. Для этого дважды щелкните по слою, должно появиться диалоговое окно. С левой стороны находятся все стили, чтобы их включить поставьте галочку, а с правой стороны, используя параметры настроек, настройте выбранный стиль себе по вкусу.

Получилась вот такая надпись:

Пришло время продемонстрировать работу Заливки! Изменим значение, например, до 40%, смотрите, что получилось:

Итак, все эффекты видны на 100%, а сам текст стал бледнее. Давайте вообще до ноля снизим ее значение, получится вот что:

Сам текст становится полностью прозрачным, а те эффекты, что мы применили — остались.

Используя эту технику, можно делать интересные эффекты для своих изображений.

Подытожим сказанное: Непрозрачность слоя влияет на видимость всего слоя в целом, а Заливка — лишь на его содержимое, оставляя нетронутым стили слоя.

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

Поговорим о 2D-играх. Независимо от платформы, на которой они разрабатываются - почти всегда они будут использовать 3D-акселлераторы для вывода 2D-спрайтов (iOS, Android, PC… даже Flash уже это учится делать).

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

Вы попытаетесь наложить тайлы внахлест, но швы все равно останутся… И вы начнете ломать голову.

А дело все в злосчастных прозрачных пикселях! Оказывается, у них тоже есть цвет.

Для того, чтобы понять, почему это происходит, вы должны понять, каким образом GPU масштабирует текстуры. Он это делает не совсем так, как это делают графредакторы. И дело тут касается прозрачности.

Оно и понятно, это простительно для 3D игр и тамошних текстур, но это будет вызывать артефакты в случае, если у вас на спрайтах будет ситуация, когда полностью непрозрачный пиксель будет соседствовать с полностью прозрачным (что с великой долей вероятности появится в случае пиксель-арта и т.п.).

О прозрачности и PNG.

Допустим, у нас есть картинка синего квадрата, где присутствует условие бага - непрозрачные пиксели соседствуют с полностью прозрачными:

Это изображение состоит из двух каналов - канал цвета (RGB) и альфа-канал (прозрачность). Вся загвоздка в том, что полностью прозрачные пиксели все равно имеют какое-то значение в канале цвета. И какое именно это будет значение - известно только софтине, которая сжимала PNG. По сути, эти цвета могут быть любыми.

В ситуации с изображением выше запросто может получиться такая картина:

Т.е. прозрачные пиксели будут иметь белый цвет. Но т.к. они полностью прозрачны - мы этого никогда не увидим и все будет ок.

Прозрачность, GPU и масштабирование.

Теперь давайте посмотрим, как видеокарта масштабирует текстуры с прозрачностью.

Для упрощения этого дела, она масштабирует отдельно канал цвета и отдельно - альфа-канал. Например, при масштабировании вышеупомянутой текстуры на 80% (баг проявится при любом скейле), мы получим такую картину:

GPU смешал пограничные синие пиксели с теми, что за границей прозрачности (т.к. он скейлил канал цвета отдельно от альфы и ему было все равно, прозрачные они или нет). В результате пограничные пиксели смешались с белым цветом и приобрели совсем непонятный цвет.

Очевидно, если попытаться затайлить такой спрайт, мы явно увидим швы.

И, думаю, очевидно, почему от таких артефактов избавлены спрайты, граница которых постепенно сходит в прозрачность, а не резко скачет с 1 до 0.

Как бороться?

Теперь, когда мы знаем в чем дело, мы знаем, как с этим бороться. Нам нужно, чтобы прозрачные пиксели, прилегающие к границам, имели цвет, схожий с пограничными. При чем, если мы будем уменьшать мастштаб спрайта более чем в 2 раза, то нужно позаботиться об «окантовке» изображения шириной в несколько пикселей. Но как это сделать?

Самый простой способ, который я нашел - это создать второй слой в фотошопе, положить его под основной, размыть его blur"ом и выставить прозрачность в 1%. В результате, пиксели вокруг нашего изображения будут почти невидимыми (1% прозрачности), но гарантировано иметь цвет, схожий с пограничными. Конечно, эффект блюра подойдет не для каждого спрайта. Где-то можно создать 4 таких (1%) слоя, но не блюрить их, а просто сдвинуть в разные стороны…

В общем, надеюсь, кому-то эта информация окажется полезной.

Совет . Выделение прозрачных или непрозрачных пикселов .

Вам требуется выделить в слое все прозрачные или все непрозрачные пикселы? Для этого существует несколько способов .

Длинный путь - использовать инструмент "волшебная палочка", чтобы выделить сначала несколько прозрачных пикселов, а затем выбрать "Similar " в меню Select. Если же Вы хотите выделить все непрозрачные пикселы, выберите команду "Inverse " в меню Select .

Другой способ заключается в выделении всего слоя. Для этого нажимают клавиши CTRL + A (Windows) или Command+A (Macintosh), затем нажимают одну из клавиш управления курсором, чтобы передвинуть все на один пиксел, - при этом окажутся выделенными только непрозрачные пикселы. Чтобы вернуть изображение назад, в его исходное положение, нажмите клавишу со стрелкой в обратном направлении. Если Вам потребуется, чтобы выделенными отказались все прозрачные пикселы, надо будет выбрать "Inverse " в меню Select (чтобы не дергать изображение туда-сюда, можно просто выделить все и нажать Command/CTRL + J . - Прим. ред.) .

Другая техника исполнения предусматривает использование "маски прозрачности" программы Photoshop. На любом слое в Photoshop 3.0 имеются прозрачные пикселы, имеется неявная или "скрытая" маска прозрачности, которую Photoshop использует для различения находящихся на слое непрозрачных и прозрачных пикселов. Эту маску можно легко и быстро загрузить в виде выделенной области. Ниже указано, как это сделать .

  1. Щелкните требуемый слой в палитре Layers, чтобы сделать его активным .
  2. Выберите "Load Selection… " в меню Select .
  3. В поле "Source" в разделе "Channel" выберите "Layer X Transparency " (где "Layer X" - имя активного слоя), это действие приведет к выделению непрозрачных пикселов. Если же Вам надо выделить прозрачные пикселы, включите переключатель "Invert". Щелкните кнопку ОК .

Чтобы эту технику можно было использовать быстрее, используйте для загрузки маски прозрачности "горячие клавиши". Щелкните в палитре Layers соответствующий слой и нажмите CTRL + ALT + Т (Windows) или Command+Option+Т (Macintosh) - при этом все непрозрачные пикселы Вашего слоя будут выделены .

Я хочу обрисовать контуры растрового изображения и затем использовать такой контур в Illustrator. Можно ли выполнить эту работу в Photoshop?

Лучше всего было бы использовать специально предназначенную для таких работ программу автотрассировки, например, Adobe Streamline.

Впрочем, в случае необходимости, Вы сможете получить такой контур и в Photoshop. Сначала воспользуйтесь любым инструментом Photoshop для выделения областей и любым известным Вам способом выделите область, контур которой Вы хотите получить. Затем конвертируйте выделенную область в контур: в палитре Paths выберите "Make Path… " (или, в версии 4.0, "Make Work Path…") и введите в появившемся диалоговом окне количественный показатель "Tolerance ". При малом допуске будет получен контур, который очень точно очерчивает выделенную область, но будьте осмотрительны: при таком выборе допуска Вы можете получить очень сложный контур, с таким множеством точек, что его будет трудно или даже невозможно отпечатать. Увеличение допуска несколько упростит контур.

После того как Вы получите требуемый контур, можете экспортировать его - с помощью подменю Export меню File; выберите "Paths to Illustrator… ", введите имя файла, проверьте в окне "Write", что Вы экспортируете именно нужный Вам контур (если в Вашем документе их несколько). Теперь Вы сможете открыть этот файл в Illustrator (или в Macromedia FreeHand), где можно будет отредактировать контур, как Вам требуется.

Я замыслил изображение, которое должно выглядеть подобно гравюре. Поможет ли мне в этом Photoshop?

Попытайтесь конвертировать изображение в режим bitmap с высоким разрешением; используйте при конвертировании заказную микроструктуру (pattern) изображения, которую Вы можете сами подготовить в программе Photoshop (более подробно о том, как это сделать, см. статью в Adobe Magazine, September/ October 1996, p. 85). При подготовке заказной структуры попробуйте использовать штриховые сканированные изображения зернистой структуры дерева.

В качестве альтернативы Вы можете попробовать использовать дополнительный модуль Andromeda Software"s Series 3 "Screens" (информацию можно получить у фирмы Andromeda, позвонив по телефонам 880-547-0055 или 805-379-4109).

Photoshop 3.0.x не поддерживает OS/2 и OS/2 Warp

Adobe Photoshop 3.0.x не поддерживает ни одну из версий OS/2, включая и OS/2 3.0 (известную также как OS/2 Warp). Как указывается на упаковке программы Photoshop 3.0.x, а также в руководстве Getting Started, Photoshop 3.0.x поддерживает только Windows 3.1.x, Windows NT 3.5x и Windows 95 (Photoshop 3.0.4 и выше).

Рекомендация :
Вам требуется превратить плавающий фрагмент (плавающую область) в слой. Попробуйте следующее: дважды щелкните плавающую область в палитре Layers, или перетащите плавающую область на пиктограмму New-layer в палитре Layers, или выделите "Make Layer…" во всплывающем меню палитры Layer. При использовании любого из этих методов будет открыто диалоговое окно "Make Layer". Если в этом окне Вы обычно просто щелкаете кнопку ОК , чтобы одобрить установки режимов, принятые в программе по умолчанию, Вы можете и избежать вывода на экран этого окна. Для этого нужно нажать и удерживать нажатой клавишу ALT (Windows) или Option (Macintosh) в то время, когда Вы дважды щелкаете плавающую область в палитре Layers
.

Photoshop 3.0.x - это 32-битная прикладная программа. Поэтому при работе в 16-битной операционной системе (например, в Windows 3.1x, OS/2 Warp) программа Photoshop должна использовать модуль Win32s. Photoshop 3.0.x поддерживает Win32s 1.15 и выше, а OS/2 и OS/2 Warp поддерживают Win32s 1.1 и ниже.