15 уроков по созданию текстовых эффектов adobe illustrator

Вариант 3:

Загорающийся и потухающий текст

Неоновый текст

<div class=»sign-wrap-3″>
<span class=»sign_word»>Неоновый текст</span>
</div>

.sign-wrap-3 {
background: #337AB7;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-3 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: ‘Roboto’, sans-serif;
text-transform: uppercase;
animation: neon-3 5s steps(1, start) infinite reverse;
}
@keyframes neon-3 {
0%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
80%{
color: #fff;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
81%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
82%{color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
83%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
84%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
85%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
100%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960,0 0 8px #0b3960;
}
}

Создание неонового текста

4. Напечатайте какой-нибудь текст непрерывающимся шрифтом. Я использовал French Script MT и чуть «допилил» его вручную:

5. Скопируйте слой с текстом (Ctrl+J) и скройте его:

6. К оригинальному тексту примените Filter (Фильтр) -> Blur (Размытие) -> Gaussian Blur (По Гауссу) и установите значение радиуса 14px:

7. Сделайте видимым скопированный текст, и перейдите в стиль слоя, дважды кликнув по нему мышкой или перейдя в Layer -> Layer Style -> Blending Options (Параметры смешивания). Установите такие параметры:

Сейчас неоновый текст должен выглядеть примерно так:

8. Создайте дубликат слоя с текстом, нажмите правой кнопкой мыши по надписи Effects (Эффекты) и выберите Create Layers:

Этим действием мы перевели стили в отдельные слои, теперь выберите все только что созданные слои и слейте их (Ctrl+E):

9. Теперь идём в Filter -> Blur -> Gaussian Blur и выставляем радиус 100px:

Режим смешивания установите Linear Dodge (Add) (Линейный осветлитель). Теперь мы получили такой неоновый текст:

Неоновый текст

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

1. Создайте новый документ (размер выбирайте произвольно, я к примеру взял 1280x1024px) и вставьте в него понравившуюся текстуру кирпича:

2. Сейчас текстура слишком яркая, нам это не нужно, поэтому растеризуем слой и нажимаем Ctrl+U для вызова инструмента Hue/Saturation (Цветовой тон/Насыщенность) и снижаем параметры насыщенности и яркости:

3. Поработаем над атмосферой. Создайте новый слой (Shift+Ctrl+N) и примените к нему Filter (Фильтр) -> Render (Визуализация) -> Clouds (Облака):

Поставьте режим смешивания Color Dodge (Осветление светом) и сотрите мягким ластиком области по краям:

Осталось только понизить непрозрачность до 35%:

На этом создание фона закончено. Теперь начинается самое интересное

Вариант 4:

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

Неоновый текст

<div class=»sign-wrap-4″>
<div class=»sign_word»>Не<span>он</span>овы<span>й</span> тек<span>ст</span></div>
</div>

.sign-wrap-4 {
background: #337AB7;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-4 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: ‘Roboto’, sans-serif;
text-transform: uppercase;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #BFE2FF, 0 0 0.5em #BFE2FF, 0 0 0.1em #BFE2FF;
}
.sign-wrap-4 .sign_word span {
animation: neon-4 linear infinite 2s;
}
@keyframes neon-4 {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #0b3960;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #0b3960;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #0b3960;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}