Фини техники за създаване на дълбочина в уеб дизайна

Живеем в триизмерен свят, който дизайнерите се опитват да възпроизвеждат в уеб дизайна всеки ден. Елементът дълбочина добавя нотка реализъм към някои дизайнерски проекти.

По-лесно е да създавате, отколкото си мислите. Мистерията на симулирането на реалността на 2D екран е свързана със създаването на дълбочина чрез изображения. Можете да постигнете това по различни начини, от самата снимка до разделяне на изображението на слоеве, манипулиране и прилагане на специални ефекти.

техники

РАЗБИВАНЕ НА СЛООВЕ

дизайна

фини

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата при изграждането на сайтове

фини

създаване

дълбочина

дизайна

Наслояването е инструмент, който може да се използва умишлено във връзка с поставянето на изображения и обекти в проект, като инструмент за манипулиране на изображения или целенасочено в самото изображение.
Всички сме виждали маркиране, при което изображенията са произволно подредени едно върху друго, за да изглеждат като купчина отпечатани фотографии. Знаете този трик. И работи, като създава усещане за дълбочина, като в същото време усеща, че сортирате снимки. Това е наслояване в процеса на проектиране. Понякога ефектът е очевиден, както в този случай, а понякога е по-фин.

Често много фотографии се обединяват в една, за да се създадат две отделни части на изображението - преден план и фон. Когато се направи добре, ефектът е практически невидим. Разгледайте уебсайта на Range Rover по-горе - както автомобилът, така и изображението на града са много ефектни и когато се комбинират, ви карат да се чувствате като застанали до колата и оглеждате града.

Друг ефективен инструмент за наслояване е да поставите снимка или изображение върху привидно плосък фон. Това работи фантастично с необичайно ориентирани или различни ъглови изображения и степенуван фон.

И накрая, някои от изображенията са наслоени. Тази фотографска техника се основава на идеята за използване на припокриващи се контури, създадени от различни обекти в изображение, за да се създаде дълбочина. Често контурите на изображението се подчертават с цвят и контраст, за да се отделят обектите в сцената един от друг. Тази техника може да бъде трудна за фотографи любители.

СНИМКАТА

създаване

създаване

фини

дълбочина

дизайна

дизайна

Един от най-важните инструменти за създаване на дълбочина в изображенията. Изрязването и композирането на изображения с постоянно съобразяване с дълбочината може да го направи бриз.

Но как композирате снимки по този начин? Въпреки че мнозина биха предпочели да наемат професионален фотограф и просто да ги инструктират задълбочено, това не винаги е единствената алтернатива. Ако правите снимки за проект сами, погрижете се за дълбочината при снимане и запомнете следните съвети.

Създайте зона на визуална привлекателност на преден план. Уверете се, че снимката има обект и фон. Мисленето за тях като за отделни части ще ви помогне да изрежете по-добре и да създадете изображение.
Променете гледната си точка. Направете снимка от неочакван ъгъл. Това ще промени перспективата както на обекта, така и на фона, добавяйки визуално размахване. Можете също да направите това, като играете с ъглите; изрежете едно и също изображение от удобна равнина и по-широк ъгъл.

фини

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата при изграждането на сайтове

Правете снимки в портретна ориентация. Преминавайки към вертикално, вие кадрирате кадрите си по различен начин.
Помислете за естествените линии и сенки. Понякога те добавят собственото си усещане за дълбочина към изстрела. Хрупкавите сенки например могат да придадат на обекта по-силен фокус, докато разширяват фона.

МАНИПУЛИРАНЕ НА ОБРАЗА

Номерът е следният: с обекта на преден план дайте на фона размазване, без да го прилагате само върху самия обект. (Във Photoshop размиването на Гаус, зададено на радиус 5.0, прави чудеса.)

Тази проста техника фокусира обекта, като в същото време създава усещане за дълбочина, като премахва фона от визуалния приоритет.

СЕНЧОВИ ЕФЕКТИ

техники

дълбочина

дълбочина

техники

Сенките са един от най-лесните и естествени начини за създаване на усещане за дълбочина и разположение на обекти и изображения. Разположението, плътността и контурът на сенките могат да имат много специфични значения. Ключът към използването на сенки за очи е естественият им вид.

Най-добрите сенки са светлината и следват принципите на отражението на светлината. Уверете се, че сенките отразяват усещането за изображенията, които ги придружават. Ако първото нещо, което потребителят вижда, е сянка, тогава техниката може да не работи.

Заоблените сенки под обектите могат да създадат плаващ ефект в триизмерен стил. Това е често срещана техника, прилагана към бутони и малки елементи на потребителския интерфейс. Сенките пред обекти, които съответстват на тяхната форма, правят плоския обект да изглежда правдоподобен, като на уебсайта на Guest’d. (Забелязали ли сте дори сенки, преди да бъдат споменати?) Деформираните сенки - тези, които не представляват контурите на обекта, към който принадлежат - могат визуално да изкривят контурите на обект или да подчертаят фоновото изображение.

Сенките също придават нотка на реализъм към обект или елемент. Сенките зад човека ще им помогнат да се откроят от фона, като изведе обекта в предната част на изображението. Това е прост трик, но също така е много важно сенките в изображението да падат срещу светлинните източници, така че крайният резултат да изглежда естествен и непривлекателен.

ИЛЮСТРАЦИИ И ДРУГИ ИЗОБРАЖЕНИЯ

фини

създаване

дълбочина

фини

Същата концепция и манипулации, които водят до снимки, също работят за илюстрации и изображения, използвани в дизайнерски проекти. Разликата е, че често се налага сами да създавате тези ефекти.

Ярката, дълбока сянка, приложена по-горе, е чудесен пример. Светлите и тъмните части на фона са специфично свързани с изображението, което го кара да "прокара напред" от останалата част от сайта.

ЗАКЛЮЧЕНИЕ

Дълбочината е чудесен инструмент за създаване на чувство за реализъм в дизайнерските проекти. Той свързва потребителите с това, което виждат на екрана, карайки ги да се чувстват като част от пейзажа.

Дори изображения, от моментни снимки до векторни елементи на потребителския интерфейс, които нямат реална дълбочина, могат да бъдат манипулирани, за да добавят триизмерно усещане. Наслояването, разположението на обекти и сенките са един от най-добрите инструменти за създаване на допълнителна дълбочина.

Автор: Кари братовчеди

Редакционен персонал: Команда Webformyself.

техники

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата при изграждането на сайтове

техники

Искате ли да знаете какво е необходимо за създаване на уебсайт?