Образотворчі техніки створення глибини в вебдизайне

24

Від автора: креативне маніпулювання зображеннями, від розбиття на шари до створення спецефектів, може додати веб-проектів глибини.

Ми живемо в тривимірному світі, який дизайнери щодня намагаються відтворити у веб-дизайні. Елемент додає глибини деякими дизайнерськими проектами відтінок більшого реалізму.

Створити простіше, ніж ви думаєте. Загадка імітування реальності на 2D-екрані полягає у створенні глибини за допомогою зображень. Домогтися цього можна безліччю способів, від самої фотографії до розбиття зображення на шари, маніпулювання і застосування спеціальних ефектів.

РОЗБИТТЯ НА ШАРИ

Розбиття на шари – інструмент, який можна навмисно застосовувати щодо розміщення зображень і об’єктів в проекті, як інструмент маніпуляції зображеннями або цілеспрямовано в самому зображенні.
Ми всі бачили розмітку, де зображення безсистемно містяться поверх один одного, щоб це виглядало як стос надрукованих фотографій. Ви знаєте цей прийом. Та він працює, створюючи відчуття глибини, при цьому з’являється відчуття, ніби ви перебираєте фотографії. Це і є розбиття на шари в процесі дизайну. Іноді ефект очевидний, як в даному випадку, а іноді він більш прихований.

Часто безліч фотографій зливаються в одну для створення двох окремих частин зображення переднього плану і фону. Будучи добре зробленим, ефект фактично непомітний. Подивіться на сайт Range Rover вище – як автомобіль, так і зображення міста дуже видовищні і, будучи скомбінованими, змушують випробувати відчуття, ніби ви стоїте біля авто, оглядаючи місто.

Іншим ефективним інструментом розбиття на шари є розкладка фотографії або зображення поверх, здавалося б, плоского фону. Це фантастично спрацьовує з незвично орієнтованими або знятими під іншим ракурсом зображеннями і фонами з градуйованим кольором.

Нарешті, деякі зображення створено з урахуванням розбиття на шари. Ця фотографічна техніка заснована на ідеї використання перекривають один одного контурів, створених різними об’єктами на зображенні, для створення глибини. Найчастіше контури зображення виділені кольором і контрастністю з метою відокремити об’єкти в місці дії один від іншого. Ця техніка може виявитися складним у виконанні фотографами-аматорами.

ФОТОГРАФІЯ

Один з найбільш важливих інструментів створення глибини в зображеннях. Кадрування і компонування зображень при постійному обліку глибини здатні зробити її створення сущою дрібницею.

Але як ви таким чином створюєте компонування фотографій? В той час, як багато хто віддасть перевагу найняти професійного фотографа і просто проінструктувати його з приводу глибини, це не завжди єдина альтернатива. Якщо ви самі робите знімки для проекту, при зйомці подбайте про глибину і пам’ятайте наступні поради.

На передньому плані створіть якусь область зорової привабливості. Переконайтеся, що фотографії є предмет і фон. Якщо думати про них, як окремих частинах, вам вдасться краще обрізати і створити зображення.
Змініть точку зору. Зробіть знімок з несподіваного ракурсу. Це змінить перспективу як предмета, так і фону, додавши візуальний розмах. Ще так можна зробити, погравши з ракурсами; кадруйте те ж зображення із зручною площині і під більш широким кутом.

Робіть знімки в портретній орієнтації. Змінивши ракурс на вертикальний, ви по-різному кадрируете знімки.
Подумайте про природні лініях і тінях. Іноді саме вони додають знімку власне відчуття глибини. Чіткі тіні, наприклад, можуть створити об’єкту більш сильний фокус, одночасно розширюючи фон.

МАНІПУЛЮВАННЯ ЗОБРАЖЕННЯМ

Застосовуючи редакторське програмне забезпечення, таке як Adobe Photoshop, дизайнери здатні кількома простими прийомами створити на знімках додаткову глибину. Це – відмінний вибір при роботі з портретами та іншими зображеннями, знятими без турботи про глибині.

Прийом полягає в наступному: при наявному на передньому плані предмет призначте фону розмиття blur, не застосувавши його лише до самого об’єкта. (В photoshop’е гаусівських розподілу розмиття (Gaussian blur), встановлене на радіус 5.0, творить чудеса.)

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

ЕФЕКТИ ТІНІ

Тіні – один з найбільш простих і природних способів створення відчуття глибини і приміщення об’єктів і зображень. Розміщення, ступінь щільності і контур тіні можуть означати дуже специфічне значення. Ключовий момент використання тіней їх натуральний вигляд.

Найкращі тіні легкі і наступні принципам світловідбивання. Переконайтеся, що тіні відображають відчуття від тих зображень, яким супроводжують. Якщо перше, що бачить користувач – це тінь, то, можливо, методика не працює.

Закруглені тіні, що лежать під об’єктами, можуть створити ширяючий ефект в стилі 3D. Це звичайна техніка, застосовувана до кнопок і дрібним елементів користувальницького інтерфейсу. Тіні перед об’єктами, відповідні їх формою, дають можливість плоскому об’єкту здаватися правдоподібним, як на сайті Guest’d. (Ви хоча б помічали тіні до того, як про них було згадано?) Деформовані тіні – ті, що не відображають контури предмета, до якого відносяться – можуть візуально спотворити обриси об’єкта або виділити фонове зображення.

Тіні також додають предмета або елементу відтінок реалізму. Тіні позаду людини допоможуть виділити його із тла, висуваючи об’єкт на передній план зображення. Це простий прийом, але при цьому дуже важливо, щоб тіні на зображенні падали протилежно джерел світла з тим, щоб кінцевий результат виглядав природним і непритянутым за вуха.

ІЛЮСТРАЦІЇ І ІНШІ ЗОБРАЖЕННЯ

Та ж сама концепція і маніпуляції, результативні на знімках, також спрацьовують для ілюстрацій і зображень, що використовуються в дизайнерських проектах. Різниця полягає в тому, що часто вам доводиться створювати ці ефекти самим.

Яскрава, глибока тінь, застосована вище, є відмінним прикладом. Світлі і темні частини фону специфічно пов’язані із зображенням, змушуючи його «висуватися вперед» з іншого сайту.

ВИСНОВОК

Глибина – відмінний інструмент створення почуття реалізму в дизайнерських проектах. Вона об’єднує користувачів з тим, що вони бачать на екрані, змушуючи їх відчувати себе частиною пейзажу.

Навіть зображеннями, від фотознімків до векторних елементів користувальницького інтерфейсу, яким бракує справжньої глибини, можна маніпулювати з метою додання їм відчуття тривимірності. Розбиття на шари, розташування об’єкта і тіні є одним з найкращих інструментів створення додаткової глибини.