4 глава «Свет, тень и цвет»
План работы
4.1 О светотени 4.2 Работа с тенью 4.3 Работа с светом 4.4 Базовая цветокоррекция
4.1 О светотени
Светотень — это ключевой инструмент в визуальном искусстве и дизайне, который отвечает за восприятие формы, объема и текстуры объектов. В мокапах правильное использование светотени помогает интегрировать дизайн в реальное окружение, создавая убедительную иллюзию трехмерности.
Если светотень проработана неправильно, мокап будет выглядеть неестественным, а дизайн — «приклеенным» к объекту. В этом уроке разберем основные принципы работы со светом и тенью в Photoshop, а также методы их корректировки.
Совет: всю лекцию можно свести к одному лайфхаку — определить точку исхода света, понять в каких областях свет не доходит до плоскости и образует тень, а в каких наоборот предмет реагирует на освещение (отражает, поглощает и насколько интенсивно).
Разные материалы по-разному взаимодействуют со светом. Чтобы мокап выглядел правдоподобно, важно учитывать свойства текстур.
- Глянцевые поверхности (металл, стекло, пластик) Имеют четкие, яркие блики. Тени могут быть жесткими или мягкими в зависимости от освещения. Используйте Gradient Overlay в Photoshop для создания отражений.
- Матовые поверхности (бумага, ткань, картон) Свет рассеивается, создавая плавные блики. Тени более мягкие, но выраженные. Можно добавить легкий шум (Filter > Noise) для реалистичности.
- Полупрозрачные материалы (стекло, пленка, гель) Меняют цвет теней из-за преломления света. Отражения можно создать с помощью Opacity и режима наложения Screen.
Основные параметры источника света:
- Направление (слева, справа, сверху, снизу, под углом) - Жесткость (мягкий рассеянный свет или жесткий прямой) - Цветовая температура (теплый желтый свет или холодный голубоватый) - Количество источников (один или несколько, основное и вспомогательное освещение)
Нарисуйте точки на своих мокапах, продумав пространство, которое соответствует, продуманному вам характеру бренда, и обсудите с куратором дальнейшее развитие вашей работы.
Как же создать правильную светотень?
Совет: перед выбором цвета не бери открытые оттенки, например, белый или черный, а опирайся на окружение. Неправильный выбор может сильно удешевить работу.
- Сравните мокап с реальными фотографиями — найдите аналогичный объект в реальном освещении и посмотрите, как ведут себя свет и тени.
- Отключите цвет (Grayscale Mode) — это поможет увидеть ошибки в распределении светотени без отвлекающих факторов. Нажмите Ctrl + Shift + U или создайте корректирующий слой Black & White, чтобы проверить распределение света и теней.
- Используйте референсы — анализируйте профессиональные фотоснимки, чтобы понять, как работает освещение.
4.2 Работа с тенью
Тени — это один из наиболее важных элементов, который позволяет создать глубину в мокапах.
Давайте глубже познакомимся с видами теней, чтобы осознанно и качественно выполнять работу.
Падающая тень (Drop Shadow)
Эта тень возникает, когда объект блокирует часть света и отбрасывает силуэт на поверхность.
- Жесткая тень — получается при ярком точечном освещении (например, солнечном свете). Она имеет четкие границы и высокую контрастность. - Мягкая тень — возникает при рассеянном освещении (например, в пасмурный день или при свете от лампы с абажуром). Ее края плавно размываются.
Как создать падающую тень в Photoshop:
1. Дублируйте объект (Ctrl + J). 2. Перейдите в Image → Adjustments → Hue/Saturation и уменьшите Lightness до -100, чтобы сделать слой черным. 3. Перейдите в Edit → Transform → Distort и вытяните дубликат в сторону, противоположную источнику света. 4. Примените Gaussian Blur (Filter → Blur → Gaussian Blur) (радиус 10-50 px, в зависимости от жесткости тени). 5. Уменьшите непрозрачность слоя до 40-60%. 6. Установите режим наложения Multiply, чтобы тень гармонично смешалась с фоном.
Собственная тень (Inner Shadow)
Эта тень формируется на самом объекте, создавая иллюзию глубины. Она нужна, если мокап предполагает вогнутые элементы, например, тиснение на бумаге или глубину на упаковке.
Как создать собственную тень в Photoshop:
1. Выберите слой с объектом. 2. Откройте Layer Style (Двойной клик по слою) > Inner Shadow. 3. Настройте угол света, размер размытия и интенсивность тени. 4. Экспериментируйте с Blend Mode (обычно используется Multiply) и цветом тени.
Контактная тень (Occlusion Shadow)
Эта тень образуется в местах соприкосновения объекта с поверхностью. Она самая темная и насыщенная, практически без размытия. Например, если поставить коробку на стол, то прямо под ней будет зона максимального затемнения.
Как добавить контактную тень:
1. Создайте новый слой прямо под объектом. 2. Выберите жесткую кисть маленького размера. 3. Проведите тонкую черную линию по нижнему краю объекта. 4. Размойте её Gaussian Blur (1-5 px). 5. Уменьшите непрозрачность до 50-70%, чтобы сделать тень естественной.
Помните, что контактные тени всегда самые темные, но быстро рассеиваются по мере удаления от объекта.
Ошибки в работе с тенями
- Слишком черные тени — в реальности тени редко бывают абсолютно черными. Лучше использовать темно-серые или слегка окрашенные в цвет окружения.
- Неправильное направление тени — если тени падают в разные стороны, мокап будет выглядеть неестественно.
- Отсутствие мягких переходов — резкие границы между светом и тенью могут разрушить реалистичность мокапа.
- Игнорирование отраженного света — без него объекты выглядят оторванными от окружения.
- Использование одинаковых теней для всех объектов — каждая тень должна соответствовать своему объекту, фону и свету.
4.3 Работа со светом
Любой предмет в реальном мире воспринимается нами благодаря свету. Когда свет падает на объект, он создает области освещенности и затемнения, формируя объем. Основной принцип светотени заключается в градиентных переходах между светлыми и темными зонами.
Блики — самое светлое пятно на предмете. Он помогает мокапу выглядеть живым и взаимодействовать со светом так, как это происходит в реальной жизни. Например, стеклянная упаковка должна иметь яркие отражения, а матовая бумага — мягкие, рассеянные блики.
Давайте рассмотрим способы их создания:
Использование кисти
- Создайте новый слой (Ctrl + Shift + N) и назовите его «Light». - Выберите мягкую круглую кисть светлого оттенка, в зависимости от пространства. - Снизьте непрозрачность кисти до 20-30% - Нарисуйте блик в том месте, где свет должен падать на объект. - Измените режим наложения на Overlay или Soft Light, чтобы блик выглядел естественно. - При необходимости размойте края (Gaussian Blur). - Если нужен более выраженный блик, используйте инструмент Dodge Tool (O), установив экспонирование 5-10%.
Чем дальше от источника, тем свет должен быть менее интенсивным.
Градиенты
- Используйте Gradient Tool с белым (или другой, в зависимости от освещения) и прозрачным цветом. - Примените градиент к области, где должен быть свет. - Уменьшите Opacity, если эффект слишком сильный.
Дублирование объекта с наложением
1. Дублируйте слой с объектом. 2. Откройте Layer Style > Gradient Overlay и настройте светлый градиент. 3. Измените режим наложения и прозрачность, чтобы блик выглядел реалистично.
4.4 Базова цветокоррекция
Объекты нашли свое место в пространстве, но всё равно нет ощущения, что это фотография. Что можно сделать?
- Легкий шум (Noise) — добавляет текстуру и делает изображение менее «цифровым». - Эффекты освещения (Lighting Effects) — при необходимости можно добавить дополнительные лучи света или усилить блики. - Цветокоррекция — настройте баланс цветов так, чтобы светотень гармонировала с фоном. И о ней сейчас немного поговорим.
Основные аспекты цветокоррекции
- Баланс белого Определяет общую цветовую температуру изображения. Если баланс белого смещен, изображение может выглядеть слишком холодным (синеватым) или слишком теплым (желтоватым).
- Контраст и насыщенность Контраст управляет разницей между светлыми и темными участками. Насыщенность (Saturation) отвечает за интенсивность цветов: чем выше значение, тем ярче оттенки.
- Цветовой тон (Hue) и цветовая гармония Коррекция отдельных цветов позволяет добиться нужного стилистического эффекта и соответствия фирменному стилю бренда.
- Градация светотени (Tonal Range) Работа с тенями, средними тонами и светами помогает сбалансировать изображение, избежать «выбитых» белых участков и «проваленных» теней.
Определяем проблемы перед началом
- Перед началом работы важно определить, какие проблемы с цветом присутствуют: - Цвета выглядят слишком холодными или теплыми? - Присутствуют ли нежелательные оттенки (зеленоватый, синеватый, желтоватый)? - Достаточно ли контраста между объектами? - Слишком ли перенасыщены или, наоборот, тусклы цвета?
Инструменты цветокоррекции в Photoshop
- Кривые (Curves, Ctrl+M) — позволяет точечно корректировать яркость и цветовую гамму. - Уровни (Levels, Ctrl+L) — управляет распределением светлых, средних и темных тонов. - Цветовой тон/Насыщенность (Hue/Saturation, Ctrl+U) — изменяет цветовую гамму, насыщенность и яркость. - Цветовой баланс (Color Balance, Ctrl+B) — помогает настраивать оттенки в тенях, средних тонах и светах. - Выборочная коррекция цвета (Selective Color) — дает возможность изменять конкретные цвета, не затрагивая остальные. - Карта градиента (Gradient Map) — позволяет создавать цветовые эффекты и стилизовать изображение. - Живость (Vibrance) — усиливает насыщенность без излишнего перенасыщения. - Фотофильтр (Photo Filter) — имитирует влияние цветных светофильтров на изображение.
Корректирующие слои (Adjustment Layers)
Используются для настройки цвета, контраста, освещения.
Curves (Кривые) — для точной регулировки контрастности. Hue/Saturation (Оттенок/Насыщенность) — для изменения цвета элементов. Gradient Map — тонирование всей сцены.
Применение: - Приведение мокапа к единому цвету. - Коррекция освещения и теней.
Camera Raw Filter
Позволяет быстро корректировать экспозицию, контраст, резкость мокапа.
Применение: - Улучшение качества изображения перед финальной экспортом.
Финализация
- Сравниваем результат с оригиналом. - Проверяем, не пересвечены ли светлые участки и не «провалены» ли тени. - Добавляем виньетирование, если нужно усилить фокус на объекте (Filter → Lens Correction → Vignette). - Проверяем цвета на разных мониторах и устройствах (если важно точное соответствие).
Ошибки в работе с цветокоррекцией
- Перенасыщенность (Oversaturation) — чрезмерно яркие цвета могут выглядеть неестественно. - Нарушенный баланс белого — изображение может выглядеть слишком холодным (синим) или теплым (желтым). - Потеря деталей в тенях и светах — чрезмерный контраст может привести к «выбитым» белым участкам и «проваленным» теням. - Несоответствие цветовой схемы бренду — использование неподходящих оттенков нарушает целостность визуальной айдентики.
Домашнее задание
🔵 Ответить на вопросы: 1. Что мокап важного должен подсветить в дизайне? 2. Где композиционно находится объект и сколько внимания на себя забирает? 3. Какой фон лучше использовать? (чистый, текстурированный, реальная сцена) 4. Что именно окружает объект? 5. Какой стиль освещения лучше подходит бренду? (мягкий, контрастный, драматический) 6. С какой стороны падает освещение?
🔵 Начать обработать мокапы для итогового проекта, чтобы они естественно смотрелись в пространстве.
