Не бойтесь тени! Эффектное использование света и тени.

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

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

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

Цвета подчеркивают настроение, во всяком случае должны это делать. Я вижу замысел автора, но и вижу, что ей не удалось. Я задумался над тем, как доработать рисунок и в конце концов отредактировал его на компьютере (вы увидите это в конце). Сначала я хотел сохранить освещение девушки и подоконника. Но затем затемнил камни вокруг них. Почему?

Сейчас узнаете…

ПОТОМУ ЧТО ЯРКИЙ ОБЪЕКТ КАЖЕТСЯ ЕЩЕ БОЛЕЕ ЯРКИМ РЯДОМ С ТЕМНЫМ ОБЪЕКТОМ ИЛИ НА ЕГО ФОНЕ.

Обратите внимание, как, например, выглядят люминесцентные цвета (или белый цвет) на темном фоне. Яркий объект на темном фоне (или наоборо — темный на светлом) всегда выделяется, бросается в глаза.

Так хорошо получаются «резкие» края, если вы рисуете на темном фоне. Вот пример из моей галереи:

Как видите и фон, и ее (да, это девушка) волосы черные. Я мог либо смешать эти два оттенка черного (что вряд ли получилось бы из-за растрепанных волос героини), либо выделить несколько светлых участков, чтобы показать очертания волос и позволить фантазии дорисовать остальное. Довольно прикольно получается с белыми силуэтами на черном фоне.

Я использовал темные оттенки, чтобы подчеркнуть светлые. Вот так это выглядит на рисунке Кейти:

Это пригодится, по большому счету, большинству художников. Но продолжим…

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

ИСТОЧНИКИ СВЕТА СОСЛУЖАТ ВАМ ХОРОШУЮ СЛУЖБУ, ЕСЛИ ВЫ БУДЕТЕ ВНИМАТЕЛЬНЫ К НИМ.
ИСТОЧНИКИ СВЕТА ВЛИЯЮТ НА ТО, КАК ПАДАЮТ ТЕНИ, ПОЭТОМУ НЕЛЬЗЯ ИХ НЕДООЦЕНИВАТЬ.

В нашем рисунке тень должна быть длинной и падать к нам, не так ли? Мне пришлось дорисовать нижнюю часть, чтобы поместился свет от окна.

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

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

Художница сделала, при помощи белого и желтого цветов, ноги более светлыми, чтобы подчеркнуть их форму. Но ведь они на фоне стены, которая светиться не должна, да и не может. А других видимых источников света на рисунке не видно.

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

КОНТРАСТ СДЕЛАЕТ ВАШ РИСУНОК БОЛЕЕ ЖИЗНЕННЫМ И ЭФФЕКТНЫМ.

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

Нормальное сочетание — белый на темно-сером или светло-серый на черном (правда, наши понятия о том, что такое «светлый» и «темный», могут различаться ;). Взгляните на этот пример:

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

Вернемся к нашему рисунку. Стена очень светлая (что логично — она рядом с окном), но спина и ноги выполнены средними тонами. Это то, о чем я говорил — светло-серый (светлые тона) на сером (где должны бы быть темные тона).

И что получилось? Она очень эффектно осветила часть рисунка, но это не чувствуется, потому что фон тоже светлый.

Воспользуемся цифровыми технологиями (не люблю я Photoshop, а посему пользовался Micrografx Picture Publisher). Сэмплируем один из цветов исходного изображения, берем «аэрограф», ставим на «умножение» и проходимся по участкам, которые нужно затемнить. Например, скрещенные ноги девушки.

Раз уж речь зашла о цветах и тенях, хотелось бы дать ну очень хороший совет. НЕ ИСПОЛЬЗУЙТЕ ЧЕРНЫЙ И СЕРЫЙ ЦВЕТА ДЛЯ ЗАТЕНЕНИЯ.
Это делает рисунок неестественным и безжизненным. Используйте дополняющие цвета (для этого нужен цветовой круг).

Например, если вы хотите затенить красный — возьмите темно-зеленый (это противоположный цвет). Тени будут более естественными, это я вам обещаю. Универсальный цвет для затенения — indigo blue (сине-фиолетовый).

Для белого цвета воспользуйтесь голубым, пурпурным или любым другим отраженным цветом (например, в одной из областей рисунка возле рубашки). Рубашка будет выглядеть более естественно.

И еще одно пожелание, адресованное «цифровым» художникам: НЕ УВЛЕКАЙТЕСЬ ЧРЕЗМЕРНО ИНСТРУМЕНТАМИ «ОСВЕТЛЕНИЕ» И «ВЫЖИГАНИЕ». Есть и другие методы. Сэмплирование цвета с последующим рисованием в режиме «умножение» ничуть не хуже этих инструментов (более подробно об этой технике вы сможете узнать на сайте Polykarbon.com). Все, что я сделал с рисунком Кейти, я сделал именно так, не прибегая к осветлению и выжиганию.

Ну а теперь, давайте сравним исходный рисунок и результат моих трудов:

Обратите внимание, как темные участки подчеркивают светлые.

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

Я немного увеличил картину, добавил слева, справа и сверху, для того, чтобы зрителю не было «тесно». Стоит оставлять немного больше свободного места для объекта рисунка, чтобы ему было «просторно».

Итак, если вы обратите внимание на источники света и расположение теней, сделаете рисунок КОНТРАСТНЫМ, затените нужные его участки дополняющими цветами в режиме «умножение», то ваш рисунок сможет действительно выделяться из массы. НЕ БОЙТЕСЬ ТЕНИ!

Выводы
— Контраст темных и светлых участков позволяет привлечь внимание к определенным участкам изображения, делает грани более четкими и задает настроение рисунка.
— Источниками света не стоит пренебрегать. В любом случае, если вы будете внимательны к ним, это сделает рисунок более аккуратным.
— Не используйте черный цвет для теней. Не злоупотребляйте осветлением и выжиганием. Режим «умножение» — лучший вариант.
— Не бойтесь использовать тени.

Надеюсь, что, так или иначе, этот туториал вам помог.

Все о теплохолодности, или какого цвета будут тени, свет и рефлексы — Gamedev на DTF

Если свет холодный, то тень теплая. Если свет теплый, то тень холодная. Всегда ли это правда?

34 769
просмотров

Этому правилу учат в каждой художественной школе. Старые мастера широко использовали этот прием. Сегодня его активно применяют художники современности. Почему? Просто это хорошо выглядит!

Когда рисуешь теплый свет, сделай тень холодной и наоборот.

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

Сценарий I. Теплый свет — холодная тень

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

Эта работа Хоакина Сорольи с рыбаком на пляже следует аналогичному световому сценарию. На ней тоже прекрасно виден контраст холодной тени и теплого света солнца.

Сценарий II. Холодный свет — теплая тень

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

Холодный зеленый свет придает сцене тревожное настроение

Аналогичную схему «теплые тени — холодный свет» можно заметить в обычной комнате, если ее окна выходят на север, а интерьер выполнен в теплых тонах. Вторичные источники света, отразившись от стен, пола и мебели, дадут теплые тени, а свет из окна, ориентированного на север, будет голубоватым и холодным. Именно в таких условиях шведский художник Андерс Зорн (Anders Zorn) писал свою жену Эмму:

Белый прохладный свет заливает лицо модели, в то время как тени состоят из смеси темных красных и охристых оттенков.

Еще один пример картины с непростым световым решением — это «Обед на борту» Хоакина Сорольи (Lunch on the Boat Joaquin Sorolla). В сцене несколько источников света. На лодке мы видим множество рефлексов; свет проходит сквозь парус, перекинутый через мачту, и подсвечивает лодку. В зоне фокуса формируется территория с теплой тенью, которая хорошо контрастирует с прохладным солнечным светом снаружи.

Внутри затененного пространства плоскости отражают свет по-разному: те, что смотрят вверх, ловят больше теплого желтого света, чем те, что обращены вбок и вниз.

Почему тень то теплая, то холодная?

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

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

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

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

Bill Zhang, концепт-художник в Microsoft

От чего зависит цвет тени?

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

Посмотрим на эту работу Дайса — концепт к мультфильму «Хортон».

На картинке изображен солнечный день. Все ли тени здесь холодные? Дайс Цуцуми

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

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

(Остров) Корфу: Свет и тени Джон Сарджент

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

Все работает в сравнении

Всегда стоит помнить, что тон, насыщенность и температура оттенков работают в контексте. Возьмите цвет с насыщенностью 50%, и поместите его рядом с другим, насыщенным на 25% — и первый цвет будет выглядеть намного ярче, чем если бы вы поместили его рядом с еще более насыщенным оттенком (например, на 75%).

Хотя в окружении цвета на коже кажутся ярко-оранжевыми, на самом деле они гораздо менее насыщенные. В других местах кожа кажется зеленоватой или сиреневатой, но это опять не так. Николай Фешин

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

Marco Bucci о цветовой гармонии и теплохолодности

Каждый художник — режиссер своей работы

Если вы автоматически полагаетесь на правило «теплый свет, холодная тень», значит, вы не анализируете окружение в работе, не вписываете объект в пространство. Рисуя концепт-арт, вы не просто копируете реальность, вы ее режиссируете.

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

Так можно сочетать несколько источников света с разной температурой. Jay Kim

P.S. Если вам не совсем понятно, как формируется цвет объекта и почему в разном окружении он сильно меняется, рекомендуем эту статью.

Автор: Сефери специально для Smirnov School, онлайн-школы, где готовят концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Для читателей DTF у нас есть специальные скидки.

Текст дополнен редакцией.

color — Комплексная тень на черном фоне

Задавать вопрос

спросил
1 год, 10 месяцев назад

Изменено
1 год, 10 месяцев назад

Просмотрено
10 тысяч раз

Рассмотрим круг на белом фоне с красивой (темной и бесцветной) тенью.

Но когда фон становится черным ( #121212 ), тень полностью исчезает.

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

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

Последнее решение, которое пришло мне в голову, это сделать фон светлее.

Однако фон слишком светлый, чтобы быть темным.

Есть ли решение?

Не уверен, что это очень полезно, но я веб-разработчик, так что это CSS и HTML.

• цвет
• фон
• тени

6

Вот опция, позволяющая отображать нужные темные тени на темном фоне. Это делается в иллюстраторе.

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

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

5

У меня есть несколько предложений:

1. Примените темную тень, но не беспокойтесь о том, что она будет не очень заметна. На полностью темном черном фоне (например, #000000) вы не можете создать темно-серую тень темнее фона. Это может быть почти правдой в реальном мире.

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

   На слегка светлом фоне еще заметнее:

2. Если вы не можете избежать тени, вы можете попробовать красочный тренд теней , если хотите,
   что-то вроде этого. Это будет выглядеть немного менее странно по сравнению с серой тенью для синего объекта. (Хотя это все равно будет выглядеть как свечение)

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie

.

8 советов по дизайну темной темы. Темная тема — одна из самых востребованных… | by Nick Babich

Темная тема Natural OS для обучающего загрузчика AGI by Gleb Kuznetsov✈

Темная тема — одна из самых востребованных функций за последние несколько лет. И Apple, и Google сделали темную тему неотъемлемой частью пользовательского интерфейса. Пониженная яркость темной темы обеспечивает безопасность в темноте и снижает нагрузку на глаза.

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

1. Избегайте чистого черного

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

В качестве основного цвета поверхности компонентов лучше использовать темно-серый, а не настоящий черный (#000000). Темно-серые поверхности снижают нагрузку на глаза — светлый текст на темно-серой поверхности менее контрастен, чем светлый текст на черной поверхности. Темно-серые поверхности могут выражать более широкий диапазон цвета, высоты и глубины, потому что на сером легче увидеть тени (вместо настоящего черного).

Дизайн материалов рекомендует #121212 в качестве темного цвета поверхности темы.

Рекомендуемый цвет поверхности темной темы — #121212.

2. Избегайте использования насыщенных цветов на темных темах.

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

Используйте более светлые тона (цвета в диапазоне 200–50), поскольку они лучше читаются на темных поверхностях. Более светлые варианты не сделают пользовательский интерфейс менее выразительным, но помогут вам сохранить соответствующий контраст, не вызывая напряжения глаз.

Менее насыщенные цвета из вашей цветовой палитры улучшают читаемость и уменьшают визуальную вибрацию. Избегайте использования насыщенных цветов на темных темах, поскольку они могут визуально вибрировать на фоне темных поверхностей. Более светлые тона (цвета в диапазоне 200–50) лучше читаются на темных темных поверхностях (на всех высотах).

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

Убедитесь, что ваш контент остается удобным для чтения в темном режиме. Поверхности темной темы должны быть достаточно темными для отображения белого текста. Google Material Design рекомендует использовать уровень контрастности не менее 15,8:1 между текстом и фоном.

Используйте инструменты цветового контраста для проверки коэффициента контрастности.

Инструменты цветового контраста | UXPRO

Проверка доступности цветов

uxpro.cc

4. Используйте «включенные» цвета для текста

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

По умолчанию включенными цветами для темной темы является чисто белый (#FFFFFF). Но #FFFFFF — это яркий цвет, и он будет визуально «вибрировать» на темном фоне. Вот почему Google Material Design рекомендует использовать немного более темный белый цвет: 9.0003

• Текст с высоким выделением должен иметь непрозрачность 87 %
• Текст со средним выделением применяется с коэффициентом прозрачности 60 %
• Текст с отключенным выделением использует непрозрачность 38 %.

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

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

5. Учитывайте эмоциональный аспект вашего дизайна

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

Темный режим не должен (всегда) быть производным от существующей светлой темы.

Shift Dashboard — Dark Mode by Sergey Zolotnikov

6. Глубина общения

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

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

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

В темных темах, созданных с использованием материала, приподнятые поверхности и компоненты окрашиваются с помощью наложений. Чем выше высота поверхности, тем светлее становится эта поверхность.

Чем выше высота, тем светлее поверхность

Чем выше поверхность, тем сильнее и ярче становится наложение. Пользовательский интерфейс музыкального проигрывателя от Мартина Мроча

7. Разрешить пользователям переключаться с обычного на темный режим

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

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

Элемент управления пользовательским интерфейсом «Темная тема»

8. Протестируйте свой дизайн как в светлом, так и в темном режимах

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