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

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

Для этого нам необходима какая-либо программа для удобного редактирования изображения, в которой можно будет выполнить несколько несложных действий и заменить фоновое изображение на фотографии.

Мы расскажем вам на примере двух программ.

Первая - это более простой вариант - paint net. Эта программа напоминает нам обычную, для рисования, которая входит в стандартный список Windows. Но она немного модернизирована и имеет больше возможностей и функций. Программа очень удобна, когда вам необходимо с картинки убрать фон, а оставить лишь какой-то конкретный объект, также есть возможность использовать различные эффекты для изменения изображения, можно наносить текст на фотографии и многое другое.

Сделать прозрачный фон здесь довольно не сложно. Открываем с помощью программы paint net необходимую фотографию или картинку. При нажатии строки в контекстном меню «открыть с помощью» выбираем в списке нашу программу, следом картинка откроется в поле редактирования.

На расположенной слева на экране, вы видите значки - кнопки, которыми нам и придется пользоваться. Из всех имеющихся нам потребуется «ластик» и «волшебная палочка».

Как сделать прозрачный фон? Учимся.Сначала увеличиваем изображение, чтобы можно было более точно и аккуратно стереть ластиком ненужные части изображения и выполняем эту задачу, максимально приблизившись к тому объекту, что вам необходимо оставить в единственном видимом экземпляре. Затем беремся за инструмент «волшебная палочка». При ее помощи вы выделяем ненужные области изображения и удаляем кнопкой «Delete». Хочу отметить, что этот инструмент выделяет все части рисунка одинаковые по цвету. Будьте осторожны, ненужная область может совпадать по цветовой гамме с нужной частью изображения, не удалите случайно что-нибудь лишнее. На всякий случай программистами придумана функция отмены последних действий - это голубая стрелочка, расположенная на панели инструментов. И так при помощи «ластика» и «волшебной палочки» мы постепенно убираем с изображения все лишнее. Вокруг нужного объекта остается лишь фон в клеточку. Вот как сделать прозрачный фон у картинки в программе paint net. Чтобы сохранить ваше изображение на компьютер с прозрачным фоном нажимаем в меню «файл» строку - «сохранить как» и, выбрав путь сохранения и необходимый формат - gif или png, сохраняем.

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

Тут можно использовать те же инструменты и принцип работы, что и в paint net, ну, а если вам необходимо хорошее качество, очень ровные и красивые края выбранного элемента, который вы хотите оставить на прозрачном фоне, то вам придется немного потрудиться и использовать другие кнопки панели инструментов. Использовать необходимо инструмент «лассо» - а именно - Polygonal Lasso Tool и Magnetic Lasso Tool (если у вас не русифицированная версия программы). При помощи этого инструмента обводим наш объект, обводкой ставя точки фиксации, в точности повторяя форму объекта, и когда вы соедините линию, проведенную «лассо» (сомкнете ее), она замигает. Это значит, что выделенный объект готов к дальнейшим изменениям. Щелкаем по выделенному необходимому фрагменту правой кнопкой мыши и в контекстном меню выбираем строчку «Layer via Copi» - делаем копию слоя. После этого во вкладке «слои» выбираем исходное изображение, выделяем его инструментом «Rectangular Marquee toll» (он располагается на в самом верхнем левом углу панели управления). Жмем кнопку «del» на вашей клавиатуре. Фон стал прозрачным. Сохранить изображение в таком виде можно так же, как и в вышеуказанной программе.

Как сделать прозрачный фон у фотографии или картинки в «фотошопе», вы теперь тоже знаете. Теоретических знаний недостаточно, так что вперед к компьютеру. Программы «фотошоп» и «пейнт.нет» в вашем распоряжении.

Онлайн-программма Pixir-делаем прозрачный фон у картинки.

Сергей Фещуков

Бывает попадается очень подходящая картинка для вашего поста и всё бы хорошо... Но фон картинки не подходит под фон блога или блока с текстом. Явно ни у одного меня такая проблема и ни у одного меня фон не белый, который подходил бы в большинстве случаев. Мне нужен прозрачный фон !

В интернете я не нашел нормальных идей как сделать прозрачный фон для готовой картинки, поэтому начал сам экспериментировать и нашел более менее подходящее решение!

Как сделать прозрачный фон у картинки

Возьмём в пример одну простую картинку в формате.jpg (вообще формат не важен особо):

Здесь есть белый фон, от которого я хочу избавиться и вместо него сделать прозрачный фон. В этом нам поможет Pixlr - онлайновое подобие фотошопа.

Загружаем наше изображение. Справа в окошке "Слои" появится слой "Фоновый", на котором замочек (не дает удалять фон картинки).

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

Теперь берем волшебную палочку (панель инструментов, правый столбец вторая кнопка сверху), указываем следующие параметры: допуск = 21, галочки стоят на сглаживании и непрерывности (обычно такие параметры стоят по стандарту), хотя с параметрами можете поэкспериментировать; и нажимаем на фон картинки (в нашем случае, на белый фон).

Теперь удаляем фон нажатием кнопочки "Delete" и получаем нужное нам изображение с прозрачным фоном.

В итоге на выходе получаем то же изображение с прозрачным фоном.

Единственный минус Pixlr - нельзя изображение сохранить в формат.gif, который тоже сохраняет прозрачный фон, но намного легче, чем формат.png. Но если нет другого выхода, почему бы не воспользоваться этим?

спасибо Натальи Петровой

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 ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .

Здравствуйте уважаемые посетители. В этом уроке я покажу, как используя программу Фотошоп можно убрать фон и сделать фотографию прозрачной. Особых знаний этого Фото-монстра вам не понадобится, так как здесь всё очень просто. Главное, чтобы у вас был установлен Photoshop, и вы повторяли за мной все действия.

Итак, как сделать прозрачный фон в Фотошопе?

Запускаем Фотошоп и открываем подопытную фотографию. Жмем меню Файл – Открыть и указываем расположение изображения.

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

Нужно, чтобы этот замочек исчез, то есть слой разблокировался. Для этого прямо по замочку делаем один клик левой кнопкой мыши . И замочка больше нет!

Теперь нам нужно удалить фон. Для этого берем какой-нибудь инструмент выделения, например, Волшебная палочка .

Жмём инструментом по фону на фотографии, таким образом выделив ненужный нам объект.

Появилась пунктирная линия (бегающие муравьи). Остается нажать на клавиатуре клавишу DELETE и фон будет удален. Смотрите как получилось:

Супер! Теперь снимите выделение нажав на клавиатуре сочетание клавиш CTR+D .

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

Для этого нажмите меню Файл – Сохранить для Web . Или же просто воспользуйтесь ALT+SHIFT+CTR+S .

Вы увидите окно, в котором нам обязательно нужно выбрать формат PNG-24 и только после этого нажимать кнопку Сохранить .

А теперь смотрите что было и что стало:

Напоследок стоит сказать, что в некоторых случаях когда Вы решите сделать прозрачный фон в Фотошопе на какой-то картинке, то Вам возможно придётся применять другие инструменты выделения, например, Перо или Магнитное лассо . Я использовал инструмент Волшебная палочка , так как у меня на фотографии человека было легко отделить от фона. Если вы будете удалять фон со сложных изображений, то придется немного попотеть.

На этом сегодня всё, желаю удачи!

21.12.14 32.7K

Перед тем, как сделать прозрачный фон в фотошопе, нужно все хорошо разузнать о возможностях этой программы. А то вдруг вместо фона прозрачной станет ваша одежда на фотографии.

Основы работы c фоном в Photoshop

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

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

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

Возможность редактирования изображений в Photoshop построена на использовании слоев. Каждый из них является отдельным независимым объектом. Изменение любого из слоев никак не отразится на содержимом остальных. Слоевая структура изображения отображается на панели «Слои »:

Но все это теория, которую можно быстро познать на практике. Поэтому приступим к творчеству, сила выражения которого будет усилена Photoshop .

Использование корректирующего слоя

Разберем на примере, как в фотошопе можно поменять фон с помощью корректирующего слоя. На старте у нас имеется такое изображение:

Положительной стороной использования корректирующего слоя является экономия времени путем настраиваемого воздействия на всю цветовую гамму рисунка. Создать его можно, нажав на черно-белый круг внизу панели «Слои ». В появившемся меню выбираем пункт «Кривые »:

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

С помощью корректирующего слоя можно легко изменить время дня во всем городе.

Удаляем небо

Надоело нам скучное небо над городом. Поэтому удалим его с помощью инструмента «Стиратель фона ». Он находится на боковой панели слева:

Конечно, в приведенном примере не хватает немного точности. Поэтому, чтобы не удалить нужные детали в рисунке, следует использовать тонкое перо.

Все изменения коснулись лишь основного слоя. Перед тем, как изменить фон, через меню «Слой » — «Новый » создаем новый:

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

Но контуры города очень трудно вырезать ровно. Поэтому для демонстрации следующего инструмента воспользуемся фотографией пустыни. Задача все та же: меняем небо:

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

Перед тем, как заменить фон неба на другой, активируем волшебную палочку на панели инструментов и кликнем ей по небу. При этом чувствительность инструмента лучше выставить на максимальный показатель. Иначе фон будет выделен некорректно:

После этого на выделенной области жмем правой кнопкой мыши, и в появившемся контекстном меню выбираем «Слой через обрезание »:
Вроде бы ничего не произошло. Но если взглянуть на панель «Слои », то там мы увидим новый элемент. Чтобы удалить вырезанный фон, следует выделить содержащий его слой, и в контекстном меню выбрать команду «Удалить слой ». Вот как сейчас выглядит наша пустыня:

Теперь можно добавить новый слой и заполнить небо над Сахарой яркими красками:

Размытие заднего фона

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

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

Главная проблема заключается в том, чтобы правильно выделить контуры тела. Попробуем для этого воспользоваться магнитным лассо.

Если проводить инструментом «Магнитное лассо» вдоль контура на изображении, то серебристую обводку как будто магнитом притягивает к границам выделяемого предмета.

После активации инструмента осторожно проводим курсором вдоль контуров фигуры девушки. А затем в контекстном меню выбираем пункт «Инвертировать выделение »:

Перед тем, как сделать задний фон размытым, применим встроенный фильтр графического редактора. Для этого в меню «Фильтр » выбираем пункт «Смазывание » — «Смазывание Гаусса »:

Получилось, конечно, не без изъянов. Но все их можно убрать с помощью инструмента «Размытие ». И вот что получилось:

Теперь используем другой подход, и для выделения фигуры девушки используем маску. Сначала создадим дубликат нашего слоя. Для этого отмечаем его в панели «Слои » и в контекстном меню выбираем пункт «Дублировать слой »:

Затем к появившейся копии слоя применяем фильтр «Смазывание Гаусса ». А к копии слоя добавляем маску, нажав на значок в виде прямоугольника с белым кругом внутри него. Вот как должно выглядеть фото девушки на данном этапе: