Формат без фона как называется: Растровый формат PNG | SEO-портал
02.03.2021
Разное
Растровый формат PNG | SEO-портал
PNG (Portable Network Graphics — портативная сетевая графика) — популярный в интернете растровый графический формат файлов, применяющий технологию сжатия без потерь и поддерживающий полупрозрачность (альфа-канал).
Создание изображений в формате PNG
Сделать картинку в формате PNG
можно с помощью любого графического редактора (в том числе Paint и Photoshop).
Как сохранить картинку в формате PNG в Paint?
Процесс сохранения в формат PNG
с помощью редактора Paint в Windows 10:
- Откройте файл изображения в Paint.
Программа поддерживает изображения в форматах
BMP
,TIFF
,PNG
,GIF
,JPEG
. - Кликните по вкладке Файл.
Откроется контекстное меню.
- Выберите Сохранить как → Изображение в формате PNG.
Откроется модальное окно выбора папки и названия для файла.
- Определите папку, введите название файла и нажмите Сохранить.
Как сохранить PNG-файл в Photoshop?
Процесс сохранения изображений в формате PNG
с помощью редактора Adobe Photoshop CC 2015:
- Откройте файл изображения в Photoshop.
Программа поддерживает изображения в самых разных графических форматах.
- Кликните по вкладке Файл.
Откроется контекстное меню.
- Выберите Сохранить для Web (по умолчанию клавиши
Alt
+Ctrl
+Shift
+S
).Откроется модальное окно сохранения.
- В правом верхнем углу диалогового окна из выпадающего списка выберите PNG-8 (палитра до 256 цветов) или PNG-24 (максимальная палитра цветов).
Откроются дополнительные настройки формата
PNG
. Для PNG-24:Дополнительные настройки для PNG-8:
- модель редукции цвета (способ определения цветов в палитру),
- количество цветов в палитре,
- определение модели дизеринга (способа сглаживания цветовых переходов),
- степень дизеринга (0-100%),
- цвет фона (при наличии прозрачности),
- модель дизеринга прозрачности,
- web-цвета (не актуально).
- Произведите необходимые настройки.
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
- Кликните Сохранить….
Откроется модальное окно выбора папки и названия для файла.
- Определите папку, введите название файла и нажмите Сохранить.
Как сохранить PNG-файл в Illustrator?
Программа Illustrator является графическим редактором компании Adobe, предназначенным для работы с векторной графикой. Функционал программы схож с функционалом Photoshop — для сохранения изображений в PNG-формате в «иллюстраторе» используйте аналогичную функцию «Сохранить для Web»:
- Откройте или создайте изображение в Adobe Illustrator.
Программа поддерживает изображения в самых разных графических форматах.
- Кликните по вкладке Файл.
Откроется контекстное меню.
- Выберите Сохранить для Web (по умолчанию
Alt
+Ctrl
+Shift
+S
).Откроется модальное окно сохранения.
- В правом верхнем углу диалогового окна из выпадающего списка выберите PNG-8 (палитра до 256 цветов) или PNG-24 (максимальная палитра цветов).
Откроются дополнительные настройки формата
PNG
(описаны выше в процессе сохранения PNG через «фотошоп»). - Произведите необходимые настройки.
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
- Кликните Сохранить….
Откроется модальное окно выбора папки и названия для файла.
- Определите папку, введите название файла и нажмите Сохранить.
Алгоритм сжатия PNG
Главной отличительной особенностью формата PNG
является сжатие без потерь данных: в зависимости от компрессора (сжимающей программы) можно уменьшить «вес» изображения в определённой степени.
В отличие от формата JPG
, степень сжатия PNG-файлов не регулируется и полностью зависит от предустановленных алгоритмов программы, с помощью которой сохраняется картинка.
Оптимизация PNG-изображений
Уменьшить размер файла PNG можно с помощью ограничения цветовой палитры.
В зависимости от глубины цвета изображения в формате PNG
, применяемые на веб-ресурсах, делят на 2 вида:
- PNG-8
Использует 8-битную глубину цвета (не более 256 индексированных цветов) и возможность использования прозрачных пикселей.
- PNG-24
Использует 24-битную глубину цвета и 8-битный альфа-канал (1 677 7216 цветов + канал прозрачности).
Экспортируя изображение из полноцветного PNG-24 в индексированный PNG-8 можно добиться значительного уменьшения размера файла («веса» изображения):
В приведённых выше примерах можно заметить значительную разницу в размере файлов в зависимости от глубины цвета. Также очевидна нехватка цветов: на 256-цветном варианте можно рассмотреть «гранулы», которые становятся значительно более заметны в 128-цветном варианте из-за явного недостатка цветов в палитре.
Применение формата PNG-24 для изображений, использующих небольшое количество цветов, неоправданно увеличивает размер файла.
Следует иметь ввиду, что ограничение цветовой палитры до минимума ведёт к безвозвратной потере данных, которые невозможно восстановить из оптимизированного изображения.
Применяйте PNG-8 только если максимума в 256 цветов будет достаточно для изображения.
В случаях, когда картинка использует до 256 цветов, ограничение палитры может существенно уменьшить «вес» изображения, ни как не отражаясь на качестве его детализации:
Зависимость «веса» от глубины цвета для PNGПреимущества формата PNG
- Cжатие без потерь в качестве детализации.
- Нет ограничений в глубине цвета.
- Применение индексированной палитры (8 бит).
- Регулировка размера файла в зависимости от палитры.
- Применение канала прозрачности (альфа-канала).
Недостатки формата PNG
Рекомендации по применению формата
При использовании и оптимизации изображений в формате PNG
для вашего сайта руководствуйтесь следующими рекомендациями:
- используйте формат
PNG
для картинок с прозрачным фоном и небольших иконок, - используйте формат
PNG
, если потери при сжатии недопустимы, - используйте формат PNG-8 для картинок с небольшим количеством цветов (не более или около 256),
- используйте формат PNG-24 для картинок с большим количеством цветов (более 256),
- выбирая между PNG-8 и PNG-24, контролируйте размер файла и качество детализации изображения на выходе перед сохранением,
- помните, что при сохранении изображения в формате PNG-8 в его палитре останется не более 256 цветов, а данные о других цветах будут удалены и восстановить их будет невозможно.
Часто задаваемые вопросы
Чем открыть файл в формате PNG на компьютере?
Открыть файлы в формате PNG
можно с помощью любых программ для просмотра изображений (в том числе стандартные приложения Windows), всех современных интернет-обозревателей (браузеров), а также векторных и растровых графических редакторов.
Какой программой можно открыть файл PNG?
Список наиболее популярных программ для открытия и редактировать картинок в формате PNG
(и во многих других графических форматах):
- Microsoft Paint,
- GIMP,
- Adobe Photoshop,
- Adobe Illustrator,
- CorelDRAW,
- Corel Photo Paint,
- и др.
Как открыть файл PNG в «фотошопе»?
Чтобы открыть любое изображение в формате PNG
(а также в любом другом графическом формате) в Photoshop откройте программу и воспользуйтесь функцией Файл → Открыть… (клавиши Ctrl
+ O
). Таким же способом это можно сделать в любом другом графическом редакторе.
Как сохранить (создать) PNG-файл?
Ответ здесь.
Как изменить формат изображения на PNG?
Изменить формат картинки (фотографии или рисунка) на PNG
можно с помощью функции экспорта в графических редакторах или через онлайн-конвертеры.
Например, программа Microsoft Paint позволяет перевести картинку в формат PNG
с помощью функции «Сохранить как» следующие графические форматы: BMP
, TIFF
, PNG
, GIF
.
Как сжать изображение в формате PNG?
Сжатие PNG
происходит при сохранении картинки в данном формате, размер файла на выходе зависит от алгоритма сжатия программы, в которой он сохраняется. Если файл PNG
необходимо сжать в большей степени, можно изменить глубину цвета (экспорт из PNG-24 в PNG-8) или воспользоваться онлайн-компрессором tinypng.com.
Как уменьшить (изменить) размер файла в формате PNG?
Уменьшить размер PNG-файла можно следующими способами:
- изменив глубину цвета с 24-х до 8-бит,
- уменьшив количество индексированных цветов при 8-битной глубине цвета,
- отключив альфа-канал прозрачности,
- удалив мета-данные.
Все эти действия разом можно совершить при помощи онлайн-компрессора tinypng.com или частично с помощью функции «Сохранить для Web» в графических редакторах от компании Adobe (Photoshop и Illustrator).
В каком формате сохранять логотип для сайта, без фона | Дизайн, лого и бизнес
Логотипы сейчас используют все компании, которые стремятся популяризировать свои услуги и продукцию на рынке. Но не все эмблемы можно считать удачными. Грамотно разработать логотип также важно, как и в дальнейшем его эффективно использовать.
Для начала нужно определиться с общим стилем будущего фирменного знака, сделать наброски и только потом приступить к детальной проработке. Также есть вариант обратиться в специалистам в сфере дизайна, которые сделают лого по Вашим требованиям. В таком случае Вам не потребуется самостоятельно продумывать внешний вид знака.
Разработать логотип для бизнеса за 5 минут
Нажмите кнопку «Создать логотип» и конструктор бесплатно предложит для вас варианты лого. Просто выбирайте и начинайте работать!
Другой способ — сделать логотип самостоятельно в графическом редакторе или с помощью специальной онлайн-программы. Все эти варианты имеют свои плюсы и минусы, поэтому следует отталкиваться от бюджета компании и необходимых сроков получения готового продукта.
Виды графики
Также в процессе разработки встает вопрос, в каком формате сохранять логотип. В настоящее время существует два основных вида графических форматов: векторный и растровый. Об их особенностях, плюсах и минусах расскажем далее.
Векторная графика
Изображения, представленные в такой графике, составлены из различных геометрических фигур, прямых и изогнутых линий, точек и т.д. Это позволяет увеличивать и уменьшать размер картинки, сохраняя при этом качество и четкость элементов. Поэтому данный формат чаще всего используется в печати. Далее о преимуществах и недостатках векторной графики.
Плюсы:
- Изображения такого формата можно многократно увеличивать и уменьшать, не беспокоясь за качество
- Размер файла никак не зависит от объема и сложности картинки
- Удобно использовать для изготовления полиграфической печатной продукции
- Картинку легко видоизменять (как отдельные части, так и изображение в целом)
Минусы:
- Часто сложно получить действительно реалистичное изображение, ведь оно составляется из отдельных фигур и линий
- Для создания продукта можно использовать ограниченное количество средств
Растровая графика
Картинки данного вида выполнены из отдельных пикселей, поэтому при приближении напоминают мозаику. Если изображение хорошего качества, то данные элементы будут невидны.
Плюсы:
- Выполненные в растровой графике иллюстрации отличаются реалистичностью, потому что передают графику и состоят из множества отдельных частей
- Пользователи могут создавать по-настоящему привлекательные и проработанные изображения
- Доступен широкий выбор инструментов для рисования
Минусы:
- Даже небольшие картинки будут «весить» много, занимая место на носителе
- При многократном увеличении размера изображения будут видны пиксели, что значительно сужает круг применения данных иллюстраций
Форматы логотипов
Эмблему, как и любую другую картинку, можно сохранить в различных форматах. Далее подробнее про каждый из них.
Ai (Adobe Illustrator)
Если сохранить изображение в данном формате, то его в дальнейшем Вы сможете продолжить его редактирование. Это позволяет исправлять логотип после сохранения, если возникает такая необходимость.
PDF (Portable Document Format)
Данный формат в исходном варианте отображает шрифты и изображения различного вида. Также файл такого типа легко напечатать.
EPS (Encapsulated PostScript)
Используется для получения максимально высокого качества эмблемы. В таком формате изображение можно масштабировать, сохраняя при этом четкость границ.
PNG (Portable Network Graphics)
Этот растровый формат «сжимает» логотип, но при этом не портит его качество. Файлы такого вида открываются с помощью любой программы для просмотра изображений.
JPG и JPEG (Joint Photographic Experts Group)
Логотип, сохраненный в таком формате, мало весит и быстро загружается. Кроме того, эмблема имеет качество не хуже, чем у изображения векторной графики.
TIFF (Tagged Image File Format)
Очень похож на JPG и JPEG, однако файлы этого формата весят гораздо больше. Это обусловлено тем, что картинки имеют более высокое качество.
Ответы на частые вопросы
- В каком формате сохранять логотип?
Однозначного ответа на этот вопрос нет. Эмблему можно сохранить в любом удобном формате. Главное, учитывать дальнейшую сферу применения логотипа. Например, если Вы планируете печатать фирменный знак на продукции компании и одежде, то лучше выбирать векторные форматы (EPS, PDF или Ai).
- Как сохранить логотип без фона?
Чтобы у готовой эмблемы отсутствовал фон, можно сохранить ее в форматах PNG или SVG.
- В каком формате сохранять логотип в фотошопе?
При разработке логотипа в программе Adobe Photoshop доступны различные форматы сохранения файла: PNG, TIFF, JPG и PSD.
- Как сохранить логотип в векторе?
Эмблема, изначально представленная в векторной графике, легко сохраняется в соответствующем формате. Для этого нужно выбрать один из вариантов: Ai, PDF или EPS.
Если Вы изначально создали эмблему в растровой графике, то ее в дальнейшем можно преобразовать в векторную. Это можно сделать двумя способами. Первый — обрисовать логотип векторными элементами в Фотошопе. И второй вариант — воспользоваться онлайн-программой (например, VectorMagic).
- В каком формате сохранять логотип для сайта?
К формату эмблемы, которая будет применяться на сайте, нет строгих требований. Но желательно выбирать PNG формат, потому что такой файл будет занимать меньше места и при его загрузке не будет возникать проблем.
Заключение
Логотип, который выполнен качественно и привлекательно, нужно правильным образом сохранить. Главное, учитывайте при выборе формата, где в дальнейшем будет применяться лого и в каком размере. Это поможет верно определиться с нужным вариантом. После сохранения изображения его можно сразу начать применять в деятельности.
Другие статьи
Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.
PNG формат: особенности, плюсы и минусы | Дизайн, лого и бизнес
На настоящий момент формат PNG, расшифровывающийся как Portable Network Graphics – один из популярнейших растровых форматов в сфере веб-дизайна. Решение о разработке было принято в 1995 году на конференции, где обсуждалась необходимость создания аналога GIF-формата. Так как последний подразумевал оплату соответствующей лицензии, предполагалось, что новый формат станет более доступным. В результате появился непатентованный PNG, ставший прославленному GIF достойным конкурентом. (О других графических форматах читайте здесь)Создайте логотип за 5 минут
Нажмите кнопку «Создать» и мы бесплатно создадим варианты логотипа, на основе которых можно разработать фирменный стиль.
PNG: плюсы и минусы
Формат в основном используется для работы в интернете и в графических редакторах.
К его преимуществам относятся:
- Возможность сжатия файла с незначительными потерями или вовсе без них. Рисунок сохраняет исходное качество вне зависимости от интенсивности сжатия;
- Возможность сколько угодно сохранять объект в процессе работы, а потом видоизменять снова. Изначальное качество не меняется;
- Цветовой диапазон формата шире, нежели у GIF. PNG-8 работает с 256 цветами, PNG-24 – с 16,7 млн. цветов;
- Поддержка альфа-канала. Эта функция позволяет плавно сочетать изображение с фоном за счет уменьшаемой прозрачности. Уровни прозрачности по количеству соответствуют доступным цветам и могут варьироваться от предельной контрастности до полного растворения;
- Возможность создания и комбинирования слоев;
- Доступность включения в материал метаданных (при необходимости сохранения авторской информации).
- Компактный размер изображений.
В числе недостатков можно выделить:
- Отсутствие режима анимации;
- Затруднения при работе с полноцветными типами изображений;
- Невозможность сохранять в одном файле сразу несколько рисунков (попытки добавить формату эту функцию предпринимались, но пока не получили всеобщего признания).
Из списка преимуществ становится ясно, чем PNG в первую очередь привлекает интернет-дизайнеров. Его «изюминка» – возможность сохранить картинку на вырезанном (прозрачном) фоне. Такая функция очень важна при работе с сайтами, дизайном продукции. В частности, большинство логотипов создаются именно в формате PNG, поскольку являют собой фигурное изображение без фона. (Подробнее про виды логотипов читайте в нашей статье)
Сфера применения
Логотипы – лишь частный пример того, как может использоваться формат. Элементы с прозрачным фоном необходимы для оформления веб-страниц, создания эффектного текста, объемных и рельефных изображений, при различных техниках печати и гравировки. Фактически этот формат применяется во всех сферах дизайна, где необходимо наличие прозрачного фона и возможность трансформировать рисунок без потери качества.
Другие статьи
О формате PNG. Краткий тест-драйв / Хабр
- Что такое PNG?
- PNG vs GIF.
- PNG vs JPEG.
- Жизнь после Photoshop’а или сжимаем дальше.
- Adobe Fireworks или PNG-8 с альфа-каналом.
- Вердикт.
PNG
Растровый графический формат PNG, набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF’а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.
Так в чем же преимущества формата?
- Полноценная поддержка alpha-transparency – прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
- Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
- Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
- Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.
PNG vs GIF
Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения:
Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.
Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).
PNG vs JPEG
А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG’у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.
В общем, смотрите сами:
UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).
Жизнь после Photoshop’а или сжимаем дальше
Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам…
Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.
На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.
Кроме PNGOut, существует ещё много программ, детальным обзором которых сейчас заниматься не хочется:
- OptiPNG – не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
- Pngcrush – сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
- и ещё ряд утилиток просто вычищающих служебный мусор из файлов.
Adobe Fireworks
Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!
3 версии формата в AF:
PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.
А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF’а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение –
PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop’овским результатом разница в пользу PNG:
И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks:
Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.
Вердикт
По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).
Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).
Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF’ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.
Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.
UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.
Обновил иллюстрации. К сожалению, сервис, на котором размещены картинки, не хранит PNG, всё равно конвертируя его в JPEG. Но теперь, по крайней мере, качество лучше. Ещё раз повторюсь – моей целью не было сравнивание артефактов, а только килобайты и ещё раз килобайты итоговых файлов.
Источник – Just Kitich блог.
Как сделать прозрачный фон картинки в PowerPoint
Сделать прозрачный фон изображения предлагают многие инструменты. Напрмер PhotoShop, или Pixlr Editor. Но не все могут эти инструменты использовать, так как многие из них платные.
А вот такой инструмент, как PowerPoint, известен всем, так как он входит в пакет Word, и установлен по умолчанию. Но не все знают, что его можно использовать для этой цели.
Варианты удаления фона в PowerPoint
Удаление фона с загруженного изображения
Часто создается ситуация, когда есть изображение в формате jpeg, с непрозрачным фоном. Но для выполнения какой-либо работы необходим именно этот рисунок без фона, сохранены в формате png.
Загружаем изображение
Создаем чистый слайд и загружаем изображение. Конечно, проще всего удалить фон у рисунка на белом фоне с резкими конкретными очертаниями. Поэтому я выбрала рисунок двухцветный.
Что бы понять, где находится фон, под рисунок подложили цветной прямоугольник.
Подготовка к удалению фона
Выходим в опцию – Формат рисунка – Удалить фон.
Сам рисунок должен быть обязательно выделен
Как только мы кликаем на опцию – Удалить фон, рисунок окрашивается в малиновый цвет.
Обратите внимание на то, что рисунок будет выделен дважды – двумя рамками: первая ограничивает сам рисунок.
Вторая рамка для выделения поля – удаления фона. Если необходимо убрать весь фон – необходимо совместить обе рамки.
Выделение областей фона
Обратим внимание на четыре “кнопки” редактора. Они подписаны и понятны.
Выбираем кнопку – Пометить области для удаления.
Появляется карандаш, который оставляет пометку “минус”.
Внимательно помечаем все области для удаления. Обратите внимание на изолированные области. То есть – пропускать области нельзя.Должны быть помечены все.
Теперь помечаем области, которые должны быть оставлены. Для этого используем кнопку – Пометить области для сохранения. Появляется карандаш с “плюсом”.
Тоже очень внимательно помечаем области сохранения. В том числе и изолированные.
Внимательно все проверяем и нажимаем на кнопку – Сохранить изменения.
Фон удаляется.
Сохранение изображения
Теперь осталось только правильно сохранить готовое изображения. Подводим к нему мышку и кликаем правой кнопкой. В контекстном открывающемся меню выбираем опцию – Сохранить как рисунок.
Проверьте формат изображения – оно должен быть сохранено в формате png.
Удаление фона созданного в PowerPoint изображения.
В этом случае – все очень просто. Вы создаете какой-то рисунок, подводите к нему курсор мыши и кликаете правой кнопкой. В контекстном меню выбираем – Сохранить ак рисунок. То есть повторяем последний шаг предыдущей работы.
Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога
Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях
Как называется формат картинок без фона
Делаем прозрачный фон изображения. 3 разных способа.
Разрабатывая макет полиграфии или верстая сайт, может потребоваться некоторые участки изображения сделать прозрачными. Например, для того, чтобы фон фотографии совпадал с фоном макета или углы изображения не перекрывали текст.
Прозрачный фон изображения позволяет делать красивое обтекание текста по форме предмета. Этот прием сокращает пустое пространство и улучшает вид верстки.
Такие векторные редакторы как CorelDRAW и Illustrator могут скрывать часть изображения с помощью контурной маски, это быстрый и простой метод сделать прозрачный фон, если форма предмета простая.
Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.
В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.
Вырезание объекта в фотошопе
Чтобы сделать прозрачный фон, необходимо вырезать предмет, а фон удалить. В зависимости от формы предмета, выберите тот способ выделения, который будет удобен в данной ситуации.
Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.
Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение «Растушевки». Значение размытия сработает ко всему выделению.
Однако, бывают редкие ситуации, когда только часть предмета имеет размытый край или отсутствие фокусировки. В таком случае, необходимо комбинировать несколько способов выделения.
Для примера, я специально выбрал более сложное изображение с разной степенью фокусировки, соответственно с разной четкостью границ.
Преимущество этого метода заключается в том, что вы можете менять жесткость краем меняя жесткость кисти в процессе рисования. Но есть и недостаток: выделение кистью не такое точное как лассо. Но это не единственный способ получить выделение с разной четкостью границ.
Добавление к выделению нечетких областей
Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.
Форматы поддерживающие прозрачный фон
После того, как вы удалили фон, необходимо сохранить изображение в формате поддерживающем прозрачность.
Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения.
Отсечение фона маской
Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.
Если предмет имеет простую форму (круг, прямоугольник, треугольник и т.д.) применение маски может сэкономить время и силы на обработке изображения. При более сложной форме предмета лучше использовать фотошоп и формат изображения поддерживающий прозрачность.
Еще один недостаток этого метода состоит в том, что маской невозможно частично размыть края предмета, в отличие от обработки в фотошопе.
Clipping Mask в Adobe Illustrator
После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.
PowerClip в CorelDRAW
Контур в CorelDRAW также можно редактировать после создание маски.
Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.
3. Прозрачность режимом наложения
Что делать, если фон фотографии, как и фон макета уже белый, но углы изображения перекрывают важные детали макета. В таком случае, можно применить режим наложения. Применение этого режима к изображению будет достаточно, чтобы белый угол не залезал на изображение.
Этот способ позволяет получить прозрачный фон одним нажатием кнопки, совершенно ничего не выделяя и не вырезая.
В панели параметров инструмента настройте так, как показано на скриншоте ниже:
Использовать этот режим нужно аккуратно, у него есть и свои недостатки. Хорошо работать он будет только на белом фоне, а сам предмет тоже станет прозрачным при наложении на текст или на другие изображения.
Видео урок: прозрачный фон
Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:
Источник
Формат PNG
PNG (Portable Network Graphics — портативная сетевая графика) — популярный в интернете растровый графический формат файлов, применяющий технологию сжатия без потерь и поддерживающий полупрозрачность (альфа-канал).
Содержание
Создание изображений в формате PNG
Сделать картинку в формате PNG можно с помощью любого графического редактора (в том числе Paint и Photoshop).
Как сохранить картинку в формате PNG в Paint?
Процесс сохранения в формат PNG с помощью редактора Paint в Windows 10:
Откроется контекстное меню.
Откроется модальное окно выбора папки и названия для файла.
Как сохранить PNG-файл в Photoshop?
Процесс сохранения изображений в формате PNG с помощью редактора Adobe Photoshop CC 2015:
Программа поддерживает изображения в самых разных графических форматах.
Откроется контекстное меню.
Откроется модальное окно сохранения.
Активируйте соответствующий чек-бокс, чтобы сохранить файл PNG с прозрачным фоном (альфа-каналом без фона).
Дополнительные настройки для PNG-8:
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
Откроется модальное окно выбора папки и названия для файла.
Как сохранить PNG-файл в Illustrator?
Программа Illustrator является графическим редактором компании Adobe, предназначенным для работы с векторной графикой. Функционал программы схож с функционалом Photoshop — для сохранения изображений в PNG-формате в «иллюстраторе» используйте аналогичную функцию «Сохранить для Web»:
Программа поддерживает изображения в самых разных графических форматах.
Откроется контекстное меню.
Откроется модальное окно сохранения.
Откроются дополнительные настройки формата PNG (описаны выше в процессе сохранения PNG через «фотошоп»).
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
Откроется модальное окно выбора папки и названия для файла.
Алгоритм сжатия PNG
Главной отличительной особенностью формата PNG является сжатие без потерь данных: в зависимости от компрессора (сжимающей программы) можно уменьшить «вес» изображения в определённой степени.
Оптимизация PNG-изображений
Использует 8-битную глубину цвета (не более 256 индексированных цветов) и возможность использования прозрачных пикселей.
Использует 24-битную глубину цвета и 8-битный альфа-канал (1 677 7216 цветов + канал прозрачности).
Экспортируя изображение из полноцветного PNG-24 в индексированный PNG-8 можно добиться значительного уменьшения размера файла («веса» изображения):
В приведённых выше примерах можно заметить значительную разницу в размере файлов в зависимости от глубины цвета. Также очевидна нехватка цветов: на 256-цветном варианте можно рассмотреть «гранулы», которые становятся значительно более заметны в 128-цветном варианте из-за явного недостатка цветов в палитре.
Применение формата PNG-24 для изображений, использующих небольшое количество цветов, неоправданно увеличивает размер файла.
Следует иметь ввиду, что ограничение цветовой палитры до минимума ведёт к безвозвратной потере данных, которые невозможно восстановить из оптимизированного изображения.
Применяйте PNG-8 только если максимума в 256 цветов будет достаточно для изображения.
В случаях, когда картинка использует до 256 цветов, ограничение палитры может существенно уменьшить «вес» изображения, ни как не отражаясь на качестве его детализации:
Преимущества формата PNG
Недостатки формата PNG
В таких случаях предпочтительным является формат JPG.
Для таких целей используется формат GIF.
Рекомендации по применению формата
Часто задаваемые вопросы
Чем открыть файл в формате PNG на компьютере?
Открыть файлы в формате PNG можно с помощью любых программ для просмотра изображений (в том числе стандартные приложения Windows), всех современных интернет-обозревателей (браузеров), а также векторных и растровых графических редакторов.
Какой программой можно открыть файл PNG?
Список наиболее популярных программ для открытия и редактировать картинок в формате PNG (и во многих других графических форматах):
Как открыть файл PNG в «фотошопе»?
Чтобы открыть любое изображение в формате PNG (а также в любом другом графическом формате) в Photoshop откройте программу и воспользуйтесь функцией Файл → Открыть. (клавиши Ctrl + O ). Таким же способом это можно сделать в любом другом графическом редакторе.
Как сохранить (создать) PNG-файл?
Как изменить формат изображения на PNG?
Изменить формат картинки (фотографии или рисунка) на PNG можно с помощью функции экспорта в графических редакторах или через онлайн-конвертеры.
Как сжать изображение в формате PNG?
Сжатие PNG происходит при сохранении картинки в данном формате, размер файла на выходе зависит от алгоритма сжатия программы, в которой он сохраняется. Если файл PNG необходимо сжать в большей степени, можно изменить глубину цвета (экспорт из PNG-24 в PNG-8) или воспользоваться онлайн-компрессором tinypng.com.
Как уменьшить (изменить) размер файла в формате PNG?
Уменьшить размер PNG-файла можно следующими способами:
Источник
Почему картинки без фона называются PNG, ведь другие форматы тоже могут быть «прозрачными»?
Картинки без фона не всегда называются PNG. Они могут называться и GIF, и SVG, и PSD и как-то ещё, если формат поддерживает альфа-канал — прозрачные пиксели или прозрачные слои, или прозрачные векторные объекты. Просто PNG это удобный формат для использования в интернете, потому что он при хорошем сжатии без потерь растрового изображения включает прозрачные пиксели, большое количество цветов и меньше искажает. Поэтому он часто используется. Поэтому вы, вероятно, часто встречаете изображения с прозрачными участками именно в этом формате. Но вот анимацию PNG не поддерживает, в отличие от GIF. Поэтому, например, часто про анимированные мемы с прозрачным фоном можно услышать слово гифка.
Windows 10 перестал отображать эскизы (миниатюры) фотографий в режиме «огромные и крупные значки». Как решить?
Здравствуйте. Причин возникновения данной проблемы не мало.
Первый способ
Для начала попробуйте закрыть программы и перезагрузить компьютер. Тем самым сброситься кеш, очиститься оперативная память.
Второй способ
Нажмите Enter. Далее выберите Ваш системный диск (в большинстве случаях, это диск C), нажмите ОК
Далее выберите галочкой пункт «Эскизы»
Проверьте решилась ли проблема.
Третий способ
Дополнительно
Мало-ли, но на всякий случай необходимо проверить отсутствие галочки в параметрах папок, а именно там не должна стоять галочка на пункте «Всегда отображать значки, а не эскизы».
Есть еще несколько способов через реестр, др. Дополню по необходимости.
5 3 · Хороший ответ
Что нужно сделать, чтобы в папке с фото отображались изображения, а не значки?
Это легко исправить:
При наведении курсора на нужный параметр вы сможете видеть, как меняется размер фотографий. Примерьтесь к тому виду, который удобен вам и кликните по нему.
5 5 · Хороший ответ
Как сделать фон в презентации из картинки?
Для этого проделайте следующие шаги:
1) Перейдите в Дизайн.
2) Нажмите Формат Фона.
3) Выбираем «Рисунок или текстура».
4) Чуть ниже нажимаем «Файл».
Пошаговую инструкцию в картинках вы можете посмотреть здесь!
На каком формате создать баннер уличный? RGB или CMYK? (Corel)
Любые макеты для печати в типографии, независимо от способа печати (цифровая, офсетная или широкоформатная), нужно создавать в цветовой модели CMYK.
Цветовая модель RGB подходит только для цифровых баннеров – для сайтов или социальных сетей.
Поэтому, макет лучше изначально делать в CMYK.
Краткие технические требования ко всем макетам:
1 7 · Хороший ответ
Если цвет – это отражение света, значит, всё внутри нас черное?
Читайте также
Как с картинки в ВК png, убрать белый фон? То есть я отправляю картинку, у которой в фотошопе нет фона, а в ВК он появляется.
1 · 5 ответов · Вконтакте
Как сделать прозрачный фон в фотошопе?
5 · 5 ответов · Фотошоп
Почему на съемках спецэффектов используется фон именно зеленого цвета?
8 · 16 ответов · Искусство и культура
В каком формате лучше сохранять логотипы?
3 · 3 ответа · Логотипы
Как убрать белый фон с картинки в Рaint?
Картинки без фона не всегда называются PNG. Они могут называться и GIF, и SVG, и PSD и как-то ещё, если формат поддерживает альфа-канал — прозрачные пиксели или прозрачные слои, или прозрачные векторные объекты. Просто PNG это удобный формат для использования в интернете, потому что он при хорошем сжатии без потерь растрового изображения включает прозрачные пиксели, большое количество цветов и меньше искажает. Поэтому он часто используется. Поэтому вы, вероятно, часто встречаете изображения с прозрачными участками именно в этом формате. Но вот анимацию PNG не поддерживает, в отличие от GIF. Поэтому, например, часто про анимированные мемы с прозрачным фоном можно услышать слово гифка.
«,»positiveVotes»:5,»contextUserCanMakeComment»:false,»author»:»ac9de003-35da-4992-becf-1051bae6058f»,»invalidVerificationsCount»:null,»questionId»:»534006″,»updated»:»2019-11-03T05:22:27.922958+00:00″,»good»:true,»deleted»:false,»banned»:false,»pendingModeration»:false,»anonymous»:false,»negativeVotes»:0,»audienceLimitation»:null,»editorChoice»:false,»validVerificationsCount»:null,»subscribed»:false,»created»:»2019-11-03T05:22:04.479595+00:00″,»plainText»:»Картинки без фона не всегда называются PNG. Они могут называться и GIF, и SVG, и PSD и как-то ещё, если формат поддерживает альфа-канал — прозрачные пиксели или прозрачные слои, или прозрачные векторные объекты. Просто PNG это удобный формат для использования в интернете, потому что он при хорошем сжатии без потерь растрового изображения включает прозрачные пиксели, большое количество цветов и меньше искажает. Поэтому он часто используется. Поэтому вы, вероятно, часто встречаете изображения с прозрачными участками именно в этом формате. Но вот анимацию PNG не поддерживает, в отличие от GIF. Поэтому, например, часто про анимированные мемы с прозрачным фоном можно услышать слово гифка.»,»commentsCount»:null,»type»:»answer»,»verifiedExperts»:null,»video»:null,»validVerifications»:null,»invalidVerifications»:null>,»f86a38db-7944-4968-9d1c-d45dcf1d4c13″:
Не совсем понятен Ваш вопрос. Ниже картинка с прозрачным фоном. ВКонтакте выглядит вот так:
Это опция соцсети. И отключить ее не удастся. Можно попробовать сохранить ее в формате gif. И отправить в ВК как документ, а не фото. Тогда отображаться картинка будет так:
«,»positiveVotes»:1,»contextUserCanMakeComment»:false,»author»:»b9df9604-520c-59d4-8697-6acc83a88fa6″,»invalidVerificationsCount»:null,»commentTopics»:[«all»],»questionId»:»260079d1-1562-4801-87c1-0ccd5aa4eb79″,»updated»:»2020-08-14T05:05:52.158936+00:00″,»good»:true,»deleted»:false,»banned»:false,»pendingModeration»:false,»anonymous»:false,»negativeVotes»:0,»audienceLimitation»:0,»editorChoice»:false,»validVerificationsCount»:null,»subscribed»:false,»created»:»2020-08-14T05:05:52.158914+00:00″,»plainText»:»Не совсем понятен Ваш вопрос. Ниже картинка с прозрачным фоном. ВКонтакте выглядит вот так:\n\nЭто опция соцсети. И отключить ее не удастся. Можно попробовать сохранить ее в формате gif. И отправить в ВК как документ, а не фото. Тогда отображаться картинка будет так:»,»commentsCount»:0,»type»:»answer»,»verifiedExperts»:null,»video»:null,»validVerifications»:null,»invalidVerifications»:null>,»7d03f024-7d1e-43e7-b163-b14ab7c78461″:
Для этого слой с фоном должен быть открытым. Если он закрыт, то: \»Слои\» и рядом со слоем справа нажмите на замочек один раз. Теперь вы можете стирать слой ластиком и в этом месте он станет полностью прозрачным (появятся бело-серые квадраты). Или вы можете выделить какую-то часть слоя лассо (L) или быстрым выделением (W), например, и удалить эту часть (delete). И ещё вы можете снизить прозрачность у всего фона с помощью \»слои\»-\»непрозрачность\»- уменьшайте насколько вам нужно процентов.
Открыть картинку в Paint. Выбрать функцию выделения «Произвольная область» и обязательно поставить галочку в пункте «Прозрачное выделение». Выделить картинку как можно аккуратнее. Нажать на кнопку «Вырезать». Вставить картинку в нужный файл. При этом белого фона на картинке не будет. Таким образом можно удобно убрать белый фон например позади логотипа.
Здравствуйте. Причин возникновения данной проблемы не мало.
Первый способ
Для начала попробуйте закрыть программы и перезагрузить компьютер. Тем самым сброситься кеш, очиститься оперативная память.
Второй способ
Нажмите Enter. Далее выберите Ваш системный диск (в большинстве случаях, это диск C), нажмите ОК
Далее выберите галочкой пункт \»Эскизы\»
Проверьте решилась ли проблема.
Третий способ
Дополнительно
Мало-ли, но на всякий случай необходимо проверить отсутствие галочки в параметрах папок, а именно там не должна стоять галочка на пункте \»Всегда отображать значки, а не эскизы\».
Есть еще несколько способов через реестр, др. Дополню по необходимости.
Это легко исправить:
При наведении курсора на нужный параметр вы сможете видеть, как меняется размер фотографий. Примерьтесь к тому виду, который удобен вам и кликните по нему.
«,»positiveVotes»:55,»contextUserCanMakeComment»:false,»author»:»c0e88093-dc3e-4162-acad-ef8970cc4915″,»invalidVerificationsCount»:null,»questionId»:»a4a9bee1-2440-4f46-8f2c-5eec3442224c»,»updated»:»2018-10-29T21:42:05.448161+00:00″,»good»:true,»deleted»:false,»banned»:false,»pendingModeration»:false,»anonymous»:false,»negativeVotes»:-462,»audienceLimitation»:null,»editorChoice»:false,»validVerificationsCount»:null,»subscribed»:false,»created»:»2018-10-29T21:42:05.448161+00:00″,»plainText»:»Это легко исправить:\n- вам нужно зайти в папку с фотографиями,\n- сверху на панели инструментов выбрать вкладку \»Вид\»,\n- дальше в поле \»структура\» выбрать один из вариантов: \»огромные значки\», \»крупные значки\», \»обычные значки\» или \»мелкие значки\».\nПри наведении курсора на нужный параметр вы сможете видеть, как меняется размер фотографий. Примерьтесь к тому виду, который удобен вам и кликните по нему.»,»commentsCount»:56,»type»:»answer»,»verifiedExperts»:null,»video»:null,»validVerifications»:null,»invalidVerifications»:null>,»6bb33a05-fc81-4b51-afd5-9855cbf3f85b»:
Для этого проделайте следующие шаги:
1) Перейдите в Дизайн.
2) Нажмите Формат Фона.
3) Выбираем \»Рисунок или текстура\».
4) Чуть ниже нажимаем \»Файл\».
Пошаговую инструкцию в картинках вы можете посмотреть здесь!
Любые макеты для печати в типографии, независимо от способа печати (цифровая, офсетная или широкоформатная), нужно создавать в цветовой модели CMYK.
Цветовая модель RGB подходит только для цифровых баннеров – для сайтов или социальных сетей.
Поэтому, макет лучше изначально делать в CMYK.
Краткие технические требования ко всем макетам:
Показывает только логотип (иконку), после недавнего обновления. У кого была проблема? Может в реестре что-то сбилось с истинного пути?
Источник
Как добавить CSS
Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информация в таблице стилей.
Три способа вставки CSS
Есть три способа вставить таблицу стилей:
- Внешний CSS
- Внутренний CSS
- Встроенный CSS
Внешний CSS
С внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!
Каждая HTML-страница должна содержать ссылку на файл внешней таблицы стилей внутри элемент
Пример
Внешние стили определяются в элементе в разделе
страницы HTML:Это заголовок
Это абзац.