Как сделать пнг картинку в фотошопе (PNG в Adobe Photoshop)?
Иногда нужно загрузить изображение, содержащее прозрачные элементы, сквозь которые будет проглядывать первоначальный фон. В этих случаях, было бы удобно загрузить PNG изображения, поскольку они способны сохранять прозрачность.
В этой статье мы расскажем, как сделать картинку в формате PNG в Фотошопе.
Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл» (File) вверху страницы выберите «Создать» (New).
Затем в появившемся окне «Новый документ» (New Document) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб). А также, что вы выбрали значение «Прозрачный» (Transparent) в выпадающем списке «Содержимое фона» (Background Contents).
Перед тем, как сделать PNG в фотошопе, нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:
После того, как вы задали значения параметров, нажмите «OK», чтобы открыть новый документ.
Затем в панели «Слои» (Layers) убедитесь, что работаете на прозрачном слое, а не на фоновом:
После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop, в меню «Файл» (File) вы можете использовать один из возможных вариантов:
Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе, который вышел раньше CC 2015. В этих версиях используют метод «Сохранить для Web» (Save for Web & Devices), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл» (File), и далее – «Сохранить для Web» (Save for Web & Devices):
Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность» (Transparency) и «Преобразовать в sRGB» (Convert to sRGB). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB, рекомендованное цветовое пространство для веб.
Поля «Размер изображения» (Image Size) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.
Чтобы сохранить изображение, нажмите кнопку «Сохранить» (Save) внизу окна.
Перед тем, как сделать прозрачность фото в Фотошопе, нужно знать, что с версии CC 2015 опция «Сохранить для Web» (Save for Web & Devices) в меню «Файл» (File) помечена как Legacy (устаревшая). И замещена на новую опцию «Экспорт» (Export), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт», нажмите меню «Файл» (File), а затем — «Экспортировать как» (Export As).
Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web» (Save for Web & Devices) в Photoshop CC 2015, и она доступна через меню Файл > Экспорт (File > Export) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac) или Ctrl+Alt+Shift+S (для ПК):
Затем в появившемся окне выберите PNG из выпадающего меню «Формат» (Format) и убедитесь, что выбраны опции «Прозрачность» (Transparency) и «Преобразовать в sRGB» (Convert to sRGB).
Поля «Размер изображения» (Image Size) и «Размер холста» (Canvas Size) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе:
Когда закончите, нажмите «Экспортировать все» (Export All).
Данная публикация является переводом статьи «How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?» , подготовленная редакцией проекта.
Как сделать фон прозрачным (photoshop)
Когда работаешь над дизайном сайтов, часто приходится сталкиваться с тем, что найденное изображение, которое идеально бы подходило к твоему сайту, имеет другой фон, который желательно бы убрать.
И так, открываем нашу картинку в фотошопе.
1. Первое, что нужно сделать — создать у картинки рабочую область с прозрачным фоном. Для этого:
— в окошке слоёв кликаем два раза на наш слой (с замочком)
— В повившемся окошке нажимаем ОК
Замочек должен исчезнуть
2. Далее…
Если фон однотонный:
Выбираем инструмент «Волшебная палочка» — это очень гибкий инструмент для выделения нужной области. Наша задача выделить весь фон, кроме рисунка. Для этого подгоняем настройки волшебной палочки (параметр допуск), пока не получим нужный результат. Так-же пользуемся клавишей Shift, чтобы выделить область помимо уже выделенной. Нажимаем Del и выделенная облась удаляется.
Если фон разноцветный:
Используем инструмент «Быстрое выделение«. Тут наша задача выделить не фон, а сам объект, который должен остаться. Нажимаем до тех пор, пока не выделится нужная область. Если выделилось лишнее, зажимаем Alt и минусуем облась. Посмотреть результат можно клавишей Q.
Когда выделение готово, копируем его Ctrl+C. Создаем новый документ с прозрачным фоном (Ctrl+N) и вставляем туда объект Ctrl+V.
3. Если на рисунке осталось что-то лишнее, используем инструмент «Ластик«, просто затираем лишний фон.
4. Сохраняем изображение для Web (Alt+Shift+Ctrl+S) выбираем формат GIF либо PNG (в других наш прозрачный фон превратится в белый).
Полезное видео в тему:
Копирование PNG с прозрачностью из браузера показывает черный фон
Таким образом, я сыт по горло этим раздражением и сделал обходной путь.
Есть две части к этому:
- Крошечная утилита, которую я написал, чтобы сохранить изображение буфера обмена в файл .v::DoPhotoshopPaste()
#IfWinActive
Создание png. Как сконвертировать изображения в PNG-формат? Как сделать прозрачный фон у картинки
Главное нужно указать картинку на вашем компьютере или телефоне, а затем нажать кнопку ОК внизу этой страницы. По умолчанию однотонный фон картинки заменяется на прозрачный. Цвет фона исходной картинки определяется автоматически, нужно лишь указать в настройках, на какой цвет его заменять. Основным параметром, влияющим на качество замены, является «Интенсивность замены» и для каждой картинки она может быть разной.
Пример фотографии розовой розы без изменений и после замены однотонного фона на прозрачный, белый и зелёный:
Первый пример с цветком розы на прозрачном фоне сделан с такими настройками:
1) Интенсивность замены — 38;
2) Сглаживание по краям — 5;
4) Обрезка (0) по краям — «-70»;
5) Инвертировать — отключено (галка не стоит).Для создания второго примера , с белым фоном, использовались такие же настройки, как и в первом примере, кроме параметра: «Заменить однотонный фон на» — белый. В третьем примере , с зелёным фоном, также использованы настройки, как и в первом примере, кроме параметра: «цвет в формате hex» — #245a2d.
Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка с прозрачным или указанным вами фоном.
Сегодня я решил отойти немного от темы кодинга и рассказать чуточку об оформлении. Хотя оформление играет не малую роль в создании сайта, я с детства не дружу с рисованием, графикой и дизайном. Поэтому ищу изображения для своих постов, как и многие блогеры, где-то на просторах интернета, используя бесплатные фотобанки и фотостоки .
И вот, бывает попадается очень подходящая картинка для вашего поста и всё бы хорошо… Но фон картинки не подходит под фон блога или блока с текстом. Явно ни у одного меня такая проблема и ни у одного меня фон не белый, который подходил бы в большинстве случаев. Мне нужен прозрачный фон !
В интернете я не нашел нормальных идей как сделать прозрачный фон для готовой картинки, поэтому начал сам экспериментировать и нашел более менее подходящее решение!
Как сделать прозрачный фон у картинки
Возьмём в пример одну простую картинку в формате.jpg (вообще формат не важен особо):
Здесь есть белый фон, от которого я хочу избавиться и вместо него сделать прозрачный фон. В этом нам поможет Pixlr — онлайновое подобие фотошопа.
Загружаем наше изображение. Справа в окошке «Слои» появится слой «Фоновый», на котором замочек (не дает удалять фон картинки).
Два раза кликнув левой кнопкой мыши по этому замочку, вы сможете снять блокировку с фона. Вместо замочка появится галочка.
Теперь берем волшебную палочку (панель инструментов, правый столбец вторая кнопка сверху), указываем следующие параметры:
Теперь удаляем фон нажатием кнопочки «Delete» и получаем нужное нам изображение с прозрачным фоном.
Приветствую Вас, дорогие читатели моего блога!
Недавно мне понадобилось убрать фон с картинки, с фотошопом я не дружу особо. И скажу Вам, что у меня его даже нет на компьютере. (Ну правильно вообще то, зачем мне то, с чем я не умею работать).
Но фон с картинки надо было как то убрать, я начала бороздить просторы интернета, в поисках решения своей задачи. Вариантов очень много на самом деле, но я искала, что нибудь полегче)). Я нашла очень легкий и простой способ, как можно убрать фон с картинки.
И так, давайте приступим. Нам понадобиться фотошоп, но так, как у меня его нет. Я использую онлайн фотошоп. Очень удобная штука, я Вам скажу. И конечно же картинка фон которой мы хотим сделать прозрачным.
Покажу Вам на примере, вот такой картинки, убирать мы будем белый фон
Заходим в онлайн фотошоп. Я использовала вот этот PIXLR
Выбираем: Загрузить изображение с компьютера.
Теперь справа в окошке «СЛОИ» надо открыть замочек
Кликаем на него 2 раза левой кнопкой мыши, должна появиться галочка в квадратике.
Теперь идем на панели, которая находиться слева, выбираем инструмент «волшебная палочка» и толерантность ставим 21.
Вот вроде бы и все, но меня не устраивает полностью картинка, остались еще остатки фона, я снова кликаю на то место которое хочу убрать. Потом «редактировать»—-«очистить». И так пока не уберете все, что надо.
PNG – один из наиболее распространенных форматов хранения графической информации. Использование PNG позволяет сохранить высокое качество растровых изображений, так как этот формат сжимает данные без потерь. Кроме того, PNG позволяет менять допустимую степень прозрачности пикселей изображения, так что если вы захотите создать коллаж из нескольких фотографий или вставить картинку в уже имеющееся прозрачное изображение, смело выбирайте этот формат. Неудивительно, что PNG так популярен среди дизайнеров и просто творческих людей.
Что же делать, если вам понадобилось преобразовать фото или изображение в PSD в формат PNG? Эту задачу легко выполнить с помощью Movavi Конвертера Видео! Программа работает с большим количеством видеоформатов и, кроме того, позволяет быстро поменять формат картинок или уменьшить их размер, чтобы вы могли просто перенести их на свой «Андроид» или любой другой телефон. Нет необходимости скачивать специальный конвертер – вам нужно только установить Movavi Конвертер Видео на русском языке.
Следуйте пошаговой инструкции ниже и вы узнаете, как изменить формат изображений на PNG без каких-либо проблем.
1. Скачайте конвертер PNG-файлов и установите его
Скачайте и запустите установочный файл программы. Следуйте инструкциям на экране, чтобы установить программу на компьютер.
2. Добавьте изображение, которое нужно конвертировать в PNG
Нажмите кнопку Добавить файлы в верхней части окна программы, кликните по опции Добавить изображения и выберите фотографии, которые хотите переделать в PNG. Поддержка пакетной конвертации позволяет выбрать сразу несколько файлов.
3. Выберите формат
В нижней части окна выберите вкладку Изображения и укажите PNG в качестве формата, в который вы хотите перевести файлы.
4. Укажите папку и приступайте к конвертации
Укажите папку для сохранения файлов, кликнув по соответствующей иконке, и нажмите Старт , чтобы начать преобразование в PNG. После окончания конвертации откроется папка с готовыми PNG-файлами.
Для того, чтобы создать прозрачное изображение в формате PNG с помощью бесплатного онлайн сервиса сайт необходимо сначала подготовить изображение. В качестве изображения желательно использовать картинки в форматах PNG или GIF, так как формат JPEG может вносить небольшие искажения в изображение на границе перехода цветов, что помешает сделать качественную заготовку для будущего водяного знака.
Затем необходимо закрасить область, которая должна стать невидимой, каким нибудь цветом, желательно отсутствующим на остальном изображении. Это необходимо для того, чтобы четко разделить видимую и невидимую часть изображения. Если этого не сделать, может получиться так, что невидимой станет и та часть изображения, для которой это не желательно. Ниже приведен пример подготовленного для обработки изображения. Красным цветом выделена та область на изображении, которая будет сделана прозрачной.
Затем следует выбрать в главном меню сайта сайт пункт «Сервисы » и перейти на подпункт «Создание прозрачного изображения в формате PNG «. На открывшейся странице выбираем подготовленный нами ранее файл и нажимаем кнопку «Следующий шаг».
Изображение будет загружено на сервер и на следующей странице нам будет предоставлена возможность мышкой выбрать цвет, который необходимо сделать прозрачным.
Клацнув мышкой в нужном месте картинки, мы попадаем на страницу результатов обработки изображения. Теперь необходимо клацнуть правой кнопкой мышки на обработанном изображении, выбрать пункт меню «Сохранить рисунок как…» и сохранить полученное изображение на компьютер.
Растровый формат 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).
Gif, Png или Jpg — форматы растровой графики для веба, их плюсы и минусы при использовании на сайте
Главная / Как устроены сайты19 января 2021
- Растровая графика для веба в лице Гиф, Джейпег и Пнг
- Формат Gif — элементы дизайна и анимация для сайта
- Gif-анимация и ее использование
- Поддержка прозрачного фона
- Какую графику лучше сохранять в Гиф?
- Jpg — полноцветные изображения с малым весом
- Плюсы и минусы Джейпег
- Какие изображения лучше сохранять в формате Jpg (JPEG)?
- Png — замена Gif и Jpeg, а так же прозрачный фон
- Png8 и Png24 — альтернатива Gif и Jpeg
- Png 32 — полноценная прозрачность с альфа каналом
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить про форматы растровой графики, которые было уместно применять для картинок выводимых на сайте, да и вообще.
Мы рассмотрим Gif, который популярен сейчас именно из-за поддержки им гиф анимации, Jpg, который очень хорошо подходит для вставки полноцветных фотографий и, конечно же, Png, который позволяет создавать картинки с прозрачным фоном и может служить отличной заменой упомянутых ранее форматов. Так же можете почитать про наполовину графический, а наполовину текстовый формат djvu.
Все они активно используются в современной верстке сайтов, но тонкость заключается в том, чтобы выбрать оптимальный формат для каждого конкретного случая, чтобы и качество изображения не пострадало, и его вес был бы минимальным. Саму графику я советую брать с бесплатных сервисов на подобии IconFinder, Freepik, PSDGraphics и других подобных, чтобы потом не было бы проблем с нарушением авторского права.
Растровая графика для веба в лице Гиф, Джейпег и Пнг
Сейчас очень трудно представить веб-сайты и отдельных веб-страниц совсем без наличия на них каких-либо фотографий, значков или картинок. Кстати, первым браузером, который мог показывать графику, стал Mosaic (мозаика), появившийся практически одновременно с появлением языка гипертекстовой разметки Html.
Причем, как я уже упомянул выше, для добавления на сайт подойдут не все форматы изображений, а только определенные, максимально под это заточенные — Gif, Png и Jpg. В зависимости от типа картинки, которую вы хотите добавить на веб страницу, вам и нужно будет выбирать один из упомянутых форматов, которые, в свою очередь, относятся к так называемой растровой графике.
Сама по себе она подразумевает, что изображение на бумаге или мониторе будет формироваться из так называемых единичных элементов называемых пикселями (точек цветов). Все картинки любого формата, относящегося к растровой графике, обладают некоторыми свойствами.
Размер картинки у них определяется таким понятием, как разрешение, которое представляет из себя размер изображения в пикселах по горизонтали и вертикали, например, 300 на 200. Иногда, правда, говорят об общем количестве пикселей в картинке, например, производители фотоаппаратов (12 Мега пикселей и т.п.).
Применительно к вебу, физический размер растровой картинки может существенно зависеть от величины пикселя (зерна экрана) того устройства, на котором пользователь осуществляет просмотр веб страницы. Изображения так же характеризуются таким понятием, как количество цветов используемых в нем. Например, для Gif используется всего лишь 256 цветов, которые задаются в одном байте информации.
Ну, и кроме этого в этих форматах могут использоваться различные цветовые модели, при помощи которых формируются все возможные оттенки. Когда мы рассматривали с вами написание кодов цветов в Html, то там довольно подробно рассмотрели принципы формирования модели RGB.
Одним из основных недостатков растровой графики является большой размер результирующих картинок, даже в форматах Gif, Png и Jpg, которые используется в вебе. Естественно, что для уменьшения результирующих изображений используются различные алгоритмы сжатия, которые работают как с ухудшением качества (сжатие с потерями), так и без оного.
Все это очень похоже на принципы работы алгоритмов сжатия аудио — MP3 сжимает с потерями, причем, в первую очередь удаляются всякие переходы, которые скорее всего не будут восприниматься ухом человека. Такой аналогией в мире растровой графики может служить формат Jpg, сжатие информации в котором осуществляется с потерями. При этом учитываются возможности визуального восприятия человека и, в первую очередь, удаляются те детали, которые будут особо и не заметны.
Но существуют и алгоритмы сжатия картинок без потерь — BMP, Gif и Png. BMP чаще всего представляет из себя не сжатое изображение, а вот Gif и Png сжимаются без потерь за счет удаления повторяющейся и избыточной информации (получается что-то на вроде архивирования, но учитывающего особенности растровой графики).
Существует множество графических редакторов, которые умеют работать с растровой графикой (например, все тот же фотошоп или его онлайновый аналог Pixlr), но для подготовки графики для веба следует использовать ориентированные именно на это редакторы, ибо только тогда вы сможете получить максимально оптимизированные картинки, которые затем не будут создавать излишней нагрузки на сервер вашего хостинга при их загрузке в браузеры пользователей.
Формат Gif — элементы дизайна и анимация для сайта
На данный момент практически все браузеры поддерживают три основных формата растровой графики используемых для веба — Gif, Png и Jpg. Исторически первым появился Гиф и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию, которая в первую очередь выражалась в так называемой Гиф анимации.
Аббревиатура Gif расшифровывается, как Graphics Interchange Format — формат графического обмена. Произносится как гиф, но разработчики стандарта считали, что правильно его называть джиф, но прижилось другое название в русской интерпретации.
Т.к. он был разработан давно, а скорость интернета у большинства пользователей в то время была, ох какой малой, то и при его создании делали основной упор на максимальное уменьшение размера результирующей картинки (писал об этом в статье про программу для просмотра изображений от FastStone или от Гугла под названием Picasa).
В связи с этим, Gif может в себя включать палитру, состоящую всего лишь из 256 цветов (ее так же еще называют индексированной палитрой). Т.е. изображение, преобразованное в этот формат всегда будет содержать не более чем 256 оттенков, а все остальные цвета будут создаваться на основе подмешивания (хитрым образом подбираются соседние пикселы из базовой палитры, чтобы человеческий глаз на отдалении воспринимал бы их как нужный в этом месте цвет).
Но, к сожалению, на практике, при преобразовании полноцветных фотографий в Гиф, вылазит куча артефактов (из-за этого самого подмешивания), которые делают фотографии неприемлемым для выкладывания в вебе. Поэтому для вывода на страницы сайта полноцветных картинок и фото он не используется (для этого чаще всего выбирают Jpg или Png).
Gif-анимация и ее использование в интернете
Обладая таким существенным недостатком, Gif уже давно должен был бы кануть в лету, но он, однако, по-прежнему живее всех живых, и часто изображения в этом формате можно встретить на страницах сайтов.
Тут вся заковыка в том, что формат Гиф поддерживает анимацию (единственный из всех используемых в вебе). Всякие анимированные смайлики и аватарки (в том числе и граватары), которые вы в большом количестве можете встретить в интернете, имеют расширение Гиф.
Правда, какое-то время уже развивается альтернативный ему формат Mng, добавляющий возможность анимации в Png, но его развитие и распространение идет не слишком высокими темпами. Поэтому, если не брать в расчет флеш технологию, вся анимация в вебе создается на базе Gif и флеша.
Суть этой анимации заключается в том, что в контейнере Гиф находится не одна картинка, а сразу несколько и там же прописано время, через которые эти изображения будут сменять друг друга. При этом можно будет зациклить анимацию, когда за последним кадром будет опять начинаться показ первого.
Есть специализированные редакторы, в которых можно создавать Gif анимацию. Главное создать нужное количество картинок определенного размера, а потом они размещаются на временной шкале и задается интервал для их смены.
В результате получает тот самый эффект мультика, который мы уже привыкли наблюдать на веб страницах. Иногда даже в глазах рябит от анимированных баннеров (читайте про то, как сделать баннер онлайн), смайликов, аватаров. Примером Гиф анимации может служить гоблин со страницы «О блоге» моего проекта.
Гиф поддерживает прозрачный фон (почти)
Но анимация — это не единственная фишка этого формата. Он может так же поддерживать примитивный способ формирования прозрачности для создаваемых изображений. Один из 256 возможных цветов в Gif задается как прозрачный и сквозь него будет просвечивать фон веб страницы, на которой будет расположена эта картинка.
Но проблема состоит в том, что для любого пиксела в изображении этого формата возможно лишь два значения — прозрачный или непрозрачный (два крайних состояния без возможности промежуточных вариантов типа полупрозрачный, на четверть прозрачный и т.п.). Т.е. о таком понятии, как альфа-канал (используемого в Png), в прозрачном Gif речи не идет. Из-за этого возникают сложности с отображением плавно изменяющего уровня прозрачности.
Но все равно прозрачный Гиф находит применение в вебе. Например, в таком формате очень часто сохраняют различные маркеры, используемые на веб страницах. Фон вокруг маркера делается прозрачным и сквозь него будет просвечивать фон веб страницы. Например, вот так бы выглядел маркер с серым фоном:
А так этот же маркер будет выглядеть при замене серого фона на прозрачный цвет при сохранении в Гиф:
Для того, чтобы сформировать плавные края с падением прозрачности в картинках Gif, идут на одну хитрость. В любом графическом редакторе при создании изображения в этом формате, у вас будет возможность указать так называемый цвет MATE (иначе будет в качестве него использоваться цвет по умолчанию, обычно белый).
Цвет MATE подмешивается в те области Гифа, где вам требуется создать плавные края с падением прозрачности, но все это будет хорошо смотреться только для того фона веб страницы, который совпадает с указанным вами MATE. А вот поверх другого оттенка эта картинка будет выглядеть очень не здорово.
Для какой веб-графики имеет смысл использовать формат Gif?
Как я уже упоминал чуть выше, в этом формате рисунки сжимаются (преобразуются) без потерь, но только в том случае, если исходная картинка была 8-ми битной (для кодирования цвета отводился всего лишь один байт), т.е. содержало 256 цветов. Если же исходник был полноцветным, то будет ухудшение качества при сохранении или преобразовании в Gif, именно в силу потери части оттенков.
Алгоритм сжатия (преобразования) в Гифе работает таким образом, что лучше всего он будет оптимизировать размер фото при вертикальном изменении цвета (градиенте). Т.е. имеет смысл его использовать для сжатия картинок, цвет в строках которых сильно не меняется.
А вот при преобразовании в Gif фото с горизонтальным или наклонным градиентом, итоговая картинка может получиться очень большого размера, например, по сравнению все с тем же Png. Ну, а кроме этого возможно вылезание неприятных артефактов.
Кроме этого, данный алгоритм сжатия был в свое время запатентован, и именно поэтому началась усиленная работа над альтернативным Png 8, но на данный момент сроки патентов Gif уже истекли. ПНГ получился в итоге на голову лучше Гифа и продолжает набирать популярность среди вебмастеров.
Jpg (JPEG) — полноцветные изображения с малым весом
Jpg был разработан для сжатия и хранения полноцветных фотографий. Он является собственностью ассоциации американских фотографов, о чем, собственно, и говорит аббревиатура Jpeg — Joint Photographic Experts Group. Хотя сама же эта ассоциация говорит, что это открытый формат.
Как я уже упоминал чуть выше, он сжимает изображения с потерей качества. Вся картинка делится на квадраты размером 8 на 8 пикселей и затем начинает работать алгоритм сжатия, который группирует из этих простейших квадратиков разные простые фигуры. Все те различия в цветах, которые человеческий глаз заметить не в состоянии, из картинки в Jpg удаляются.
Плюсы и минусы Джейпег
Благодаря удалению части информации, которая все равно не будет заметна невооруженным взглядом, Jpeg позволяет иногда сжать полноцветные картинки в десятки раз даже без видимой потери в качестве.
Но, с другой стороны, даже при выборе максимального качества у вас не получится сохранить фотографию в этом формате с абсолютно тем же качеством, что имел оригинал. Потери будут обязательно, но не всегда заметные глазом без увеличения.
Вы можете проверить это сами, взяв какую-нибудь очень качественную фотография и сохранив ее в Джейпег с максимальным качеством несколько десятков раз подряд. Поэтому лучше не сохранять повторно в Jpg исходники такого же формата — будут серьезные потери в качестве из-за накапливания и накладывания артефактов. Поэтому не стоит сохранять незаконченное изображение в JPEG, а затем продолжать его редактирование — существенно потеряете в качестве.
Вот пример такого издевательства (всего несколько повторных сохранений в формате Джепег и на картинку без слез не взглянешь):
Но несмотря на указанные недостатки Jpeg стал очень популярным особенно после появления цифровой фотографии. Основные его достоинства — это возможность быстрого, нересурсозатратного и очень сильного сжатия полноцветных изображений. Правда, этот формат растровой графики назвать полноцветным трудно, т.к. он не совсем охватывает всю палитру RGB, но это можно отнести к несущественным недостаткам.
Какие изображения лучше сохранять в формате Jpg?
Jpg лучше всего подходит для сохранения фотографий с плавными переходами яркости и контраста, а вот для сохранения чего-то вроде чертежей, текстов и других фотографий с резкими контрастными переходами он подходит очень плохо, и в этом случае лучшим вариантом будет использование сжатия без потерь в Png.
Смотрите, как неприглядно выгладит скриншот текста в формате JPEG (хотя при таком же и даже меньшем весе в формате PNG картинку вообще было бы не отличить от оригинала):
У Jpg (JPEG), как я уже упоминал, есть возможность задать качество получаемого изображения, регулируя степень его сжатия. При сохранении фото, на которых, например, много неба, следует ставить качество (степень сжатия) Jpeg близкое к максимальному (минимальное сжатие) во избежании заметных артефактов на этом самом небе.
А при сохранении фотографий с множеством деталей разных цветов качество можно понизить (увеличить степень сжатия), не боясь появления заметных артефактов.
Я упоминал, что при сохранении в Jpg (JPEG) происходит разбиение всего изображения на квадратики со стороной в восемь пикселей. Так вот, если у вас будет возможность выбирать размер результирующего фото, то лучше его брать кратным восьми, т.к. в этом случае вы получите чуть меньше артефактов, что будет особенно заметно на картинках с тонкими линиями и т.п.
Png — замена Gif и Jpeg, а так же прозрачный фон в Png32
Изначально Png разрабатывался как альтернатива проприетарного в то время Gif (к его разработке не подпускали никого со стороны). Расшифровывается аббревиатура как «portable network graphics», изначально он был заточен именно для применения в вебе. Этот формат растровой графики полностью открытый и его описание есть на сайте консорциума W3C.
Напомню, что он является форматом сжатия без потерь, а значит можно спокойно сохранять незаконченное изображение в Png, а затем продолжать его редактирование не боясь получить дополнительные артефакты, как это было в случае Jpg.
Png8 и Png24 — полноценная замена Gif и Jpeg
Существует три вариации формата Пнг, каждая из которых призвана выполнять свои задачи. Первые две изначально создавались как альтернатива уже существующих форматов Гиф и Джейпег, а третий привнес в веб-графику то, чего в ней до тех пор вообще не было. Но обо всем по порядку.
Png 8 — восьмерка обозначает битность цвета и говорит о том, что при сохранении фотографии в Пнг 8 будет использоваться только 256 цветов по аналогии с уже описанным чуть выше Gif.
Т.е. он разрабатывался как полноценная замена Гифа и результаты сжатия изображений в этих двух форматах растровой графики будут практически идентичными. Так же как и в Gif — тут поддерживается прозрачность, но уже с альфа-каналом.
Png 24 — цифра 24 означает, что на каждый пиксел фото в этом формате выделяется три цветовых канала по 8 бит каждый (по 1 байту), тем самым реализуется полноцветное формирование изображения. Т.о. с помощью Пнг 24 вы сможете передавать цвета без искажений. Даже Jpg не может этого сделать на все сто процентов.
Сохраняя исходную картинку в Png 24 вы получаете абсолютно точно такое же фото, но зато его размер будет все же больше, чем при использовании Jpeg. Но это, правда, не всегда так. При больших картинках, имеющих резкие переходы, этот формат может показать даже лучший результат, чем Джипег приемлемого качества.
Т.е. как я уже упоминал чуть выше, для обычных фоток лучше всего подойдет Jpeg, а вот для изображений с текстом или там, где ни в коем случае нельзя будет ухудшать качество, Png 24 будет незаменим. Для сохранения скриншотов, которые я использую в статьях, Пнг 8 или 24 мне кажутся оптимальным решением.
Например, тот же самый скриншот с текстом, который чуть выше вы могли видеть сохраненным в Jpeg (правда с низким качеством, чтобы подчеркнуть возможные артефакты) в Png будет выглядеть так:
А вот полноцветную картинку вначале каждой статьи я сохраняю обычно в Джипеге, т.к. соотношение качество/размер говорят в пользу именно такого варианта. Сразу скажу, что существуют разные способы сжатия изображений в формат Png, и один из лучших алгоритмов используется, на мой взгляд, в онлайн сервисе Puny Png.
Я прогнал через него все имеющиеся на блоге изображения и регулярно прогоняю все новые картинки в формате Png, используемые для новых статей. О том, как сжать в нем все свои Png картинки, вы можете прочитать здесь — сервис для сжатия фото.
Png 32 — полноценная прозрачность с альфа каналом
Наверное, вы поняли по аналогии, что в этом формате растровой графики для одного пикселя возможно использовать аж четыре байта информации.
Три отвечают за формирование полноцветного изображения по аналогии с Пнг 24, а вот четвертый байт выделяется отдельно для формирования альфа-канала, позволяющего использовать Пнг 32 для получения картинок с прозрачным фоном.
В нем вы сможете указывать изменение степени прозрачности без всяких MATE цветов, а значит такие картинки будут одинаково хорошо смотреться на абсолютно любых веб страницах с любым фоном. Примером такого изображения может служить логотип из шапки моего блога:
или иконка RSS ленты:
Наверное, понятно, что Png 32 просто незаменим и не имеет аналогов по предоставляемых возможностям. Кстати говоря, альфа канал можно использовать так же и в Пнг 8, но, к сожалению, не все редакторы растровой графики позволят вам это сделать. Фотошоп, например, этого делать не умеет, но зато Fireworks или Gimp умеют.
Кроме этого, у Пнг 32 и 8 с альфа-каналом есть такая проблема, что он в браузере IE, начиная с версии 6 и ниже, не поддерживается полноценно, и вместо прозрачного фона будет подмешиваться серый цвет, а Png 8 с альфа-каналом там вообще показываться не будет. Правда, таких архаичных браузеров у пользователей уже практически не осталось, но все же.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Использую для заработка
Как быстро в Photoshop сохранить изображение без фона в формате PNG. Как сделать прозрачный фон в photoshop
05.06.16 26.7KИногда нужно загрузить изображение, содержащее прозрачные элементы, сквозь которые будет проглядывать первоначальный фон. В этих случаях, было бы удобно загрузить PNG изображения, поскольку они способны сохранять прозрачность.
В этой статье мы расскажем, как сделать прозрачность в Фотошопе .
Создание файла
Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл » (File ) вверху страницы выберите «Создать » (New ).
Затем в появившемся окне «Новый документ » (New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение «Прозрачный » (Transparent ) в выпадающем списке «Содержимое фона » (Background Contents ).
*Перед тем, как сделать PNG с прозрачностью в Фотошопе , нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:
После того, как вы задали значения параметров, нажмите «OK », чтобы открыть новый документ.Затем в панели «Слои » (Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:
После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню «Файл » (File ) вы можете использовать один из возможных вариантов:Photoshop версии ранее, чем CC 2015:
Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод «Сохранить для Web » (Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл » (File ), и далее – «Сохранить для Web » (Save for Web & Devices ):
Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.
Поля «Размер изображения » (Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.Photoshop версии CC 2015:
Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция «Сохранить для Web » (Save for Web & Devices ) в меню «Файл » (File ) помечена как Legacy (устаревшая ). И замещена на новую опцию «Экспорт » (Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт », нажмите меню «Файл » (File ), а затем — «Экспортировать как » (Export As ).
Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web » (Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт (File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac ) или Ctrl+Alt+Shift+S (для ПК ):
Затем в появившемся окне выберите PNG из выпадающего меню «Формат » (Format ) и убедитесь, что выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ).Поля «Размер изображения » (Image Size ) и «Размер холста » (Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .
Запустите установочный файл и следуйте инструкциям программы. После завершения установки Фоторедактор откроется автоматически.
Загрузите изображение в программу
Кликните на кнопку Открыть файл , в появившемся окне найдите нужное фото и нажмите Открыть . Также картинку можно просто перетащить в окно программы.
Удалите задний фон
На верхней панели выберите вкладку Замена фона . Сначала с помощью зеленой кисти выберите объект, который вы хотите перенести на прозрачный фон. Не обязательно уделять внимание каждому миллиметру изображения – любые огрехи можно будет исправить после. Далее красной кистью обозначьте область вокруг нужного объекта. Нескольких штрихов на фоне будет достаточно. Нажмите кнопку Следующий шаг .
Теперь нужно уточнить края вырезаемой части изображения. Чтобы скорректировать выделение крупных областей картинки, выберите подходящую кисть-маску . Чтобы уточнить край выбранной области, проведите по нему кистью Выделение волос . Когда результат вас устроит, перейдите к следующему шагу.
По умолчанию задний план изображения будет прозрачным. При необходимости его можно заменить. Чтобы сделать фон одноцветным, выберите один из готовых вариантов (программа предлагает черный, серый и белый фон) или воспользуйтесь палитрой. Чтобы поставить на задний план другую фотографию, нажмите кнопку Добавить изображение и выберите нужную картинку. Затем нажмите кнопку Применить .
Сохраните результат
Нажмите кнопку Сохранить . По умолчанию программа предлагает сохранить файл в JPEG. Этот формат не поддерживает прозрачность, поэтому нужно выбрать другой. Откройте вкладку Тип файла и выберите BMP, DPX, PNG, TGA или TIFF. Нажмите Сохранить . Программа автоматически откроет папку с получившимся файлом.
Теперь вы знаете, как сохранить картинку с прозрачным фоном с помощью Movavi Фоторедактора. Но в программе есть множество других опций редактирования, например удаление ненужных объектов со снимков, восстановление старых фотографий и наложение фильтров на фото. Экспериментируйте, и каждый кадр будет незабываемым!
Очень часто при создании поздравительных открыток или видео я сталкивалась с вопросом: Как это можно сделать без знания фотошопа ?
Тот, кто знаком с фотошоп проделает это без труда. Но не все еще изучили эту умную программу. Как же быть им? Неужели нет выхода?
Ведь всегда есть желание сделать наши презентации, поздравления, странички наиболее привлекательными и профессиональными. Я уже рассказывала как в этих целях использовать программку . Она поможет сделать Ваши картинки и даже сможете с ее помощью сделать Ваше первое .
А сейчас я Вам открою еще один секрет: Вы уже сегодня научитесь делать фон рисунка прозрачным. Причем сделаете это абсолютно бесплатно и потратите всего лишь 2 минуты Вашего времени.
Приступим к делу.
Найдите понравившуюся Вам картинку. Для начала это должно быть изображение на не многослойном фоне – например на белом. Переходим на страничку сервиса. Вам не нужно проходить нудную процедуру регистрации. Просто нажмите на ссылку онлайн сервиса .
Перед Вами откроется вот такое окно:
Нажмите на «Загрузить изображение с компьютера «. Выберете приготовленную Вами картинку. Поместить ее можно в отдельную папку в изображениях. Или на рабочем столе, что-бы долго не искать. Кликам один раз на этой картинке и нажимаем «открыть «.
Рисунок появляется на страничке сервера:
Справа выходя 3 окошечка и в среднем из них нарисован замочек. Нажмите на нем 2 раза левой мышкой. Таким образом откроется дверь в волшебство.
С левой стороны Вы видите панель «Инструментов «, одним из которых является та «волшебная палочка» , которой мы сейчас и воспользуемся. Кликните на ней один раз, а затем нажмите на любом пустом месте фона выбранной Вами картинки. Вокруг изображения появится пунктирная линия.
Завершающий шаг на пути к превращению: нажать кнопку » Del » (удалить) на Вашем компьютере. Фон становится в клеточку. Если не все пространство вокруг буде охвачено клеточкой, прикоснитесь еще раз к этому месту волшебной палочкой и нажмите кнопку «Del «
Выходит окошечко, в котором Вас спрашивают: «Сохранить изображение перед закрытием?» Нажимаем «Да «.
Онлайн-программма Pixir-делаем прозрачный фон у картинки. Сергей ФещуковБывает попадается очень подходящая картинка для вашего поста и всё бы хорошо… Но фон картинки не подходит под фон блога или блока с текстом. Явно ни у одного меня такая проблема и ни у одного меня фон не белый, который подходил бы в большинстве случаев. Мне нужен прозрачный фон !
В интернете я не нашел нормальных идей как сделать прозрачный фон для готовой картинки, поэтому начал сам экспериментировать и нашел более менее подходящее решение!
Как сделать прозрачный фон у картинки
Возьмём в пример одну простую картинку в формате.jpg (вообще формат не важен особо):
Здесь есть белый фон, от которого я хочу избавиться и вместо него сделать прозрачный фон. В этом нам поможет Pixlr — онлайновое подобие фотошопа.
Загружаем наше изображение. Справа в окошке «Слои» появится слой «Фоновый», на котором замочек (не дает удалять фон картинки).
Два раза кликнув левой кнопкой мыши по этому замочку, вы сможете снять блокировку с фона. Вместо замочка появится галочка.
Теперь берем волшебную палочку (панель инструментов, правый столбец вторая кнопка сверху), указываем следующие параметры: допуск = 21, галочки стоят на сглаживании и непрерывности (обычно такие параметры стоят по стандарту), хотя с параметрами можете поэкспериментировать; и нажимаем на фон картинки (в нашем случае, на белый фон).
Теперь удаляем фон нажатием кнопочки «Delete» и получаем нужное нам изображение с прозрачным фоном.
В итоге на выходе получаем то же изображение с прозрачным фоном.
Единственный минус Pixlr — нельзя изображение сохранить в формат.gif, который тоже сохраняет прозрачный фон, но намного легче, чем формат.png. Но если нет другого выхода, почему бы не воспользоваться этим?
спасибо Натальи Петровой
21.12.14 32.7KПеред тем, как сделать прозрачный фон в фотошопе, нужно все хорошо разузнать о возможностях этой программы. А то вдруг вместо фона прозрачной станет ваша одежда на фотографии.
Основы работы c фоном в Photoshop
Photoshop по праву считается самым мощным средством для работы с растровыми изображениями. Порой кажется, что уже все знаешь о возможностях этого графического редактора. Но затем снова и снова натыкаешься на что-то новенькое:
Самой востребованной областью применения Photoshop среди обычных пользователей является изменение и редактирование фоновой части изображения. Как будто предугадывая это, программа уже на первых этапах создания нового графического файла спрашивает, каким сделать его фоновый слой:Создание нового графического файла в графическом редакторе осуществляется через меню «Файл» — «Новый». В появившемся диалоговом окне можно задать размеры и основные параметры будущего изображения. Установка значения поля «Содержимое фона» на «Прозрачный» является основным способом того, как можно удалить фон еще на стадии создания рисунка.
Возможность редактирования изображений в Photoshop построена на использовании слоев. Каждый из них является отдельным независимым объектом. Изменение любого из слоев никак не отразится на содержимом остальных. Слоевая структура изображения отображается на панели «Слои »:
Но все это теория, которую можно быстро познать на практике. Поэтому приступим к творчеству, сила выражения которого будет усилена Photoshop .Использование корректирующего слоя
Разберем на примере, как в фотошопе можно поменять фон с помощью корректирующего слоя. На старте у нас имеется такое изображение:
Положительной стороной использования корректирующего слоя является экономия времени путем настраиваемого воздействия на всю цветовую гамму рисунка. Создать его можно, нажав на черно-белый круг внизу панели «Слои ». В появившемся меню выбираем пункт «Кривые »:
Перемещением точки на кривой и настройкой цветового канала можно добиться различных вариантов изменения всей фотографии. При умелом подходе дальнейшего редактирование может и не понадобиться. Наверное, это самый быстрый способ того, как изменить фон фотографии:С помощью корректирующего слоя можно легко изменить время дня во всем городе.
Удаляем небо
Надоело нам скучное небо над городом. Поэтому удалим его с помощью инструмента «Стиратель фона ». Он находится на боковой панели слева:
Конечно, в приведенном примере не хватает немного точности. Поэтому, чтобы не удалить нужные детали в рисунке, следует использовать тонкое перо.Все изменения коснулись лишь основного слоя. Перед тем, как изменить фон, через меню «Слой » — «Новый » создаем новый:
Теперь, чтобы сделать новое небо над нашим городом, можно применить свою фантазию и различные средства Photoshop . Например, какой-нибудь градиент. Вот что может получиться в итоге:
Но контуры города очень трудно вырезать ровно. Поэтому для демонстрации следующего инструмента воспользуемся фотографией пустыни. Задача все та же: меняем небо:
Для выделения облачного неба над пустыней мы применим инструмент «Волшебная палочка ». Она подходит для использования в тех случаях, когда рисунок состоит из нескольких ярко выраженных цветовых оттенков.Перед тем, как заменить фон неба на другой, активируем волшебную палочку на панели инструментов и кликнем ей по небу. При этом чувствительность инструмента лучше выставить на максимальный показатель. Иначе фон будет выделен некорректно:
После этого на выделенной области жмем правой кнопкой мыши, и в появившемся контекстном меню выбираем «Слой через обрезание »:
Вроде бы ничего не произошло. Но если взглянуть на панель «Слои », то там мы увидим новый элемент. Чтобы удалить вырезанный фон, следует выделить содержащий его слой, и в контекстном меню выбрать команду «Удалить слой ». Вот как сейчас выглядит наша пустыня:
Теперь можно добавить новый слой и заполнить небо над Сахарой яркими красками:Размытие заднего фона
Но все-таки хочется потренироваться не только на кошках, но и на людях. Рассмотрим, как размыть фон в фотошопе. Для редактирования возьмем снимок с изображением человека. По неписаным законам интернета, для такой демонстрации чаще всего используют фото красивой девушки:
Теперь постараемся сделать задний фон фотографии размытым, чтобы все внимание фокусировалось на женской красоте. Такой эффект можно получить, если для фотосъемки использовать дорогие «зеркалки ». Но мы достигнем этого с помощью графического редактора.Главная проблема заключается в том, чтобы правильно выделить контуры тела. Попробуем для этого воспользоваться магнитным лассо.
Если проводить инструментом «Магнитное лассо» вдоль контура на изображении, то серебристую обводку как будто магнитом притягивает к границам выделяемого предмета.
После активации инструмента осторожно проводим курсором вдоль контуров фигуры девушки. А затем в контекстном меню выбираем пункт «Инвертировать выделение »:
Перед тем, как сделать задний фон размытым, применим встроенный фильтр графического редактора. Для этого в меню «Фильтр » выбираем пункт «Смазывание » — «Смазывание Гаусса »:
Получилось, конечно, не без изъянов. Но все их можно убрать с помощью инструмента «Размытие ». И вот что получилось:
Теперь используем другой подход, и для выделения фигуры девушки используем маску. Сначала создадим дубликат нашего слоя. Для этого отмечаем его в панели «Слои » и в контекстном меню выбираем пункт «Дублировать слой »:
Затем к появившейся копии слоя применяем фильтр «Смазывание Гаусса ». А к копии слоя добавляем маску, нажав на значок в виде прямоугольника с белым кругом внутри него. Вот как должно выглядеть фото девушки на данном этапе:Как создать файл PNG в Adobe Photoshop
Бенджамин Марторелл, 24 октября 2020 г.
Что такое файл PNG?Вас смущает, что такое файл PNG? Если так, то это вполне понятно, потому что фотографам доступно множество форматов файлов изображений. Наиболее распространены форматы Jpeg, GIF, TIFF и, конечно же, PNG.
Еще сложнее то, что у каждого есть своя цель. В этой статье мы рассмотрим формат PNG.Вы узнаете, что такое файл PNG, для чего он нужен и как его создать.
PNG, произносится как «пинг», а его имя файла — .png, означает «переносимая сетевая графика». Это тип формата изображения, который веб-дизайнеры используют для создания веб-сайтов, поскольку он поддерживает прозрачный фон и / или полупрозрачные изображения (фактически, это единственный тип формата изображения, который поддерживает прозрачность).
Благодаря этой возможности PNG отлично подходит для логотипов и динамической графики веб-сайтов. Поэтому, если вам нужен фантастически выглядящий веб-сайт, вам обязательно нужно использовать изображения в формате PNG.
Скорее всего, вы уже видели изображения PNG, например, когда на фотографии фотографа расположен прозрачный логотип, позволяющий увидеть фотографии с по логотип. В этом случае цель прозрачности — тонко продвинуть фотографа, сделавшего снимок (и предотвратить его использование кем-то другим).
Метод сжатия данных, называемый сжатием без потерь, позволяет создавать файлы PNG. Это означает, что когда кто-то решает сжать изображение, никакие данные в нем не теряются.Другими словами, файл PNG остается идентичным исходному файлу изображения. Это отличается от сжатия с потерями, при котором информация теряется при сжатии изображения файла.
Еще одним преимуществом PNG является то, что он поддерживает оттенки серого и цветовые пространства PNG-8, PNG-24 и PNG 32, что дает ему возможность отображать широкий диапазон цветов.
Однако это означает, что файлы PNG могут быть большими, поэтому изображения обычно имеют формат Jpeg (файлы Jpeg с потерями, что означает, что каждый раз при распаковке данные удаляются).
Еще один плюс формата PNG в том, что он не содержит патентов, что означает, что любой может использовать его без лицензии.
Какие программы открывают файлы PNG?
Многие программы открывают файлы PNG. К ним относятся программы просмотра фотографий по умолчанию, программы редактирования фотографий, такие как Lightroom и Photoshop, а также веб-браузеры. В любой из этих программ вы можете просмотреть файл PNG, выбрав «открыть» в раскрывающемся меню, или просто перетащив его в программу или в веб-браузер.
Если у вас еще нет Photoshop и Lightroom, вы можете получить их через Adobe Creative Cloud Plan всего за 9 долларов.99 / мес.
Самые простые способы создания файла PNG в Adobe PhotoshopСоздание файла PNG в Photoshop — простой процесс. В зависимости от того, что вы хотите достичь с изображением или графикой, может быть всего несколько шагов.
Шаги по созданию файла PNG в Photoshop: 1. Самый простой способ — просто «Сохранить как»- Нажмите Файл в верхнем меню, затем выберите Открыть
- Выберите файл изображения и щелкните Открыть
- Щелкните Файл в верхнем меню, затем выберите Сохранить как
- В диалоговом окне выберите PNG в меню Формат
Пока это быстрый способ создать файл PNG, он никоим образом не изменяет изображение, например, делает его прозрачным или удаляет фон, чтобы изолировать объект (ы).Это наиболее распространенные действия для файлов PNG. Следуйте инструкциям ниже, чтобы узнать, как сделать и то, и другое.
2. Создание прозрачного изображения Photoshop- Откройте файл, повторив шаги, описанные в пункте 1.
- Откройте панель слоев, если она еще не видна справа. Для этого щелкните Window , затем выберите Layers .
- Щелкните слой Background на панели «Слои», а затем щелкните OK в появившемся диалоговом окне.Это разблокирует слой, позволяя вам изменить его.
- Щелкните раскрывающееся меню Непрозрачность на панели «Слои» и выберите процентное значение ниже 100%. Чем ниже вы опустите, тем прозрачнее будет изображение.
- Щелкните Файл в верхнем меню, выберите «Сохранить как» и выберите PNG в раскрывающемся меню. Теперь у вас есть прозрачное изображение Photoshop.
- Откройте файл, повторив шаги, указанные в пункте 1.
- Добавьте слой прозрачности: в верхнем меню щелкните Layer , затем выберите New . Теперь вы увидите новый пустой слой на панели «Слои», который выглядит как серо-белая шахматная доска. Photoshop автоматически делает его прозрачным.
- Перетащите новый слой под слой фонового изображения на панели слоев.
- Щелкните новый слой , чтобы выбрать его.
Совет . Вместо создания нового слоя вы также можете щелкнуть маленький значок замка, чтобы разблокировать фоновый слой.Все, что вы удалите с изображения, станет прозрачным.
- Выберите тему: На панели инструментов слева выберите инструмент Magic Wand Tool .
- Щелкните Select Subjec t в верхней части окна. Photoshop автоматически выбирает то, что, по его мнению, является объектом (объектами). Вы увидите, что вокруг выделения «маршируют муравьи».
- Удалите фон: щелкните Выберите в верхнем меню, затем выберите Inverse .Это выбирает область изображения, которую вы хотите удалить вокруг объекта.
- Нажмите Удалить на клавиатуре. Теперь виден серо-белый узор в виде шахматной доски на прозрачном фоне.
- Нажмите Command (Control на ПК) + D , чтобы убрать марширующих муравьев.
Совет : Вы можете обнаружить, что при выделении не хватает некоторых областей. Например, он может подумать, что тени — это края объекта. Чтобы исправить это, щелкните значок
Преимущества и недостатки файлов PNG
«Вычесть из выделения» в верхней части окна, затем используйте инструмент «волшебная палочка», чтобы удалить больше нежелательных областей.В начале этой статьи вы прочитали, что такое файл PNG и для чего он используется. Вы также узнали о некоторых его преимуществах, включая сжатие без потерь (данные не теряются, а качество изображения остается прежним) и что он поддерживает PNG-8 (256 цветов), PNG-24 (более 16 миллионов цветов) и PNG-32. (PNG 24 + 8 для прозрачного фона) цветовых пространств.
Другие преимущества включают широкий диапазон прозрачности от невидимого (0%) до полностью видимого (100%), вы можете добавлять метаданные и создавать файлы PNG с несколькими слоями.Кроме того, файлы PNG могут сжиматься на 10–30% больше, чем файлы GIF.
Формат PNG имеет несколько недостатков. В отличие от GIF, который означает формат обмена графикой, PNG не поддерживает анимацию. Кроме того, как указано выше, размеры файлов PNG обычно больше, чем файлы Jpeg. Это может стать проблемой, если у вас мало места для хранения.
К счастью, эти проблемы обычно не являются проблемой для большинства людей, поскольку файлы PNG в основном предназначены для веб-сайтов.
Вот и все! Вы должны быть на правильном пути к созданию файлов PNG в Photoshop, используя информацию, которую вы узнали в этом уроке. Довольно скоро вы сможете сделать логотип, который можно будет разместить на своих фотографиях или сделать привлекательный сайт.
Если вы нашли это руководство полезным, вам также может быть интересно ознакомиться со следующими статьями:
Если вы нашли эту статью полезной, подпишитесь на нас на Twitter и Facebook , чтобы узнать больше о наших бесплатные руководства по WordPress и другие ресурсы.
Используете WordPress и хотите получить Envira Gallery бесплатно?
Envira Gallery помогает фотографам всего за несколько кликов создавать красивые фото- и видеогалереи, чтобы они могли демонстрировать и продавать свои работы.
Создание файла PNG | Прозрачный фон
Ваш браузер не поддерживает теги видео.
Если вашему проекту требуется файл прозрачного фонового изображения для логотипов или для печати на канцелярских принадлежностях или товарах — футболках или кружках, например, — используйте наши инструменты для создания PNG, чтобы создать нужный тип файла.
Что такое файл PNG? Это аббревиатура от Portable Network Graphics, которая была разработана как высококачественный формат файлов без потерь. JPEG — это еще один формат файлов, который хорошо сжимает изображения, но у него нет ключевой особенности формата PNG: PNG может сохранять прозрачность.
Если вы создали текстовое изображение, которое должно отображаться без пробелов между буквами, вам подойдет PNG. Или, если вы вырезали фон позади объекта фотографии или объекта и хотите, чтобы он оставался таким при сохранении изображения, PNG — это формат файла, который вам нужен.Мы собираемся показать вам, как создавать и сохранять изображения в формате PNG для обоих этих типов проектов в инструментах редактирования и дизайна фотографий PicMonkey.
Как создать PNG для текста без фонаОткройте пустой холст в желаемых размерах. (См .: преобразование дюймов в пиксели)
На пустом холсте в редакторе PicMonkey щелкните радужный круг в палитре фона
, которая появляется сбоку.
Установите флажок «Прозрачный» под цветовым спектром.
Щелкните вкладку «Текст» в крайнем левом углу, добавьте текст и настройте его по своему усмотрению.
Нажмите Загрузить на верхней панели инструментов и выберите «PNG изображение» в качестве типа файла.
Как создать PNG для изображений без фонаИнструмент для удаления фона в PicMonkey доступен подписчикам Pro, и это чертовски волшебно для быстрого создания прозрачного фона под картинкой .
Используйте инструмент для удаления фона для создания прозрачного фона для изображения
Откройте изображение в PicMonkey.
Откройте палитру слоев и щелкните Преобразовать в слой на фоновом слое.
Выберите новый слой фотографии и нажмите Удалить фон в палитре изображений.
Нажмите Загрузить на верхней панели инструментов и выберите «PNG изображение» в качестве типа файла.
Подробнее об инструменте для удаления фона: Автоматическое средство для удаления фона, Plus Design Inspo!
Макетируйте свои продукты с помощью стоковых фотографий
Это помогает получить более четкое представление о том, как будет выглядеть ваш готовый дизайн, если вы создадите макет, то есть изображение вашего логотипа или бренда на нем. продукт. Это действительно легко сделать в PicMonkey, потому что у нас есть миллионы стоковых фотографий с Unsplash для всех подписчиков, а нашим подписчикам Pro доступна полная библиотека суперпремиум-класса от iStock от Getty.Просто поищите в библиотеке видеоматериалов «________ мокап», например, «макет бутылки» или «макет футболки», или визитку, бейсболку, рекламный щит … вы поняли.
Добавьте изображение PNG вверху, расположите и настройте, и теперь у вас есть довольно хорошее представление о том, как ваш брендинг работает на продуктах. Загрузите свою работу, чтобы поделиться ею с принтером или загрузить в свой интернет-магазин.
См. Также: Как сделать дизайн упаковки продукта для вашего бизнеса
Что еще вы хотите сделать сегодня?
Как сделать изображение прозрачным?
Изучение того, как делать прозрачные изображения, значительно улучшит вашу игру для редактирования фотографий.Это может показаться трудным, но поверьте нам, процесс очень простой, а результаты потрясающие! Если вы хотите, чтобы ваш канал в Instagram выделялся из общей массы без особых усилий, тогда вы попали в нужное место!
Как сделать изображение прозрачным в Интернете?
Мы здесь, чтобы провести вас через весь процесс создания прозрачного изображения, а также предоставить полезные советы и рекомендации, которые придадут вашей ленте особую изюминку. Вопрос в том, как именно сделать изображение прозрачным?Это займет всего несколько шагов:
Шаг 1) Откройте изображение в редакторе PicsArt.
Шаг 2) Нажмите на инструмент Cutout и либо вручную очертите области изображения, которые вы хотите сделать прозрачными, либо нажмите Select , чтобы наш инструмент AI автоматически выбирал человека, лицо, одежду, небо, или голову, которую вы хотите сохранить.
Шаг 3) Нажмите на Сохранить , чтобы удалить остатки, сохранив только те детали, которые вы выделили красным.Шаг 4) Нажмите Далее , чтобы экспортировать прозрачное изображение.
С этого момента вы можете использовать прозрачные изображения для создания красивых эстетических правок или веселых мемов.Возможности безграничны, и все в ваших руках!
Процесс довольно прост, но может вызвать много вопросов, пока вы не начнете редактировать прозрачные изображения самостоятельно. Если вы не знаете, какое программное обеспечение для редактирования использовать или какие форматы изображений поддерживают прозрачность, не волнуйтесь, мы разбили все это для вас ниже!
Как добавить прозрачное изображение к другому изображению?Все удовольствие от создания прозрачного фона изображения заключается в возможности наложить его поверх другого изображения и создать свои собственные правки в стиле коллажа! По сути, вы делаете наклейку, которую можно наложить поверх чего угодно.Если у вас есть изображение с прозрачным фоном, добавить его к другому изображению очень просто. Единственное правило, о котором следует помнить, — прозрачное изображение должно располагаться поверх другого изображения, иначе оно не будет видно.
Попрактикуемся в добавлении прозрачного изображения к другому изображению в веб-редакторе PicsArt:
Шаг 1) Сначала мы начнем с прозрачного изображения! Откройте веб-редактор и нажмите «Загрузить» на левой панели, чтобы загрузить изображение, которое вы хотите сделать прозрачным.Вы также можете выбрать любое из наших бесплатных изображений в галерее.
Шаг 2) Нажмите на Ластик , чтобы вручную стереть области изображения, которые вы хотите сделать прозрачными. Кроме того, вы можете позволить нашему инструменту AI Select выполнить ручное стирание за вас одним щелчком мыши! Нажмите Object или Person , чтобы удалить эти части вашего изображения.
Шаг 3) После того, как вы удалили все части, которые хотите сделать прозрачными, нажмите Применить в правом верхнем углу экрана и Сохраните свое новое прозрачное изображение в коллекции стикеров.Шаг 4) Теперь мы работаем с нижним слоем или фоновым изображением. Откройте редактор PicsArt и нажмите Загрузить на левой панели, чтобы загрузить изображение, которое вы хотите использовать в качестве фона или нижнего слоя. Вы также можете использовать одну из тысяч наших бесплатных изображений!
Шаг 5) Нажмите на наклейку на левой панели и выберите фотографию верхнего слоя (она же новая наклейка), фон которой вы только что удалили.
Шаг 6) Измените размер, чтобы покрыть как можно большую или меньшую часть фона на фотографии.
Шаг 7) Нажмите, чтобы Поделиться со всеми своими друзьями или Загрузите прямо на свой рабочий стол. Вуаля! Вы добавили прозрачное изображение к другому изображению!
Независимо от того, являетесь ли вы опытным редактором или только начинаете, сделать фотографии прозрачными в приложении PicsArt также невероятно просто! Посмотрите этот видеоурок:
Шаг 1) Откройте приложение PicsArt и коснитесь значка + в нижней части экрана.
Шаг 2) Выберите изображение, которое хотите отредактировать, в своей фотогалерее или в галерее «Бесплатно для редактирования» PicsArt.
Шаг 3) Коснитесь инструмента Вырез в нижней части экрана.
Шаг 4) Коснитесь инструмента Outline , чтобы вручную очертить области, которые вы хотите сохранить, или коснитесь инструмента Select , чтобы наш ИИ автоматически обнаруживал и удалял области. PicsArt автоматически делает все прозрачным, оставляя нетронутыми только выбранные области.
Шаг 5) Нажмите Далее затем Сохраните , чтобы загрузить новое прозрачное изображение!
Если вы сохраните вырезку как стикер на PicsArt, то позже вы сможете добавить к нему любой фон и внести множество правок! Когда вы снова откроете редактор и нажмете на Наклейки и Мои наклейки , вы найдете все ранее отредактированные изображения с прозрачным фоном, готовые к добавлению к другим фотографиям! Сделать стикеры своими руками — это так просто!
Может ли JPEG или PNG быть прозрачным?Еще одна вещь, о которой следует помнить при создании прозрачных правок, — это формат изображения.Все сводится к выбору между форматами JPEG и PNG.
Как сделать прозрачным изображение JPEG?
JPEG — наиболее часто используемый формат цифровых изображений в мире. В основном это связано с тем, что изображения в формате JPEG имеют небольшой размер и поддерживаются практически на всех веб-сайтах. К сожалению, сделать изображения JPEG прозрачными невозможно. Этот формат просто не поддерживает прозрачность.
С другой стороны, хотя формат PNG не так широко известен, он поддерживает прозрачные изображения. Кроме того, изображения PNG в целом имеют лучшую степень сжатия, чем изображения JPEG.В отличие от формата JPEG, сжатие PNG осуществляется без потерь, то есть независимо от того, сколько раз вы редактируете изображение, оно не теряет своего качества.Невозможно сделать изображение JPEG с прозрачным фоном. Вы можете сделать фон изображения прозрачным, но как только вы загрузите изображение в формате JPEG, прозрачные участки станут белыми. Даже если вы начинаете процесс редактирования с изображения в формате JPEG, вы должны обязательно сохранить его как PNG перед экспортом изображения.Вы же не хотите, чтобы ваш тяжелый труд был потерян!
Как сделать прозрачным изображение PNG?PNG — лучший формат для создания прозрачных фотографий. Он отлично подходит для сохранения качества ваших изображений и поддерживается на большинстве веб-сайтов.
Как конвертировать JPEG в PNG онлайн?
Чтобы создать прозрачное изображение PNG, вам необходимо сначала загрузить изображение по вашему выбору в редактор PicsArt, затем выбрать и удалить фон из изображения, упомянутого в шагах выше.Когда вы закончите, просто сохраните изображение, которое вы отредактировали, как файл PNG, и все готово! В PicsArt по умолчанию будет сохраняться как PNG, чтобы вы могли сохранить прозрачное изображение.
Теперь у вас есть прозрачное и высококачественное изображение. Вы можете добавить прозрачное изображение PNG к другим фотографиям без пикселизации.Если у вас есть изображение в формате JPEG и вы хотите преобразовать его в PNG, вам потребуется использовать сторонние приложения или онлайн-инструменты.Существует множество онлайн-инструментов, которые могут помочь вам преобразовать изображение JPEG в файл PNG, но большинство из них очень ограничены. Однако, если вы используете PicsArt, вы сможете конвертировать JPEG в PNG и редактировать изображение в одном процессе. Никаких дополнительных преобразований не требуется!
Где найти T прозрачный фон изображений в Интернете?
Откройте файл JPEG в редакторе PicsArt и примените все необходимые изменения, такие как фильтры, наклейки, удаление фона и т. Д. Когда вы закончите, просто сохраните изображение, и PicsArt преобразует его в PNG для вас.PicsArt автоматически сохраняет изображения как файлы PNG, поэтому вам не нужно беспокоиться о том, что какие-либо прозрачные изображения потеряют свою прозрачность или качество.
Учтите, что если вы сохранили прозрачное изображение в формате JPEG и получили белый фон, преобразование его в PNG не сделает изображение снова прозрачным. Вам нужно будет снова отредактировать фотографию, а затем сохранить ее как PNG.Если вы не очень хорошо умеете фотографировать или ищете изображение того, что не можете запечатлеть самому, то Интернет — ваш лучший друг!
Найти правильные изображения — это одно, но наложение прозрачного изображения или преобразование его в прозрачный фон может быть утомительным, особенно если вы хотите включить много элементов.К счастью, в Интернете доступно множество изображений с прозрачным фоном!Если вы когда-нибудь пробовали загружать изображения с прозрачным фоном в Интернете, то вам знакомо ощущение, когда вы случайно загружаете поддельное прозрачное изображение. Нажатие и загрузка изображения с серым клетчатым фоном просто для того, чтобы узнать, что клетчатый узор является частью изображения, а не прозрачным только после того, как вы загрузили изображение, очень расстраивает!
Этого можно избежать, используя программное обеспечение для редактирования, которое имеет легко доступный каталог изображений с прозрачным фоном.Если вы откроете PicsArt Editor и пролистаете Stickers , вы откроете для себя совершенно новый мир прозрачных изображений! Вы можете найти все типы изображений с прозрачным фоном, набрав любое слово или фразу в строке поиска.Теперь, когда вы знаете основы, вы можете исследовать безграничные возможности прозрачных изображений и прозрачного фона. Нам не терпится увидеть, что вы создаете!
Многофункциональный фото- и видеоредактор, коллаж и средство для создания наклеек PicsArt — крупнейшая в мире платформа для творчества с более чем 150 миллионами активных авторов и влиятельных лиц в месяц.PicsArt сотрудничает с такими крупными артистами и брендами, как Taylor Swift, The Jonas Brothers, Gwen Stefani, Maroon 5, Lizzo, Meghan Trainor, One Direction, MONSTA X, Warner Bros. Entertainment, iHeartMedia, Condé Nast и другими. Загрузите приложение сегодня, чтобы повысить уровень своих фотографий и видео с помощью тысяч простых и быстрых инструментов редактирования, модных фильтров, забавных наклеек и ярких фонов. Раскройте свой творческий потенциал с помощью PicsArt и , обновитесь до Gold и получите потрясающие премиальные привилегии!
Как создать PNG-файлы вашего логотипа в Illustrator
ФайлыPNG (переносимая сетевая графика) — это растровые веб-файлы, не теряющие качества при сжатии.Их лучше всего использовать для отображения изображений в Интернете, и они являются одним из основных форматов файлов, которые можно доставить вашим клиентам, занимающимся дизайном логотипов.
Клиентам нужен файл PNG (в дополнение к другим требуемым типам файлов), чтобы они могли легко включить дизайн вашего логотипа в свои материалы для брендинга, не используя передовое программное обеспечение для редактирования графики, такое как Adobe Illustrator.
В этом уроке мы собираемся продемонстрировать один из способов создания файла PNG в Adobe Illustrator с прозрачным фоном — именно то, что вы должны будете предоставить своему клиенту логотипа.
1. Создайте свой логотип в Adobe Illustrator
Все логотипы должны быть созданы в программах векторного редактирования и должны состоять из векторных форм и контуров, чтобы их можно было увеличивать или уменьшать без потери качества. Adobe Illustrator является отраслевым стандартом в программах для редактирования векторных изображений, поэтому мы рекомендуем его в первую очередь. Убедитесь, что в файл логотипа не включен фон.
2. Экспортируйте свой логотип как файл PNG
После создания векторного логотипа щелкните Файл> Экспорт…> PNG. Присвойте файлу желаемое имя и нажмите Export. Затем появится окно «Параметры PNG». Убедитесь, что вы выбрали прозрачный в качестве цвета фона, и нажмите OK. Самое замечательное в этом варианте экспорта заключается в том, что он вырезает пустое пространство на доске, чтобы включить только логотип, что делает итоговые файлы PNG более универсальными и включает только основные части дизайна.
3. Откройте и загрузите новый файл PNG.
Ваш новый файл PNG будет выглядеть примерно так, когда вы его откроете.Само изображение PNG не серое — это просто фон, используемый для отображения изображений PNG. Теперь вы готовы отправить его своему клиенту
Хотите начать свою карьеру графического дизайнера?
Узнайте, как фриланс на 99designs может помочь вам найти больше работы.
Как создать логотип с прозрачным фоном с помощью GIMP или Photoshop: Survey Anyplace
Хотите добавить к изображению логотип, но не можете избавиться от фона? Тогда это руководство решит эту проблему с помощью всего нескольких простых шагов!
Нужно ли мне специальное программное обеспечение?
Нет.Но, особенно со сложными логотипами, это значительно ускорит ваш процесс.
Я предпочитаю использовать GIMP, так как это совершенно бесплатный инструмент с открытым исходным кодом, который также имеет множество функций, которые может предложить Photoshop. Если у вас есть Photoshop, ниже есть руководство по созданию прозрачного фона.
Если вы не хотите загружать внешнее программное обеспечение, вы можете найти руководство о том, как сделать фон прозрачным с помощью онлайн-редактора Picmonkey прямо здесь или с помощью Fotor.
А теперь приступим, ладно?
GIMP Шаг 1. Настройка GIMPХорошо, вы установили GIMP и запустили его, вероятно, будет похож на на этот .
Чтобы открыть GIMP в одном окне, перейдите в меню Окна> Режим единого окна
Шаг 2: Сделайте фон прозрачнымТеперь откройте изображение , которое вы хотите сделать прозрачным. Я выбрал это изображение:
Но вы можете использовать любое изображение, которое вам нравится. Чтобы открыть изображение, выберите «Файл»> «Открыть» и выберите свой файл. Или вы можете нажать CTRL + O .
GIMP и Photoshop отличаются от Paint и аналогичных программ тем, что они используют слои.Каждый слой можно редактировать индивидуально, поэтому вы можете редактировать части изображения, не касаясь другого.
Эти слои можно найти в правом верхнем углу экрана. Чтобы добавить прозрачность, щелкните слой правой кнопкой мыши и выберите « Добавить альфа-канал ».
Чтобы сделать фон прозрачным, воспользуемся инструментом Select By Color Tool . Вы можете использовать его, нажав Shift + O или перейдя в Инструменты> Инструменты выделения> По выбору цвета.
Нажмите в любом месте вокруг логотипа на белом пространстве, которое нужно стереть. Вокруг него должна появиться движущаяся пунктирная линия. Нажмите удалить , и должен появиться фон, похожий на клетку, например:
Если это не так, убедитесь, что вы добавили альфа-канал к своему изображению, и не осталось никаких других слоев. Если у вас есть слой «Фон», вы можете удалить его, щелкнув его правой кнопкой мыши и выбрав «Удалить слой».
Поздравляем ! Вы сделали свой первый логотип с прозрачным фоном!
Шаг 3. Экспорт вашего логотипаВы не можете просто «Сохранить» свое изображение или «Сохранить как».Вы сохраните свое изображение в формате .xcf, таким образом оно подходит только для графического редактора. Чтобы использовать его на своем сайте, вам нужно экспортировать изображение . Для этого выберите «Файл»> «Экспортировать как» или нажмите Shift + Ctrl + E.
Вы также можете перезаписать файл, но тогда исходное изображение будет потеряно. Появится меню с вопросом, где сохранить файл. Вы также можете изменить имя своего изображения, не забудьте добавить .png в конце. Форматы, такие как .jpg, пока не поддерживают прозрачность.png делает.
Теперь нажмите « Export », и все готово!
Чтобы украсить свой опрос прозрачным логотипом, мы создали специальное руководство в наших документах.
Теперь давайте посмотрим, как это можно сделать с помощью Photoshop:
PhotoshopВ этом уроке я использую Photoshop CS6. Производительность останется прежней, независимо от того, используете вы старую или новую версию, меню просто могут выглядеть немного иначе.
Метод 1: Magic Wand Tool
Шаг 1: Откройте изображение. Это можно сделать, выбрав
Файл> Открыть или нажав сочетание клавиш Ctrl + O . Шаг 2: Выбор инструмента Magic WandВы можете увидеть значок справа от экрана на вертикальной панели инструментов. Щелкните правой кнопкой мыши 4-й значок и выберите Magic Wand Tool . Вы также можете нажать W как ярлык.
Шаг 3. Удаление фонаНажмите в любом месте фонового пространства, которое вы хотите удалить. Появится пунктирная линия, указывающая область, которую вы собираетесь удалить. Если область недостаточно велика, вы всегда можете добавить что-то к своему выделению, удерживая нажатой клавишу Shift и щелкнув область , которую вы хотите добавить.
Если вы пропустили щелчок, вы можете удалить весь выбор, щелкнув правой кнопкой мыши и выбрав Отменить выбор .
На изображении должен появиться фон в виде клетки.
Шаг 4. Сохранение изображенияТеперь пора сохранить изображение. Перейдите в Файл> Сохранить как . Не все типы изображений отображают прозрачность. Убедитесь, что ваше изображение сохранено как файл PNG.
Выберите вариант PNG:
Теперь нажмите « Сохранить ».
Чтобы украсить свой опрос прозрачным логотипом, мы создали специальное руководство в наших документах.
Ta-da ! Теперь у вас есть прозрачный логотип. Но есть второй способ сделать это:
Метод 2: Инструмент «Многоугольное лассо»Если фон слишком загроможден, инструмента «Волшебная палочка» не всегда будет достаточно. В этом случае мы воспользуемся инструментом Polygonal Lasso Tool.
Шаг 1. Откройте изображение. Для этого выберите
Файл> Открыть или нажмите сочетание клавиш Ctrl + O . Шаг 2. Инструмент «Многоугольное лассо»Вы можете увидеть значок справа от экрана на вертикальной панели инструментов. Щелкните правой кнопкой мыши 3-й значок и выберите инструмент «Многоугольное лассо». Если вы уже выбрали его, просто нажмите L как ярлык.
Шаг 3. Удаление фонаТеперь вы можете нарисовать контур вокруг того, что вы хотите удалить из своего изображения. Для более точного выбора вы всегда можете нажать Ctrl и «+» для увеличения.Чтобы завершить выбор, нажмите Ctrl + щелкните на последней части созданного пути. Нажмите Delete , чтобы удалить элемент, на месте объекта должен появиться фон в виде клетки.
Шаг 4: Сохранение изображенияПерейдите в Файл> Сохранить как . Убедитесь, что ваше изображение сохранено как файл PNG. Другие типы изображений не всегда поддерживают прозрачность.
Выберите вариант PNG:
Теперь нажмите « Сохранить ».
Чтобы украсить свой опрос прозрачным логотипом, мы создали специальное руководство в наших документах.
У-у-у ! Удачи, собирая данные!
Используйте прозрачные PNG в своих проектах печати — Дизайн как профессиональный
В этом уроке вы узнаете, как взять прозрачное изображение из Photoshop, сохранить его как файл .PNG и поместить в документ InDesign, готовый к печати.Пожалуйста, обратитесь к моему предпочтительному руководству по предварительным настройкам PDF, чтобы узнать, как я могу сохранить свои проекты печати в PDF.
Программ: Photoshop и InDesign
Сложность: СреднийШаг 1
Откройте изображение, из которого вы хотите вырезать фон, в Photoshop. Затем дважды щелкните слой и нажмите OK, чтобы разблокировать его. Убедитесь, что это высокое разрешение (300 точек на дюйм) для проектов печати.
Шаг 2
Удалите фон со слоя. Есть несколько способов сделать это. Если фон сплошной, вы можете использовать инструменты «Волшебная палочка» или «Быстрое выделение».В этом руководстве не будет подробно рассказано о том, как вырезать изображение из фона, поскольку основное внимание уделяется сохранению и размещению прозрачного изображения в InDesign.
Шаг 3
Затем перейдите в меню «Файл»> «Сохранить как» и убедитесь, что в раскрывающемся списке выбран PNG. Обратите внимание, что это работает только для файлов RGB. Поскольку вы можете преобразовать все элементы вашего проекта печати в CMYK при сохранении PDF-файла в InDesign, вы можете использовать этот файл RGB для любого проекта печати или веб-проекта. Дайте файлу PNG имя, выберите место для его сохранения и нажмите «Сохранить».Во всплывающем окне параметров PNG выберите «Нет» и нажмите «ОК». Вы успешно создали прозрачный файл для использования в проектах печати.
Шаг 4
Теперь давайте откроем InDesign. Создайте новый документ желаемого размера. Моя — это образец обложки альбома, так что он имеет квадрат 4,724 дюйма с отступом 1/8 дюйма.
Шаг 5
Добавьте фоновое изображение, щелкнув и перетащив его из папки в InDesign или CTRL + D (Option + D на Mac), чтобы поместить.Затем переместите фоновое изображение, пока не будете довольны размещением. Вы также можете изменить размер изображения, удерживая CTRL + Shift (Option + Shift на Mac) и щелкнув и перетащив угол изображения. Это ограничивает пропорции при изменении размера изображения. Убедитесь, что ваше изображение доходит до красных линий под обрез.
Шаг 6
Вставьте прозрачное изображение, щелкнув и перетащив его из папки в InDesign или CTRL + D (Option + D на Mac) для размещения.Следуйте инструкциям выше, чтобы изменить размер и разместить прозрачное изображение. На изображении не должно быть цвета фона. Если да, убедитесь, что вы сохранили файл в формате PNG. Обратите внимание: я бы очистил это изображение с помощью некоторой цветокоррекции, чтобы лучше соответствовать фоновому изображению. Это просто, чтобы показать вам, как прозрачное изображение из Photoshop можно быстро добавить в проект печати в InDesign.
Заключение / окончательное изображение
Теперь, когда вы вставили прозрачное изображение в формате PNG, вы можете продолжить работу над своим документом.Добавьте текст, другие изображения и т. Д. Я очистил файл PNG в Photoshop, добавив некоторые коррекции цвета. Я также использовал инструмент «Размытие» по внешнему краю всего изображения, чтобы смягчить резкие линии. Благодаря этому окончательный PNG лучше сочетается с моим фоновым изображением, когда я возвращаю его в InDesign.
Pro Совет: Сохраняйте согласованность дизайна и используйте цвета фона и прозрачные изображения для текста.
Как сделать изображение прозрачным фоном в Photoshop
Иногда вам нужно загрузить изображение, которое требует прозрачности, чтобы смотреть на исходный фон.В таких случаях было бы удобно загрузить изображение PNG, так как оно может обеспечить желаемое преобразование.
В этой статье вы подробно расскажете, как удалить фон изображения и сделать изображение прозрачным в Photoshop.
Как сделать изображение прозрачным в Photoshop
Создание файла
Шаг: 1
Первым шагом является создание файла. Для этого откройте Adobe Photoshop и выберите «Создать» в меню «Файл» вверху страницы.
Шаг: 2
Затем в появившемся окне «Новый документ» создайте файл желаемого размера и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования на Интернет). Кроме того, выберите Transparent из раскрывающегося списка Background Contents.
Когда вы создаете PNG с прозрачным фоном в Photoshop, вы должны указать размер изображения, которое будет загружено в качестве фона. Ниже приведен пример, который иллюстрирует следующее: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемым размером для загрузки изображений HD.
После настройки параметров нажмите «ОК», чтобы открыть новый документ.
Шаг: 3
Затем на панели «Слои» убедитесь, что вы работаете с прозрачным слоем, а не с фоном.
По завершении создания вы должны сохранить прозрачное изображение, в зависимости от версии Photoshop, которую вы используете, в меню «Файл».
Сохранение файла
Перед тем, как сделать фотографию прозрачной в Photoshop, вам необходимо знать, что с CC 2015 параметр «Сохранить для Интернета и устройств» в меню «Файл» помечен как устаревший ( устаревший, ).И заменен новой опцией «Экспорт» ( Экспорт ), которая предлагает идентичную функциональность с более быстрым сохранением в файл меньшего размера и лучшего качества. Чтобы использовать параметр «Экспорт», щелкните меню «Файл» и выберите «Экспортировать как».
Напоминание: Adobe по-прежнему предлагает опцию «Сохранить для Интернета и устройств» в Photoshop CC 2015, и она доступна через меню «Файл»> «Экспорт» или с помощью Command + Option + Shift + S (для Mac) или Ctrl + Alt + Shift + S (для ПК).
Затем в появившемся окне выберите PNG в раскрывающемся меню «Формат» и убедитесь, что выбраны «Прозрачность» и «Преобразовать в sRGB».
Поля «Размер изображения» и «Размер холста» должны автоматически заполнять значения, которые вы задали при создании файла. Но вы можете изменить эти настройки перед тем, как сделать Photoshop прозрачным, если хотите.
По завершении щелкните « Экспортировать все ».
Как обрезать и выпрямить
изображений в Photoshop? ПОДРОБНЕЕКак сделать изображение полупрозрачным в Photoshop
Полупрозрачные изображения используются на веб-сайтах в качестве фона или миниатюр для сообщений, коллажей и других работ.
Шаг: 1
Для демонстрации нам понадобится несколько изображений. Я взял этот —
Когда вы посмотрите на палитру слоев, вы увидите, что слой заблокирован (значок замка на слое). Это означает, что мы не сможем его редактировать.
Чтобы разблокировать слой, просто нажмите на замок.
Теперь вы все готовы.
Шаг: 2
Прозрачность (называемая «Непрозрачность» в Photoshop) меняется очень просто.Для этого ищем в палитре слоев поле с соответствующим именем.
Если щелкнуть стрелку рядом со значением непрозрачности, появится ползунок для настройки значения. Вы также можете ввести точное число в это поле.
В общем, это все, что вам нужно знать о том, как сделать изображение прозрачным.
Давайте установим значение 60%.
Как видим, машина стала полупрозрачной; и через него появился фон в виде квадратов.
Тогда нам нужно сохранить картинку в нужном формате. Прозрачность поддерживается только в формате PNG.
Нажмите комбинацию клавиш CTRL + S (CMD + S) и в открывшемся окне выберите нужный формат.
После того, как мы выбрали место и присвоили файлу имя, нажмите «Сохранить». Полученное изображение в формате PNG выглядит следующим образом:
Как использовать инструмент «Лечебная кисть» в Photoshop?
УЗНАТЬ БОЛЬШЕКак сделать белый фон изображения прозрачным в Photoshop
Часто фон изображения покрывает намного больше.В этом и подобных случаях полезно иметь возможность сделать фон прозрачным.
Шаг: 1
Теперь мы будем работать с изображением, которое вы можете видеть ниже — у нас там большая дорога; и в дорогу ставим машину. Как видите, вокруг машины белый фон, который испортил весь вид:
Итак, нам нужно удалить этот белый фон с сохранением размера изображения и сделать его прозрачным.
Шаг: 2
Для удаления белого фона можно применить три различных способа, которые я объясню последовательно следующим образом.
Первый метод:
Волшебная палочка — Шаг: 1
Мы будем использовать инструмент «Волшебная палочка».
Откройте изображение в графическом редакторе Photoshop. Справа в слоях, как обычно, щелкаем левой кнопкой мыши по замку.
Magic Wand — Шаг: 2
Теперь щелкните по инструменту «Magic Wand» и в «Tolerance» установите параметр «10»:
Вот и все, фон исчез. .
Второй метод:
Инструмент «Магнитное лассо» — Шаг: 1
Удалите фон с помощью инструмента «Магнитное лассо», нам нужно его сначала выбрать —
Инструмент «Магнитное лассо» — Шаг: 2
Щелкните рядом автомобиль и просто наведите на него курсор. После этого по контуру будет проведена сама линия.
Инструмент «Магнитное лассо» — Шаг: 3
После выбора перейдите в верхнее меню к «Выделение» => «Инверсия» или просто нажмите Ctrl + Shift + I (Cmd + Shift + I)
И нажмите клавишу Delete на клавиатуре, чтобы сделать фон прозрачным.
Напоминание: Хочу обратить ваше внимание, что Первый и Второй способ можно использовать, если фон изображения однообразный, например только белый или только красный и т. Д. Но если фон разноцветный или имеет остальные изображения позади, лучше использовать третий способ.
Третий метод:
Быстрая маска — Шаг: 1
Удалите фон, используя режим «Быстрая маска». Он расположен внизу:
Быстрая маска — Шаг: 2
Щелкните «Быструю маску», выберите инструмент «Кисть» и просто аккуратно нарисуйте автомобиль, не затрагивая фон:
Когда вы рисуете машину, нужно нажать кнопку «Быстрая маска».
И на клавиатуре нажмите клавишу «Удалить». Это оно! Фон не будет.
Как сохранить изображение с прозрачным фоном
Если изображение сохранено в формате JEPG, оно будет белым, а не прозрачным фоном. Следовательно, вам необходимо сохранить его в формате PNG или GIF.
Итак, сохраняем:
Нажмите «Файл» => «Сохранить как…» в меню:
В «Имя файла:» дайте картинке имя, в «Тип файла» найдите и выберите формат «PNG. ».Щелкните по кнопке «Сохранить».
Ладно, проверим результат.
Теперь, если мы поместим машину на дорогу, мы увидим, что фон машины прозрачный.
Как сделать часть изображения полупрозрачной:
Кроме того, мы можем применить знания в некоторых других процессах, чтобы сделать изображение реальным. Поскольку окна в машине обладают свойствами полупрозрачного фона, давайте применим эффект полупрозрачности только к переднему стеклу автомобиля.
Шаг: 1
Для этого мы повторно открываем наш файл с автомобилем и с помощью любого из 3 методов, упомянутых выше, выбираем переднее окно.
Шаг: 2
Теперь щелкните правой кнопкой мыши по стеклу и выберите «Слой через разрез». Теперь наше стекло находится на другом слое, и в свойствах слоя мы можем выбрать прозрачность. Например, мы установим 80%.
Сохраните автомобиль в формате PNG и посмотрим на результат.
Теперь мы можем видеть фон изображения через стекло.
Кроме того, вы можете воспользоваться помощью такого эксперта, как оффшорная компания по производству трафаретов, для обработки вашего срочного изображения.
Как использовать инструмент «Пластика» в Photoshop?
УЗНАТЬ БОЛЬШЕКак сделать логотип прозрачным в Photoshop
Наконец, в статье рассказывается, как разместить логотип на любом фоне по шагам.
Шаг: 1
Давайте сначала откроем логотип.Для этого нажмите «Файл», затем «Открыть» в верхнем левом меню.
Шаг: 2
Затем выберите файл с логотипом и поместите его.
Шаг: 3
Выбираем любой из трех инструментов:
- «Волшебная палочка»
- «Магнитное лассо».
- «Маска» + «Кисть»
Мы ценим использование любого из трех способов для достижения желаемого эффекта. Но первый вариант — «Волшебная палочка» — лучший способ двигаться вперед.Ведь с помощью волшебной палочки мы можем выделить все элементы за пару кликов.
Напоминание: «Магнитное лассо» также выделит фрагменты, но мы потратим много времени на рисование контура. Это лучший способ использовать для фотографий или для элементов с разноцветным фоном и содержанием, которое «Волшебная палочка» не распознает правильно.
«Маска + кисть — еще более трудоемкий способ выбора, но это наиболее точный способ выбора.Я рекомендую его, если вам нужно выделить сложную и красочную область для большей точности.
Итак, мы остановились на Magic Wand. Выберите инструмент на левой панели.
Шаг: 4
Затем щелкните левой кнопкой мыши по белому полю. Мы получим следующий эффект:
Как мы видим, внутри логотипа и текста все еще есть белые области.
Шаг: 5
Вот почему необходимо щелкнуть левой кнопкой мыши по всем белым областям внутри, удерживая нажатой клавишу «Shift».Теперь мы выбрали все области:
Шаг: 6
После того, как мы выбрали все белые области, просто нажмите «Del».
Шаг: 7
Все, что нам нужно сделать, это сохранить наш логотип, следуя приведенным ниже инструкциям:
- Нажмите «Файл» в верхнем меню и выберите «Сохранить как.
- Выберите формат «PNG (* .PNG)».
- Нажмите «Сохранить», чтобы подтвердить изменения.
Теперь мы можем использовать логотип на любом фоне.Например, мы можем разместить его на фотографии —
Или добавить в рекламную брошюру —
Заключительные слова
В заключение, общее руководство подходит для всех уровней учащихся, поскольку эта статья предназначена для со всеми возможными ноу-хау, чтобы сделать фон изображения прозрачным в Photoshop. Однако, если вы столкнетесь с какой-либо неудачей при редактировании фотографий, вам лучше перестраховаться. Было бы разумно нанять кого-нибудь или поручить услуги по редактированию фотографий профессионалу.
- Откройте файл изображения в Paint.