Неоновые цвета… такие яркие, веселые, необычные… одновременно раздражающие и радующие человека. Удивительно, но на фоне стандартов веб-дизайна мастера до сих пор используют их в разных сочетаниях и вариациях в своих проектах. Тем не менее, с неоновыми цветами трудно работать без того, чтобы не затронуть дизайн в целом. Да, они отлично подходят для логотипов, иконок, элементов пользовательского интерфейса в приложениях, на плакатах, артах, но с веб-дизайном возникают сложности, если не представлять об основных проблемах и особенностях.
Сегодня мы поищем варианты эффективного использования неона (как эффекта и как цвета) в веб-дизайне, рассмотрим примеры веб-мастеров, получивших награды А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х годов, хотя и произошли они именно от него. Сейчас важно подбирать тот неон, который будет эффективно работать при современном дизайне, минимализме, спокойствии красок. Одновременно с этим, неон должен подчеркнуть главное на сайте, сообщить посетителю, что здесь за этой кнопкой он найдет подобную информацию.
Неоновые цвета могут быть очень веселыми и очень спокойными одновременно, даже незаметными. Главное – сочетание с общей палитрой и тематикой проекта. Только тогда можно получить счастливое завершение проекта.
Неон используется в современности и очень-очень часто даже известными брендами. Его нужно только увидеть и понять: где и как.