Используем JPEG с прозрачностью. Создание прозрачного фона в Фотошопе и Paint – основные и эффективные инструменты Как сделать задний фон прозрачным




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

Перечень сервисов способных сделать прозрачный фон картинки

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

Если у вас, как и у меня возникает желание , то спешу вас обрадовать я протестировал большинство из них и составил список лучших (по ссылке выше).

Сервис Online-Photoshop позволяет удалить задний фон

Первый ресурс, позволяющий создать прозрачный фон онлайн – это Online-Photoshop. Работа с ним достаточно проста, позволяя за пару минут получить объект с прозрачным фоном на вашем фото.

  • Для реализации намеченного перейдите на ресурс , кликните на кнопку «Select image» и загрузите нужное фото.
  • Последнее появится в левой части экрана, а курсор приобретёт форму жёлтого кружочка.
  • Пометьте этим кружочком с помощью жёлтой линии внешние контуры объекта, фон за которым вы хотите сделать прозрачным.
  • Затем кликните на зелёный кружочек с плюсиком в панели инструментов и пометьте зелёным цветом внутренние черты объекта.
  • Потом кликните на красный кружочек с минусом и пометить красными линиями внешнее пространство за границами объекта.

  • Теперь нажимаем стрелочку справа и смотрим результат. Если всё хорошо, нажимаем на кнопку «Download» сверху и сохраняем результат к себе на ПК.

    Сервис Pixlr задаём один цвет фону

    Другой инструмент чтобы сделать прозрачный фон онлайн – это похожий на «Фотошоп» онлайн-редактор Pixlr. Он обладает значительным числом возможностей, но нас интересует в первую очередь создание прозрачного фона онлайн.

    Сервис IMGonline позволяет сделать прозрачный фон

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

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


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

    Замечу, что за счёт автоматизации качество получаемой обработки обычно хуже, чем в перечисленных выше Online-Photoshop и Pixlr.

    Сервис Watermark.Algid.Net

    Ещё один сервис, позволяющий сделать прозрачный фон на фото онлайн бесплатно.

    Для работы с данным сервисом фотографию нужно подготовить, для чего нужно закрасить потенциально прозрачную область цветом, отсутствующим на самом изображении (например, синим, как приведено в примере ниже). Также важно, чтобы фото было в формате png или gif.


  • Затем необходимо перейти на сам сайт , нажать на кнопку «Обзор», указать сервису путь к вашему файлу и кликнуть на «Следующий шаг».
  • Откроется ваше изображение, вам будет необходимо кликнуть мышкой на цвете фото, который вы хотите сделать прозрачным (задний фон для удаления должен иметь один цвет после обработки).
  • Кликните на цвете заднего фона, программа обработает его и он станет прозрачным.
  • Если обработка вас устроила, нажмите правой клавишей мыши на фотографии и выберите «Сохранить изображение как».
  • Сервис LunaPic убираем задний фон изображения

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

  • Для работы с сервисом выполните вход на него , нажмите на «Обзор» и загрузите требуемое фото (или укажите ссылку на него в сети в строке ниже).
  • Затем выберите цвет на фото, который бы вы хотели сделать прозрачным и кликните на него мышкой.
  • Фото будет обработано, и вы, в идеале, получите прозрачный цвет заднего фона.
  • По сравнению с сервисом Watermark.Algid.Net сервис LunaPic больше похож на полноценный фоторедактор, позволяя окрасить задний фон одним цветом с помощью встроенных в данный сервис инструментов.

    Заключение

    Выше мной были перечислены несколько удобных и лёгких в работе сервисов, позволяющих сделать прозрачный фон в режиме онлайн. Наиболее эффективными, по моему мнению, являются сервисы Online-Photoshop и Pixlr, результаты их обработки находятся на хорошем уровне, а специфика опционала совсем не сложна. Если вам необходимо сделать прозрачный фон для фото — рекомендую обратиться к возможностям данных инструментов, они позволят легко и быстро создать прозрачный фон онлайн.

    Более того, являясь свободным форматом PNG предлагает для веб дизайнера различные практические преимущества над GIF:

    • Лучшее сжатие: Для большинства изображений PNG достигает меньшего размера файла чем GIF
    • Большая глубина цвета: PNG предлагает truecolor до 48 бит, когда в GIF мы имеет только 256 цветную палитру
    • Прозрачность альфа канала: Когда GIF предлагает только двоичную прозрачность, PNG допускает практически неограниченные эффекты прозрачности, предлагая для прозрачности альфа канал

    Уместно заметить, что PNG не позволяет делать анимацию, как это делает GIF. Но существует стандарт Multiple-image Network Graphics (MNG), который это позволяет, но он не так широко поддерживается веб браузерами и графическими редакторами.

    Итак, почему же GIF все еще так популярен?

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

    Из-за того, что Internet Explorer 6 и более ранние версии не поддерживают полный спектр PNG возможностей (включая прозрачность альфа канала) людям остается верить (хотя это неверно), что Internet Explorer не поддерживает PNG вовсе или как минимум не поддерживает прозрачность. В действительности Internet Explorer 5 и 6 поддерживают достаточно спецификаций PNG, делая его функционально эквивалентным (или более того) неанимированным GIF изображениям. Все другие упоминаемые браузеры, включая Firefox, Netscape 6 и выше, Mozilla, Opera 6 и выше, Safari, и Camino полностью поддерживают PNG прозрачность.

    Кроме этой неверной концепции о поддержке браузером, встроенная в GIF анимация была (и продолжает быть) основной причиной его успеха. Хотя, за несколько лет, использование GIF становится все менее популярным по сравнению с другими технологиями (к примеру Flash), которые становятся более пригодными для анимации.

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

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

    А что про JPEG?

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

    Несколько замечательных примеров использования скромного PNG

    Теперь давайте посмотрим на то, как использовать PNG в веб дизайне. Я собрал все файлы для каждого примера в отдельную папку, доступную на friends of ED .

    Градиент

    За последние несколько лет, градиент - плавный переход между двумя или более цветами, стал лучшим другом веб дизайнеров. Особенно популярны утонченные, едва различимые градиентные заливки, которые не бросаясь в глаза создают ощущение глубины и фактурности.
    Иногда GIF это лучший выбор для градиента. Если градиент это простой двух-цветный переход, GIF в нем работает безукоризненно. Однако, ограниченность GIF только 256 цветами часто создает заметную и неряшливую "полосатость" среди более сложных градиентных переходов. JPEG, с другой стороны, может выводить довольно прятные градиенты, но часто ценой большего размера файла. И пока JPEG градиенты, как правило, достаточно хороши, нужно помнить, что JPEG использует сжатие с потерями, которое означает, что полученное изображение никогда не будет дотягивать до качества несжатой картинки.

    Рассматриваемый типичный стиль фонового градиента используется для кнопок, блоков или просто где-то еще. Это может выглядеть как на Рисунке 5-1. По часовой стрелке, от верхнего левого угла, мы видим оригинальное (несжатое) изображение, GIF версию, PNG версию и JPEG. Вы видите, что PNG в результате имеет наименьший размер (515 байт). Это в четыре раза меньше, чем GIF изображение. JPEG немногим больше чем PNG на 637 байт и он к тому-же ниже качеством из-за сжатия с потерями (правда возможность человеческого глаза определить различие в качестве в этом простом примере остается под вопросом).

    Рисунок 5-1
    Панель Photoshop’а - Save For Web,
    показывающая различия файлового размера для одного и того-же изображения в различных форматах

    Изображение, которое должно работать на любом фоне

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

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

    И Dan и PJ использовали прозрачный GIF вместо PNG. Это полностью покрывало их потребности, и под стиль иконок им приходилось создавать пиксельные изображения. Используя PNG, Вы можете получать похожую технику, но с некоторым превосходством ввиде антиалиасинга и частичной прозрачности для использования ее в более детализированных иконках.

    Хорошо, но в каких браузерах это работает?

    Я знаю, что Вы думаете: вся эта PNG прозрачность хорошо выглядит, но практична ли она?

    Хорошие новости заключаются в том, что все современные браузеры полностью поддерживают PNG изображения, включая прозрачность альфа канала, преимущества которого я показал в примерах. Safari (все версии), Firefox (все версии), Opera (версии 6 и выше), Netscape (версии 6 и выше), и Mozilla (все версии) будут на ура отрабатывать все, что я у них попрошу. Но есть и одна плохая новость - единственный браузер, который я еще не упомянул и который имеется у большинства Ваших пользователей: Internet Explorer.

    Internet Explorer 6 и ниже не поддерживает прозрачность альфа канала встроенную в PNG формат. С тех пор как для большинства многочисленных веб серферов был сделан выбор (или не выбор) браузера, эта зияющая дыра сдерживала веб дизайнеров далеко от PNG. Но, с выходом Internet Explorer 7 мы получили полную поддержку альфа прозрачности PNG во всех значимых браузерах. Что дальше, есть ли пути для работы с альфа-прозрачностью PNG в Internet Explorer 6 и ниже? Итак, если Вы хотите использовать данный эффект, ничто не остановит Вас. Internet Explorer 6 и его ранние версии требуют к себе большего, чем того надо, внимания, но это определенно возможно.

    Хак для Internet Explorer: AlphaImageLoader

    В составе Internet Explorer имеются различные собственные фильтры. Они используются в CSS, но они не являются какой-либо частью официальной спецификации CSS. Другими словами, они не стандартизированы в веб. К сожалению Internet Explorer 6 и ниже не полностью поддерживают формат PNG (который рекомендован W3C), у Microsoft"а имеется фильтр который устраняет этот недостаток: AlphaImageLoader.

    В соответствии с разделом на официальном сайте Microsoft , AlphaImageLoader "отображает изображение в пределах границ объекта и между фоном объекта и его содержимым". Другими словами, AlphaImageLoader загружает PNG изображение с его полной прозрачностью, но он загружает его как собственный слой, снизу которого находится содержимое объекта на котором он применяется. PNG изображения, загруженные таким путем, больше действуют как фоновые изображения, чем изображения переднего плана (хотя они в действительности "сидят" сверху фона объекта).

    Вобщем, Вы просто можете применить AlphaImageLoader в CSS на элементах img и наслаждаться результатом. Сперва будет загружено изображение, прозрачность остается, но затем изображение будет загружено снова - как переднее содержимое объекта - с непрозрачными областями (таким образом "затеняется" Ваша прозрачная версия).

    Вы не можете использовать прозрачное PNG как фоновое изображение CSS для (X)HTML элемента (скажем, для ) и ожидать, что AlphaImageLoader сделает эту работу в Internet Explorer как надо. Помните, что AlphaImageLoader вставляет Ваше изображение между фоном и передним планом объекта. Поэтому, пока он будет грузить Ваше изображение во всей своей прозрачной красе, он также будет продолжать грузить его как фоновое изображение CSS, и без Ваших замечательных полупрозрачных пикселей.

    Реальное использование AlphaImageLoader

    Давайте вернемся назад к одному из ранних примеров и попробуем правильно загрузить его в Internet Explorer. Помните Channel 49, TV станцию в Topeka? Уверен - да. Рисунок 5-21 показывает как выглядит сайт в Internet Explorer 6.


    Рисунок 5-21
    Заголовок 49abcnews.com , выведенный в Internet Explorer 6 для Windows, с нетронутой прозрачностью PNG.

    HTML для верхней части, связанной с погодой, выглядит как Вы возможно уже предположили:

    Currently in Topeka, KS:
    82° Overcast
    Get the forecast and more...

    Вы видите изображение, и безусловно это PNG, даже Internet Explorer загружает его безукоризненно. Секретный ингредиент этого - JavaScript. В действительности я использовал немного DOM скриптинга для того, чтобы убрать элемент img на лету и заменить его элементом div, который - Вы догадались - использует AlphaImageLoader. JavaScript описан внутри условных комментариев, другая подручная, но полностью нестандартизированная идиома от Microsoft встроенная в Internet Explorer. Условные комментарии позволяют Вам испольлзовать код только для заранее известной версии Internet Explorer. Код игнорируется всеми другими браузерами, поэтому он никак их не затрагивает. В элементе сайта www.49abcnews.com , Вы найдете:

    Спасибо первой строчке, if lte IE6, этот скрипт будет включен в отрисовываемый документ только если он будет показан в версии Internet Explorer меньше или равной (это указывается с помощью lte) 6. Все другие браузеры, включая новоприбывшего Internet Explorer 7, будут это полностью игнорировать.

    Итак, что же в файле JavaScript fixWeatherPng.js? Взглянем:

    Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() { var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style.filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Some 49abcnews.com-specific CSS styling omitted for brevity. img.replaceNode(div); }

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

    Начинаем, сперва мы ищем изображение с которым мы будем работать по его id атрибуту и сохраняем его в переменной img. Сохраняем атрибут src (URL на файл изображения) в переменной src. Затем мы прячем элемент img выставляя CSS свойство visibility в hidden.

    В итоге мы заменяем оригинальный элемент img (который скрыт) на вновь созданый элемент div, к которому удачно прицеплен AlphaImageLoader.

    Использование DOM скриптинга для вставки Вашего AlphaImageLoader - фильтрующего биты на лету, имеет свою нелицеприятную, но необходимую сторону - некорректный CSS. Более того, вне Вашей (X)HTML разметки будут содержаться несемантические div элементы. И пока все это описано внутри условных комментариев, для других браузеров нет шанса быть испорченными кодом от Microsoft. (handyblogger: Здесь Джефф пытается тонко указать на "корявое" решение от Microsoft)

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

    В заключении

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

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

    Вторая: Internet Explorer 7 предлагает полную поддержку для альфа прозрачности PNG. Эффекты, которые могут быть получены с полной гаммой полупрозрачных опций практически безграничны. Я ожидаю, что дизайнерам, которые найдут интересные пути использования прозрачности PNG, по принципу тех, что описаны в этой статье, будут открыты двери на новый уровень стилей еще невиданных до этого. Я дал Вам полезные идеи того, что Вы можете создавать с помощью прозрачности PNG, но не останавливайтесь на этом. Ищите себя!

    Отрывок из Web Standards Creativity от Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, и Rob Weychert; опубликовано friends of ED. Copyright Jeff Croft 2007. Использовано с разрешения Apress, Inc.

    Конечно же, формат JPEG не поддерживает прозрачность, но сама идея использовать JPEG вместо PNG для прозрачных текстур будоражит умы довольно давно. Камрад PaulZi не так давно предложил использовать для HTML формат SVG, в котором хранится само изображение и маска. Jim Studt предлагает использовать EXIF поля в JPEG и хранить там маски, а отображать на веб-странице с помощью Canvas.
    Оба метода относительно сложны для использования, да и рассчитаны на веб, потому я остановился на самом простом варианте: хранить отдельно lossy JPEG для RGB и lossless маску в PNG, а совмещать их на этапе получения UIImage в программе. Сразу хочу сказать, что пишу на MonoTouch, потому код привожу на C#, хотя в ObjC это делается почти точно так же, с учетом синтаксиса.

    Разделение каналов Для разделения я использую консольные утилиты ImageMagik .
    Эта команда отделяет альфа-канал:
    convert file.png -channel Alpha -separate file.mask.png

    Следующая команда создает JPEG файл, отбрасывая данные о прозрачности. Что характерно, некоторые другие утилиты (в т.ч. и Photoshop) при конверсии PNG файла в JPEG добавляют к нему некую одноцветную подложку и лишь затем сохраняют в RGB, что дает красивую, но неверную картинку с pre-multiplied alpha.
    convert file.png -quality 90 -alpha off file.jpg

    Качество полученного файла регурируется параметром quality 90 . 90% качества для JPEG это больше, чем Apple ставит для скриншотов программ и фильмов. Думаю, каждый сможет подстроить под свой вкус это значение.

    Оптимизация Маска получается в виде 8-битного Grayscale PNG без прозрачности. Такой формат отлично сжимается через optipng или через веб-сайт www.tinypng.org .
    С JPEG ситуация интереснее. Можно было бы ограничиться только заданием качества, но недавно мне попалась замечательная утилита jpegrescan от Loren Merritt, одного из разработчиков ffmpeg и кодировщика x264 (на счет него же есть подозрения , что он является представителем инопланетного разума или кибернетического мозга ).
    Утилита использует необычный подход: подбирает разные коэффициенты для Progressive сжатия и выбирает наиболее оптимальные. Выигрышь получается от 5 до 15% с идентичным качеством картинки. Собственной страницы у утилиты нет, только топик с обсуждением и сам perl-код: pastebin.com/f78dbc4bc

    Чтобы не вводить команды каждый раз вручную, я написал простенький скрипт на bash:
    #!/bin/bash basefile=${1##*/} maskfile="${basefile%.*}.mask.png" jpegfile="${basefile%.*}.jpg" convert $1 -channel Alpha -separate $maskfile convert $1 -quality 90 -alpha off $jpegfile optipng $maskfile jpegrescan $jpegfile $jpegfile

    Вот результат работы скрипта:


    В моем случае из файла в 1,8Мб получилось два файла на 380Кб и 35Кб.

    Склеивание Само склеивание делается очень просто - загружается две картинки в UIImage, затем создается на их основе CGImage методом WithMask (в ObjC это CGImageRef и initWithMask соответственно), а потом оборачивается в новый UIImage.
    UIImage result; using(UIImage uiimage = UIImage.FromFile(file)) using(UIImage mask = UIImage.FromFile(maskFile)) { CGImage image = uiimage.CGImage; image = image.WithMask(mask.CGImage); result = UIImage.FromImage(image, uiimage.CurrentScale, uiimage.Orientation); }

    В реальном проекте я сделал чуть сложнее и проверяю наличие файла *.mask.png и если он отсутствует, то возвращаю обычный UIImage.FromFile().

    Профит

    Визуально игра не изменилась никак. Задержка загрузки и склеивания текстур на глаз не заметна, потому я и не стал ее замерять. Сам же проект уменьшился на 6 (!!) мегабайт, как в.ipa виде, так и в iTunes и на устройстве.

    Скрин из игры в PNG. Никаких артефактов или проблем сжатия/прозрачности не видно.
    Немного смущает удвоенное количество картинок в папке проекта, но это можно пережить. Изменения кода минимальные. Для графики интерфейса этот метод не идеален из-за необходимости вручную присваивать UIImage, а не загружать из NIB/XIB, но для собственных контролов или текстур подходит вполне. Даже если JPEG сохранять с 100% качеством, размер полученных файлов может быть меньше, чем изначального PNG без потерь качества.

    P.S. ImageMagick и optipng ставятся из портов (MacPorts/Fink/Brew) и называются так же. Скрипт jpegrescan качается с

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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