Результат того, что мы будем создавать.
Выделения области изображения (selection) являются неотъемлемой частью обработки любой фотографии. Однако часто то, что нам нужно выделить - не так конкретно, как может показаться с первого взгляда. В этом уроке мы расскажем вам, как сделать выделение стакана, который включает в себя прозрачные элементы. Давайте начнем!
Картинка, используемая в данном уроке.
Шаг 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.
Вот и всё. Вы можете использовать ту же технику, для того, чтобы выделять сложные объекты с переменным уровнем прозрачности. Ниже показано как было до и как стало после проделанной работы.
Конечный результат
Прозрачность в фотошопе является одним из замечательных его свойств. Прозрачность позволяет нам видеть одно изображение (объект) сквозь другое, создавать эффекты глубины картинки. С помощью прозрачности создаются удивительные по своей красоте коллажи.
То, что мы с вами называем "прозрачность", в фотошопе имеет название "непрозрачность". Точнее - настройка непрозрачности инструментов фотошоп позволяет нам достигнуть желаемого эффекта прозрачности. Непрозрачность устанавливается в процентах. Абсолютной непрозрачности соответствует 100%, а абсолютной прозрачности - 0%. Просто запомните, что если Вы установили непрозрачность фона или инструмента, к примеру, - 80%, то фон, или мазок инструмента будут иметь прозрачность 20%. Такое простое соотношение непрозрачности и прозрачности.
С помощью непрозрачности в фотошопе можно задать прозрачность фона, прозрачность цвета, прозрачность картинки в целом или только ее части, прозрачность объекта и прозрачность слоя. Эффект прозрачности в фотошопе может достигаться различными способами: настройкой степени прозрачности (непрозрачности) слоя, настройкой прозрачности (непрозрачности) инструментов фотошоп, применением маски на выделенную область.
Как сделать прозрачность цвета в фотошопе, при наложении градиента, я уже писал в своей статье " ".
Сегодня я хочу рассказать Вам, как сделать прозрачность фона в фотошопе, как сделать прозрачность картинки (рисунка) и объекта. Думаю, Вам будет интересно не только, как создать прозрачность, но и как ее сохранить. Особенно вопрос сохранения прозрачности актуален при подготовке картинки для загрузки на веб сайт.
Перейдем от теории к практике. Думаю, Вам не терпится узнать, как создать прозрачность в фотошопе.
Прозрачность фона
Зачастую нам необходимо иметь прозрачный фон картинки. Наиболее актуальным данный вопрос является при подготовке фото (картинки) товара для размещения в каталоге товаров интернет магазина. Так же прозрачность фона нужна при создании логотипов и других изображений (рисунков) для сайтов, которые зачастую имеют не однотонный фон. Прозрачность фона картинки позволяет ей гармонично вписаться в дизайн сайта.
Предположим, что мы готовим каталог товаров для интернет магазина оргтехники.
Инструменты прозрачности
Инструментами прозрачности фотошоп являются любые инструменты, предназначенный для рисования, ("Кисть", "Карандаш", "Заливка", "Градиент", "Штамп", "Прямоугольник" и др.). Инструментом прозрачности также является инструмент "Ластик". Он позволяет изменить прозрачность объекта (рисунка) только в том месте, где нам надо, не меняя прозрачность всего слоя. Мы можем назначить для каждого из инструментов прозрачности любую степень прозрачности. Для этого необходимо воспользоваться панелью управления настройками инструмента.
Взгляните на рисунок в формате jpg , небезызвестного мультипликационного героя Мамонтёнка который потерял свою маму.. плакать хочется.. нет, не из-за того, что мамонтенок не может найти свою маму (хотя и из-за этого тоже), а потому что синий фон ужасно режет глаза! так и хочется убрать эту синеву и залить фон рисунка таким цветом, чтобы он сливался с фоном страницы..
Думаю для Вас это не проблема! подумаешь открыть его с помощью того же фотошопа и залить фон нужным цветом! но а как быть если основной фон страницы это некая сложная текстура?
Пример, где изображение накладывается поверх текстуры:
Открывать фотошоп и рисовать в рисунке с мамонтенком вместо синего фона клеточки? А потом пытаться подогнать их к основному фону страницы? Это не выход!!!
Так вот, докладываю, что графические форматы gif и png - поддерживают режим прозрачности, позволяя тем самым сделать некоторые области рисунка невидимыми человеческому глазу - что нам собственно и нужно!
Теперь по порядку:
1. Откройте рисунок фон которого нужно сделать прозрачным с помощью Adobe Photoshop.
2. Откройте закладку "Изображение" >> "Режим" >> "Индексированные цвета" .
3. В появившемся окне-диалоге "Индексированные цвета" ставим галочку "Прозрачность" и нажимаем "ОК"
4. С помощью инструмента выделения "Волшебная палочка" и "Ластика" стираем в рисунке фон, собственно делая нужные нам части прозрачными.
5. Ну и сохраняем нашу картинку в формате gif .. закладка "Файл" >> "Сохранить для Web…" в появившемся окне указываем (соглашаемся), что картинка будет сохранена в формате gif жмем "Сохранить" .. выбираем папку пишем имя - всё это Вы, я надеюсь умеете..
Всё картинка с прозрачным фоном создана!!
Теперь её можно снова вставить в нашу страницу, не забыв при этом сменить расширение jpg на gif .
gif " alt="Мамонтёнок">
