Простой эффект неонового света

Автор Дмитрий Евсеенков На чтение 3 мин Просмотров 6.4к.
Обновлено 29.11.2021

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

Методика получения эффекта довольно-таки простая и заключается в добавлении стилей слоя к изображению, всего слоёв у нас будет два — фон и слой с объектом, к которому будет применён эффект, в моём случае объект — это простой абстрактных логотип. Методика хорошо поможет начинающим пользователям Photoshop для понимания принципов работы со стилями слоя.

Да, обращаю ваше внимание, что объект должен состоять из линий, чтобы относительно габаритов объекта толщина линий была схожа с толщиной неоновых трубок. При применении стилей слоя габариты целевого объекта (в нашем случае, толщина линий — «неоновых трубок») важна! Тональность фона также очень важна, т. к. при слишком светлом или тёмном фоне не будут отображаться эффекты, создаваемые некоторыми стилями слоя.

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

Вот что получилось у меня в результате:

Готовый результат создания эффекта неонового свечения в Photoshop.

Давайте начнём. Создаём новый файл в Photoshop размером 3000 на 3000 пикселей, фон — белый. Преобразуем фоновый слой в обычный (я назвал переименованный слой «background», как это сделать, рассказано в данной статье. Создаём новый слой, на котором рисуем (или копируем готовый) логотип или что либо другое, главное, как я упомянул выше, чтобы полученный объект состоял из относительно тонких линий. Я нарисовал вот такой «логотип», также показана панель слоёв документа:

Документ, состоящий из двух слоёв: логотип на прозрачном фоне и расположенный под ним слой для создания фона.

Займёмся фоном. Добавим к слою «background» стиль слоя «Наложение градиента». Как я упоминал выше, цвета и тональность фона здесь очень важны, т.к. они будут определять уровень реализма вашего дизайна. Он не может быть слишком тёмным или светлым, потому что многие эффекты при этом не будут работать, например при светлом фоне потеряет целевые пиксели режим наложения «Осветление основы» (Color Dodge). Исходя из этого, для градиента я буду использовать цвета #285a82 (средне-светло-синий) и #151515 (темно-серый). Параметры стиля слоя «Наложение градиента показаны на рисунке:

Параметры стиля слоя «Наложение градиента»

В результате слой с фоном должен принять следующий вид:

Слой, содержащий фон для неонового эффекта.

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

• Тиснение (Bevel and Emboss)
• Внутренняя тень (Inner Shadow)
• Внутреннее свечение; (Inner Glow)
• Наложение цвета (Color Overlay)
• Внешнее свечение (Outer Glow)
• Тень (Drop Shadow)
• и ещё одна Тень (Drop Shadow)

Параметры стилей слоя я приведу на картинках-скриншотах ниже, или же их можно посмотреть в документе PSD, скачать который вы можете по ссылке внизу страницы. Перевод режимов наложения (они используются в стилях слоя) на этой страничке.

После применения всех стилей слоя, если вы всё сделали правильно, то ваш документ должен выглядеть похожим на мой итоговый результат:

Готовый результат после применения всех стилей слоя.

А вот ка будет выглядеть эффект на более тёмном фоне со сплошным тёмно-серым цветом #2d2d2d, параметры стилей слоя с логотипом остались неизменными:

Изменение цвета фона с сине-серого градиента до сплошного тёмно серого.

Скачать файл PSD, выполненный по результатам урока:

Скачать с Яндекс Диск

Неоновый эффект в Adobe Photoshop

В этом уроке мы создадим очень красивый и реалистичный эффект неонового свечения для логотипа в 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

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

Результат

Есть еще один маленький трюк, который поможет вам добавить реалистичности. После того как вы закончили вашу работу, дублируйте все слои и объедините копии в один слой. Применит к слою фильтр Filter>Blur>Gaussian Blur/Фильтр>Размытие>Размытие по Гауссу. Используйте радиус около 20. Дублируйте этот слой. Укажите нижнему слою режим наложения Overlay/Перекрытие, а верхнему Screen/Осветление на 50% opacity/непрозрачности. Это создаст очень классный эффект свечения!

Автор урока ABDUZEEDO

Перевод — Дежурка

Смотрите также:

• Уроки световых эффектов в Adobe Photoshop
• Лого в стиле сериала «Очень странные дела» в Adobe Photoshop
• Огненно-раскаленный эффект в Adobe Photoshop

Как создать неоновое свечение в Photoshop, включая стиль слоя и шрифт.

21

АКЦИИ

Я покажу вам, как создать неоновый текст в Photoshop с помощью стилей слоя. В этом уроке вы найдете несколько крутых советов по стилям слоя.

Загрузите ресурсы

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

Здесь у нас есть хорошая кирпичная стена, к которой можно прислонить.

1.

Давайте добавим текст с помощью инструмента «Текст».

Введите PSCafe. или что вы хотите сказать. Используйте панель параметров вверху, чтобы изменить размер шрифта.

Я нашел бесплатный шрифт под названием Neon Tubes 2 (ссылка вверху)

Увеличьте масштаб до 100%, дважды щелкнув увеличительное стекло. Удерживайте пробел и перетащите, чтобы расположить окно.

С выбранным нашим типом слоя перейдите к стилям слоя, где написано fx. Нажмите и выберите наложение цвета.

Откроется диалоговое окно «Эффекты слоя».

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

Давайте зададим этому неоновый цвет. Выберите внутреннее свечение и нажмите на него, чтобы открыть его параметры.

Выберите цвет с помощью палитры цветов, возьмите красивый неоново-синий или выберите любой другой цвет. Это могут быть желтые, розовые, какие угодно.

Изменить режим наложения с экрана на обычный.

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

Мы начинаем получать немного неонового цвета по краям нашего шрифта. Замечательно.

Перейдите к нашему внешнему свечению и придайте ему голубоватый цвет.

Выберите нормальный режим наложения и давайте увеличим наш размер.

Установите непрозрачность на 86

У нас хорошая дымка. Нам нужно еще одно свечение внутри, которое даст более яркий цвет.

Теперь обратите внимание, что есть только один вариант внешнего свечения. Что мы делаем?

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

Выберите цвет. Добавьте немного синего, но не слишком много.

Увеличьте емкость и размер. Переключитесь на нормальный режим наложения и посмотрите, как он начнет светиться.

Немного уменьшите размер и увеличьте разброс. По мере того, как мы увеличиваем разброс, он становится толще и смягчается с размером, и обратите внимание, что немного идет долгий путь с этим.

Наконец, настройте непрозрачность.

Наши неоновые лампы готовы, давайте добавим немного свечения вокруг фоновой области.

Возьмите наш прямоугольный инструмент Marquee и сделайте прямоугольное выделение вокруг области неона.

Выберите > Modify > Feather и сделайте его действительно большим. Я использовал 177, он создаст большую мягкую кромку.

Нажмите, чтобы добавить корректирующий слой. Выбирайте кривые.

Поднимите кривые в области средних тонов.

А если вы хотите добавить немного цвета, выберите канал Blue (нажмите RGB и выберите Blue) и увеличьте его.

Возьмите красный канал и немного уменьшите его.

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

Если вы хотите закончить этот эффект, вы можете создать несколько проводов позади шрифта и даже нарисовать немного синего цвета на некоторых поверхностях для небольшого отражения. Но я хочу, чтобы этот урок был простым и точным.

Спасибо, что ознакомились с этим руководством! Новые уроки Photoshop добавляются каждую неделю.

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

Вы также можете просматривать темы в меню бесплатных руководств.

Если вы готовы серьезно заняться Photoshop, ознакомьтесь с нашими полными курсами здесь.

(в последнее время я публикую забавные истории в Instagram и Facebook)

Рад видеть вас здесь, в CAFE,

Колин

Эффект свечения в фотошопе 0Photoshop

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

Эффект неонового свечения можно найти в Интернете в самых разных формах. Некоторые сосредотачиваются на светящемся неоновом аспекте, в то время как другие сосредотачиваются на «реальности» виртуальной неоновой вывески. Вот пример реалистичного подхода:

Это был один из дизайнов, созданных для ежегодной распродажи Flywheel «Black Flyday» в 2018 году.

Теперь, когда вы увидели эти неоновые вывески в действии, попробуйте сами!

Создание эффекта неонового свечения в Photoshop

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

Создайте свой фон

В этом примере я буду использовать кирпичный фон из Unsplash. Вы можете выбрать все, что вам нравится, но этот кирпич придает ему великолепное реалистичное ощущение висения на стене. И не волнуйтесь — мы придадим ему ночной вид, чтобы подчеркнуть сияние!

Чтобы затемнить изображение, создайте новый слой под ним и залейте его серым цветом с помощью инструмента Paint Bucket Tool . Я использую #999999 . Затем установите непрозрачность примерно на 83% и измените режим наложения для слоя изображения на 9.0139 Яркий свет .

Добавьте драматическое освещение на задний план

Теперь мы собираемся создать виньетку. Для этого создайте новый слой и с помощью инструмента Ellipse Tool нарисуйте эллипс чуть меньше холста.

Затем с помощью инструмента Path Selection Tool выберите раскрывающийся список Path Operations и нажмите Subtract From Shape .

Откройте окно свойств с помощью Окно > Свойства и выберите Маска . Затем установите для Feather значение 200px и отрегулируйте его с помощью Free Transform Tool по своему усмотрению. Тогда это должно выглядеть примерно так:

Создайте новый слой над слоем с виньеткой с помощью Layer > New Layer и залейте его черным цветом с помощью инструмента Paint Bucket Tool . Затем установите непрозрачность примерно на 75% и измените режим наложения слоя на Vivid Light .

Создать неоновую вывеску

В этом примере я буду использовать шрифт Beon Medium, чтобы обозначить «Макет», но вы можете выбрать любой шрифт, фразу или значок, который вам нравится! Отсюда вы можете расположить свой текст так, как вам нравится.

Дублируйте текстовый слой, щелкните его правой кнопкой мыши и выберите Преобразовать в смарт-объект . Затем щелкните правой кнопкой мыши слой и выберите Параметры наложения .

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

• Стиль: Pillow Emboss
• Техника: Гладкая
• Глубина: 251%
• Направление: Вверх
• Размер: 15px
• Смягчение: 3 пикселя
• Угол затенения: 90 градусов
• Высота: 53 градуса
• Глянец Контур: Бухта — глубокий
• Режим подсветки: Наложение белого цвета и непрозрачность 100 %
• Режим тени: Наложение черного цвета и непрозрачность 90 % 4

Затем добавьте Contour корректировку под Bevel & Emboss, выберите cove — deep из раскрывающегося списка и оставьте диапазон равным 100%.

Теперь добавьте слой Stroke . Это создаст «свечение» вашей неоновой вывески и сделает ее похожей на включенную! Вот настройки, которые я использую:

• Размер: 40
• Положение: Центр
• Режим смеси: экран
• Непрозрачность: 100%
• СВЕДЕНИЯ: Проверка
• Тип заполнения: градиент
• Стиль: Взрыв формы. 90 градусов
• Масштаб: 100%

Теперь давайте создадим собственный градиент, дважды щелкнув цвет, показанный на панели градиента. Добавьте прозрачный цвет слева, темный цвет ближе к центру (я использовал #51bbad) и светло-голубой справа от более темного центрального цвета (я использовал #a1fff3). Это придаст вашему свечению идеальную глубину, чтобы оно выглядело как пластик настоящей неоновой вывески.

Теперь добавим Outer Glow, , чтобы создать свет, исходящий от нашей неоновой вывески. Вот настройки, которые я использую: 

• Режим смеси: наложение
• Непрозрачность: 100%
• Шум: 0%
• Техника: Мягкая
• Распространение: 20%
• Размер: 250px
• Конв. %

И выберите тот же цвет, что и ваш текст. Опять же, я использую #50c4da .

Создание пользовательского градиентного освещения

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

С помощью Ellipse Tool создайте эллипс, охватывающий весь текст и большую часть фона. Установите цвет немного темнее, чем цвет, который вы выбрали для текста. Я использую #51bbad . Затем щелкните правой кнопкой мыши слой и выберите Преобразовать в смарт-объект .

Затем, выделив слой с эллипсом, выберите Фильтр > Размытие > Размытие по Гауссу .

Установите радиус около 150 пикселей. Теперь измените параметры наложения на Soft Light .

Создайте новый слой, чтобы создать еще один эллипс, на этот раз меньше и размером с текст. Переместите его под слой с текстом, но над другим слоем с эллипсом. Снова преобразуйте эллипс в смарт-объект.

Установите цвет немного светлее выбранного вами цвета текста. Я использую #a1fff3 .

Затем, выделив этот новый слой с эллипсом, выберите Фильтр > Размытие > Размытие по Гауссу . Установите радиус где-то около 150 пикселей. Теперь измените параметры наложения на Soft Light .

Вот и все — теперь у вас есть яркая и блестящая неоновая вывеска! Как вы будете использовать этот эффект? Есть ли другие любимые примеры? Дайте нам знать об этом в комментариях.

Как использовать шаблоны Photoshop

Скачать шаблоны бесплатно ниже!

Переключить фон

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

Редактировать текст

Чтобы отредактировать текст, откройте папку «Вкл.» и дважды щелкните слой «Вкл. — Двойной щелчок для редактирования текста».

Откроется другой документ Photoshop, в котором можно использовать Text Tool для редактирования текста или настройки шрифта. Ключевым моментом здесь является изменение размера текста, чтобы он соответствовал заданной области. (Все, что выходит за границы, не будет перенесено в основной файл!) Вы можете сделать это, выбрав Edit > Free Transform или Command + T на Mac ( Control + T на ПК). Когда вы довольны этим, сохраните и закройте смарт-объект или вкладку Photoshop.

Примечание. Слои «Вкл.» и «Выкл.» синхронизированы, поэтому, когда вы редактируете смарт-текст в одном, он будет обновляться в другом. Довольно мило, правда?!

Подгонка дополнительных деталей

В зависимости от того, какой эффект вы выберете, вам, возможно, придется настроить внешний квадрат или линию. Если вы используете «Neon_Sign_Treatment2», вы можете игнорировать этот раздел. Для «Neon_Sign_Treatment3», если вам нужно настроить поле, просто откройте раскрывающийся список для «Вкл» и «Выкл». Отсюда вы можете преобразовать Подпишите слой Border , выбрав Edit > Free Transform или Command + T на Mac ( Control + T на ПК). Ключевым моментом является одинаковое регулирование слоев «Вкл.» и «Выкл.» Sign Border .

Для «Neon_Sign_Treatment1» вы можете настроить строку под текстом. Для этого откройте папку «Вкл.» и дважды щелкните слой «Вкл. — Двойной щелчок для редактирования текста». Здесь вы можете настроить линию так, чтобы она касалась нижней части текста. Опять же, если вы обновите его из слоя «Вкл», он также обновится в слое «Выкл». (И наоборот!)

Если вы хотите изменить слой «Cords» в «Neon_Sign_Treatment1», выберите слой и с помощью Direct Selection Tool щелкните отдельные точки и перетащите их. Вы даже можете добавлять или удалять определенные точки на линии с помощью инструментов Pen Tool , Add Anchor Point Tool и Subtract Anchor Point Tool . И если изгиб шнура не такой, как вам нравится, просто используйте инструмент Convert Point Tool , пока вы не будете довольны результатами.

Если вам нужно настроить свечение после перемещения вокруг различных объектов, просто откройте папку «Вкл.