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

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

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

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

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

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

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

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

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

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

Очень часто при создании поздравительных открыток или видео я сталкивалась с вопросом: Как это можно сделать без знания фотошопа ?

Тот, кто знаком с фотошоп проделает это без труда. Но не все еще изучили эту умную программу. Как же быть им? Неужели нет выхода?

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

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

Приступим к делу.

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

Перед Вами откроется вот такое окно:

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

Рисунок появляется на страничке сервера:

Справа выходя 3 окошечка и в среднем из них нарисован замочек. Нажмите на нем 2 раза левой мышкой. Таким образом откроется дверь в волшебство.

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

Завершающий шаг на пути к превращению: нажать кнопку " Del " (удалить) на Вашем компьютере. Фон становится в клеточку. Если не все пространство вокруг буде охвачено клеточкой, прикоснитесь еще раз к этому месту волшебной палочкой и нажмите кнопку "Del "

Выходит окошечко, в котором Вас спрашивают: "Сохранить изображение перед закрытием?" Нажимаем "Да ".

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

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

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

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

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

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

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

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

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

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

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

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

Прозрачный фон у картинки может пригодиться много где, от пользовательского редактирования фотографий до сайтостроения или больше. Как это сделать? Либо у нас уже есть готовая картинка, у которой надо убрать фон, либо нужно самим нарисовать рисунок на белом листе и убрать белый фон. Нам понадобится хороший редактор изображений Paint.net. Если у вас его нет, то перейдите по ссылке для скачивания .
Существует как минимум 4 способа, как сделать фон картинки прозрачным:

Способ №1:

Если изображение располагается на белом или однородном фоне, то лучше всего воспользоваться инструментом "Волшебная палочка". Она располагается в панели инструментов, выбираем и нажимаем ею на область, которую мы хотим удалить. Обратите внимание: Фон желательно должен быть одноцветный(или с минимальным разнообразием цветов), иначе Палочка "не поймёт" что вы хотите выделить и вам придётся долго с ней возиться. У палочки есть настройка чувствительности. Чем больше фон совпадает цветом с нужной частью, тем меньше чувствительность нужна для выделения.

"Открыть..." → "Берём картинку" →"Открыть" (Загружаем изображение в Paint.net)→"Волшебная палочка" → Нажимаем на белый фон →"Правка" →"Вырезать". Готово. Если вы видите на месте стёртой области шахматный узор, значит при сохранении она будет прозрачной. Важно! Теперь сохраняем полученную картинку в формате "PNG" или "GIF". Советую PNG так, как этот формат поддерживает, в отличие от GIFа, более высокое качество изображения, а так же он позволяет сохранить изображение с полупрозрачным фоном. Почему же не "JPEG" ? Потому что он и остальные форматы не поддерживают эффекта прозрачности и при сохранении вырезанный фон превратиться в белый.

Способ № 2:

Если же у нас рисунок с разноцветным фоном, то палочкой тут не обойтись. Вся процедура такая же как и в способе № 1 , но вместо волшебной палочки мы будем использовать инструмент под названием "Лассо". Им придётся обвести от руки ту область, которую нам нужно оставить.

Ставим в любой точке о обводим по всему нужному сектору зажав левую кнопку мыши, пока не придём в исходную точку, затем на верхней панели программы нажимаем кнопку "Обрезать по выделению". Также в некоторых местах можно подкорректировать "ластиком".

Способ № 3:

Этот способ тоже заслуживает внимания. Если вам не нравится первые 2 описанные выше, то вот что нужно делать: Над слоём с изображением создаем новый пустой слой ("Создать новый слой"). Выбираем любой цвет и инструмент "Линия или кривая". В этом пустом слое по краям нужной области проводим линию и искривляем её по нужной нам траектории. Обратите внимание: Между линиями не должно быть никакого зазора. А ширина не должна быть меньше 3. Как только мы обвели нужную область Выбираем "Волшебную палочку" и выделяем всё что внутри. Не снимая выделения переходим на слой с изображением и нажимаем кнопку Delete. Теперь можно удалить слой с линиями.

Способ № 4:

Проверенный временем способ стирания фона и чего либо у картинки.

Любой фон.

Инструмент "Ластик"→Увеличиваете масштаб изображения→Ставьте небольшой радиус охвата ластика и вперёд!!! Когда аккуратно сотрёте вокруг нужного объекта тонкий периметр, увеличьте радиус охвата ластика и уже грубо стирайте всё "за бортом".

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

Однажды серфя по Интернету, я наткнулся на статью о графическом редакторе Pixlr Photo Editor. Кстати, это не обычный графический редактор, а онлайн-редактор. Вот ссылка на него - http://pixlr.com/editor/ .

Именно эта программа и поможет нам сделать картинку с прозрачным фоном в формате PNG.

Имеем, например, такое изображение:

Я хочу убрать из него черный фон и сделать его прозрачным.

Для этого заходим в программу , выбираем пункт "Open image from computer" (Открыть изображение с компьютера) и загружаем нужную картинку. Сразу же поменяйте язык программы на русский (меню Language-> Русский язык).

Справа в окне "Слои" Вы увидите миниатюру картинки и колодочку. Щелкните мышкой дважды по колодочке (должна появиться "птичка" в квадратике). Таким образом Вы снимаете блокировку с фона.

После этого выбираете инструмент "Волшебная палочка" (слева на панели инструментов), подносите его к фону рисунка и щелкаете мышкой. Фон выделится пунктирной линией. Клавишей Delete уничтожаете фон.

Вот что у меня получилось: