Фотошоп не сохраняет пнг с прозрачностью

Обновлено: 04.07.2024

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

В этой статье мы расскажем, как сделать картинку в формате PNG в Фотошопе .

Как сделать файл PNG в Adobe Photoshop?

Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню « Файл » ( File ) вверху страницы выберите « Создать » ( New ).

Затем в появившемся окне « Новый документ » ( New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм ( поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение « Прозрачный » ( Transparent ) в выпадающем списке « Содержимое фона » ( Background Contents ).

Перед тем, как сделать PNG в фотошопе, нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:

После того, как вы задали значения параметров, нажмите « OK », чтобы открыть новый документ.

Затем в панели « Слои » ( Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:

После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню « Файл » ( File ) вы можете использовать один из возможных вариантов:

Как сделать фото в пнг с помощью Adobe Photoshop версии ранее, чем CC 2015

Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод « Сохранить для Web » ( Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню « Файл » ( File ), и далее – « Сохранить для Web » ( Save for Web & Devices ):

Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции « Прозрачность » ( Transparency ) и « Преобразовать в sRGB » ( Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.

Поля « Размер изображения » ( Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.

Чтобы сохранить изображение, нажмите кнопку « Сохранить » ( Save ) внизу окна.

Как сделать пнг файл с помощью Photoshop версии CC 2015

Примечание: Adobe по-прежнему предлагает опцию « Сохранить для Web » ( Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт ( File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S ( для Mac ) или Ctrl+Alt+Shift+S ( для ПК ):

Затем в появившемся окне выберите PNG из выпадающего меню « Формат » ( Format ) и убедитесь, что выбраны опции « Прозрачность » ( Transparency ) и « Преобразовать в sRGB » ( Convert to sRGB ).

Поля « Размер изображения » ( Image Size ) и « Размер холста » ( Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе :

Как известно, при сохранении PNG изображений Photoshop может изменять RGB значения пикселей с нулевой альфой на произвольные значения. Например сохраняем черную полностью прозрачную текстуру и на выходе в RGB получаем не черный, а какой-нибудь другой цвет, возможно белый. Можно ли с этим что-то сделать и всегда сохранять RGB без изменений?

Или возможно это проблема не Photoshop, а самого формата PNG, кто знает?

А, вот, когда у меня библиотека загрузки png глючила и иногда "расставляла" альфу по своему усмотрению и стёртые участки изображения отображались на экране с альфой 1.0, это было весело.

cppboris
Попробуй сохранять для веб. Там есть цвет фона, вроде как.

eugeneloza
> GIMP делает подобным образом. Только значения не "произвольные", а те, которые
> были "до стирания" альфы в ноль. Т.е. при стирании пикселя (0.5, 1.0, 0.7, 1.0)
> он становится (0.5, 1.0, 0.7, 0.0), а не (0.0, 0.0, 0.0, 0.0),
вот именно что гимп делает то, что от него ожидается — просто зануляет альфу, оставляя цвет каким был. фотошоп же оставляет за собой право произвольным образом менять цвет прозрачных пикселей, так как их всё равно не видно и он обычно их заменяет на цвет ближайшего непрозрачного пикселя, чтобы при линейной фильтрации без premultiplied alpha не было артефактов на границе прозрачности.

KaZuaL
> Попробуй сохранять для веб. Там есть цвет фона, вроде как.
это не решает проблему хранения отдельной информации в альфаканале фотошопа. например, невозможно в одну текстуру в rgb запечь нормаль, а в альфу — roughness, потому что в участках с нулевой roughness фотошоп похерит rgb.

cppboris
> Или возможно это проблема не Photoshop, а самого формата PNG, кто знает?
это проблема именно фотошопа именно в отношении хранения альфаканала png. конкретно проблема в том, что при сохранении png у него вообще нет альфаканала в явном виде, а есть некий скрытый слой, который называется transparency и который нельзя вручную ни выдрать, ни модифицировать отдельно от rgb. у нас художники для этих целей используют плагин для фотошопа superpng, он позволяет именно это: модифицировать альфаканал отдельно от цвета при сохранении png, аналогично gimp, который умеет это из коробки.

DDS и TGA имеют альфаканал. если тупо сохранять как PNG то получаю картинку на черном фоне и никакой полупрозрачности.
написал свою тулзу которая корректно сохраняет DDS или TGA как PNG. юзал GDI+
однако не верится что такое простое действие нельзя сделать в фотошопе.

progman
даже не знаю как у тебя так получалось)

kinyz
> даже не знаю как у тебя так получалось)
имеется Photoshop CS5
делаю:
Open File - открываю TGA у него есть альфаканал
в channels ставлю галку чтобы визуально убедиться что альфа есть
Save As - выбираю PNG
Png Option - Interlaced по длефолту None - не меняю

смотрю шо получилось в том же фотошопе - в PNG полупрозрачных областей нет, которые соотвествовали бы уровню прозрачности в альфаканале первичного DDS/TGA файла
да и ALPHA Channel в закладке Channels тоже нет

что я делаю не так?

Не лезь на вкладку Chanels. Ничего там не ищи и не добавляй. Для правильной работы прозрачности в PNG это ненужно.

Megabyte-Ceercop
> Не лезь на вкладку Chanels. Ничего там не ищи и не добавляй. Для правильной
> работы прозрачности в PNG это ненужно.
не лезу. один хрен DDS или TGA с имеющимся альфаканалом в PNG сохраняется без учета альфы
в итоге имею непрозрачный PNG

т.е у меня результат сохранения в PNG это полное игнорирование альфаканала исходного файла.
как заставить фотошоп сохранить в PNG с учетом полупрозрачности пикселей заложенной в альфаканале dds или tga не знаю. у меня не получается

Чтобы из TGA сделать PNG нужно:
Во вкладке каналов зажав клавишу CTRL выбрать альфа канал, будет выделена непрозрачная область.
Инвертировать выделение.
Перейти в слои, в TGA есть один слой. Вызвать меню правой кнопкой мыши > Layer via Cut.
Будет создан новый слой — всё непрозрачное вырежится в новый слой.
Удалить бэкраунд.
Таким образом будет 1 слой с прозрачностью. Прозрачность если есть, то на фоне будут квадратики серые-белые.

Теперь можно сохранять в PNG24.

В TGA есть только полный залитый слой, и отдельный альфа канал.

progman
У пнг - precomputed alpha - так что все верно. Т.е. если у тя картинка в колор - не прозрачна - то она и в пнг будет непрозрачна.

Создай новый файл. Создай новый слой. Удали слой background. На новом прозрачном слое нарисуй кисточкой слово х. и сохрани как пнг.

fzr125
> У пнг - precomputed alpha - так что все верно. Т.е. если у тя картинка в колор
> - не прозрачна - то она и в пнг будет непрозрачна.
дык. я то в курсе что у пнг precomputed alpha

вопрос в том почему фотошоп не умеет правильно пересохранить TGA в PNG и сделать эту самую precomputed alpha
очень неудобно сторонними тулзами пользоваться.
я подумал что я что то не так делаю. но видимо кривость фотошопа.

ЗЫ кстати почитал на форуме фотошопа - чтобы пнг с пролупрозрачностью правильно как TGA сохранить - те еще танцы с бубном.

мля пипец как через жопу:
1. открыть DDS
2. сделать копию слоя
3. layer->layer mask->from transparency
4. скопировать альфаканал в канал маски. ( он появится неактивным каналом в окне channels )
5. удалить нижний слой
6. сохранять как PNG

Ага. Запиши эти действия как новый Action. И прогони через него папку с такими TGA. File->batch.

$tatic
> Попробуй Fireworks
зачем если у меня такая мегасреда как фотошоп.
ну вот как я выяснил в 6 дейтсвий он делает сабж. зато всё можно на экшен посадить и быстро конвертить.
не хочу я ставить 10 софти чтобы с кграфикой работать. хочу иметь одну.

progman
> дык. я то в курсе что у пнг precomputed alpha
> вопрос в том почему фотошоп не умеет правильно пересохранить TGA в PNG и
> сделать эту самую precomputed alpha
ну хорошо. Давай рассуждать.

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

А если с двух сторон недовольные, но с одной стороны все готово, а с другой еще кодить нужно - зачем лишние движения? ))
Суть ясна?

Представь себе скан мятого листа. Так вот, надо сделать png с альфа каналом, так, что бы на нем были только помятости.

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

В итоге должен получиться png файл, который, я смог бы накладывать поверх других документов.

UPD: Спасибо sumnix
Оригинал:

Результат:

Пример:

Вопрос задан более трёх лет назад
120822 просмотра

Оценить 1 комментарий

Вот какая религия мешает выложить исходную картинку, чтобы можно было на ней прям тестировать? — Добавляете пустую маску к вашему слою;
— делаете Apply Image… на эту маску — выставляете Merged, Green, Multiply, 100% — ok;
— применяете curves/кривые на получившейся маске, подгоняя под уровень прозрачности из вашего задания (чем темнее маска, тем прозрачнее).
Всё, можно фон подложить для пущей наглядности. Наверное я туговат, но не могу понять :(
Ребята, если не трудно, сделайте скриншотиков пару, чтобы понять что нужно В фотошопе можно выделить цветовой диапазон (в меню Выделение), там выбираете белый цвет и играетесь с ползунками до нужного результата. Потом то что выделится удаляете. Вот именно по этому я использую Gimp — там это делается одной командой «Цвет в альфа-канал».

Alt + Перетаскивание
Не уж то это так сложно? Или Вы написали это, потому что не умеете работать с Gimp.

p.s.
Давайте не продолжать этот бессмысленный спор — есть области, в которых Photoshop превосходит Gimp, и есть области, в которых Gimp превосходит Photoshop.

Нужны Вам — не обобщайте. Мне удобнее работать в Gimp.

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

1. Отройте файл
2. Если это была картинка, то сначала делаем Ctrl+A, Ctrl+X, Ctrl+V
3. Ctrl+A
4. В доке управления слоями на слое Layer 1 создаем Clipping Mask (внизу кнопка, где создать новый слой, удалить слой)
5. Открываем док управления каналами Window > Channels
6. В нем будут 4 слоя + наша маска
7. Выбираем самый контрастный слой, например Red, остальные выключаем
8. Делаем на этом слое Ctrl+A, Ctrl+C
9. Включаем все слои, активным делаем нашу маску, Ctrl+V
10. Правим яркость, контрастность, уровни на этой маске, добиваясь наиболее приемлемого результата.

Читайте также: