Особливості неонових кольорів У Веб-дизайні І Створення В Photoshop

1. відтінок лайма
2. неонова веселка
3. сміливі рішення
4. Неон і білий колір
5. неоновий брендинг
6. поза ефектів
7. неонові акценти
8. Створення неонового свічення
9. використовуємо Photoshop
10. висновки

Наша взаимовыгодная связь https://banwar.org/

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

Сьогодні ми пошукаємо варіанти ефективного використання неону (як ефекту і як кольору) в веб-дизайні, розглянемо приклади веб-майстрів, які отримали нагороди А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 , Володіє неоновим градієнтом і фотофільтри. При цьому анімація дозволяє рухати фон і спостерігати його розмиття. Зверніть увагу на те, що текст досить контрастний, читаємо і анімація настільки повільна, що відразу її помітити не так просто.

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

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

І так, текст ніколи не створюється з ефектом світіння. Для плакатів, фотографій, логотипу - може бути, але текст на сайті - немає. Це виглядає дуже дратівливо і бентежить. Використовуватися може яскравий колір, але не неоновий ефект. наприклад eaglefilmsme , 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х років, хоча і відбулися вони саме від нього. Зараз важливо підбирати той неон, який буде ефективно працювати при сучасному дизайні, мінімалізмі, спокої фарб. Одночасно з цим, неон повинен наголосити на головному на сайті, повідомити відвідувачеві, що тут за цією кнопкою він знайде подібну інформацію.

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

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