Как сделать вывеску в фотошопе

Обновлено: 05.07.2024

Узнайте, как добавлять собственный текст и логотипы к любой вывеске в Photoshop! Идеально подходит для создания макетов для вашего бренда или продуктов.

Образец изображения, использованный в этом руководстве, был приобретен в Adobe Stock. Если вы хотите использовать тот же рисунок, его можно найти здесь.

Загружаемый образец содержит альтернативный логотип, которому вы можете следовать или создать свой собственный!

Кредит исполнителя

Поделиться

ДОБАВЬТЕ ЛОГОТИПЫ И ГРАФИКУ НА ЛЮБОЙ ЗНАК

Добавить текст и логотипы к любой вывеске

Замена знака в Photoshop

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

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

заменить знак в фотошопе

Для создания этого эффекта вам потребуются как минимум два элемента: изображение вывески или рекламного щита в реальном мире и некоторый текст, логотип или значок (предпочтительно изображение в формате PNG с прозрачным фоном). разместить в этой среде.

Мы предоставили вам изображение знака, которому вы можете следовать. Выбранное нами изображение можно найти в Adobe Stock, или вы можете создать или использовать свое собственное.

Удаление исходной графики

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

заменить знак в фотошопе

В нашем примере мы решили использовать инструмент «Многоугольное лассо», чтобы создать грубое выделение вокруг текста. Здесь не нужно быть слишком точным, особенно если вы используете изображение, на котором знак в основном однотонный.

заменить знак в фотошопе

Выделив текст, создайте новый слой, затем перейдите в меню «Правка» и выберите «Заливка с учетом содержимого».

заменить знак в фотошопе

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

заменить знак в фотошопе

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

заменить знак в фотошопе

Затем, если вам нужно выполнить дополнительную очистку, вы можете использовать инструмент "Штамп", чтобы скрыть любые шероховатости или отсутствующие участки. (Не забывайте всегда работать с новым слоем всякий раз, когда вы добавляете дополнительные правки или очищаете.)

заменить знак в фотошопе

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

Перспектива и ссылка на место

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

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

Создание направляющих и перспективы

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

заменить знак в фотошопе

Во-первых, давайте создадим выделение поверхности знака, где мы хотим применить нашу собственную графику. Опять же, Polygonal Lasso Tool — лучший и самый простой инструмент для работы. Просто нажмите на каждый из углов внутри рамки знака.

заменить знак в фотошопе

Затем, чтобы лучше видеть область, создайте новый слой и залейте выделение белым цветом.

заменить знак в фотошопе

Затем нажмите CTRL или CMD + R, чтобы включить линейки. Создайте и выровняйте две вертикальные линейки с каждой стороны знака. Затем создайте и выровняйте две горизонтальные линейки, каждая из которых совпадет с верхним и нижним правыми углами знака.

заменить знак в фотошопе

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

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

Использование нескольких документов Photoshop со ссылкой на место

Теперь, когда у нас есть область отсчета, в которую мы можем поместить нашу графику, мы можем отправить ее во второй документ Photoshop.

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

заменить знак в фотошопе

Щелкните правой кнопкой мыши слой с белым квадратом и выберите Дублировать слой. В диалоговом окне «Дублировать слой» откройте первый раскрывающийся список в разделе «Назначение» и выберите «Создать». Это отправит дублированный слой в новый документ Photoshop.

заменить знак в фотошопе

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

Поскольку выбранное нами изображение имеет сплошной белый фон, нам пришлось проделать небольшую дополнительную работу, чтобы «извлечь» графику и поместить ее на прозрачный фон.

заменить знак в фотошопе

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

заменить знак в фотошопе

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

заменить знак в фотошопе

После создания изображения на прозрачном фоне сохраните PSD-файл в том же каталоге, что и исходный PSD-файл с изображением знака.

заменить знак в фотошопе

Вернитесь к исходному PSD-изображению, откройте меню "Файл" и выберите "Поместить ссылку". Это позволяет нам встроить другой PSD в этот PSD.

заменить знак в фотошопе

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

Размещение графики в перспективе

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

заменить знак в фотошопе

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

заменить знак в фотошопе

После того, как изображение помещено в правильную перспективу, вы можете внести в него изменения во вторичном PSD. Обратите внимание, что они будут отражаться в режиме реального времени в основном PSD-изображении и в созданной нами перспективе!

Последние штрихи

Большая часть основной работы сделана, но мы еще можем сделать немного больше, чтобы интегрировать новую графику в сцену. Помните отражение, которое мы удалили ранее? Мы можем воссоздать его, используя вторичный PSD!

заменить знак в фотошопе

Откройте меню "Файл" и снова выберите "Поместить ссылку". Выберите тот же PSD, который содержит графическое изображение. У вас должна получиться еще одна копия этого PSD-файла, которую вы можете свободно трансформировать, не затрагивая другие созданные нами элементы.

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

заменить знак в фотошопе

Примените небольшое размытие по Гауссу к отраженному изображению.

заменить знак в фотошопе

Затем в галерее размытия выберите «Размытие с наклоном и сдвигом». Этот тип размытия позволит нам воссоздать эффект размытия отражения по мере удаления от источника.

заменить знак в фотошопе

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

заменить знак в фотошопе

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

Мы создали корректировку уровней, чтобы освещение и контраст более точно соответствовали исходному отражению.

заменить знак в фотошопе

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

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

заменить знак в фотошопе

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

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

Создание вывески в Photoshop — финальный просмотр

Img

Инструменты и ресурсы

Инструменты и ресурсы

Шаг 1

Создайте новый документ (Ctrl+N) размером 1000x1000.

Создать новый документ

Шаг 2

Прежде всего я собираюсь добавить изображение текстуры стены в Photoshop, чтобы приступить к созданию нашей вывески.

Img

Добавить изображение текстуры стены

Шаг 3

Img

Создать новый прямоугольник

Установите режим наложения на (Несколько) для этого слоя прямоугольника формы.

Изображение

Установите режим наложения «Несколько»

Шаг 4

Img

Создать прямоугольник

Шаг 5

Изображение

Закрасьте внешнюю область

Теперь выберите первый слой с прямоугольником со скругленными углами и перейдите в Фильтр > Размытие > Размытие по Гауссу и установите Радиус (70 пикселей).

Img

После применения размытия по Гауссу мы получаем хороший эффект на этом 1-м слое прямоугольника.

Img

Создать хороший эффект для этого прямоугольника

Установите для этого прямоугольного слоя режим наложения (Жесткий свет).

Img

Установите режим наложения «Жесткий свет».

Шаг 6

Img

Создать прямоугольник со скругленными углами

Перейдите в меню «Слой» > «Стиль слоя» и примените некоторые параметры наложения ко второму слою с прямоугольником со скругленными углами.

Тень

Img

Внутренняя тень

Img

После применения этих параметров наложения мы получаем новый эффект на втором прямоугольном слое.

Img

Получить новый эффект на втором прямоугольнике

Шаг 7

Пришло время добавить первую текстуру дерева в Photoshop.

Изображение

Добавить первую текстуру дерева

Теперь, удерживая клавишу Alt, щелкните левой кнопкой мыши в центре 1-го слоя текстуры дерева и 2-го слоя с прямоугольником со скругленными углами, текстура дерева будет объединена со слоем прямоугольника.

Объединить в прямоугольник

Шаг 8

Изображение

Создать третий прямоугольник

Перейдите к параметру наложения и примените тень к этому прямоугольному слою.

Img

После применения тени мы получаем хороший эффект на 3-м прямоугольном слое.

Img

Шаг 9

Теперь мы добавляем второе изображение текстуры дерева в Adobe Photoshop.

Img

Добавить второе изображение текстуры дерева

Повторите (шаг 8), удерживая клавишу Alt и щелкнув левой кнопкой мыши по центру 2-го слоя с текстурой дерева и 3-го слоя с прямоугольником со скругленными углами, затем текстура сливается с 3-м слоем с прямоугольником со скругленными углами.

Изображение

Добавить текстуру дерева

Шаг 10

Изображение

Создать форму кисти

Уменьшите непрозрачность (20%) этого слоя с формой кисти.

Img

Шаг 11

Изображение

Нарисовать прямоугольник

Перейдите к параметрам наложения и примените Обводку к этому слою с прямоугольником.

Img

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

Img

Установите для этого прямоугольного слоя режим наложения (Темнее).

Img

Шаг 12

Изображение

Создать слой кисти

Установите для этого слоя режим наложения (Несколько)

Img

Шаг 13

Теперь я наберу текст, здесь я использую шрифт Vanilla Whale Font, вы можете использовать любой понравившийся вам шрифт.

Img

Напишите текст

Задайте Заливку (0%) для этого текстового слоя.

Img

Перейдите в меню «Слой» > «Стиль слоя» и примените некоторые параметры наложения к этому текстовому слою.

Тень

Img

Внутренняя тень

Img

Наложение цвета

Img

Когда мы применяем этот стиль слоя, мы получаем отличный предварительный просмотр.

Img

Мы получаем потрясающий эффект

Шаг 14

Изображение

Нарисовать круглую фигуру

Выберите инструмент «Ластик» и сотрите область обводки с одной стороны этого круга, как показано на рисунке ниже.

Изображение

Удалить одну боковую обводку

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

Изображение

Дублировать форму круга

Шаг 15

Img

Создать прямоугольник

Перейдите в меню «Слой» > «Стиль слоя» и примените некоторые параметры наложения.

Внутренняя тень

Img

Скос и тиснение

Img

Скос и тиснение

Атлас

Img

Наложение градиента

Img

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

Img

Получить потрясающий результат

Шаг 16

Img

Создать круг

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

Изображение

Теперь выберите слой с маленьким прямоугольником со скругленными углами и нажмите (Ctrl+J), чтобы продублировать его, и установите его на верхнюю сторону слоя с круглой формой, как в предварительном просмотре.

Изображение

Дублировать слой прямоугольника

Теперь выберите слой с прямоугольником со скругленными углами и слой с фигурой круга, нажмите (Ctrl+J), продублируйте эти слои много раз и сделайте цепочку, как показано в предварительном просмотре.

Изображение

Дублировать эти слои

Теперь правая боковая цепочка завершена, выделите все дублирующиеся слои с цепочкой и объедините их (Ctrl+E), теперь у нас есть один слой с цепочкой. Продублируйте этот слой, установите дубликат этого слоя с левой стороны.

Изображение

Дублировать слои цепочки

Шаг 17

Изображение

Создать новый слой

Уменьшите непрозрачность (30%) этого слоя с формой кисти.

Img

После завершения этой процедуры мы получаем крутую вывеску в финальном предварительном просмотре.

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

Шаг 1

Откройте Photoshop и создайте новый документ размером 1113x1440 пикселей. Убедитесь, что фон черный. После этого добавьте текст в вертикальном порядке. Я добавил слово Abduzeedo и использовал шрифт Arial Black.

Легкий вход в стиле казино в Photoshop

Шаг 2

Выделив текстовый слой, перейдите в меню «Слой» > «Стиль слоя» > «Тень». Используйте приведенные ниже значения для тени.

Легкий вход в стиле казино в Photoshop

Шаг 3

Теперь, чтобы добавить глубины тексту, сначала используйте Inner Shadow. Снова используйте приведенные ниже значения, чтобы получить эффект.

Легкий вход в стиле казино в Photoshop

Шаг 4

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

Легкий вход в стиле казино в Photoshop

Шаг 5

Легкий вход в стиле казино в Photoshop

Шаг 6

Легкий вход в стиле казино в Photoshop

Шаг 7

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

Легкий вход в стиле казино в Photoshop

Шаг 8

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

Легкий вход в стиле казино в Photoshop

Шаг 9

Вставьте световое пятно в свой дизайн, а затем начните заполнять буквы светом. Вы можете использовать меньшие источники света, если хотите сделать их 2 столбцами вместо одного, как я. После этого выделите все источники света и объедините их только в один слой (Layer>Merge Layers).

Легкий вход в стиле казино в Photoshop

Шаг 10

Выберите слой с источниками света и перейдите в меню «Слой» > «Стиль слоя» > «Тень». Используйте приведенные ниже значения для справки.

Легкий вход в стиле казино в Photoshop

Шаг 11

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

Легкий вход в стиле казино в Photoshop

Шаг 12

Перейдите в меню «Изображение»> «Настройки»> «Оттенок и насыщенность». Нажмите «Раскрасить», и оттенок изменится на розовый.

Легкий вход в стиле казино в Photoshop

Шаг 13

Дублируйте этот слой и очистите эффект тени и внешнего свечения. После этого перейдите в Фильтр > Размытие > Размытие по Гауссу. Используйте 20 пикселей для Радиуса. Сгруппируйте этот слой в папку и измените режим наложения папки на Color Dodge.

Легкий вход в стиле казино в Photoshop

Шаг 14

Используя Eraser Tool (E) и очень мягкую кисть, измените его размер, чтобы он был размером с лампочку. Затем, выбрав размытый слой из предыдущего шага, начните стирать некоторые источники света, чтобы сделать вывески менее однородными, чтобы они были не такими яркими. Это опять-таки придаст большей реалистичности композиции.

Легкий вход в стиле казино в Photoshop

Шаг 15

Легкий вход в стиле казино в Photoshop

Шаг 16

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

Легкий вход в стиле казино в Photoshop

Шаг 17

Выберите «Слой» > «Стиль слоя» > «Тень». Используйте изображение ниже для значений тени.

Легкий вход в стиле казино в Photoshop

Шаг 18

Это эффект, который мы получили на данный момент.

Легкий вход в стиле казино в Photoshop

Шаг 19

Давайте добавим блики, как на плакате Burlesque, который я использовал для справки. Блики, которые я использую, взяты из изображения, и вы можете скачать его здесь. После этого измените размер изображения и удалите другие его части, оставив только сам блик. Чтобы цвета совпадали, перейдите в Image>Adjustments>Hue and Saturation. Снова выберите параметр Colorize и измените оттенок на розовый. Этот слой будет использовать экран в качестве режима наложения.

Продублируйте блики несколько раз и поместите их поверх определенных букв. Вы также можете вращать и изменять их размер.

Легкий вход в стиле казино в Photoshop

Шаг 20

Теперь вы можете дублировать текст и отключить все эффекты, оставив его только розовым, а затем применить размытие по Гауссу, чтобы создать своего рода розовое свечение за словом, или вы можете сделать это с помощью инструмента Bruth Tool (B) с розовым. Оба способа будут работать нормально. Я сделал первый, продублировав слово.

Легкий вход в стиле казино в Photoshop

Шаг 21

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

Легкий вход в стиле казино в Photoshop

Шаг 22

Переместите текстуру так, чтобы она находилась за черным фоном. Затем с помощью инструмента Eraser Tool (E) удалите и очень мягкой кистью с непрозрачностью 20% начните стирать область над текстом, чтобы немного показать текстуру.

Легкий вход в стиле казино в Photoshop

Шаг 23

Выберите слой с текстурой и перейдите в меню «Слой» > «Стиль слоя» > «Наложение цвета». Используйте розовый для цвета и Multiply для режима наложения. Мы делаем это для того, чтобы текстура приобрела розовый цвет, так как она подсвечивалась розовыми огнями вывески.

Легкий вход в стиле казино в Photoshop

Шаг 24

Выделите все слои и продублируйте их, после чего объедините копии в новый документ, это также можно сделать с помощью сочетаний клавиш Command(mac)Control(pc) + Alt + Shift + E. После этого перейдите в Фильтр> Размытие > Размытие по Гауссу. Используйте 20 пикселей для Радиуса. У вас получится довольно размытый слой, поэтому измените режим наложения на Экран и непрозрачность на 60%, это создаст действительно крутой эффект свечения.

Легкий вход в стиле казино в Photoshop

Заключение

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

Каждое воскресенье черпайте вдохновение, необходимое для эффективной работы!

Как создать неоновое свечение эффект в Photoshop

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

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

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

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

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

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

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

макет с эффектом неонового свечения маховика фотошоп как к уроку кирпичная стена стоковое фото

layout by flywheel эффект неонового свечения фотошоп как обучать

Добавьте эффектное освещение на задний план

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

макет с эффектом неонового свечения маховика фотошоп как к учебному слою виньетки

Затем с помощью инструмента «Выбор контура» выберите раскрывающийся список «Операции с контуром» и нажмите «Вычесть из фигуры».

макет с эффектом неонового свечения маховика фотошоп как для обучения вычитанию передней формы

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

макет с эффектом неонового свечения маховика фотошоп как к обучающему перу

Создайте новый слой над слоем с виньеткой, выбрав «Слой» > «Новый слой», и залейте его черным цветом с помощью инструмента «Заливка». Затем установите непрозрачность примерно на 75% и измените режим наложения для слоя на Яркий свет.

макет с эффектом неонового свечения маховика фотошоп как обучать яркому свету

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

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

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

макет с эффектом неонового свечения маховика фотошоп как в текст учебника преобразовать смарт-слой

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

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

Затем добавьте корректировку контура в разделе «Скос и тиснение», выберите «бухта — глубоко» в раскрывающемся списке и оставьте диапазон равным 100%.

макет с эффектом неонового свечения маховика фотошоп как к настройкам контура учебника

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

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

макет с эффектом неонового свечения маховика фотошоп как к настройкам обводки учебника

макет с эффектом неонового свечения маховика фотошоп как в обучающий редактор градиентов

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

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

макет с эффектом неонового свечения маховика фотошоп как к обучающим настройкам внешнего свечения

Создайте собственный градиентный свет

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

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

layout by flywheel эффект неонового свечения фотошоп как обучать размытие по Гауссу

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

макет с эффектом неонового свечения маховика фотошоп как для обучения мягкому свету

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

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

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

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

макет с эффектом неонового свечения маховика фотошоп как до окончательного макета учебника

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

Загрузите шаблоны бесплатно ниже!

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

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

макет с эффектом неонового свечения маховика фотошоп как к учебнику по переключению фона

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

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

макет с эффектом неонового свечения маховика фотошоп как для редактирования текста учебника

Откроется другой документ Photoshop, в котором можно использовать инструмент «Текст» для редактирования текста или настройки шрифта. Ключевым моментом здесь является изменение размера текста, чтобы он соответствовал заданной области. (Все, что выходит за рамки, не будет перенесено в основной файл!) Это можно сделать, выбрав «Правка» > «Свободное преобразование» или Command + T на Mac (Control + T на ПК). Когда вас все устраивает, сохраните и закройте смарт-объект или вкладку Photoshop.

макет с эффектом неонового свечения маховика фотошоп как для редактирования текста учебника

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

Подкорректировать дополнительные элементы

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

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

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

layout by flywheel эффект неонового свечения фотошоп как обучать строка преобразования работы

Если вы хотите изменить слой «Cords» в «Neon_Sign_Treatment1», выберите слой и с помощью инструмента «Прямое выделение» щелкните отдельные точки и перетащите их. Вы даже можете добавлять или удалять определенные точки на линии с помощью инструментов «Перо», «Добавить опорную точку» и «Вычесть опорную точку». А если изгиб шнура вам не нравится, просто используйте инструмент «Преобразовать точку», пока не будете довольны результатом.

макет с эффектом неонового свечения маховика фотошоп как к обучающему шнуру трансформации

Если вам нужно настроить свечение после перемещения различных объектов, просто откройте папку «Вкл.» и выберите слои «Выделение».Отсюда вы можете перетаскивать их с помощью инструмента «Перемещение» или уменьшать и увеличивать их с помощью «Правка» > «Свободное преобразование».

макет с эффектом неонового свечения маховика фотошоп как к учебному примеру hustle неоновой вывески

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

Читайте также: