Грация, енергичност и фантазия с двуцветен ефект във Photoshop

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

Появил се за първи път през 2015 г. в дизайна на музикалната услуга Spotify, цветният и жив фото ефект сега е по-популярен от всякога. Ефект, който използва само два цвята (а понякога и повече) и по този начин трансформира изображенията в забавен, енергичен и красив външен вид. И ако през 2016 г. той едва започваше да се разпространява сред „чипове“ за уеб дизайн, сега използването му се счита за проява на вкуса на уеб администратора, неговата чувствителност към новите тенденции и безграничното творческо въображение.

Да, говорим за ефектаDuotone илиDuotone. Въпреки това, във Photoshop това не е ефект в обичайния смисъл, а по-скоро режим на показване и печат, заедно с опция за "сива скала", "CMYK" или "RGB". По един или друг начин, но "Дуплекс" се счита за фотоелектричен ефект. Почти всеки месец можете да видите все повече и повече нови сайтове, които се променят или създават от нулата с помощта на този ефект. И ние попадаме на такива сайтове много често, докато сърфираме в мрежата или изучаваме произведения на Awwwards или Behance.

Но как да го използваме? Кога си струва да го използвате и как можете да госъздадете по три лесни начина във Photoshop? И това въпреки факта, че всеки такъв метод ще промени оригиналното изображение по различен начин.

Какво е дуплекс?

Duplex включва почти пълно двуцветно запълване (тониране) на оригиналното изображение. Тъй като най-често се използват два цвята, основните детайли са само подчертани.единият, а общият фон - вторият. Ето как изглежда първоначално в Spotify.

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

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

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

Така стилът на печат намери втори живот в Интернет и едва ли скоро ще бъде забравен или смятан за остарял.

Доминиращи изображения

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

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

Опростеността на цветовата палитра

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

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

Лесен за четене

Колкото и да е странно, дуплексът е в състояние да направи текста по-контрастен и по-лесен за четене. Защо, питате вие, и как? Факт е, че двуцветното тониране помага да се „изглади“ разсейването на цветовете в снимката и да направи изображението по-„спокойно“. Съответно текстът, поставен почти навсякъде върху това изображение, ще стане по-добре видим и четлив.

Привличане на внимание

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

Историята не е забравена

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

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

Проектът Too Pop избра снимка за фон, но почти напълно скри нейния сюжет с двуцветен цвят. Оказа се много необичайно и дори загадъчно. Nurture Digital заслужава специално внимание.

Три начина за създаване на Duotone вPhotoshop

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

Във Photoshop има не само двуцветен дуотон, но Adobe въведе и едноцветно тониране, и три-, четирицветно. Duplex е по същество двуцветна работа, но тъй като ефектът е красив, много хора използват и повече цветове. И всички тези опции се използват в уеб дизайна.

Режимът е наличен във всяка версия на Photoshop, както в CC, така и в CS. Червеното е избрано от нас за яркост и видимост. Няма нищо особено трудно в създаването на ефекта, така че има по-малко думи и повече дела, някои функции в текста.

Отворете изображението (в нашия случай изкуство), създайте друго върху слоя и го запълнете с желания цвят. Изберете стила на наслагване на новия слой -"Color tone". Ефектът Duotone е готов и картината е тонирана в многоцветни нюанси на червено и черно, тоест използвани са два цвята.

Важно:За този метод са необходими многоцветни изображения. Черно-белите не се тонизират, а при тъмни снимки само ръцете и лицата ще бъдат оцветени, а черното ще остане черно.

Отворете снимката и изберетеСлой -> Нов коригиращ слой -> Карта на градиента. Тъй като вече имахме червен цвят за запълване, тонирането се оказа подходящо. След това щракваме два пъти върху градиентната лента и можем да изберем стила на градиента, да заменим цветовете, да добавим още нюанси, да разпределим плавността на прехода. В този случай можете да използвате всякакви изображения по цвят.

Препоръчват се от самите тяхAdobeи за тази опция, без съмнение, абсолютно всяко изображение ще свърши работа. Но предлага и по-ефективно тонизиране.

Отворете изображението и изберетеИзображение -> Режим -> Скала на сивото (дори ако първоначалнотвоят е черно-бял). Сега можете да видите, че елементът в това меню Duplex е станал активен. ИзберетеИзображение -> Режим -> Duplex и съответните настройки и прозорец за тониране се появяват. В настройките можете да избирате цветове, да регулирате кривата им на колебание, да регулирате градиента. Тъмните цветове са най-добре избрани първи, а светлите нюанси - втори или по-ниски, ако имате многоцветен дуплекс.

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

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

енергичност

грация

Можете също така допълнително да замъглите краищата и да създадете винетка, можете да направите контраст, яркост или цвят само върху част от цялото изображение. Като цяло има много вариации в играта с цветовете, особено когато се използват свойствата "Припокриващи се цветове " и многоцветния тип Duotone.

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

В допълнение, двуцветният ефект позволява на уеб дизайнерите да експериментират с цветове и да упражняват въображението си. Да, не без него, със сигурност! Какво можем да кажем за факта, че само в тази версия ще можете да комбинирате толкова луди цветове, за които никога не сте се замисляли преди: ярко зелено и ярко синьо, розово и наситено жълто.Такива вариации ще създадат ефекта на изненада и ако изображенията са малки (не фон), тогава те няма да дразнят потребителя.