Мода на фото в неоновом свете обрела повторную волну популярность после клипа Федука и Элджея «Розовое вино». Ведь их видос буквально соткан из стильных фишек: Малайзийские небоскребы, дорогие шмотки, уличная еда, красивые азиаточки, белые линзы и неоновая подсветка. Социальные сети охватила мания снимков с необычной подсветкой. Давайте посмотрим, как повторить подобный эффект в домашних условиях.

Способ 1

Для того, чтобы создать фото в неоновом свете, вам понадобится обычный монитор. Это может быть дисплей настольного компьютера, экран ноутбука или планшет. Снимки рекомендуется делать в темноте, чтобы единственным источником света был монитор.

Для градиента вам понадобится два любых дисплея. Их нужно расположить по обе стороны от себя, на каждом из которых будет открыта картинка с разными цветами.

Способ 2

Для создания фото в неоновом свете во втором варианте нам потребуется настольная лампа (желательно с длинной ножкой) и старая футболка/тряпка такого цвета, которым вы хотите осветить ваш снимок.

Как сделать фото в неоновом свете:

1. Повязать ткань на светильник.
2. Поставить лампу сбоку от вас так, чтобы ее не было видно в кадре.
3. Включить светильник.
4. Наслаждаться неоновой подсветкой.
5. Камеру можно поставить на таймер или попросить кого-то вас сфотографировать в полной темноте.

Если вы хотите создать неоновый световой градиент, тогда оборудуйте второй светильник, окутав его иной по тону тканью и поставьте уже с другой стороны от себя.

Способ 3

Фото в неоновом свете можно сделать из подручных средств. Что потребуется:

• лампа (желательно как на фото)
• широкий канцелярский скотч
• перманентный фломастер или маркер.

Как сделать неоновый фон для фото:

1. Обклеить на всю длину лампы скотч.
2. Закрасить слой фломастером в 1-2 слоя.
3. Обклеить лампу еще раз скотчем.
4. И снова закрасить пространство цветным фломастером.
5. Неоновая подсветка готова! Включаем лампу и фоткаемся!

Ну и давайте посмотрим нетленочку. Ведь здесь так красиво…

Будьте самыми стильными! Используйте супер эффекты.

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

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

Создание неонового свечения

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

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

Неоновые цвета способы оживить сайт в целом и даже «поднять» элементы, создавая тем самым эффект глубины и наслоения. При таком варианте неон не должен подавлять основные цвета в палитре дизайна. Суть неона не в насыщенности как таковой, а в свечении. Это может быть и бледно-розовый, и ярко-желтый.

Еще несколько интересных примеров использования неона в веб-дизайна: We Craft Apps , Zaha Hadid , DERIVE , Sidewalk Labs , creativecats , adaptable , DDD2017 , bigomaha , ReNa . Много получилось, но на каждом из них всё по-разному и очень красиво.

Используем Photoshop

Самое простое, где может потребоваться неоновый эффект - фон. Предположим, мы создаем темный фон, используем контрастный текст и хотим вместо обычной заливки на фоне применить Узор или Текстуру. С помощью неонового цвета можно сделать редкие и небольшие всполохи, границы волн и растительные элементы. При этом сделать их можно неяркими или затем чуть затонировать и получится очень даже симпатично. На примерах выше уже есть аналоги этому. Тем более если есть иллюстрированный фон для архитектурного сайта, схема здания и прилегающей территории, то некоторые объекты можно подсветить с помощью неона.

Идей много, но давайте посмотрим.

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

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

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

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

Подготовили кисточку и вновь переходим к Перо . Создаем еще один слой (пустой) и, кликнув Пером по контуру ПКМ, выбираем Выполнить обводку контура . В диалоговом окне указываем кисть и Имитирование нажима . В противном случае эффекта взмаха не получится. Цвет кисти в данном случае совсем неважен. У нас, вот, желтая. После этого снова кликаем ПКМ по линии и Удаляем контур .

Теперь к этому шедевру осталось добавить свечение Glow.

В окне Слоев нажимаем по ПКМ по данному второму слою с линией и выбираем Параметры наложения . И начинаем фантазировать.

Наша задача настроить Внешнее свечение с помощью самого светлого оттенка в логотипе. Это #53C3BF с режимом Экран и небольшой Непрозрачностью.

Затем используем Внутреннюю тень с Цветовым тоном и вторым цветом из логотипа #49A3CC. Также в качестве Наложения можно выбрать и режим Цветность.

Теперь осталось сделать легкое тонирование, иначе слишком ярко получается, да и эффект еще не реалистичен. Выбираем Наложение цвета и берем темно-зеленый в нашем случае. Что касается режима наложения - поиграйте! Это будет весело!

Готово. Скопируем этот последний один слой с линией в наш основной проект и, например, растянем его на весь фон (прямоугольника) или подчеркнем им линию меню и логотипа. Выглядит вполне недурно. И, да, это легко. Какими бы сложными неоновые цвета не казались, создавать такое очень просто. Можно даже использовать и цвета проекта и сделать линию чуть ярче, можно приглушить тона, сделать линию тоньше… Вариаций очень много.

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

Выводы

Современные неоновые эффекты мало что имеют общего с неоном 80х годов, хотя и произошли они именно от него. Сейчас важно подбирать тот неон, который будет эффективно работать при современном дизайне, минимализме, спокойствии красок. Одновременно с этим, неон должен подчеркнуть главное на сайте, сообщить посетителю, что здесь за этой кнопкой он найдет подобную информацию.

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

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

В этом уроке мы создадим очень красивый и реалистичный эффект неонового свечения для логотипа в Adobe Photoshop. Есть много уроков, посвященных той же цели, однако этот отличается двумя ценными деталями. Во-первых, здесь нет ничего лишнего. Автор очевидно перепробовал не один вариант, выбрал лучшее, и описал только это. Во-вторых, все стили слоя, благодаря которым создается эффект описаны, и вы сможете понять какой слой для чего служит. Это очень помогает в понимании работы со стилями.

Результат

Шаг 1

Начнем с создания простого слоя, которому укажем стиль слоя с радиальным градиентом. Света не должны быть слишком яркими. В нашем случае это #303e4a и #151515. От этого зависит реалистичность эффекта.

Шаг 2

Используйте самый упрощенный вариант вашего логотипа. В идеале это должны быть плавные линии. От их толщины, кстати, также зависит реалистичность работы.

Шаг 3

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

Начнем с Color Overlay/Перекрытие цвета. Используйте белый цвет. Если вы замечали, сам центр неоновых труб всегда белый. Это самая яркая часть, ее мы и пытаемся передать.

Шаг 4

Добавим стиль Bevel & Emboss/Тиснение. Этот стиль поможет нам создать эффект стекла. Это не самая важная часть, потому что в неоновых трубах стекла практически не видно, однако это поможет нам добиться эффекта объема. Укажите параметры как показано ниже.

Шаг 5

Добавляем стиль Inner Shadow/Внутренняя тень. Здесь мы выбираем тот цвет, который хотим придать нашему неоновому эффекту. В нашем случае это яркий бирюзовый.

Шаг 6

Стиль Inner Glow/Внутреннее свечение служит той же цели. Благодаря этому стилю у нас получится красивый переход между бирюзовым и белым цветами.

Шаг 7

Стиль Outer Glow/Внешнее свечение создаст эффект свечения. Он отвечает за то как свет от неоновых труб будет накладываться на фон и другие объекты под логотипом. Мы используем максимально возможный размер и режим наложения Overlay/Перекрытие, а также тот же бирюзовый оттенок.

Шаг 8

Стиль Drop Shadows/Тень создаст переход свечения. Для этого используем режимы наложения Vivid Light/Яркий свет или Color Dodge/Осветление основы. В нашем примере мы применили сразу два стиля слоя Drop Shadows/Тень. Первый будет работать как внешнее свечение, а второй даст отражение света на фон. Он будет чуть ближе или дальше, в зависимости от того под каким углом вы хотите показать логотип.

Шаг 9

Вот что в итоге получится:

Шаг 10

Теперь давайте добавим бетонную текстуру на фон. Это немного его затемнит.

Шаг 11

Также можно добавить несколько небольших элементов вроде проводов или креплений. Не перестарайтесь. Пусть все будет максимально просто.

Шаг 12

Можно соединить провод с неоновыми трубами при помощи отдельного элемента, чтобы создать ощущение, что логотипа находится на некотором расстоянии от стены. В нашем случае это просто прямоугольник со следующими стилями слоя.