Онлайн редактор изображений прозрачный фон. Сделать прозрачный фон в фотошопе

Влад Мержевич

Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Рис. 1. Изображение для создания фона

После чего добавляем рисунок в качестве фона через свойство background , как показано в примере 1.

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

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

Клетчатое изображение

Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.

Рис. 3. Увеличенный клетчатый рисунок

Вот как в итоге это выглядит (рис. 4).

Рис. 4. Имитация полупрозрачности

Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность - прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Результат примера показан на рис. 5.

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter . Естественно, оно приводит к невалидному коду CSS.

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, последнее же значение устанавливает прозрачность и совпадает со значением свойства opacity .

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter , но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Результат примера можно посмотреть на рис. 6.

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Div { background-color: red; /* В IE7 не применяется */ background-color: rgba(255, 0, 0, 0.5); }

Решается это заменой свойства background-color на background .

Div { background: red; /* А это работает */ background: rgba(255, 0, 0, 0.5); } Однако здесь есть один нюанс. Валидатор CSS «ругается» на background , если ему задать значение в формате RGBA. Но при этом корректно относится к background-color . В общем, как всегда, приходится выбирать между браузерами и валидностью.

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

Затем необходимо закрасить область, которая должна стать невидимой, каким нибудь цветом, желательно отсутствующим на остальном изображении. Это необходимо для того, чтобы четко разделить видимую и невидимую часть изображения. Если этого не сделать, может получиться так, что невидимой станет и та часть изображения, для которой это не желательно. Ниже приведен пример подготовленного для обработки изображения. Красным цветом выделена та область на изображении, которая будет сделана прозрачной.

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

Изображение будет загружено на сервер и на следующей странице нам будет предоставлена возможность мышкой выбрать цвет, который необходимо сделать прозрачным.

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

http://blogs.mail.ru/mail/nilllok/43BD7728F4AD505D.html

Многие сайты, которыми мы привыкли пользоваться со временем становятся платными, и нам приходится искать что то другое, аналогичное. Так получилось с сайтом Clipping Magic , подробный урок по которому . Есть подобный сайт, работать с которым одно удовольствие. Единственный минус этого сайта, это ОБЯЗАТЕЛЬНАЯ РЕГИСТРАЦИЯ . Иначе полученный результат не сохранить.

Удаление заднего фона с фотографии задача не такая уж и простая, как может показаться на первый взгляд. Даже имея такой мощнейший редактор графики, как Photoshop, можно потратить не один час работы.
А сайт Background Burner многое делает автоматически. Остается только подправить полученный результат.

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

Зайдя на сайт айт Background Burner выбираем фото, или картинку, с которой хотим удалить задний фон. Для этого жмем на кнопку ВЫБРАТЬ ФОТО .


Фото загрузилось, и сразу автоматически программа начала его обрабатывать.


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


Мы видим что фото получилось НЕ ИДЕАЛЬНЫМ . Поэтому подредактируем его вручную. Жмем внизу самую последнюю кнопочку ПОДКРАСИТЬ . (сайт переведен чтоб кнопочки были понятнее).


Берем КРАСНУЮ КИСТОЧКУ (размер кисти можно менять стрелочками справа), она удаляет ненужный фон , который не смогла удалить программа, и проводим по тем местам, которые хотим до убрать. На картинке оригинале вы сразу увидите все изменения.
Взяв зеленую кисточку, (размер ее так же можно менять) можно наоборот ВОССТАНОВИТЬ излишне убранные детали
то есть КРАСНЫМ - то что надо убрать (т.е.лишний фон).
ЗЕЛЕНЫМ - то, что должно остаться (т.е.выбранный объект.)


Когда результат нас устроит, то жмем кнопочкуФИНИШ .


Сохранить результат можно на белом фоне и на прозрачном, но только после того, как вы ЗАРЕГИСТРИРУЕТЕСЬ на сайте.
Не надо этого пугаться, все абсолютно бесплатно, зато доступны сразу будут многие функции.

ВНИМАНИЕ - при сохранении картинки, обязательно сморите в каком формате вы ее сохраняете. Что б картинка была без фона ВЫБИРАЕМ ФОРМАТ PNG .

Из вырезанного фото можно сделать любой коллаж, подставив свой фон и рамку. Для этого под готовым фото жмем СРЕДНЮЮ кнопочку ЗАМЕНИТЬ ФОН

Можно взять фон из уже готовых (предложенных системой фонов), а можно выбрать свой, нужный вам фон.


Редактируем полученный коллаж. Свое фото берем мышкой, и перетаскиваем на нужное место. Бегунком внизу увеличиваем его, или уменьшаем.


Когда результат устроит, СОХРАняем фото самой первой кнопочкой.


Получаем свой коллаж.


Получив очищенное от фона фото я вставила его в рамку, в фотошопе онлайн ЭДИТОР , подложив свой фон. Кто не знает как это сделать

Дата публикации: 10.03.2013

Большинство блогеров при написании новых статей на своем сайте стараются в пост вставить какую-то картинку, которая бы отражала суть всей статьи. Эти картинки стали уже хорошей традицией и используются практически во всех блогах.

Кто-то рисует картинки самостоятельно. Например, у меня есть хороший знакомый, который все изображения для своего сайта создает в программе 3ds Max. Но большинство вебмастеров берут изображения из Интернета, и очень часто попадаются отличные картинки с неподходящим фоном под фон блога. Но эта проблема чаще всего решаемая, нужно лишь сделать фон картинки прозрачным. О том, как сделать фон картинки прозрачным , я и расскажу в данной статье.

Самый распространенный способ сделать фон картинки прозрачным – использовать графический редактор Photoshop. Но не у многих из нас на компьютере установлена данная программа. Лично у меня Фотошопа на компьютере нет.

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

Для примера у меня есть картинка, которая мне очень сильно понравилась, но основной фон этой картинки – белый, а фон моего сайта абсолютного другого цвета (например, синий).

Моя задача — сделать фон картинки абсолютно прозрачным и разместить эту картинку на сайт с другим фоном. Для того, чтобы сделать фон прозрачным, я буду использовать онлайн-сервис для работы с изображениями — Pixlr.com. Pixlr.com — является неким подобием Photoshop. Редактировать любые изображение с помощью данного сервиса можно Онлайн, не устанавливая на компьютер при этом никаких программ.

1) Заходим на сайт Pixlr и загружаем изображение:

2) С правой стороны в окне «Слои» щелкаем два раза мышкой по изображению «замочек», который запрещает нам удалить задний слой на картинке.

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

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

4) После того, как фон будет выделен, нажимаем на клавишу Delete , и фон будет удален:

5) Сохраняем картинку с прозрачным фоном на свой компьютер. Сохранять нужно обязательно в формате PNG. В противном случае прозрачный фон будет потерян.

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

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

Если что-то непонятно из статьи, советую посмотреть мой онлайн-урок: «Как сделать фон картинки прозрачным»:

Краткая демонстрация

смещения под ползунком регулировки прозрачности.

Примечание: в PowerPoint можно сделать изображение прозрачным и использовать его в качестве фона для слайда.

Установить прозрачный цвет недоступен.

Важно:

Сброс параметров рисунка в группе изменить .

Примечание:

Изменение прозрачности фигуры

Удаление фона рисунка

Изменение прозрачности изображения вне Office

Чтобы сделать рисунок прозрачным, выполните следующие действия:

НаРисовать фигуру, заполнив ее изображением, а затем настройте прозрачность рисунка.

Этот процесс показан в видео. Чтобы просмотреть более подробные сведения о нем и других методах, щелкните заголовок ниже, чтобы развернуть нужный раздел .

Краткая демонстрация

Настройка прозрачности: подробные инструкции

Изменение прозрачности всего изображения

НаРисовать фигуру, заполнив ее изображением, а затем настройте прозрачность рисунка.

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

Изменение прозрачности части рисунка

С помощью встроенной функции прозрачности можно сделать один цвет на рисунке прозрачным.

В отличие от применения прозрачности ко всему рисунку, сделать один цвет прозрачным можно только в объекте, вставленном как рисунок (то есть не в рисунке в фигуре). Если рисунок вставлен в фигуру, как описано выше, параметр Установить прозрачный цвет недоступен.

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

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

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

Добавление подложки с рисунком

Изменение прозрачности фигуры

Удаление фона рисунка

Изменение прозрачности изображения вне Office 2010

Если у вас есть приложение для редактирования изображений, вы можете использовать его, чтобы сделать рисунок прозрачным. Затем сохраните рисунок в формате, в котором сохраняются сведения о прозрачности (например, PNG-файл), и вставьте его в документ Office.

Настройка прозрачности рисунка: основные шаги

Чтобы сделать рисунок прозрачным, выполните следующие действия:

Сначала наРисовать фигуру

Залейте ее рисунком.

Настройте прозрачность рисунка.

Настройка прозрачности: подробные инструкции

Изменение прозрачности всего изображения

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

Изменение прозрачности части рисунка

С помощью встроенной функции прозрачности можно сделать один цвет на рисунке прозрачным.

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

Добавление подложки с рисунком

Изменение прозрачности фигуры

Изменение прозрачности изображения вне Office 2007

Если у вас есть приложение для редактирования изображений, вы можете использовать его, чтобы сделать рисунок прозрачным. Затем сохраните рисунок в формате, в котором сохраняются сведения о прозрачности (например, PNG-файл), и вставьте его в документ Office.

Изменение прозрачности части рисунка

На вкладке Формат рисунка нажмите кнопку Цвет , а затем щелкните Установить прозрачный цвет .

Примечание:

Изменение прозрачности рисунка или цвета заливки

Изменение прозрачности части рисунка

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

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

На вкладке Формат рисунка нажмите кнопку Перекрасить , а затем щелкните Установить прозрачный цвет .

Щелкните область рисунка или изображения, закрашенную тем цветом, который требуется сделать прозрачным.

Примечание: Вы не можете сделать более одного цвета рисунка прозрачным. Области, которые представляют собой один цвет (например, сине-Небесный), в действительности могут состоять из разнообразных вариаций цвета. Таким образом, выбранный цвет может отображаться только в маленьком районе, и в некоторых рисунках может возникнуть трудная возможность увидеть эффект прозрачности.