Замъглени изображения в уеб дизайна: как да ги накараме да работят
Това е неоспорим факт: използването на замъглени изображения е актуална техника за уеб дизайн през 2015 г. Изглежда, че навсякъде, където изглеждате, има някакъв елемент на замъгляване.
Но това не е решение на някои от вашите проблеми със снимките. Това е отделна техника, която изисква практиката да се усъвършенства и вниманието към детайлите, за да се оправи. Затова преди да скочите върху тенденцията, помислете за възможностите за използване на замъглени изображения, за да решите дали тя е подходяща за вас и как можете да използвате най-добре тази техника във вашите проекти.
Замъглените снимки са модерни
Бихме могли да посветим цели страници на броя на уебсайтовете, използвайки замъглени изображения. Тенденцията е голяма работа в момента.
Това е първото нещо, което трябва да вземете предвид, когато вървите напред с идея, която включва замъглени изображения.
- Искате ли да бъдете част от тенденцията?
- Можете ли да използвате тенденцията по начин, който е малко по-различен от другите уебсайтове там?
- Вашият стил ли е или малко прекалено използван за вашите вкусове?
- Ще бъдете ли добре с дизайна на сайта, след като тенденцията продължи своя ход? Или ще ви е необходим редизайн?
Няма абсолютно нищо лошо в създаването на нещо, което е модерно. Но това е решение, което трябва да обмислите от самото начало. Създаването на уебсайт с замъглени изображения - в зависимост от предпочитания от вас стил и употреба - може да отнеме време и ако не сте опитни в софтуера за редактиране на снимки, може да изисква допълнително обучение.
Blur е техника за използване с добри изображения
Това може да е най-важното изречение, което ще прочетете, когато мислите за размиване на изображения. Работи само ако имате добри изображения, с които да започнете. Размазването не е начин за „поправяне“ на лошо изображение.
Да го кажа по друг начин. Ако имате размазана снимка и ви кажат да направите уебсайт от нея, това не е модерно. Това е лоша снимка. Ако това е вашето положение, това не е техниката за вас. (Може да искате да започнете да мислите за създаването на арт елемент с типография или да търсите запаси.)
Но ако имате хубаво изображение, което искате да изминете още няколко мили или да използвате по нов начин, размазаната техника е възможност. Има няколко начина да мислите за замъгляване (ще се съсредоточим върху всяко по-долу), но първата стъпка е да разберете как всъщност да създадете размазването. Adobe има доста хубав урок, за да започнете във Photoshop.
Размийте цялото изображение
Едно от нещата, които допринесоха за тенденцията на замъгленото изображение, е друга тенденция: Използване на хедър заглавки. Дизайнерите слагат техниките заедно, за да създадат пълен екран, замъглени изображения като доминиращи визуализации на целевите страници на уебсайтовете.
Уебсайтът на Trellis Farm използва емблематично изображение на ферма, за да ви даде усещане за място за уебсайта му. За допълнителен интерес снимката е черно-бяла - за да предаде това старо време и - многопластова с голям шрифт, за да привлече вниманието ви. Превъртането продължава да усеща, докато добавя цвят към сместа. Размазването е приятно, защото знаете какво има на снимката и помага на потребителя да се съсредоточи върху текста и следващите действия, които да предприеме на екрана.
Защо работи:
- Размит фон може да фокусира върху слоеве върху изображението, като текст. Просто не забравяйте да изберете впечатляващ шрифт.
- Може да създаде нов интерес с изображение, което използвате редовно, като например стандартна снимка на марката.
- Може да се използва с почти всеки тип съдържание в почти всяка цветова схема за универсална привлекателност.
Фонове и пластови изображения
Размазването не е техника само с пълно изображение. Конкретни части от изображението могат да бъдат замъглени за въздействие. Въпреки че е по-често да виждате замъглени фонове с остър фокус на преден план, някои дизайнери предприемат обратен подход за свеж вариант, който има замъглено преден план с фон с фокус.
Агенцията Anchour използва замъгляване в снимки на целевата си страница. Използваната техника в изображението може да бъде част от действителната фотография или да създадете същия ефект в софтуера за редактиране на снимки. Номерът тук, когато създавате този стил на замъгляване е, че не можете да кажете, че е „създаден“ и трябва да изглежда естествено, сякаш снимката е направена по този начин. (В софтуера за редактиране на снимки можете да постигнете това с помощта на инструмента за размазване на Гаус с малки, постепенни настройки.)
Защо работи:
- Размазването създава визуален контраст и може да намали натовареното усещане на изображението.
- Променя перспективата на изображението и потребителския изглед на визуалното.
- Той добавя измерение към изображение, което в противен случай може да се почувства плоско за почти 3D изобразяване.
Драматично размиване за абстрактно изкуство
Когато се нуждаете от фоново изображение за вашия уебсайт, но можете да намерите модел или цвят, който прави трика, снимка с драматично размазване може да бъде перфектното решение. Помислете за драматично замъгляване всичко, което прави съдържанието на снимката неотличимо от пръв поглед и би могло да направи снимката напълно неузнаваема.
Това е популярна опция за уебсайтове, които стартират или популяризират дигитален проект с абстрактно замъглено фоново фото зад телефон, показващ продукта. Piction използва едно и също изображение във фонов режим и в телефона с различни нива на увеличение и размазване за доста привлекателен дизайн.
Защо работи:
- Поставя акцент върху представения продукт.
- Създава персонализиран фон, вместо да използва шаблон, който може да е на други уебсайтове.
- Предоставя на дизайнера контрол върху цвета и усещането, когато става въпрос за това как работи абстрактното размазване от острота до меки цветове и форми до четливост на фоновото изображение и се свързва с марката.
Фино замъгляване за всяко изображение
Една малка степен на замъгляване може да работи и при много други видове снимки и не е необходимо да се използва само за изображение на цял екран. Дизайнерите могат да добавят намек за замъгляване към изображение, което се нуждае от малко фокус на преден план, за да помогнат на потребителите да разгледат правилните части на изображението, да стилизират лого или просто да създадат по-сложен визуал.
Логото на Зео използва фино, но приятно размазване в кръглия дизайн. Размазването ви принуждава да разгледате логото по-отблизо поради интересната форма и кантиране на едната страна на логото в сравнение с остротата на другата страна. Техниката е допълнително подчертана, тъй като дизайнът на уебсайта като цяло използва размазване на други места, например на фона на доминиращото изображение на целевата страница.
Защо работи:
- Малките замъглявания могат да създадат елемент на изненада.
- Тя привлича фокус върху конкретни части от снимката, с визуален фокус. (Разгледайте някои от промоциите на сайта Zeo за други приложения на финото замъгляване за фокус на снимки.)
- Той може да ви даде точното количество контраст на други елементи на слой в част от изображението, като текст, по същия начин, като размазване на цял екран може да работи с герой заглавка.
Използвайте го за видео, твърде
Можете да сдвоите тренда на размазването и с друг горещ дизайн елемент - видео. Можете да го използвате точно както бихте направили с всяка друга техника на изображение. Работи по същия начин (въпреки че инструментите за редактиране и процесът са малко по-различни).
Ниво 2 Дизайн използва синьо и ефект от екрана, за да добави заинтересовани към цял екран видео. (Обновете браузъра до замъглени видеоклипове.) Ефектът е забавен и свеж и работи с видео, което трябва да има усещане за старо училище. Бързите видео контури са много четими и привличат вниманието.
заключение
Има много начини за ефективно използване на размазването за проекти в уеб дизайн. Тайната - ако наистина има такава - е да се създаде размазан ефект, който безпроблемно да се слее с останалата част от дизайна. И можете да направите това почти като мислите за размазване в крайности.
Използвайте много замъгляване за силно въздействие и абстрактно усещане. Използвайте минимално замъгляване, за да създадете фин контраст и да зададете фокус. Както при всеки дизайн, тествайте го на няколко потребители преди старта и вижте какво мислят. Забелязват ли замъгляването? (Повечето не-дизайнери наистина не мислят за това.)
