Создание в рисунке прозрачных областей

Картинка на прозрачном фоне «Фотошоп»

Для начала попробуем самое сложное — сделать прозрачный фон на фотографии человека. Необходимо получить человека на полностью прозрачном фоне (в графических редакторах он отображается в виде шахматных клеточек). Для этого откройте любую фотографию в Adobe Photoshop. Идеальным будет снимок, сделанный при помощи зеркальной камеры. В этом случае будет проще выделять человека, ведь его контуры хорошо видны и не размыты.

Теперь активируйте инструмент «Магнитное лассо». Им необходимо выделить человека по его контуру. Выделение происходит при помощи точек привязки. Если одна из них пошла мимо контура, то нажмите клавишу «Backspace», это отменит её создание. Постепенно вы полностью выделите человека, соединив последнюю точку привязки с первой. По контуру человека побежит пунктирная линия. Маленький совет: выделять лучше при 100-процентном масштабе отображения картинки.

Когда выделение будет сделано — пройдите по пути «Выделение >> Инверсия». Или воспользуйтесь комбинацией клавиш «Shift+Ctrl+I». Этим мы инвертируем выделение. Теперь выделено будет всё, за исключением человека.

Пройдите в панель «Слои». Здесь вам нужно переименовать текущий слой. Делается это при помощи двойного щелчка мышью. Вы заметите, что после этого со слоя снимется замочек. Теперь нажмите клавишу «Delete». Весь фон мгновенно удалится. Вот и всё!

Осталось только перейти по пути «Выделение >> Отменить выделение» или нажать «Ctrl+D». Так у нас получился прозрачный фон. В «Фотошопе» его после этого можно заменить на любой другой. Для этого нужно лишь, чтобы слой с фоном был вторым по счету, не загораживая собой человека.

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

Откройте картинку с электронным устройством в программе Adobe Photoshop. Поставьте 100-процентный масштаб отображения (это делается при помощи инструмента «Лупа»). В панели «Слои» текущий слой переименуйте. Теперь активируйте инструмент «Волшебная палочка». Он тоже входит в состав группы выделения. Щелкайте им при зажатой клавише «Shift» по сфотографированной вещи, пока та не будет полностью выделена.

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

О дальнейших действиях вы уже могли догадаться. Инвертируйте выделение и нажмите клавишу «Delete». В изображении останется лишь электронное устройство на прозрачном фоне. Не забудьте снять выделение для дальнейшей работы с картинкой.

Так в «Фотошопе» создается картинка на прозрачном фоне. Дальнейшие действия зависят только от вас. Если вы хотите сохранить её в таком виде — выбирайте формат PNG.

Как сделать прозрачным слой в «Фотошопе»

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

В третьей строке панели «Слои» присутствуют инструменты закрепления. Если вы хотите закрепить положение слоя или его прозрачность — вам именно сюда. Ещё в этой строке присутствует пункт «Заливка», эффект которого схож с функцией непрозрачности.

Остальная область панели выделена под список слоев. Если к некоторым из них будут применены специальные эффекты, то их список тоже будет расположен именно здесь. В самом низу размещены специальные кнопки, с помощью которых в «Фотошопе» осуществляется работа со слоями (основная её часть).

Как сделать полупрозрачный текст и «водяной знак»

В Фотошопе, помимо состояния «полностью видим» и «полностью прозрачен» существует состояние частичной видимости или частичной прозрачности. Частичная видимость объекта на рисунке указывается в процентах.

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

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

1. Запускаем Фотошоп и открываем в нем нашу фотографию (File->Open…).

2. Выбираем инструмент Текст (T) и пишем поверх фото надпись нужного размера, цвета и стиля:

При этом текст будет автоматически размещен в отдельном слое и быть 100% видимым.

3. Установим 40%-ю видимость белой надписи на фото. Для этого в окне слоев (Layers) передвинем ползунок свойства Opacity в значение 40%:

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

.. или уроки Adobe Photoshop.

Взгляните на рисунок в формате jpg, небезызвестного мультипликационного героя Мамонтёнка который потерял свою маму.. плакать хочется.. нет, не из-за того, что мамонтенок не может найти свою маму (хотя и из-за этого тоже), а потому что синий фон ужасно режет глаза! так и хочется убрать эту синеву и залить фон рисунка таким цветом, чтобы он сливался с фоном страницы..

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

Пример, где изображение накладывается поверх текстуры:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Создание в рисунке прозрачных областей</title></head><body style=»background: url(fon.gif)»><img src=»mammoth.jpg» alt=»Мамонтёнок»></body></html>

смотреть пример  

Открывать фотошоп и рисовать в рисунке с мамонтенком вместо синего фона клеточки? А потом пытаться подогнать их к основному фону страницы? Это не выход!!!

Так вот, докладываю, что графические форматы gif и png — поддерживают режим прозрачности, позволяя тем самым сделать некоторые области рисунка невидимыми человеческому глазу — что нам собственно и нужно!

Теперь по порядку:

1. Откройте рисунок фон которого нужно сделать прозрачным с помощью Adobe Photoshop.

2. Откройте закладку «Изображение» >> «Режим» >> «Индексированные цвета».

3. В появившемся окне-диалоге «Индексированные цвета» ставим галочку «Прозрачность» и нажимаем «ОК»

4. С помощью инструмента выделения «Волшебная палочка» и «Ластика» стираем в рисунке фон, собственно делая нужные нам части прозрачными.

5. Ну и сохраняем нашу картинку в формате gif.. закладка «Файл» >> «Сохранить для Web…» в появившемся окне указываем (соглашаемся), что картинка будет сохранена в формате gif жмем «Сохранить».. выбираем папку пишем имя — всё это Вы, я надеюсь умеете..

Всё картинка с прозрачным фоном создана!!

Теперь её можно снова вставить в нашу страницу, не забыв при этом сменить расширение jpg на gif.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Создание в рисунке прозрачных областей</title></head><body style=»background: url(fon.gif)»><img src=»mammoth.gif» alt=»Мамонтёнок»></body></html>

смотреть пример  

Такие вот дела..

Фотоулица

Этот сайт позволят подойти к редактированию изображения совершенно, с другой стороны.

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

Зайдя на страницу веб-сервиса, откройте фоторедактор. При необходимости, разрешите запуститься в новом окошке Flash Player. Далее, загрузите необходимое для корректировки фото или картинку.

После добавления картинки в фоторедактор, откройте «Эффекты» (кнопка находится внизу слева на панели). Справа вверху есть значок «-», который поможет изменить прозрачность фона.

Сверните картинку, как только получите требуемый результат. Сохраните изображение на компьютер.

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

Вырезание объекта в фотошопе

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

Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.

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

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

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

Основной предмет с высокой четкостью границ можно выделить обычным инструментом «Лассо», а нечеткие края — мягкой кистью в режиме «Быстрой маски» (Quick Mask — Клавиша Q), как показано на снимке ниже.

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

Добавление к выделению нечетких областей

А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите — Select/Save Selection…

Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши — Feather… (Растушевка…) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.

Теперь, нажмите — Select/Load Selection… Выберите пункт — Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.

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

Форматы поддерживающие прозрачный фон

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

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

Tiff — формат похожий по свойствам с предыдущим. Тоже может содержать прозрачные области. Из-за высокого качества, часто используется в полиграфии.

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

Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения

Создаем прозрачный фон для картинки онлайн

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

Способ 1: LunaPic

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

1. Запустите главную страницу интернет-ресурса LunaPic и переходите в обозреватель для выбора рисунка.

Выделите картинку и нажмите на «Открыть».

Вы будете автоматически перенаправлены в редактор. Здесь во вкладке «Edit» следует выбрать пункт «Transparent Background».

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

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

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

Через несколько секунд вы получите результат.

Можете сразу же переходить к сохранению.

Оно будет загружено на ПК в формате PNG.

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

Способ 2: PhotoScissors

Давайте разберемся с сайтом PhotoScissors. Здесь нет такой проблемы, что хорошая обработка будет получена только с определенными картинками, поскольку вы сами задаете область, которая вырезается. Осуществляется процесс обработки так:

1. Находясь на главной странице онлайн-сервиса PhotoScissors, переходите к добавлению необходимой фотографии.

В обозревателе выделите объект и откройте его.

Ознакомьтесь с инструкцией по использованию и приступайте к редактированию.

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

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

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

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

Переместитесь во вторую вкладку на панели справа.

Здесь вы можете выбрать тип фона. Убедитесь в том, что активирован прозрачный.

Приступайте к сохранению изображения.

Объект будет скачана на компьютер в формате PNG.

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

Способ 3: Remove.bg

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

1. Перейдите на главную страницу Remove.bg и приступайте к загрузке картинки.

В случае если вы указали вариант загрузки с компьютера, выберите снимок и кликните на «Открыть».

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

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

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Создать новый слой в «Фотошопе»

Если вы сейчас установите самую первую версию программы Photoshop, то очень сильно ей удивитесь. Вы спросите: где в «Фотошопе» слои? Первые версии графического редактора мало отличались от современного Paint. Поддержка слоев появилась чуть позже. Теперь же без этой функции не обходится ни один профессиональный редактор изображений. В Photoshop можно свободно создавать до тысячи слоев, на скорости работы это никак не отразится. Но это уже экстремальный случай, на практике фотографы задействуют не более 20-30 слоев.

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

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

Фон текста в Фотошопе: выбор цвета

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

Здесь нужно обратить внимание на пункт «Заливка». Нажмите на цифру 100

Появится ползунок, который необходимо передвинуть влево, доведя его до 20%. Затем нажмите на кнопку «Fx» и выберите в контекстном меню пункт «Параметры наложения».
Выскочит диалоговое окно со всевозможными настройками слоя. Нам нужно добиться более красивой прозрачности прямоугольной области. Перейдите во вкладку «Обводка». В пункте «Цвет» выберите белый цвет. Размер уменьшите до двух пикселей. В качестве положения выберите пункт «Снаружи». Непрозрачность поставьте на уровне 50%. Когда закончите — жмите кнопку «OK».

Как в фотошопе выглядит прозрачность

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

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

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

Прозрачный фон «волшебной палочкой»

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

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

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

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

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

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

Практическая часть

Растушёвку краёв можно задать тремя способами. Основной – установки свойств инструмента «Выделение».

Для этого достаточно:

• Выбрать инструмент.
• До выделения установить радиус растушёвки в контекстном меню свойств. Радиус растушёвки указывается в пикселях. Причём «реальный» радиус в 2 раза больше указанного вами. Дело в том, что граница выделения становится зоной полупрозрачности (50%). Переход 50-0 (от полупрозрачности к полной прозрачности) осуществляется на пикселях ВНЕ выделенной зоны. 100-50 – внутри. И там, и переход реализуется на указанное вами количество пикселей.
• Выделите необходимую зону. В случае выделения прямоугольником вы заметите, что углы стали «сглаженными». Естественно – они попали в зону растушёвки.
• Скопировать фрагмент.

Теперь возникает вопрос: что с ним делать? Самое простое – вставить на новый слой.

• Для этого просто выбираем пункт «Вставить» в меню «Редактирование». Или нажимаем «CTRL+V».
• Фрагмент встанет на новый слой.
• Выбрав инструмент «Перемещение», сдвиньте фрагмент.

Получили самый простой коллаж!

Если мы хотим добиться именно прозрачного фона – можно пойти двумя путями.

Растушёвка с прозрачностью на базе существующей фотографии.

Для того, чтобы оставить только выделенный фрагмент достаточно удалить слой (или слои), находящиеся снизу:

1. Щелчком левой клавиши мыши на пиктограмме слоя выделите его (делаем активным).
2. Наведите курсор на пустое пространство рядом с пиктограммой, нажмите левую клавишу мыши.
3. Удерживая клавишу нажатой, перетащите пиктограмму слоя в «мусорный ящик» внизу палитры слоёв.
4. Повторяйте п. 1-3 до тех пор, пока у вас не останется только нужный слой.
5. Обрежьте (кадрируйте) снимок. Как это делается – описано в уроке по кадрированию фотографий.
6. В меню «Файл» выберите пункт «Сохранить как». Задав имя файла, выберите тип. Прозрачность сохраняют файлы PSD, TIFF, PNG. Если вы собираетесь работать с фотографией “на любительском” уровне – выбирайте PNG. Этот формат воспринимает большинство пользовательских программ.

Замечание: Удалить слой можно ещё тремя способами. А именно:

1. Выделить слой и выбрать пункт «Удалить» из меню «Слои»

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

2. Перенести фрагмент в новый файл. Для этого:

• Скопируйте выделенную область.
• Создайте новый файл в размерах «буфера обмена» (подробнее об этом в предыдущем уроке).
• Вставьте в новый файл выделенную область.
• Сохраните файл.

Альтернативные методы установки радиуса растушёвки

Что делать, если зону выделения создали, а растушевать забыли? Отчаиваться не стоит. Отменять выделение – и подавно. Существует два способа коррекции растушёвки в уже созданном выделении.

Коррекция через меню «Выделение»

• В меню «Выделение» выберите пункт «Модификация». И далее «Растушёвка»
• В открывшемся диалоговом окне задайте необходимый радиус растушёвки и нажмите Enter.
• Далее – по алгоритму, описанному выше.

Коррекция через функцию «Уточнить края»

В данном случае необходимо обратить внимание на контекстное меню свойств инструмента выделение. В правом его конце находится кнопка «Уточнить края»

• Нажмите её.
• В появившемся диалоговом окне подкорректируйте радиус растушёвки. Несомненным плюсом данного способа является его наглядность – границы выделения меняются в зависимости от выбранного параметра.

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

«Волшебный ластик»

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

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

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

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

Нужно настроить некоторые параметры: допуск должен стоять на 38, активными ставятся смежные пиксели и сглаживание, образец со всех слоев переводится в неактивно и непрозрачность должна быть на 100%.

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

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