Увага. У цій серії уроків описуються тільки "ручні" способи обробки зображень. Модулі не будуть зачіпатися з причин їх не універсальності і тотальної нелегальності. (Покажіть мені людину, у якого є ліцензія). А обробляти зображення вручну повинен вміти будь-який, поважаючий себе професіонал.
Тіні - це один з каменів спотикання всіх дизайнерів. За тіням часто судять про якість робіт, про рівень дизайнера. Є деякі стереотипи, якісь "правила хорошого тону", за якими ми судимо про якість тіні.
Взагалі, твердження, що фотореалістична тінь - це добре, а інше погано - в корені невірно. Дуже часто доводиться правити і коригувати фотореалістичну тінь, щоб отримати чистий якісний елемент дизайну сайту. Також нерідко потрібно зобразити схематичну тінь, щоб просто відтінити важливий блок або меню.
Нижче я привожу три основних правила зображення тіней.
Перше правило: Тінь не повинна бути брудом
Наведені нижче малюнки демонструють, як не треба робити тінь. На малюнках показані занадто різкі переходи з білого кольору в чорний. У природі, при денному освітленні, такі переходи дуже рідкісні.
А на цих малюнках я врахував перше правило
Тут тінь світліше і прозоріше. Вона не відтягує на себе увагу. Таке використання тіні, як на рис.2 і рис.2b часто застосовується в корпоративних сайтах. І часом насторожує, що дизайнери сприймають це як ознака поганого тону.
Винятки з правила:
Якщо на малюнку показана ніч, і наш об'єкт висвітлюється лампою, то тіні дуже контрастні. Все залежить від освітлення. В даному уроці розповідається про загальний випадок, коли все освітлене денним світлом.
Друге правило: тінь - це не накладення чорного кольору
Я бачив в Інтернеті деякі уроки з малювання тіней. Дуже часто там малюють тінь, накладаючи чорний колір в різних пропорціях і з різною прозорістю. Це не вірно. Тінь - це область, куди не потрапляє пряме світло від джерела. А значить, що ця область пофарбована в природний колір предмета. Вона може здаватися навіть більш насиченим тієї області, куди падає світло, якщо предмет має досить яскравий "рідний" колір.
Також при виборі кольору тіні слід враховувати той момент, що сам об'єкт може частково відбивати світло на площину. Наприклад, якщо об'єкт яскраво-червоний, то він буде відкидати частину червоного кольору на площину, на якій стоїть.
Приклад того, як не можна робити:
Короткий опис того, як можна отримати тіні, як на малюнках 4a та 4b:
Малюнок 4а:
Відповідно до першим і другим правилом не слід робити темну тінь чорного кольору. В панелі "layer style" вибираємо "color overlay" і підбираємо колір. Вибираємо темно-коричневий колір (такою, якою мала б поверхню без яскравого денного освітлення).
Малюнок 4b:
Основний фон - білий, колір тіні - сірий. Червона панель теж відкидає червоне світло на поверхню. Тому дублюємо сірий шар тіні, перефарбовувати його в темно-червоний колір, і стираємо ті області, які не перебувають в безпосередній близькості до червоної поверхні. В результаті вийде, що біля нашої панелі тінь має трохи червонуватий відтінок, ніж далеко від неї.
Третє правило: ближче - темніше і чіткіше
За замовчуванням ми розглядаємо не точкове джерело світла, а розподілене. Це правило випливає з фізичних особливостей поширення світла від розподіленого джерела.
Робиться подібна тінь так:
Спочатку створюється звичайний тіньової шар. Потім, далі від панелі, він сильно розмивається (можна просто інструментом "blur"). І в кінці правого до лівого краю (далекі від предмета - ближні до нас) трохи підтирати ластиком, для того, щоб не було таких чітких граней тіні.
Є й інші варіанти.
Я б не сказав, що це неправильне рішення. Тільки тепер схоже, що вся панель висить над поверхнею і висвітлюється денним світлом.
Тут панель висвітлюється чітким світлом штучного джерела.
Приклад 1: Тінь від куба
Вихідний куб:
Спочатку зробимо тінь в безпосередній близькості до кубу. По третьому правилу це найбільш темна область. Підправимо сам куб, щоб він був трохи темніше до основи, і намалюємо ближню область тіні.
Тепер додамо основну тінь, сильно розмиту, так як вона знаходиться набагато далі від куба.
Вийшла непогана тінь для куба, що стоїть на поверхні і освітлюється денним світлом. Якщо ми захочемо зробити тінь ще й від сонця або від якого-небудь ліхтаря, то використовуємо третє правило. А також стежимо, щоб тінь була чорна (так як об'єкт яскраво-зелений) і не дуже темна.
Тінь може бути від декількох джерел світла. Приклад - www.pirogovv.ru. там від кожної ляльки по дві тіні від двох різних джерел світла.
Приклад 2: Тінь від машинки
Початкове вирізане зображення:
Пам'ятаємо правило "ближче - темніше і чіткіше".
Визначимо, яка частина машини найбільш близька до поверхні. Очевидно, що це колеса. Побудуємо напрямні для коліс (насправді будувати нічого не потрібно, але для наочності я буду все розписувати по кроках) для того, щоб визначити поверхню, на якій стоїть машина:
Тепер покажемо зеленими лініями місця, де колеса найбільш близькі до поверхні.
В областях коліс малюємо чіткі чорні тіні.
Розмиваємо і зменшуємо насиченість в місцях, де колеса не так близькі до землі (пам'ятаємо 1 і 3 правила):
Тепер дублюємо шар тіні, і розмиваємо його по Гаусса. У нас денне освітлення, тому тінь від коліс знаходиться не в конкретних напрямках від коліс, а по всім сторонам. Пам'ятаємо перше правило. Регулюємо прозорість.
Далі малюємо тінь від самого корпусу машини. Він неоднорідний. Є місця, що знаходяться ближче до поверхні, є далі. Спочатку намалюємо рівномірну тінь, яку відкидав би корпус, якби (він) був однорідним. А потім просто додамо тіні там, де потрібно, і зітремо там, де не потрібно. Не забуваємо про друге правило. Все-таки машина яскраво-червона і може відкидати злегка червонуватий відтінок (хоча зовсім не обов'язково). За допомогою стилів шарів і стилю "Color overlay", замінюємо чорний на злегка бордовий.
Бачимо, що передня вісь машини, а також ліва підніжка найбільш близькі до поверхні. Додатково затінювати їх. Дотримуємося перший принцип.
В результаті отримали хорошу і досить реалістичну тінь для машини.