разработка сайтов

Стильный эффект текста

Мы создадим стильный эффект для текста с использованием фильтров и нескольких инструментов.

Шаг 1. Для начала вам понадобится шрифт SEGA . Создаём документ размером 800px ширина и 800px высота, разрешение 72 пикс./дюйм. Заливаем его чёрным цветом (Alt+Del) и переименовываем например в «background». Берём инструмент Horizontal Type (горизонтальный тип шрифта).

Напишите две строчки текста белого цвета. Размер должен быть такой, чтобы строчки текста напоминали квадрат. Выравниваем текст по левой стороне. В уроке использован размер шрифта: 100pt для PSD и 72pt для tuts.

Шаг 2. Текст нужно сделать более компактным. Цвет текста меняем на #e59710.Применяем к тексту трансформацию (Ctrl+T), увеличиваем его на максимум в документе. После этого размер текста в уроке стал 280pt у верхней строки и 194,4pt у нижней.

Открываем Window > Character (Окно > Символ). Подбираем расстояние между символами в строке, находящейся под «Text Size»(Размер текста) . Устанавливаем курсор между P и SKerning (расстояние между символами) ставим -55. Аналогично, курсор между S и DKerning на -40

Шаг 3. Сейчас будем добиваться золотого эффекта и эффекта 3D. Переходим Layer > Layer Style > Inner Shadow (Слой > Стиль слоя > Внутренняя тень). Ставим следующие настройки: режим наложения – умножение; непрозрачность – 75%, угол – 120, смещение – 1пикс., стянуть – 0%, размер – 5пикс. На скриншоте вариант для английской версии.

Продолжаем работать с эффектами, Layer > Layer Style > Inner Glow (Внутреннее свечение) и ставим следующие параметры:
режим наложения – нормальный, непрозрачность – 75%, метод – мягкий, источник – на краях, стянуть – 45%, размер – 5 пикс.

Layer > Layer Style > Bevel/Emboss (Тиснение/Cкос) с настройками:
стиль – внутренний скос, метод – плавный, глубина – 1000%, размер – 2пикс, смягчение – 0%, установки по умолчанию.

Теперь переходим Layer > Layer Style > Gradient overlay (наложение градиента):
режим наложения – осветление, непрозрачность – 68%, стиль – линейный, угол – 120, масштаб – 131%.

Шаг 4. Дублируем слой со шрифтом (это для перестраховки). Теперь внимательно : создаём новый слой, объединяем его с одним из слоёв с текстом и растрируем слой, который получился в итоге. Добавим немного перспективы Edit > Transform > Perspective (Редактирование > Трансформация > Перспектива). Ставим курсор на верхний правый угол и удерживая левую кнопку мыши тащим его вверх. Также можно перетащить ещё и нижний правый угол для достижения большего эффекта. Жмём Ctrl+T, и с помощью трансформации немного уменьшаем размер текста, если у вас имеются размытые края.

Шаг 5. Жмём кнопку на палитре слоёв «Create a new group» (Создать новую группу). Помещаем туда слой с искажённым текстом и создаём две его копии. Переименовываем слой и его копии сверху вниз: front, mid, back. С помощью стрелок на клавиатуре, двигаем средний и нижний слои правее, смотрите картинку нижу. Заметьте, средний слой расположен ближе к переднему слою front.

Шаг 6. Нажмём в палитре слоёв на слой «mid» с текстом. Уровень Fill заливки понижаем до 0%
Layer > Layer style > Gradient overlay (Слой > Стиль слоя > Наложение градиента): настроим его от #008aff к прозрачному, для этого щёлкаем по нижнему левому ползунку, ставим цвет Color – #008aff и по верхнему правому ползунку, делаем Opacity (Непрозрачность) – 0%.

Шаг 7. Создаём новый слой перед «front» и называем его  «chrome grad». Получаем выделение слоя с помощью Ctrl + клик на миниатюре «front». Делаем активным слой «chrome grad». Выбираем инструмент Gradient.  Открываем настройки градиента, рядом с миниатюрами градиентов нажимаем чёрный треугольник. В появившемся меню выбираем  Reset Gradients (Восстановить градиенты). Нам нужен градиент четвёртый с конца «Chrome». Проведём линию градиента из верхнего левого угла в нижний правый угол выделения. Поменяем BlandingMode (Режим наложения) на Soft Light (Мягкий свет).

Шаг 8. Перейдём к деталям.Создаём новую группу слоёв под названием «soft flares». Создаём в ней слой «highlightflare». Жмём «D», чтобы восстановить цвета, затем заливаем слой чёрным цветом с помощью комбинации Alt + Del (+Backspace).
Теперь идём Filter > Render > Lens Flare (Фильтр > Рендеринг > Блик):
Выбираем 100mm Prime Lens (105mm(100мм)  Prime), ставим Brightness (Яркость) 100%.

Позицию для блика выбирайте как нравится, в уроке использовали верхний край буквы «S» в TUTS. Blending Mode (Режим наложения) меняем на Soft light (Мягкий свет). Этим же способом сделаем ещё один блик на новом слое между P и S (не забудьте про Soft light для Blending mode). А можно просто дублировать слой, отразив его по вертикали и горизонтали.

На верхний слой с бликом добавляем маску слоя (layer mask) , используем Eraser , чтобы замаскировать часть слоя (дубликата), яркость текста не должна пострадать (это может повлиять на элементы фона, которые мы будем добавлять чуть позже).Маскируем как на рисунке:

Шаг 9. Заметьте, на последнем скриншоте, что папки «text» и «soft flares» были помещены в одну «psdtuts»
Создаём дубликат папки «psdtuts» и растрируем слои. Образовавшийся слой переименовываем в «reflection».

Затем Edit > Transform > Flip Vertical (Правка > Трансформация > Отразить по вертикали). Берём инструмент Move(перемещение) и помещаем слой «reflection» под оригинальным текстом.
Для этого же слоя делаем Edit > Transform > Skew (Правка > Трансформирование > Наклон (Скос)) , ведь необходимо, чтобы буквы «Т» в тексте и отражении были на одной вертикальной линии. Кликаем по левому среднему  узлу «рамки трансформации» и, не отпуская клавишу мыши, тащим его вверх.

На слой «reflection» добавляем слой-маску. Выбираем инструмент «Gradient» (линейный, от чёрного к белому) и, убедившись, что маска активна, проводим снизу вверх линию градиента.

Шаг 10. Cоздаём новый слой между слоем «reflection» и папкой «psdtuts» под названием «flare front». Заливаем его чёрным цветом. Двигаемся Filter > Render > Lens Flare (Фильтр > Рендеринг > Блик):50-300mm Zoom (Трансфокатор 50-300 мм) 100% brightness (яркость).

Также рекомендуется в фильтре Lens Flare выбрать Movie Prime (начало ролика) и поменять режим наложения на Linear Dodge (Линейный осветлитель).

Шаг 11. Создаём копию слоя «flare front»,  режим наложения меняем на Screen (Осветление (экран)). Перемещаем слой на панели слоёв под «psdtuts», это позади текста и назовём его «flare back».

Шаг 12. Создаём новый документ,размер сделайте 40х2 пикс. Берём инструмент Rectangular Selection (прямоугольное выделение) выделяем ровно половину документа и выделение заливаем чёрным. Далее Edit – Define Pattern (Правка – Определить узор), назовите узор, например «polosa».

Завершающий шаг. Возвращаемся в основной документ и делаем активным слой «background». Создаём новый слой. Edit > Fill(Правка > Выполнить заливку). Выбираем Pattern (узор), среди узоров выбираем тот, который мы создали, режим наложения Screen. Установите для Fill (заливку) равный 0%. Заходим в стили слоя Layer > Layer Style > Color Overlay (Слой > Стиль слоя > Наложение цвета) со следующими настройками: #dd04ad, режим наложения Overlay (перекрытие), Opacity (непрозрачность) 64%. Также можете на своё усмотрение повернуть фон на 90 градусов и применить к нему перспективу.

Понравился материал?

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

Обсуждение 10 комментариевКомментировать

  • symnbicyetemn 23 марта 2011

    отличный сайт, мне очень понравился, спасибо автору

  • Musja 8 апреля 2011

    Абсолютно поддерживаю предыдущего оратора!! :-* :-* :-* :-) :-) :-D :-D

  • hattipok 7 июня 2011

    -ради этого я прочел всю статью. Люблю вас спасибо

  • bayan 19 июня 2011

    Спасибо, полезный материал. Добавил в закладки.

  • Alewaymmell 2 октября 2011

    Большое спасибо за информацию, теперь я не допущу такой ошибки.

  • Peangeuteveda 14 октября 2011

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

  • IrininaSviridova 22 октября 2011

    Заманчиво спс Вам! Об этом уже читала, но на том блоге как-то по-другому написано…

  • annalustikova 16 ноября 2011

    Благодарю публикатору такое на мое усмотрение тоже полезно познавать.

  • Woman XX 30 ноября 2011

    Качественно, интересно, доступно. Что еще нужно обычному пользователю!Автору+1

  • BadBoyFromTheRai 3 декабря 2011

    Давно эта тема не поднималась)
    Смотрю народ оживился

Оставить комментарий