Ефект глибини у веб-дизайні за допомогою зображень
Ми живемо у тривимірному світі, і веб-дизайнери часто намагаються відобразити це у своїх роботах, відтворюючи ефект глибини та обсягу. Адже глибина дизайну здатна додати реалізму всій сторінці та залучити користувача до вивчення сайту детальніше.
Створення ефекту глибини у веб-дизайні може бути простіше, ніж здається. Ключ до створення ефекту тривимірності на двовимірному екрані – картинки! Способів досягнення ефекту чимало: це можуть бути фотографії самі по собі, створення багатошаровості зображення, фотоманіпуляції або спеціальні ефекти.
Багатошаровість
Багатошаровість - це техніка, яка передбачає розташування об'єктів певним способом, з метою досягнення ефекту тривимірності.
Всі ми бачили приклади макетів з використанням фотографій, що лежать один на одному. Це відомий "фокус". Стопка фотографій виглядає тривимірною, а ви почуваєтеся так, ніби наяву гортали фотокартки. Це і є прикладом багатошаровості. Іноді застосування техніки помітно (як у прикладі з фото), інколи ж зовсім не впадає у вічі.
Часто для досягнення ефекту глибини кілька зображень поєднують в одне, щоб візуально в одній картинці скомбінувати два плани - передній і тло. Якщо робота зроблена добре, то ефект практично непомітний. Подивіться сайт Range Rover (у прикладі вище). І машина і місто виглядають вражаюче, а їхнє комбінування викликає відчуття, що якби ви стояли за машиною, то дивилися б з висоти на місто.
Інший ефективний спосіб досягнення багатошаровості - розміщення зображень на тлі, що виглядає плоским. Особливо цікаво виглядають фотографії з незвичайних ракурсів, які розміщені під кутом, а також градієнтні фони. (Дивіться сайт Аdlucent вприклади).
Ну і врешті-решт деякі зображення можуть бути створені з багатошаровістю. Ця техніка фотографування має на увазі накладання ліній, які формують об'єкти в кадрі, щоб створити ефект глибини. Часто ці лінії підкреслюються кольором та контрастом, щоб візуально відокремити один об'єкт від іншого. Заради справедливості варто зауважити, що для фотографів-початківців техніка може виявитися занадто складною.
Світлина
Одним із найкорисніших інструментів при створенні «глибокого» веб-дизайну є фотографії. Грамотні кадрування та композиція можуть зробити процес створення глибини хвилинною справою.
Але як зробити потрібну фотографію? Звичайно ви можете найняти професійного фотографа і просто пояснити йому, що вам потрібна глибина. Однак, якщо ви вирішили зробити фотографію самостійно, скористайтеся наступними підказками.
Змініть кут бачення. Зробіть фотографію з несподіваного ракурсу. Так ви внесете зміну в перспективу як об'єкта на передньому плані, так і тла, що візуально надасть фотографії об'єму. Поекспериментуйте з ракурсом та кадруванням.
Спробуйте фотографувати у портретній орієнтації. Змінюючи ракурс по вертикалі, ви зміните кадрування.
Маніпуляції із зображенням
Залиште на передньому плані чітке зображення головного об'єкта та розмийте все заднє тло. (У Photoshop, можна скористатися фільтром Gaussian blur з радіусом 5.0)
Цей трюк допоможе створити ефект глибини, а також акцентує увагу на головному об'єкті відволікаючи користувача від фону.
Тіні - один із найпростіших і природніших способів створенняефект об'єму. Розташування, ступінь затемнення та форма тіні можуть надати картинки зовсім нового значення та вигляду. Ключ до успіху у створенні тіней – їхній природний вигляд.
Найкраще виглядають витончені, напівпрозорі тіні, що відповідають освітленню. Переконайтеся, що тінь повторює контури об'єкта, що її відкидає. Якщо перше, що бачить користувач при погляді на картинку — тінь, то швидше за все робота зроблена неправильно.
Округлі тіні, що знаходяться нижче об'єктів, які їх відкидають, допоможуть створити 3D-ефект ширяння в повітрі. Це проста техніка, що часто використовується при створенні кнопок, рідше - інших дрібніших ui-елементів. Тіні розташовані прямо перед плоским об'єктом зроблять так, що об'єкт здаватиметься стоячим, як у прикладі вище – сайт Guest'd. (Чи помітили ви тіні перед тим, як спеціально звернули на них увагу?) Неправильні тіні — ті, які не повторюють обриси об'єкта — теж мають право на існування. Вони можуть надати інше значення об'єкту, який відкидає невластиву йому тінь, або можуть виділити об'єкт із заднього плану.
Також тіні допоможуть надати реалістичності. Тінь, розташована за фігурою людини, витягає його з фону, поміщаючи на передній план. Це проста техніка, але дуже важливо, щоб тінь виявилася протилежною джерелу світла. Тоді картинка виглядатиме природно.
Ілюстрації та інші зображення
Ті ж концепції та техніки, про які ми говорили, раніше діють і для ілюстрацій, малюнків та інших картинок. Різниця в тому, що створювати всі ефекти доведеться самим під час малювання. Приклад вище добре ілюструє застосування технік.
Ефект глибини – чудовий спосіб додати дизайну реалістичності.Це допоможе налагодити контакт з користувачем, дозволить йому відчути себе причетним до того, що відбувається на екрані, а композиція з'явиться ближче.
Ефекти можна застосовувати як до фотографій та малюнків, так і до кнопок та інших елементів ui. Тож удачі вам у створенні «глибокого» веб-дизайну!
Автор статтіCARRIE COUSINS Переклад — Дежурка