Три способа сделать картинку полупрозрачной в adobe photoshop

Это руководство по размещению фото в фигурном узоре, созданном с помощью Photoshop CC. Но порядок описанных в нем действий верен и для других версий графического редактора.

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

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

При выбранном слое изображения (1) нажмите иконку fx (2) в палитре «Слои» и выберите в раскрывающемся меню пункт «Параметры наложения». Перетащите ползунок параметра «Подлежащий слой» (4) влево.

Края будут выглядеть неровными. Удерживая нажатой клавишу Alt, перетащите правый ползунок слайдера вправо. Теперь края будут четкими. Нажмите «ОК».

Три способа сделать картинку полупрозрачной в adobe photoshop

Хорошо подходит для плоской фигуры.

Выделите содержимое слоя фигуры (размещенного выше узора), нажав Ctrl + A. Нажмите Ctrl + C, чтобы скопировать фотографию в буфер обмена.

Три способа сделать картинку полупрозрачной в adobe photoshop

Скройте слой изображения и выберите слой фигуры. Перейдите в меню Выделение> Цветовой диапазон.  В выпадающем списке «Выбрать» установите значение «Тени».

Три способа сделать картинку полупрозрачной в adobe photoshop

Нажмите кнопку «ОК», чтобы выделить узор. Перейдите в меню Редактирование> Специальная вставка> Вставить в.

Три способа сделать картинку полупрозрачной в adobe photoshop

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

Три способа сделать картинку полупрозрачной в adobe photoshop

Сделайте слой с фотографией видимым. Затем поместите курсор мыши между слоем фото и слоем фигуры в панели слоев. Удерживайте нажатой клавишу Alt. После этого курсор мыши превратится в квадратную стрелку. Кликните, чтобы применить операцию.

Три способа сделать картинку полупрозрачной в adobe photoshop

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

  1. Три способа сделать картинку полупрозрачной в adobe photoshop
  2. С ее помощью я добавил текстурированный фон и небольшую внутреннюю тень.
  3. Надеюсь, вам понравилось это руководство.
  4. Данная публикация представляет собой перевод статьи «HOW TO FILL A SHAPE WITH A PHOTO IN PHOTOSHOP, 3 WAYS» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник: https://www.internet-technologies.ru/articles/tri-sposoba-pomestit-foto-v-uzor-s-photoshop.html

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

Всем привет на fast-wolker.ru!  Продолжаем осваивать графический редактор! Сегодня мы займемся  полезным делом в Adobe Photoshop, — будем учиться создавать прозрачный фон. В первую очередь это пригодится в тех случаях, когда необходимо какую-либо картинку вставить на другой фон.

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

Как удалить белый фон в фотошопе и сделать его прозрачным?

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

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

  • Три способа сделать картинку полупрозрачной в adobe photoshop
  • После этого выбираем инструмент «волшебная палочка«, расположенный на панели инструментов.
  • Три способа сделать картинку полупрозрачной в adobe photoshop
  • Выбрав инструмент, щелкаем и по загруженному документу. Появится такое вот выделение:
  • Три способа сделать картинку полупрозрачной в adobe photoshop
  • Остался последний шаг – нажать на клавишу DELETE. В результате фон исчезнет, а останется чистое пространство, которое отображается, как квадратики:
  • Три способа сделать картинку полупрозрачной в adobe photoshop

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

Делаем прозрачным фон из картинки или рисунка в Photoshop

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

Загрузив фотографию, создаем дубликат слоя и выбираем «магнитное лассо«. Обводим им по контуру фигуру выделяемого объекта.

Три способа сделать картинку полупрозрачной в adobe photoshop

Прилипло по нужным границам? Далее, идем через «главное меню» «выделение«-«инверсия«.

  1. Три способа сделать картинку полупрозрачной в adobe photoshop
  2. В результате образуется выделение вокруг объекта и по краям картинки.
  3. Три способа сделать картинку полупрозрачной в adobe photoshop
  4. Осталось нажать клавишу DELETE и фон будет удален, а интересующий нас объект останется на прозрачном фоне.
  5. Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

Три способа сделать картинку полупрозрачной в adobe photoshop

Каким оно будет — зависит от самой подписи.  Подбирайте экспериментально. Главное, что бы в итоге была выделена и подпись фон вокруг нее. В моем варианте значение допуска было равно 70. Щелкаем «волшебной палочкой» по документу и получаем такой результат.

Затем нажимаем все ту же клавишу DELETE. В результате фон будет удален. Но, обратите внимание, что имеются участки, где фон остался. Это зависит от подписи.

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

Теперь осталось вставлять ее в нужное место в отсканированном документе или напечатанном. Или в шаблон документа программы 1С.  Вот так достаточно просто можно сделать прозрачный фон. Главное, не забыть сохранить картинку именно в формате PNG! Тогда прозрачный фон сохранится для других проектов.  Успехов!

Источник: https://fast-wolker.ru/kak-sdelat-prozrachnyj-fon-v-fotoshop.html

Делаем прозрачный фон изображения. 3 разных способа

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

  • Такие векторные редакторы как CorelDRAW и Illustrator могут скрывать часть изображения с помощью контурной маски, это быстрый и простой метод сделать прозрачный фон, если форма предмета простая.
  • Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.
  • В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.

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

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

Читайте также:  Работа с pdf от movavi - программа для чтения и редактирования

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

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

Отсечение фона маской

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

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

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

Clipping Mask в Adobe Illustrator

Разместите изображение в редакторе Illustrator и обрисуйте контуром предмет. Затем выделите изображение и контур вместе и нажмите правой кнопкой мыши — Обтравочная маска (Make Clipping Mask). Часть изображения за пределами контура скроется.

Три способа сделать картинку полупрозрачной в adobe photoshop

После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.

PowerClip в CorelDRAW

В CorelDRAW есть такой же прием, однако работает он немного иначе. Также нужно обрисовать предмет контуром, а затем, выделить изображение и нажать — Effects/PowerClip/Place inside Frame…. Вместо указателя появится стрелка, которой нужно показать контур.

Три способа сделать картинку полупрозрачной в adobe photoshop

Контур в CorelDRAW также можно редактировать после создание маски.

Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.

3. Прозрачность режимом наложения

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

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

В Illustrator нужно открыть панель прозрачностей — Window/Transparency. А затем выбрать режим — Multiply (Умножение).

Три способа сделать картинку полупрозрачной в adobe photoshop

В CorelDRAW возьмите инструмент — Transparency.

Три способа сделать картинку полупрозрачной в adobe photoshop

В панели параметров инструмента настройте так, как показано на скриншоте ниже:

Три способа сделать картинку полупрозрачной в adobe photoshop

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

Видео урок: прозрачный фон

Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:

(Visited 4 236 times, 1 visits today)

Источник: https://expert-polygraphy.com/prozrachnyj-fon/

Три способа, как сделать прозрачный фон картинки в Photoshop (фотошоп)

2015-04-22 / Вр:23:08 / просмотров: 92647

Здравствуйте, дорогие друзья!
В этой статье я расскажу, как в Photoshop (фотошопе) сделать фон картинки прозрачным.
Для чего нужен прозрачный фон?

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

Будем работать с рисунком, который вы видите снизу: у нас есть пенек, а на пенек мы посадили колобка. Как видите, белый фон вокруг колобка закрывает пенек, да и вообще портит всю картину:

Три способа сделать картинку полупрозрачной в adobe photoshop

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

○ 1 способ:

Будем использовать инструмент «Волшебная палочка».
В графическом редакторе Photoshop откройте изображение.  Справа, в слоях, нажмите двойным щелчком правой кнопкой мыши по замочку: Три способа сделать картинку полупрозрачной в adobe photoshop

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

Три способа сделать картинку полупрозрачной в adobe photoshop

Нажмите «Волшебной палочкой» на белый фон. Когда фон выделится, жмите на клавиатуре клавишу «Delete»:

Три способа сделать картинку полупрозрачной в adobe photoshop

Все, фон исчез:

Три способа сделать картинку полупрозрачной в adobe photoshop

○ 2 способ:

Удаляем фон при помощи инструмента «Магнитное лассо»:

Три способа сделать картинку полупрозрачной в adobe photoshop

Нажимайте возле колобка и просто ведите курсор вокруг него. Линия сама будет притягиваться по контуру:

Три способа сделать картинку полупрозрачной в adobe photoshop

После выделения нужно перейти в верхнем меню на пункт «Выделение» => «Инверсия»:

Три способа сделать картинку полупрозрачной в adobe photoshop

Жмите на клавиатуре клавишу «Delete». Все, фон исчез:

Три способа сделать картинку полупрозрачной в adobe photoshop

Хочу обратить ваше внимание, что 1 и 2-ой способ можно применять, если фон у картинки однотонный, например, только белый или только красный и т. д. А вот в случаях, когда фон разноцветный или имеет другие изображение сзади, то лучше использовать 3-й способ.

○ 3 способ:
Удаляем фон при помощи режима «Быстрая маска». Она находится внизу:

Три способа сделать картинку полупрозрачной в adobe photoshop

  • Нажимаем на «Быструю маску», выбираем инструмент «Кисть» и просто зарисовываем колобка, но не затрагивая фон:
  • Когда зарисовали колобка, нужно отжать кнопку «Быстрая маска»:
  • А на клавиатуре нажать клавишу «Delete». Все, фон исчез:
  • Теперь самое важное: как сохранить?

Как сохранить изображение с прозрачным фоном

Если картинку сохранить в формате JEPG, то вместо прозрачного фона он будет белым. Сохранять нужно в формате PNG или GIF.
Итак, сохраняем:

  1. Жмите в меню на «Файл» => «Сохранить как…»:
  2. В «Имя файла:» дайте название картинке, в «Тип файла» найдите и выберите формат «PNG». Жмите на кнопку «Сохранить»:
  3. Все, проверяйте результат.
    Теперь, если колобка вставить на другую картинку, то мы видим, что фон колобка исчез:
  4. Можете посмотреть мой видео-урок по теме «Как сделать прозрачный фон картинки в Photoshop»:
  5. Подписывайтесь на обновление моего блога .

Последние новости категории:

Источник: https://bloggood.ru/photoshop/tri-sposoba-kak-sdelat-prozrachnyj-fon-kartinki-v-photoshop-fotoshop.html/

Уроки фотошоп. Тема 2. Выделение в Adobe Photoshop. Часть 2: Как сделать края фотографии полупрозрачными (выделение с растушёвкой в Adobe Photoshop)

О программе Adobe Photoshop.

Adobe Photoshop – один из наиболее популярных пакетов для обработки растровой графики. Несмотря на высокую цену, программой пользуются до 80% профессиональных дизайнеров, фотографов, художников компьютерной графики. Благодаря огромным функциональным возможностям и простоте использования Adobe Photoshop занимает доминирующее положение на рынке графических редакторов.

Бывают случаи, когда фотографии с резкими краями выглядят хуже, чем кадры с плавным увеличением насыщенности. Эффект растушёвки краёв известен художникам и гравёрам уже многие столетия.

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

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

Для эффективной работы Вам стоит ознакомится с предыдущим уроком. «Выделение в Adobe Photoshop. Часть 1: Простая геометрия».

Что такое растушёвка? И что такое полупрозрачность?

В предыдущем уроке («Выделение в Adobe Photoshop. Часть 1: Простая геометрия») рассказывалось о философии «работы через слои» в Photoshop.

Проиллюстрируем:

  • Скопируйте часть фотографии на новый слой.
  • И установите бегунок «Непрозрачность» в палитре слоёв на уровень менее 100%.
  • Получите примерно такой результат:

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

Итак, растушёвка выделения – плавный переход прозрачности с 0% до 100% на границах выделенной области.

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

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

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

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

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

Источник: https://cadelta.ru/photo/id384

Использование флажков «Прозрачность» и «Подложка» в Photoshop Elements

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

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

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

Три способа сделать картинку полупрозрачной в adobe photoshop

Кнопка веб-страницы без прозрачности (слева) и с прозрачностью (справа)

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

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

При работе с файлами в формате GIF или PNG-8 можно создать области с высокой прозрачностью на краях: все пиксели, прозрачность которых в оригинальном изображении выше 50% становятся полностью прозрачными в оптимизированном изображении, в все пиксели, непрозрачность которых в оригинальном изображении выше 50% становятся полностью непрозрачными в оптимизированном изображении. Применяйте высокую прозрачность на краях в случае, когда вам неизвестен цвет фона веб-страницы или он представляет собой текстурную или узорную заливку. Однако помните о том, что высокая прозрачность на краях может привести к зубчатые границам в изображении.

Три способа сделать картинку полупрозрачной в adobe photoshop

GIF без высокой прозрачности на краях (слева) и с высокой прозрачностью на краях (справа)

Формат GIF и PNG-8 поддерживают один уровень прозрачности — пиксели могут быть либо полностью прозрачными, либо полностью непрозрачными. Частичная прозрачность не допускается. (И наоборот, формат PNG-24 поддерживает многоуровневую прозрачность, т. е. пиксели в изображении могут иметь до 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью.)

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
  2. В диалоговом окне «Сохранить для Web» выберите «GIF», «PNG-8» или «PNG-24» в качестве формата оптимизации.
  3. Установите флажок «Прозрачность».
  4. Для форматов GIF и PNG-8 можно указать, как должны себя вести частично прозрачные пиксели в оригинальном изображении. Такие пиксели можно смешивать с цветом подложки или создавать высокую прозрачность на краях.

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

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
  2. В диалоговом окне «Сохранить для Web» выберите «GIF», «PNG-8» или «PNG-24» в качестве формата оптимизации.
  3. В окне сохранения в формате «GIF» и «PNG-8» выполните одно из следующих действий.
    • Чтобы полностью прозрачные пиксели оставались прозрачными, а частично прозрачные пиксели смешивались с цветом подложки, установите флажок «Прозрачность». Этот параметр предотвращает возникновение ореола, который часто имеет место пир размещении изображения со сглаживанием на фон веб-страницы, отличающийся от фона изображения. Этот флажок также предотвращает зазубренность краев областей с высокой прозрачностью.
    • Чтобы полностью прозрачные пиксели заполнялись цветом подложки, а частично прозрачные пиксели смешивались с цветом подложки, снимите флажок «Прозрачность».
  4. Выберите один из вариантов заполнения фона:
    • «Без фона», «Цвет, выбранный пипеткой» (для использования пипетки для выбора цвета),
    • «Белый», «Черный» и «Произвольный» (для выбора цвета на палитре «Выбор цвета»).

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

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
  2. В диалоговом окне «Сохранить для Web» выберите «GIF» или «PNG-8» в качестве формата оптимизации.
  3. Установите флажок «Прозрачность».
  4. Выберите из списка вариантов заполнения фона параметр «Без фона» для отмены использования цвета подложки для заполнения фона.

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

Цвет подложки заполняет полностью прозрачные пиксели и смешивается с частично прозрачными пикселями.

При размещении JPEG на веб-странице с фоном, идентичным цвету подложки создается впечатление, что изображение сливается с фоном.

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
  2. В диалоговом окне «Сохранить для Web» выберите «JPEG» в качестве формата оптимизации.
  3. Выберите один из вариантов заполнения фона: «Без фона», «Цвет, выбранный пипеткой» (для использования пипетки для выбора цвета), «Белый», «Черный» и «Произвольный» ( для выбора цвета на палитре «Выбор цвета»).

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

Источник: https://helpx.adobe.com/ru/photoshop-elements/using/using-transparency-mattes.html

Как выделять прозрачные объекты в фотошопе — SkillsUp — удобный каталог уроков по дизайну, компьютерной графике, уроки фотошопа, Photoshop lessons

Результат того, что мы будем создавать.

Выделения области изображения (selection) являются неотъемлемой частью обработки любой фотографии. Однако  часто то, что нам нужно выделить — не так конкретно, как может показаться с первого взгляда. В этом уроке мы расскажем вам, как сделать выделение стакана, который включает в себя прозрачные элементы. Давайте начнем!

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

http://cdn.tutsplus.com/psd/uploads/legacy/0680_Transparency/glass_water_original.tif

Шаг 1. Выбор инструмента для выделения

Выделения области изображения (selection) являются неотъемлемой частью процесса редактирования изображений в Adobe Photoshop. Процесс выделения частей изображения не является сложным, но иногда прозрачные области могут всё усложнить. Для задач такого типа не достаточно использовать инструмент «Перо» (pen tool).

Читайте также:  Ноутбук стал сильно тормозить. что делать в этом случае?

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

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

Мы можем эффективно использовать этот канал для того, чтобы создать маску, потому что маска также использует градации серого для хранения информации о прозрачности (чистый белый=100% непрозрачности; чистый черный=100% прозрачности).

Простая прозрачность                                                                                 Сложная прозрачность

Шаг 2. Используем каналы для выделения

Одно из основных преимуществ доступа к раздельными каналами (channels) в Photoshop — это возможность сделать выделения области. Вы можете использовать индивидуальные каналы, чтобы сделать различные выделения области изображения. Если вы хотите выбрать определенный объект в изображении, используйте цветовые каналы, которые создают наибольший контраст по краям этого объекта.

Шаг 3. Выбираем самый контрастный канал

Это оригинальное изображение. Хотя это изображение в CMYK, такой же способ сработает и в случае c изображением в RGB. Единственная разница будет в панели каналов.

В RGB изображении вместо четырех цветовых каналов и одиного комбинированного канала будет три цветовых канала и один комбинированный канал.

Целью данного урока является убрать черную часть (фон), но не тронуть стакан, воду, пузырьки и отражение под стаканом, так, что бы мы могли разместить стакан на любом фоне (однотонном или на фото). В этом уроке мы будем использовать команду Изображение – Внешний канал (Image — Apply Image).

Шаг 4. Функци Apply Image

Команда «Внешний канал» (Apply Image) позволяет смешивать один слой изображения и канал с слоем и каналом активного изображения. Но помните – для того, что бы названия картинок появились в диалоговом окне Внешнего канала (Apply Image) (если вам понадобиться смешивать каналы разных изображений),  пиксельные размеры изображений должны совпадать.

Однако мы не будем использовать нескольких изображений. Мы собираемся смешивать копию черного канала с этой же самой копией черного канала. Но сила Внешнего канала (Apply Image)  кроется в «Target Selection» (параметры внизу диологового окна «Внешний канал» ).

Здесь вы можете задать режим наложения или тип смешивания, который вы хотите использовать в течение наложения во Внешнем канале (Apply Image).

Шаг 5. Выбираем самый контрастный канал

Откройте файл в Photoshop. Затем в панели Каналов (Channels) просмотрите все каналы и найдите канал с лучшим контрастом. Найти канал с хорошей контрастностью очень важно для хорошего выделения нужной области изображения.

Шаг 6. Выбираем самый контрастный канал

Здесь самый лучший контаст между стаканом и фоном у чёрного канала.

Шаг 7. Дублируем канал

Создайте дубликат черного канала, перетаскивая его через значок «создать новый канал» (create new channel)  внизу Панели «Каналы» (Channels). Вы можете также щелкнуть правой кнопкой мыши по черному каналу и выбрать «создать дубликат канала» (duplicate channel).

Шаг 8. Увеличиваем контраст канала с помощью Apply Image

Затем выберите копию черного канала и зайдите в Изображение — Внешний канал (Image — Apply Image).

Шаг 9. Увеличиваем контраст канала

Сначала смешайте один раз с Умножением (Multiply) для усиления черного и преобразования при этом любой серой области из фона в черный цвет. Уменьшайте  непрозрачность (opacity) до 50%, чтобы создать наложение, которое не будет слишком сильным. Так же мы можем устранить некоторые белые части, так как они не являются чисто белыми.

Шаг 10. Принцип режима наложения Multiply

Режим наложения Умножение (Multiply) воспринимает информацию о цвете в каждом из каналов и умножает основной цвет на накладываемый цвет. Результирующий цвет всегда получается более тёмным. Умножение любого цвета на черный даст черный. Используя режим наложения Умножение (Multiply) мы устраняем все серые части из фона.

Шаг 11. Увеличиваем контраст канала

Далее сделайте два раза наложение с Перекрытием (Overlay) для того, что бы увеличить белый. Теперь мы можем легко выделить белую область. Нашей целью здесь является создание эффективной, быстрой и приемлемой маски. На этот раз в области наложения используем 100% — ую Непрозрачность (Opacity).

Шаг 12. Приницп работы режима наложения overlay

Наложение с параметром «Перекрытие» (Overlay) умножает или усиливает цвета, в зависимости от основного цвета.

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

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

Шаг 13. Рисуем белой и черной кистью, чтобы сделать оптимальное изображение канала

Вы все еще можете настроить копию черного канала с помощью кисти (brush) и рисовать белым или чёрным цветом. Рисуйте белым для того что бы оставить участки изображения и рисуйте чёрным, что бы  удалить или скрыть участки. Белый означает непрозрачность и черный -прозрачность в рамках канала.

Шаг 14. Загружаем канал как выделение

Загрузите копию черного канала как выделение (selection) используя либо Ctrl-клик на канале, либо первую кнопку внизу панели каналов, которая загружает содержимое канала как выделенную область (load channel as a selection).

Шаг 15. Дублируем фоновый слой

Затем перейдите на панель Слои (Layers) и скопируйте слой с фоном путём перетаскивания его к кнопке «Создать новый слой» (create new layer), находящейся внизу панели слоёв. Вы также можете щелкнуть правой клавишей мыши по фоновому слою и выбрать «Создать дубликат слоя»  (Duplicate Layer).

Шаг 16. Создаем маску с изображением объекта

Затем выберите новый слой (Копию фона) левым кликом мышки. Выделение по-прежнему активно. Нажмите на значок маски (mask) внизу панели Слоев, чтобы создать маску.

Шаг 17. Создаем цветной фон под объектом

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

Шаг 18. Удаление серой зоны

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

Шаг 19. Меняем режим наложения

Процесс 1: Измените режим наложения копии фонового слоя на «Замена светлым» (Lighten) для того, чтобы удалить » серую зону».

Шаг 20. Меняем режим наложения

Режим наложения «Замена светлым» (Lighten) изучает цветовую информацию в каждом канале и заменяет те пиксели, которые являются темнее, чем смешиваемые цвета, а те пиксели, которые светлее, чем смешиваемые цвета, не меняются. В результате удаляются темно-серые пиксели.

Шаг 21. Загружаем выделение

Процесс 2: Ctrl-клик на миниатюру маски копии фона, чтобы загрузить маску, как выделение. Вы также можете загрузить выделенную область из копии черного канала.

Шаг 22. Создаем новый корректирующий слой

Затем нажмите на значок «Создать новый корректирующий слой или слой-заливку» (Adjustment layer) внизу панели «Слои».

Шаг 23. Создаем новый корректирующий слой

Выберите в раскрывшемся списке «Уровни» (Levels) и создайте новый корректирующий слой.

Шаг 24. Серую зону преобразуем в белую

Затем в диалоговом окне уровней сначала перетащите ползунок полутонов (средний) и затем ползунок светлых зон (справа), влево для удаления » серой зоны» (или, скорее, преобразования серого в белый).

Шаг 25. Финальные штрихи штампом

После применения режима «Замена светлым» (Lighten) , если вы посмотрите внимательно, вы увидите, что существует несколько пострадавших частей в белой области. Вы можете использовать инструмент «Штамп» (Clone Stamp Tool) для того, что бы исправить эти части.

Шаг 26.

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

Конечный результат

  • Поделитесь похожими уроками на эту тему и своими работами в х.

Источник: http://skillsup.ru/uroki-obuchenie-master-klassyi/photoshop-lessons/photoshop-kollazhirovanie/kak-vyidelyat-prozrachnyie-obektyi-v-fotoshope.html

Ссылка на основную публикацию