Особливості Неонових Квітів У Веб-Дизайні І Створення У Photoshop

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

Сьогодні ми шукаємо варіанти ефективного використання неону (як ефекту та як кольору) у веб-дизайні, розглянемо приклади веб-майстрів, які отримали нагороди Аwwwards та Сss Design Аwards та дізнаємося, чим може допомогти Photoshop при роботі з неоновими кольорами.

Загалом, спробуємо стати неонові ніндзя!

Відтінок лайма

Зелений лайм – яскравий представник неонового кольору (без відповідного ефекту), відтінок якого є жовто-зелений, але ще не салатовий.

Hex код: #32cd32

Особливість кольору в тому, що при поєднанні з темним фоном виходить справжнісінький неоновий ефект. Виглядає це весело та здатно залучити відвідувачів на сайт. Це найпростіший спосіб додати неону до веб-дизайну, не обтяжуючи весь проект. Як приклади weather, limegreencreative, QQ Browser (для Mac), NewKIS, Craftedbygc, Nvidia. Всі вони, тією чи іншою мірою, використовують поєднання яскравого зеленого та темного фону, але ефект виходить гарним і навіть перевіреним часом.

Неонова веселка

У той час як багато кольорів можуть поєднуватись один з одним і ми їх використовуємо щодня, неонові кольори не здатні створювати загальну колірну схему. Справа в тому, що більшість неонових кольорів мають однакові значення за насиченістю та яскравістю, а тому на екрані вони зливаються, виглядають однаковими. Відповідно, виникають проблеми з читальністю та загальним контрастом. Саме тому веб-майстри використовують один неоновий колір, але на тлі «простішого» відтінку та в оточенні приглушених тонів.

Сміливі рішення

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

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

Подивіться уважніше f37foundry, Funplex, Langlois, Glow Motion, NOEIN OI. Тут використовуються парні кольори, однобарвне заливання або неоновий градієнт.

Неон і білий колір

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

Неоновий брендинг

Деякі компанії використовують неонові відтінки як головні кольори свого бренду. Наприклад, Nvidia - Насичений зелений (лайм) у поєднанні з чорним, AMD – чорний, білий та яскраво-насичений червоний, Devillard - Насичено жовтий + чорний, MTN DEW x NBA - Зелений неоновий у поєднанні з бляклими відтінками. У такому випадку створювати веб-дизайн набагато простіше, бо неон має бути присутнім, але в невеликій кількості.

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

Поза ефектами

Сам по собі неон вже несе в собі разючі можливості для проектування та фантазії. Не варто використовувати всілякі ефекти (анімацію, 3D, паралакс тощо) разом з неоном. В кінцевому рахунку ви ризикуєте ввести користувачів, замовників і навіть себе самого в обурення і пригнічення. На початку буде здаватися - все відмінно, а потім у вас втомляться очі на все дивитися.

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

Проект craftedbygc створив анімацію літери G під час потрапляння неї курсора мишки. Цим неоновим відтінком виділені і кнопочки, рамочки та інше. Але все це майже непомітно, а тому виглядає гарно.

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

Неонові акценти

Незвичайні елементи, кнопки, значки, іконки, смужки та інше здатні привернути увагу відвідувача до конкретних речей. Саме тому неонові кольори у веб-дизайні можуть використовуватися лише у крихітній кількості. Створити точки, бризки, легкий ледь помітний ефект візерунка на фоні, кадр для кнопки. Але пам'ятайте, що неон буде ефективним візуально лише тоді, коли є сильний контраст між ним і фоном. Саме тому часто часто використовується чорний (темний), а не білий.

Так, текст ніколи не створюється з ефектом світіння. Для плакатів, фотографій, логотипу – можливо, але текст на сайті – немає. Це виглядає дуже дратівливо і бентежить. Використовуватись може яскравий колір, але не неоновий ефект. Наприклад, earlfilmsme, London Under the Microscope, 32 Guersant, nobumitsu, ameliarthompson, devillard.

Створення неонового світіння

Неоновий ефект або Glow не новий у світі. Це світло, що просто світиться, який так часто можна бачити на вивісках ночами. При роботі над реалістичністю ефекту у Photoshop створюється враження, що відтінки та колір світяться, ніби справді крізь них проходить білий колір. Важливо не збожеволіти і не переборщити зі свіченням, інакше вийде справжня несмак, коли як зовсім крихітне свічення здатне перетворити веб-дизайн.

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

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

Ще кілька цікавих прикладів використання неону в веб-дизайну: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, creativecats, adaptable, DDD2017, bigomaha, ReNa. Багато вийшло, але на кожному їх все по-різному і дуже красиво.

Використовуємо Photoshop

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

Ідей багато, але давайте подивимося.

Ми взяли зразок дизайну (багатьом він уже знайомий) і тут уже логотип та рамки кнопок мають неоновий ефект. Рамочки робляться за аналогією з тим, що ми покажемо. Тепер у тлі «шапки» додамо щось цікаве… Наш логотип використовує два світлі відтінки: #49A3CC та #53C3BF. Їх і використовуватимемо.

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

Вибираємо Перо, Ставимо одну точку, потім другу і, не відпускаючи ЛКМ, починаємо рухати курсор.З'являються викривлення. Рухаючи мишку налаштовуємо та відпускаємо. Ставимо ще одну точку і трохи рухаємо. Коли доведете лінію до кінця (який хочете), вибираєте інструмент Додати опорну точку (у тому ж Перо) і курсором акуратно натискаєте на крапки та їх рухаєте, вирівнюючи тим самим контур.

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

Підготували пензлик і знову переходимо до Перо. Створюємо ще один шар (порожній) і, клацнувши Пером по контуру ПКМ, вибираємо Виконати обведення контуру. У діалоговому вікні вказуємо кисть та Імітування натиску. В іншому випадку ефекту помаху не вийде. Колір пензля у разі зовсім неважливий. У нас ось жовта. Після цього знову клацаємо ПКМ по лінії та Видаляємо контур.

Тепер до цього шедевра залишилося додати світіння Glow.

У вікні Шарів натискаємо по ПКМ по даному другому шару з лінією та вибираємо Параметри накладання. І починаємо фантазувати.

Наше завдання налаштувати Зовнішнє світіння за допомогою найсвітлішого відтінку в логотипі. Це #53C3BF з режимом Екран та невеликою непрозорістю.

Потім використовуємо Внутрішню тінь із Колірним тоном та другим кольором з логотипу #49A3CC. Також як Накладення можна вибрати і режим Кольоровість.

Тепер залишилося зробити легке тонування, інакше надто яскраво виходить та й ефект ще не реалістичний. Вибираємо Накладання кольору і беремо темно-зелений у нашому випадку. Щодо режиму накладання – пограйте! Це буде весело!

Готово. Скопіюємо цей останній шар з лінією в наш основний проект і, наприклад, розтягнемо його на весь фон (прямокутника) або підкреслимо їм лінію меню і логотипу. Виглядає цілком непогано. І так, це легко. Якими б складними неонові кольори не здавалися, створювати таке дуже просто. Можна навіть використовувати і кольори проекту і зробити лінію трохи яскравішою, можна приглушити тони, зробити лінію тоншою. Варіацій дуже багато.

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

Висновки

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

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

Неон використовується в сучасності і дуже часто навіть відомими брендами. Його потрібно лише побачити та зрозуміти: де і як.

Веб-дизайнер: вибуховий старт

Основи UX/UI, перевірка ДЗ, проект у портфоліо!