Про PNG. Часть четвертая

HTML и CSSXSLTJavaScriptИзображенияСофтEtc

Задача.

Научиться работать с PNG.

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

  1. Заметил, что многие ребята используют полноцветный PNG (PNG-24 в фотошопе) только для полупрозрачных картинок, а индексированный PNG (PNG-8) — только для картинок с малым количеством цветов. На самом деле, для последнего случая довольно часто бывает более эффективным именно PNG-24:
    PNG-8 (833 байта) PNG-24 (369 байт)

    Если объяснять коротко, то для описания одного пикселя в PNG-24 используется 3 байта, а в PNG-8 — 4 байта (3 байта на цвет + 1 байт для элемента палитры).

    А в данном случае ситуация усугубляется еще и тем, что дельта-фильтры на саму палитру цветов не действуют (они действуют только на структуру изображения). В итоге получается, что в нашем случае в PNG-24 пиксели описываются не только меньшим количеством байт, но и более эффективно упаковываются фильтрами. Поэтому при сохранении картинок с малым количеством цветов и без прозрачности рекомендую проверять результат в PNG-8 и PNG-24. Как правило, разница в объеме будет заметна на градиентах.

  1. PNG — довольно гибкий формат, способы хранения графической информации в нем не ограничиваются фотошоповскими PNG-8 и PNG-24. Например, можно сохранить изображение с 16 битами на канал (только это совсем не нужно для веба). Одна из возможностей этого формата, о которой мало кто знает, — это сохранение информации о прозрачности в индексированной палитре. Такой PNG-8 с честной полупрозрачностью. Весить такое изображение будет гораздо меньше, чем аналог в PNG-24. В этом случае каждый элемент палитры описывается не тремя (RGB), а четырьмя (RGBA) байтами, что означает, к примеру, что непрозрачный черный и прозрачный на 50% черный — это два разных цвета в палитре.

    Однако есть несколько нюансов. Во-первых, фотошоп не умеет сохранять PNG с RGBA-палитрой (более того, он до сих пор не умеет нормально их открывать). Умеет сохранять в таком формате, например, Adobe Fireworks. Во-вторых, своеобразное отображение таких изображений в IE6:

    PNG-8 с полупрозрачностью в IE6 …во всех остальных браузерах

    Отобразились только абсолютно непрозрачные пиксели, все полупрозрачные стали полностью прозрачными. Причем фильтр AlphaImageLoader не использовался: картинка накладывалась как обычный фон. Это гораздо лучше, чем серый цвет, заполняющий прозрачные области.

  1. В третьей части я рекомендовал совершать ряд действий перед сохранением полупрозрачных PNG. Связано это было с тем, что фотошоп часто оставляет фрагменты изображения в полностью прозрачных областях, и эти фрагменты могут сильно увеличить объем файла. Сделав несколько тестов, я пришел к выводу, что эти действия совершать нужно далеко не всегда, так как объем может, наоборот, увеличиться:
    До оптимизации: 5 537 байт После оптимизации: 6 449 байт

    Вот как выглядят цветовые слои этих изображений:

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

    Для второго изображения фильтрация не была применена вообще, так как любой фильтр только увеличивал объем изображения.

    Поэтому теперь я рекомендую делать две версии файла — с оптимизацией и без — и выбирать из них тот, который меньше весит.

  1. Не забывайте пользоваться утилитами для оптимизации PNG-изображений, в некоторых случаях они позволят вам значительно сократить объем файла. Вот наиболее популярные из них:

    — PMT (PNG and MNG Tools) — набор утилит для работы с PNG и MNG (анимированный PNG), в состав которых входит pngcrush, позволяющая, помимо оптимизации упаковки данных, удалять gAMA chunk. Именно из-за этого фрагмента PNG-файлы, сохраненные в фотошопе (до версии CS3), выглядели темнее в IE и Safari.

    — OptiPNG — утилита, созданная на базе pngcrush. Умеет автоматически понижать глубину цвета, если это возможно (к примеру, может перевести из RGB в greyscale, если в изображении используются только оттенки белого), и перебирать дельта- фильтры для наилучшего сжатия. Также сможет конвертировать полупрозрачное truecolor изображение в формат с индексированной палитрой (смотрите второй совет), что может привести к некорректному отображению картинки в IE6. Чтобы отключить автоматическое снижение глубины цвета нужно использовать параметр -nb.

    — PNGout — примечательна тем, что использует собственный deflate-компрессор, написанный Кеном Сильверманом (автор этой утилиты), который способен сжать файл в среднем на 5-10% лучше, чем pngcrush и PNGout. К сожалению, она не умеет автоматически перебирать параметры фильтрации и сжатия файла, их придется указывать вручную (PNGoutWin умеет, но стоит денег). Если хочется выжать все соки из компрессии файла, рекомендую сначала пропускать его через OptiPNG (для подбора оптимальной фильтрации), а затем через PNGout.

    — TweakPNG — позволяет увидеть структуру PNG-файла и удалить оттуда ненужные фрагменты (например, gAMA). Актуально, если вы пользуетесь фотошопом до версии CS3.

Для наилучшей оптимизации изображений недостаточно просто подергать ползунок «Качество» или запустить волшебную утилитку в надежде, что она сама все сделает. Очень важно знать особенности хранения данных в формате, в котором сохраняется изображение. Эти знания помогут правильно модифицировать картинку, чтобы она была упакована наилучшим образом. Я записал скринкаст, демонстрирующий несколько приемов оптимизации, которыми я постоянно пользуюсь, и достигаемый с их помощью результат.


Скринкаст лекции, 45 МБ

Более подробных комментариев не будет: те, кто хорошо изучил особенности записи информации в PNG, и так поймут, что к чему. А остальным банальное запоминание последовательности действий все равно не позволит добиться каких-либо значимых результатов, потому что для каждой картинки нужна своя стратегия оптимизации. Подобный результат можно получить с помощью Image → Adjustments → Posterize, только картинка станет темнее, тяжелее и не такой удобной для оптимизации через OptiPNG.

Для желающих потренироваться:

— Исходник (Фотошоп, 3 МБ)

— Результат. Тут над файлом я поработал чуть дольше, поэтому весит он меньше и выглядит лучше

— Скринкаст (Квиктайм, 45 МБ)

Музыка: Amarok @ Art. Lebedev Studio

1
2
3
4



Как создать файл bmp c прозрачным фоном | Render.ru

Marina_
Пользователь сайта

8 дек 2005

#1

#1

Народ, помогите!!! Нужно создать несколько файликов в формате bmp, но так что бы фон (канва, холст) был прозрачный, т. к. потом их будут класть друг на друга и нужны именно только картинки с прозрачным фоном. Хотя бы просто скажите это возможно или нет. Ну уж а если возможно, поскажите как?

 

Guest

#2

#2

Вы можете там сохранить только альфа-канал, в боевой машине пехоты (БМП).

 

Guest

9 дек 2005

#3

#3

Из растровых форматов используй, например, gif

 

monter
Знаток

#4

#4

А тебе для чего это? задача не понятна.
Раньше для игр делали такие файлы исключая один цвет, синий или фиолетовый и программно прорезали этот цвет. Так что если делаешь спрайты для игр, то такой метод прокатит.
ЗЫ (я использовал pcx файлы, это тот же БМП, только с минимальным сжатием)

 

Marina_
Пользователь сайта

#5

#5

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

 

Guest

#6

#6

Так и узнайте у разработчиков что им нужно в качесте инфы о прозрачности.

 

Guest

#7

#7

>Хотя бы просто скажите это возможно или нет

Нет. Формат bmp не поддерживает прозрачность.

Если бы ты была программистом, то тогда могла бы в своей программе назначить один из цветов прозрачным, но это уже из другой оперы.

 

Guest

#8

#8

Нет. Формат bmp не поддерживает прозрачность.

Нажмите, чтобы раскрыть…

Запрещено декретом ВКПб?

Поддерживает.

 

Guest

#9

#9

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

Это можно сделать или с помощью плагина, или вручную.

Сначала загрузите селекцию с собственной прозрачности слоя и сохраните ее как альфа-канал. Снимите селекцию.

Теперь десять раз дублируете слой — сводите 10 копий в один; затем еще раз 10 раз дублируете слой — сводите 10 копий в один слой; затем еще 3 раза дублируете и сводите в 1. Это гарантировано избавит слой от частично прозрачных пикселов.

После этого заливаете фон серым цветом и Flatten Image. Теперь сохраняете в bmp 32 bit и готово.

 

Guest

#10

#10

Открываем спецификацию и читаем:
«Формат BMP (Windows Bitmap— растровое изображение Windows) является собственным форматом графического редактора Microsoft Paint, поставляемого вместе с операционной системой Windows. Он поддерживается многими приложениями DOS, Windows и OS/2. Формат BMP допускает применение алгоритма последовательного сжатия без потерь RLE и может представлять до 16 млн цветов. Прозрачность BMP-формат не поддерживает».

 

Guest

#11

#11

А, читаем? А делать кто будет, Аниськин?

Возьмите и сохраните в bmp 32 бита из ФШ — никаких проблем, все сохраняется. Открывается файл — вот она альфа, на месте, 8 бит, как и всегда.

Или это все равно невожможно потому что в спецификации той реализации так написано. Да?

А вот товарищ Влад советует gif, так вот как раз gif и не поддерживает альфа-канала. Процитировать из спецификации?

 

Guest

#12

#12

Кому нужен твой альфа канал, который виден в PS?!
Ты вопрос и пояснение читал?

>Использовать файлы будут для работы с комплексом (на экране датчики-файлы bmp, которые в зависимости от ситуевины будут показывать, что пожар или нет).

Как она в сторонней программе сможет использовать этот альфа канал? Ее bmp файлы будут не прозрачны!

 

Guest

#13

#13

Да этот пиздабол dessiner на всех постах только гадит или несет ахинею — забанить его к чертям, кто вообще замимается порядком на форуме, а то форум за последнее время скатился ниже плинтуса и все профи отсюда уходят.

 

monter
Знаток

#14

#14

Игорь, а кто сказал что она в сторонней программе это будет делать? может у них это курсовой/дипломный проект и люди по неопытности выбрали bmp формат? Автор то молчит о задаче.

А если это готовая сторонняя программа и там используется этот bmp формат, тогда затаскиваем в PS эти родные рисунки м смотрим какой цвет использовали программеры под прозрачный. и стряпаем свои рисунки с учетом этого.

Для примера шахматы KChess Elite http://kniazeu. by.ru/chess/kchess.html

картинки все в bmp, однако на экране мы видим с прозрачностью.
так что всЕ зависит от задачи!

 

Guest

#15

#15

>(на экране датчики-файлы bmp, которые в зависимости от ситуевины будут показывать, что пожар или нет).

Вопрос задававшей представляется мне таким:
программа работает на компьютере и получает сигналы от внешних устройств. В зависимости от сигнала показывается та или иная картинка bmp на подложке. Других данных нет и нет данных как эти файлы будут добавляться в программу.

>тогда затаскиваем в PS эти родные рисунки м смотрим какой цвет использовали программеры под прозрачный. и стряпаем свои рисунки с учетом этого.

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

 

Guest

#16

#16

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

Или там роялти надо Адобе платить за это расширение?

Вот если бы они там psd-файлы хотели бы использовать, то, может быть им и потребовался ФШ. Хотя если скачать SDK там можно узнать все нужное об этом формате чтобы открывать его в *своей собственной* программе не хуже, чем он открывается в ФШ.

Или вы полагаете что написать такую программу невозможно?

Влад, это вас, ламера надо забанить чтобы вы тут не зловонили безответственно.

 

Guest

#17

#17

Т.к. Влад — ламер, он не понимает что никакой прозрачности нет у изображения вообще. Оно полностью непрозрачно и альфа-канал несет информацию о том, какие пикселы изображения нужно заменить на пикселы фона или в каком отношении смешать пикселы изображения и пикселы фона. Альфа-канал это информация о степени непрозрачности пикселов изображения или о степени прозрачности пикселов фона с которым данное изображение совмещается: http://www.ypoart.com/tutorials/Alpha-about.htm

 

Guest

#18

#18

Да, но главное Влад не знает, что bmp не сжимается вообще и имеет простейшую структуру файла. После небольшого заголовка идут данные пикселов в последовательности Alpha R G B. Открывай, читай, применяй. Никаких проблем с Адобой нет.

 

Guest

#19

#19

>Да, но главное Влад не знает, что bmp не сжимается вообще и имеет простейшую структуру файла.

Ну ты и идиот! Где я говорил, что bmp сжимается? Я их повседневно использую в своих прогах.

Дристиний и без тебя понятно, что в альфе все сохраняется, но ты тупой не читаешь вопросы форумчан, а глубокомысленно льешь воду.
Дристиний и словесный понос — друзья братья. Спорить с дауном бессмысленно, поэтому по-прежнему иди сюда многократно http://www. vlad44design.narod.ru/windows/drags/medical.html

Тебя банить не надо ни в коем случае! Ты прекрасное развлечение на этом форуме! Обожаю разминать твою пятую точку!
Только не вздумай молчать, а то я подумаю, что ты становишься правильной ориентации!

 

Guest

#20

#20

Идите Влад поешьте калу.

 

Сохранить изображение с прозрачным фоном

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

Первый шаг — изолировать нужное изображение на отдельном слое. Вы можете сделать это, продублировав фоновое изображение на новый слой, заполнив фон сплошным контрастным цветом во время работы, а затем удалив или, что еще лучше, замаскировав часть изображения, которую вы хотите сделать прозрачной. Мне нравится использовать маску слоя, потому что она дает больше контроля, чем просто стирание информации, формирующей изображение.

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

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

Возможно, вы привыкли сохранять файлы изображений для использования в Интернете в формате JPEG, но файлы JPEG не поддерживают прозрачный фон. Поэтому вместо этого вам нужно будет использовать такой формат, как GIF, TIF или, в идеале, PNG. Файл PNG достаточно мал для использования в Интернете, но при этом обеспечивает высокое качество и прозрачность. Если ваше изображение представляет собой логотип в текстовом стиле, вам может подойти GIF, но для фотографии с непрерывным тоном вам лучше подойдет PNG.

В более ранних версиях Photoshop пункт «Сохранить для Интернета и устройств» в меню «Файл» позволял сохранить для этой цели изображение с прозрачным фоном. Теперь эта опция находится под заголовком «Экспорт» в меню «Файл». При открытии диалоговое окно предлагает параметры для всего: от готовых размеров и размера файла до формата файла и многого другого. Он предлагает ряд элементов управления для точной настройки готового изображения, если они вам нужны.

Если вы предпочитаете более простой вариант сохранения, просто убедитесь, что ваше изображение уже имеет нужный размер (а если это не так, используйте элементы управления «Размер изображения» в меню «Изображение», чтобы изменить размеры) и выберите «Сохранить как» в разделе меню Файл. Затем выберите подходящий формат файла (например, PNG) в раскрывающемся списке «Формат». Теперь этот файл готов к использованию в Интернете или в любой другой ситуации, когда необходим прозрачный фон.

Первоначально опубликовано 24 сентября 2018 г.

Как называется формат изображения с прозрачным фоном? – Relax type

Как называется формат изображения с прозрачным фоном? Сохранение прозрачного фона на изображениях в формате GIF или PNG. Форматы GIF и PNG-8 поддерживают один уровень прозрачности: пиксели могут быть полностью прозрачными или полностью непрозрачными. Частичная прозрачность не допускается. (Напротив, формат PNG-24 поддерживает несколько уровней прозрачности, т. е.

Содержание

  • 1 Как сделать снимок без фона?
  • 2 Где взять изображения в формате PNG?
  • 3 Какие существуют форматы изображений?
  • 4 Как сделать прозрачный фон в Paint PNG?
  • 5 Как сделать прозрачный фон PNG в Photoshop?
  • 6 Как удалить фон в Photoshop PNG?
  • 7 Что такое PNG-изображение?
  • 8 Почему фон черный при сохранении в формате PNG?
  • 9 Как создать файл PNG?
  • 10 Что такое формат изображения?
  • 11 Как удалить фон изображения?
  • 12 Как сделать фото с прозрачным фоном?
  • 13 Как вставить PNG в Paint?
  • 14 Зачем нужен прозрачный фон?
  • 15 Зачем нужен прозрачный фон?

Как сделать фото без фона?

Войдите в Canva. Откройте новый шаблон. Загрузите свои собственные медиа или из нашей галереи. Внесите изменения в редакторе. Установите соответствующий флажок при загрузке файла PNG и сохраните изображение на свой компьютер или мобильное устройство.

Где взять изображения в формате PNG?

Палка. png. . https://www.stickpng.com/. Свободно. png. Изображение https://freepngimg.com/. png. Река. https://pngriver.com/. png. Дерево. https://ru.pngtree.com/. Благоприятный. png. . https://favpng.com/. Пиксельный подарок. https://www.pixelsquid.com/collections. Бесплатный png. Выбирайте бесплатно.

Какие существуют форматы изображений?

БМП. ЭКВ. GIF. ICO. ИЛБМ. JPEG. JPEG 2000. MrSID.

Как сделать прозрачный фон в Paint PNG?

Нажмите Меню > Открыть > Обзор файлов и выберите изображение, которое хотите открыть в Paint 3D. Нажмите кнопку «Холст», чтобы открыть боковую панель (см. изображение ниже). Затем включите опцию «Прозрачный холст» на боковой панели.

Как сделать прозрачный фон PNG в Photoshop?

Выберите «Волшебная палочка» на панели инструментов и нажмите на фон. Если вся нужная область не выделена, удерживайте нажатой клавишу Shift и щелкните оставшиеся области, чтобы захватить все вокруг объекта в кадре. Нажмите Delete, чтобы удалить фон, а затем Ctrl + D (Cmd + D), чтобы снять с него выделение.

Как удалить фон в Photoshop PNG?

Откройте изображение, продублируйте фоновый слой. Сделайте исходный слой невидимым. Щелкните новый слой на панели «Слои». Откройте панель свойств в разделе «Быстрые действия» и выберите «Удалить». background». «.

Что такое изображение PNG?

PNG (произносится /pɪŋ/) — это формат хранения растровых изображений, в котором используется сжатие без потерь с использованием алгоритма Deflate.

Почему при сохранении в формате PNG фон черный?

Когда я сохранил изображение в формате PNG с прозрачным слоем, а затем открыл его, слой изменился с прозрачного на черный. Скорее всего, это связано с тем, что сохраняется только информация о каналах R, G и B, игнорируя альфа-канал (прозрачность).

Как создать файл PNG?

Шаг 1. Загрузите файлы jpg. Выберите вариант «в. png. » Выбирать. png. или любой другой формат, который вы хотите (поддерживается более 200). иди ты png. -Файл Разрешить преобразование файла, и вы можете сразу загрузить свой. png. -Файл.

Что такое формат изображения?

Формат изображения — определенная структура изображения, определяемая протоколом сжатия видео.

Как удалить фон изображения?

Инструмент для удаления фона Вы можете удалить фон с помощью специального ластика. Найдите значок ластика на панели инструментов, щелкните его правой кнопкой мыши и выберите «Фоновый ластик» во всплывающем окне. Пройдитесь им по всему фону, а по краям объекта аккуратно сотрите остатки.

Как сделать фото с прозрачным фоном?

Выберите дизайн, для которого вы хотите изменить прозрачность цвета. На вкладке «Формат» нажмите «Цвет», а затем «Установить прозрачность». Щелкните область рисунка или изображения, окрашенную цветом, который вы хотите сделать прозрачным.

No related posts.