Как называется прозрачная картинка
На этой странице:
Особенности Web-графики
- как не потерять качество изображения;
- как получить файл небольшого объёма.
Эти вопросы особенно актуальны при подготовке графики для Web, ведь посещаемость сайта напрямую зависит от времени загрузки его страниц. Очень хочется сохранить хорошее качество иллюстраций, но “тяжёлая” графика испытывает терпение пользователя и ударяет по его кошельку.
Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается. Пользователь любит быстрое обслуживание и не хочет тратить деньги на просмотр картинок “для настроения”.
Что понимается под объёмом страницы? Конечно, не геометрический размер страницы на экране, а сумма килобайтов, которые нужно загрузить по сети для построения экранного образа. Это размер самого размер картинок, размер файлов со скриптами и стилевыми таблицами.
Основной источник “жировых” отложений — картинки, и к ним нужно относиться с особым вниманием. Отказаться от лишних декораций, шершавых фонов, анимаций, уменьшить геометрические размеры иллюстраций, оптимизировать графику.
Под оптимизацией графики понимается поиск разумного соотношения “килобайтный объём/качество” (небольшой объём при приемлемом качестве изображения).
Старайтесь использовать одну и ту же картинку на разных страницах.
такое украшение обойдётся дешевле: картинка будет загружаться по сети только для первой страницы, а для других — из кеша компьютера.
пользователь, увидев одну и ту же картинку на всех страницах, получит ощущение фирменности дизайна, связанности страниц друг с другом. Пример многократного использования картинок — кнопки навигационной панели. Уместно повторять на каждой странице логотип сайта. При этом на внутренних страницах его нужно делать ссылкой на главную. Инвариантом страниц является и рисованный заголовок сайта.
Известно, что задержка в 1 сек не прерывает ход мыслей пользователя. Задержка более 10 сек раздражает и заставляет заняться другим делом. При задержке более 20 сек, пользователь покидает сайт (как правило, навсегда).
При работе по модему со скоростью 56 Кбит/с задержка в одну секунду возникает при приёме 2-x килобайтного файла. Задержка в 10 секунд — при приёме 34 килобайт. (В этих числах учитывается время соединения с сервером; данные взяты из книги “Веб-дизайн” Якоба Нильсена.)
Отсюда возникло правило: если на странице более 50 килобайт, нужно бить тревогу и принимать срочные меры.
В современном Web скорости существенно возросли, и приемлемым объёмом сегодня можно считать страницы в 100 килобайт.
Один из главных путей оптимизации Web-графики ведёт к выбору графического формата, наиболее подходящего для данной иллюстрации и настройке его параметров при сохранении графического файла.
В Web популярны три графических формата — GIF (файлы с расширением gif ), JPEG (файлы с расширением jpg или jpeg ) и PNG (файлы с расширением png ).
Обычное применение этих графических форматов:
- GIF — для логотипов, надписей, заголовков, рисунков с чёткими цветовыми границами и однотонными заливками (без цветовых растяжек);
- JPEG — для фотографий и сложных по цветовой гамме рисунков с плавными цветовыми переходами;
- PNG — для любых иллюстраций, когда соотношение объём/качество оказывается лучше по сравнению с форматами GIF и JPEG.
Формат GIF
Формат GIF (от англ. Graphics Interchange Format) был разработан в 1987 году (GIF87a) фирмой CompuServe для передачи растровых изображений по сетям. В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации.
Картинки в этом формате поддерживают до 256 цветов. В большинстве случаев этого вполне достаточно для получения хороших иллюстраций, но до фотографического качества им, конечно, далеко.
Файл с картинкой в формате GIF записывается в виде:
Заголовок начинается с текста “GIF89a” — признака GIF-формата, затем указывается ширина, высота картинки и другая информация.
За заголовком следует палитра — 24-битные коды цветов, которые используются в рисунке.
Код самого изображения записывается по строкам в сжатом виде, вместо цвета пиксела указывается номер этого цвета в построенной палитре. Это приводит к существенной экономии килобайтного объёма файла: вместо 24-битного цвета для каждого пиксела указывается 8-битный номер этого цвета в палитре.
Графика в формате GIF не всегда имеет 256-цветную палитру. Можно записывать GIF c цветовыми палитрами, содержащими N = 2 n цветов (n от 1 до 8), то есть с палитрами, состоящими из 2, 4, 8, 16, 32, 64, 128 и 256 цветов.
Такой подход позволяет дополнительно уменьшать размер графического файла, когда цветов в картинке мало. В палитре из 128 цветов для номера достаточно использовать 7 бит, а для двухцветной — всего один бит:
Сжатие N-цветного GIF выполняется без потерь только тогда, когда в исходном изображении использовано не более N цветов. Если цветов больше — потери неизбежны (редактор перед записью изображения в формате GIF сокращает палитру рисунка до N цветов).
Для этой картинки хорошо подходит формат GIF:
А этой иллюстрации формат GIF противопоказан:
Формат GIF обладает тремя дополнительными возможностями.
Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик — нарисовать отдельные кадры, настроить время задержки в последовательности их показа, “зациклить кино” или показывать кадры только по одному разу. Когда анимация готова, она записывается на диск как обычный GIF-файл. Но в этом файле содержится не одна, а целая коллекция GIF-картинок и разная настроечная информация.
Ниже показан анимационный GIF из бесплатной коллекции рисунков Интернета и его покадровый состав.
В HTML-коде нет различия между заданием вывода на экран простого или анимированного GIF-изображения. О том, что картинка “живая”, браузер узнаёт в момент загрузки GIF-файла (с диска или из Сети) и поступает соответственно. Обычные картинки он просто размещает на экране и “забывает” про них. Анимированные ему приходится опекать постоянно, меняя кадры на экране в соответствии с программой, заложенной в самом GIF-файле.
Анимация здорово отвлекает пользователя от восприятия других элементов страницы, поэтому не рекомендуется прокручивать её в бесконечном цикле.
Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в графический редактор и снова записать на диск, указав прозрачные цвета.
Формат JPEG
Формат JPEG (от англ. Joint Photographic Experts Group) был разработан специально для фотографий. Он поддерживает 16 777 216 цветов (2 24 ) и позволяет получать изображения очень высокого качества.
Конечно, высокое качество отражается на размере файла. Но формат JPEG имеет одну особенность: в графическом редакторе при записи на диск можно указать нужную степень качества и, тем самым, сбалансировав качество и размер файла, достичь нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета близкими из оставленного набора, то размер файла существенно сократится, а на глаз такую подмену обнаружить практически невозможно.
При максимальном JPEG-качестве картинка, представленная ниже, занимает на диске 200 килобайт. Уменьшение показателя качества (при записи на диск из редактора) позволило сократить размер графического файла до 27 килобайт без какого-либо визуального ухудшения.
Дальнейшее JPEG-сжатие приводит к очевидной деградации снимка.
Формат JPEG содержит 24-битную информацию о цвете пиксела, но при формировании графического файла используется метод сжатия, при котором часть цветов просто отбрасывается:
Формат JPEG поддерживает режим, похожий на чересстрочную развертку GIF, но деление на части происходит не по строкам, а по специальному алгоритму выделения из картинки полноформатных частей. При этом качество каждой следующей части выше, чем у предыдущей. Формат JPEG с таким свойством называется прогрессивным.
Анимацию, прозрачную графику формат JPEG не поддерживает.
Формат PNG
PNG (от англ. Portable Network Graphics) — растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан в 1995 году, как замена формату GIF. Однако возможности PNG-формата гораздо шире — в нём в какой-то мере соединяются свойства GIF и JPEG.
Формат PNG существует фактически в двух видах. В первом варианте (PNG-8, аналог GIF) можно задавать число цветов в палитре от 2 до 256, во втором (аналог JPEG) — палитра не фиксируется, но сжатие выполняется без потерь.
Первый вариант может привести к потере информации, если число цветов в исходной иллюстрации превышает число цветов, задаваемых пользователем для палитры PNG.
Во втором варианте (PNG-24) формат поддерживает 2 24 (16 777 216) цветов, то есть столько же, сколько формат JPEG.
В силу того, что PNG во втором варианте сохраняет картинку в файл без потерь, формат можно использовать для хранения промежуточных этапов редактирования. JPEG для этой цели не подходит — даже при выборе максимального значения качества происходит потеря информации.
Следует отметить, что лучшим способом хранения оригинального рисунка является собственный формат того редактора, который используется (например, PSD для Photoshop, XAR для Xara). Эти форматы не только сохраняют исходное качество иллюстрации, но и записывают в файл “историю” создания рисунка, что позволяет продолжить редактирование с текущего места или, при необходимости, откатиться назад на несколько последних правок.
PNG и GIF
PNG в первом варианте сжимает графику без потерь как и GIF. При числе цветов близком к 256, PNG сжимает лучше GIF на 5-25%, при малом количестве цветов формат GIF работает лучше.
PNG не поддерживает анимацию, но поддерживает чересстрочную (прогрессивную) развёртку. Прозрачность, которую можно задавать в PNG не поддерживает браузер Internet Explorer версии 6 (в 7-ю версию такая поддержка уже включена).
Прозрачность PNG существенно отличается от аналогичного свойства формата GIF. GIF поддерживает простую бинарную прозрачность (пиксел может быть либо полностью прозрачным, либо абсолютно непрозрачным), PNG предлагает 254 и более уровней частичной прозрачности (поддержка так называемого альфа-канала).
PNG и JPEG
В отличие от JPEG, PNG сжимает без потерь, исходное качество сохраняется, но размер файла, как правило, оказывается больше. Фотографии (и другие иллюстрации с большим числом цветов и плавных переходов) для Web лучше сохранять в формате JPEG.
Примеры
| Иллюстрация | GIF | PNG | JPEG |
|---|---|---|---|
| 248 Б | 343 Б (+27%) | 1 200 Б | |
| 10 978 Б | 9 697 Б (-12%) | 20 000 Б | |
| 17 KБ (плохое качество) | 12 KБ | 8 KБ |
Делаем прозрачный фон изображения. 3 разных способа.
Разрабатывая макет полиграфии или верстая сайт, может потребоваться некоторые участки изображения сделать прозрачными. Например, для того, чтобы фон фотографии совпадал с фоном макета или углы изображения не перекрывали текст.
Прозрачный фон изображения позволяет делать красивое обтекание текста по форме предмета. Этот прием сокращает пустое пространство и улучшает вид верстки.
Такие векторные редакторы как CorelDRAW и Illustrator могут скрывать часть изображения с помощью контурной маски, это быстрый и простой метод сделать прозрачный фон, если форма предмета простая.
Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.
В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.
Вырезание объекта в фотошопе
Чтобы сделать прозрачный фон, необходимо вырезать предмет, а фон удалить. В зависимости от формы предмета, выберите тот способ выделения, который будет удобен в данной ситуации.
Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.
Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение «Растушевки». Значение размытия сработает ко всему выделению.
Однако, бывают редкие ситуации, когда только часть предмета имеет размытый край или отсутствие фокусировки. В таком случае, необходимо комбинировать несколько способов выделения.
Для примера, я специально выбрал более сложное изображение с разной степенью фокусировки, соответственно с разной четкостью границ.
Основной предмет с высокой четкостью границ можно выделить обычным инструментом «Лассо», а нечеткие края — мягкой кистью в режиме «Быстрой маски» (Quick Mask — Клавиша Q), как показано на снимке ниже.
Преимущество этого метода заключается в том, что вы можете менять жесткость краем меняя жесткость кисти в процессе рисования. Но есть и недостаток: выделение кистью не такое точное как лассо. Но это не единственный способ получить выделение с разной четкостью границ.
Добавление к выделению нечетких областей
А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите — Select/Save Selection.
Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши — Feather. (Растушевка. ) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.
Теперь, нажмите — Select/Load Selection. Выберите пункт — Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.
Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.
Форматы поддерживающие прозрачный фон
После того, как вы удалили фон, необходимо сохранить изображение в формате поддерживающем прозрачность.
PSD — самый первый из них. Он легко читается во всех редакторах Adobe и не только. Он содержит всю информацию о слоях эффектах и т.д. поэтому, как правило, имеет большой вес.
Tiff — формат похожий по свойствам с предыдущим. Тоже может содержать прозрачные области. Из-за высокого качества, часто используется в полиграфии.
PNG — имеет относительно не большой вес и позволяет сохранять качество изображения. Чаще всего используется в веб-дизайне. Баннера, кнопки сайтов, графические элементы веб-страницы часто содержат этот формат.
Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения.
Отсечение фона маской
Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.
Если предмет имеет простую форму (круг, прямоугольник, треугольник и т.д.) применение маски может сэкономить время и силы на обработке изображения. При более сложной форме предмета лучше использовать фотошоп и формат изображения поддерживающий прозрачность.
Еще один недостаток этого метода состоит в том, что маской невозможно частично размыть края предмета, в отличие от обработки в фотошопе.
Clipping Mask в Adobe Illustrator
Разместите изображение в редакторе Illustrator и обрисуйте контуром предмет. Затем выделите изображение и контур вместе и нажмите правой кнопкой мыши — Обтравочная маска (Make Clipping Mask). Часть изображения за пределами контура скроется.
После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.
PowerClip в CorelDRAW
В CorelDRAW есть такой же прием, однако работает он немного иначе. Также нужно обрисовать предмет контуром, а затем, выделить изображение и нажать — Effects/PowerClip/Place inside Frame. Вместо указателя появится стрелка, которой нужно показать контур.
Контур в CorelDRAW также можно редактировать после создание маски.
Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.
3. Прозрачность режимом наложения
Что делать, если фон фотографии, как и фон макета уже белый, но углы изображения перекрывают важные детали макета. В таком случае, можно применить режим наложения. Применение этого режима к изображению будет достаточно, чтобы белый угол не залезал на изображение.
Этот способ позволяет получить прозрачный фон одним нажатием кнопки, совершенно ничего не выделяя и не вырезая.
В Illustrator нужно открыть панель прозрачностей — Window/Transparency. А затем выбрать режим — Multiply (Умножение).
В CorelDRAW возьмите инструмент — Transparency.
В панели параметров инструмента настройте так, как показано на скриншоте ниже:
Использовать этот режим нужно аккуратно, у него есть и свои недостатки. Хорошо работать он будет только на белом фоне, а сам предмет тоже станет прозрачным при наложении на текст или на другие изображения.
Видео урок: прозрачный фон
Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:
Как называются картинки СОВСЕМ без фона?
Как называются картинки СОВСЕМ без фона? Главное слово — совсем. Нужно, чтобы изображение было не на белом фоне, а вообще отдельно от него.
Очень важно знать, нужно для работы. Заранее спасибо.
Лучший ответ
картинки PNG формат
Остальные ответы
в графическом редакторе (практически любой) удаляешь фон и сохраняешь в формате gif или png (у png качество намного выше). . пример сохраненного файла: рисунок. png
Такое можно делать в GIF, PNG и ICO формате. При сохранении картинки указать «прозрачный» цвет.
нет отдельного названия. форматы поддерживающие альфаканал (прозрачность) png, gif, tiff, ..
клипарт называеться!
transparent
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Как называются картинки без заднего фона для фотошопа и презентаций
Иногда так необходимо найти иллюстрацию, которая будет обособленной и отделенной от посторонних предметов.
Как называется изображение без фона, как называются вырезанные картинки, которые можно использовать в фотошопе и других графических программах? Где их можно скачать бесплатно в огромном количестве и на разные темы?
Картинки без фона, с вырезанным контуром, называются – изображениями PNG. Следует учитывать, что PNG – это всего лишь формат, в котором сохранен рисунок.
Название файла по типу: имя файла.png – означает, что картинка может быть вырезана по контуру и сохранена без фона. Но, отсутствие заднего плана вовсе не гарантированно, ведь и самая обычная фотография может быть сохранена в этом формате.
Как найти картинку без белого фона – где скачать подобное изображение
Как уже было написано ранее, так называемую картинку без заднего плана – можно найти по параметру «PNG». Сделать это можно в любой поисковой системе, добавив к запросу «PNG».
Разумеется, в выдаче будут присутствовать и классические иллюстрации в формате JPG, вне зависимости от уточнений вашего запроса.
Для тех, кто хочет создать более профессиональный файл и кому требуется четкая и качественная картинка без фона – рекомендуем базу иллюстраций и изображений в разных форматах – freepick.com
Указав значение «вектор» — в выдачу выйдут только те картинки, которые не будут иметь заднего фона.
Для открытия файла потребуется программа Corel Draw или Adobe Illustrator. Исключительно из этих программ возможно осуществить сохранение картинки без фона или ее элементов в формате PNG.
Для тех, у кого нет подобного софта, легче всего обратиться за поиском png файла без заднего фона – в поиск Яндекса или Гугла, раздел «изображения».
Как самому удалить фон у изображения
Не удается найти подходящую иллюстрацию без заднего фона? Попробуйте его удалить самостоятельно с той фотографии, которая вам максимально подходит.
Сделать это можно в фотошопе, при помощи инструмента «фоновый ластик». При хорошем контрасте изображений первого и второго плана, удаление заднего фона – получится максимально четким.
Если вы не понимаете, как называется картинка без заднего фона, или все способы поиска иллюстрации по контуру испробованы, а результата нет – советуем вам обратиться к сотрудникам специального сервиса. За небольшую плату, более опытные юзеры без труда найдут необходимую вам картинку без фона и по заданным параметрам. Самое выгодное предложение можно найти тут.