Палітра кольорів: неонові відтінки для сміливих проектів

Одна з головних складнощів у роботі кожного дизайнера – вибрати потрібний відтінок серед величезної кількості варіантів. Довгі роздуми над цим питанням можуть викликати головний біль, а тепер уявіть, що потрібно поєднувати безліч кольорів та відтінків!

Крім того, необхідно врахувати різні елементи дизайну – від форми та текстури до типографіки та масштабу. Залежно від того, як дизайнер передає глибину кольору або використовує правило візуальної ієрархії, аудиторії може сподобатися його робота чи ні.

Але повернемося до вибору кольору, тому що від цього багато залежить. Експериментуючи з відтінками та тонами з нашої палітри кольорів, ви можете надати своїм проектам сміливості і таким чином залучити широку аудиторію, адже неон зараз актуальний.

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

Колірна палітра для сміливих проектів

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

Якщо ви шукаєте більше натхнення, дізнайтесь історію неонових вивісок, а також відкрийте для себе нашу тематичну фотоколекцію та тисячі неонових ілюстрацій у бібліотеці Depositphotos.

Марія працює над креативними проектами, займається виробництвом контенту та керує командою копірайтерів у Depositphotos. Вона досліджує теми візуальних трендів, креативності та штучного інтелекту, а також ділиться своїми знаннями на міжнародних заходах.

Особливості Неонових Квітів У Веб-Дизайні І Створення У 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, перевірка ДЗ, проект у портфоліо!