Про PNG. Часть четвертая
HTML и CSSXSLTJavaScriptИзображенияСофтEtc
| Задача. | Научиться работать с PNG. | ||
Завершая серию статей про PNG, хочу показать несколько практических приемов, которыми пользуюсь ежедневно в своей работе.
- Заметил, что многие ребята используют полноцветный PNG (PNG-24 в фотошопе)
только для полупрозрачных картинок, а индексированный PNG (PNG-8) — только для
картинок с малым количеством цветов. На самом деле, для последнего случая
довольно часто бывает более эффективным именно PNG-24:
PNG-8 (833 байта) PNG-24 (369 байт) Если объяснять коротко, то для описания одного пикселя в PNG-24 используется 3 байта, а в PNG-8 — 4 байта (3 байта на цвет + 1 байт для элемента палитры).
- PNG — довольно гибкий формат, способы хранения графической информации в нем
не ограничиваются фотошоповскими PNG-8 и PNG-24. Например, можно сохранить
изображение с 16 битами на канал (только это совсем не нужно для веба). Одна из
возможностей этого формата, о которой мало кто знает, — это сохранение
информации о прозрачности в индексированной палитре. Такой PNG-8 с честной
полупрозрачностью. Весить такое изображение будет гораздо меньше, чем аналог в
PNG-24. В этом случае каждый элемент палитры описывается не тремя
(RGB), а четырьмя (RGBA) байтами, что означает, к примеру, что непрозрачный
черный и прозрачный на 50% черный — это два разных цвета в палитре.
Однако есть несколько нюансов. Во-первых, фотошоп не умеет сохранять PNG с RGBA-палитрой (более того, он до сих пор не умеет нормально их открывать). Умеет сохранять в таком формате, например, Adobe Fireworks. Во-вторых, своеобразное отображение таких изображений в IE6:
PNG-8 с полупрозрачностью в IE6 …во всех остальных браузерах Отобразились только абсолютно непрозрачные пиксели, все полупрозрачные стали полностью прозрачными. Причем фильтр AlphaImageLoader не использовался: картинка накладывалась как обычный фон. Это гораздо лучше, чем серый цвет, заполняющий прозрачные области.
- В третьей части я рекомендовал совершать ряд действий перед сохранением
полупрозрачных PNG. Связано это было с тем, что фотошоп часто оставляет
фрагменты изображения в полностью прозрачных областях, и эти фрагменты могут
сильно увеличить объем файла. Сделав несколько тестов, я пришел к выводу, что эти
действия совершать нужно далеко не всегда, так как объем может, наоборот,
увеличиться:
До оптимизации: 5 537 байт После оптимизации: 6 449 байт Вот как выглядят цветовые слои этих изображений:
Несмотря на то, что в первом случае больше цветовой информации, именно для первого изображения PNG-упаковщик смог оптимизировать данные с помощью дельта-фильтров.
Для второго изображения фильтрация не была применена вообще, так как любой фильтр только увеличивал объем изображения.Поэтому теперь я рекомендую делать две версии файла — с оптимизацией и без — и выбирать из них тот, который меньше весит.
- Не забывайте пользоваться утилитами для оптимизации PNG-изображений, в
некоторых случаях они позволят вам значительно сократить объем файла. Вот
наиболее популярные из них:
— 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 |
Как сделать изображения с прозрачным фоном PNG
Фоновые изображения PNG широко используются для отображения высококачественных цифровых изображений на веб-сайтах. Он особенно популярен среди дизайнеров в файлах формата PNG, поскольку может обрабатывать графику с прозрачным или полупрозрачным фоном. Это позволяет просвечивать цвет позади вашего изображения.
Более того, чтобы превзойти производительность файлов GIF, PNG обеспечивает не только сжатие без потерь, но и более широкую и яркую палитру. Фоновые изображения в формате Png очень хороши.
Как сделать изображения с прозрачным фоном png?
Что такое фон PNG?
Фон PNG часто используется в рисовании линий, логотипах, онлайн-диаграммах и графике. PNG (Portable Network Graphics) — это тип файла растрового изображения. Файлы PNG с расширением .png. Он может обрабатывать 16 миллионов цветов, что отличает его от большинства типов файлов.
В чем разница между PNG и JPG?
Поскольку все мы знаем, что общий тип файла изображения — это не только PNG, но и JPG, так в чем же между ними разница? Разницу между jpg и png легко отличить, и мы можем отличить их по следующим аспектам:
1. Степень сжатия
Jpg — это сжатый с потерями файл изображения, который является популярным форматом файла изображения в сети. Картинка в формате jpg может сжимать файл изображения до минимального формата. Однако Png представляет собой сжатый файл изображения без потерь.
2 . Разница в качестве после сжатия
Изображения в формате jpg могут отображать очень яркие и насыщенные изображения одновременно с высокой степенью сжатия, но с повышением степени сжатия качество изображения будет постепенно снижаться.
Однако, картинки png отличаются, они небольшого размера и занимают меньше места по сравнению с форматом jpg, картинки png без потери данных изображения, вы сможете получить нужные вам картинки быстрее, а качество картинок не ухудшится.
3. Редактируемый и нередактируемый
Изображения в формате jpg не могут быть отредактированы должным образом. Изображения PNG больше, чем изображения jpg в формате png. Но изображения в формате png можно редактировать, например стили текста, линии и т. д., и их можно изменять с помощью программного обеспечения, такого как фотошоп.
После появления PNG мы можем ясно почувствовать, что фон PNG очень распространен в нашей жизни и работе, поэтому, когда нам нужен фон PNG, есть ли другой способ получить фон PNG, кроме как обратиться к профессионалам? Мы можем использовать инструменты, чтобы сделать это!
Как сделать прозрачный фон с помощью инструментов?
Есть много способов сделать прозрачный фон, мы представим некоторые из наиболее распространенных программ для создания фоновых изображений png.
Используйте PowerPoint, чтобы сделать прозрачный фон
В Word, PowerPoint и Excel вы можете удалить фон с изображения, чтобы выделить тему изображения, или удалить отвлекающие детали. Чтобы удалить фон, выберите изображение. Выберите инструмент «Изображение» > вкладку «Форматирование», а затем выберите «Удалить фон».
В Windows
1. Выберите изображение, с которого вы хотите удалить фон.
2. В разделе Инструменты для работы с изображениями на вкладке Формат в группе настроек выберите Удалить фон. Щелкните один из маркеров на линии выделения, а затем перетащите линию, чтобы она содержала часть изображения, которую вы хотите сохранить, и исключила большую часть областей, которые вы хотите удалить. Иногда вы можете получить желаемые результаты, поэкспериментировав с расположением и размером линий выделения без каких-либо дополнительных усилий.
3. Чтобы отменить маркировку области, выберите Удалить метку, а затем выберите линию.
Если область по умолчанию неверна, перейдите к фоновому инструменту «Удалить» > «Изображение» и выполните одно или оба этих действия.
4. Выберите «Отметить область для перемещения» и используйте карандаш для рисования, которым рисовали таблицу, чтобы отметить область, которую вы хотите оставить на изображении.
5.Выберите область, которую хотите удалить, и карандашом, которым рисовали таблицу, отметьте область, которую хотите удалить.
Когда вы закончите, выберите сохранить изменения или отменить все изменения. Чтобы сохранить изображение в отдельный файл для последующего использования, щелкните изображение правой кнопкой мыши и выберите «Сохранить как изображение». Есть подробное обучающее видео, вы также можете следовать видео шагам:
На MAC
Выберите изображение. На вкладке Формат изображения на ленте выберите Удалить фон.
Если вы не видите вкладку удаления фона или форматирования изображения, убедитесь, что вы выбрали изображение. Возможно, вам придется дважды щелкнуть изображение, чтобы выбрать его, а затем открыть вкладку формата изображения. Фоновая область по умолчанию окрашена в пурпурный цвет, чтобы пометить ее для удаления, в то время как передний план сохраняет свой естественный цвет.
Если область по умолчанию неверна, на вкладке «Удалить фон» в разделе «Инструменты для рисунков» выполните одно или оба из следующих действий:
1. Выберите «Отметить область», которую вы хотите сохранить, и используйте карандаш произвольной формы, которым рисовали таблицу, чтобы отметить область, которую вы хотите сохранить на изображении.
2. Выберите область, которую вы хотите удалить, и используйте карандаш для рисования, которым рисовали таблицу, чтобы отметить область, которую вы хотите удалить.
3. Когда вы закончите, выберите сохранить изменения или отменить все изменения.
Чтобы сохранить изображение в отдельный файл для последующего использования, щелкните изображение правой кнопкой мыши и выберите «Сохранить как изображение».
Используйте Adobe Photoshop, чтобы сделать прозрачный фон
Photoshop — самый традиционный способ создания прозрачного фона в формате PNG. Метод полигонального лассо очень подходит для изображений с прямыми краями. Метод быстрого выбора подходит для изображений с круглыми краями. Метод кисти больше всего подходит для изображений, края которых требуют более высокой точности. В качестве примера я буду использовать метод многоугольного лассо:
1.После выбора щелкните начальную точку, а затем отследите часть изображения, которую вы хотите сохранить, с помощью серии щелчков от точки к точке.
2. Соедините эту линию с начальной точкой.
3. После того, как вы снова подключитесь к начальной точке, вы увидите мигающую пунктирную линию, затем нажмите «Выбрать», затем нажмите «Обратить» и, если необходимо, определите части, которые вы хотите сохранить или удалить.
4. Наконец, нажмите «Удалить» и сохраните его как PNG. Есть подробное обучающее видео, вы также можете следовать видео шагам:
Попробуйте Fotor для создания прозрачного фона PNG
JPG в PNG Прозрачное изображение бесплатно онлайн
или перетащите изображение
Нет изображения? попробуйте один из следующих вариантов:
Загружая изображение, вы соглашаетесь с нашими Условиями обслуживания.
Шаги по преобразованию JPG в прозрачный PNG
1
Загрузить изображение
Загрузите изображение, выбрав или перетащив медиафайл
2
Используйте инструмент вырезания
Превратите JPG в прозрачный PNG с помощью инструмента вырезания
3
Скачать изображение
Ваше изображение готово для загрузки прямо сейчас
Преобразование JPG в PNG прозрачное фото в одно мгновение
Автоматическое преобразование изображения с помощью технологии искусственного интеллекта
Ищете эффективный способ превратить JPG в прозрачное изображение PNG? Что ж, инструмент LightX Cutout с поддержкой AI для создания прозрачных PNG из JPG поможет вам во всем.
Все, что вам нужно сделать, это выбрать нужную область на вашем изображении. Основываясь на том же, инструмент автоматически распознает пиксели в вашем файле JPG и сделает их прозрачными. И вот как всего за несколько кликов и секунд вы можете превратить свой JPG в прозрачный файл PNG! Вам даже не нужно иметь какие-либо продвинутые навыки или предыдущий опыт. LightX обеспечивает простое, плавное и плавное редактирование!
Загрузить изображение
Преобразование JPG в PNG Прозрачный фон для всего
Современный инструмент LightX Cutout позволяет формировать прозрачные PNG из JPG почти для всего, что вам нужно. Вы можете сделать его для текста, логотипа или чего-либо еще с желаемым уровнем точности и аккуратности. Вы можете использовать множество функций, в том числе Smart Select, Magic Brush или Brush и Smart Erase, Magic Erase или Erase, чтобы редактировать различные части файла JPG, пока не будете удовлетворены результатом.
