Яндекс.Метрика

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

Металлический текст в Photoshop

6 апреля 2012 | Опубликовано в Уроки | 8 Комментариев »

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

Окончательный результат:

Шаг 1: Подготовка документа в Photoshop

Создайте новый документ в  Photoshop (Ctrl + N). Размер нашего документа 600 * 400 px, но вы можете сделать его больше, если вам это необходимо.

Шаг 2: Выбираем шрифт

Для надписи мы будем использовать бесплатный шрифт Lobster размером 130pt и цветом  #214555;

Шаг 3: Добавляем стили слоя

Теперь давайте добавим стили к нашему текстовому слою, для этого перейдите в меню Слои –> Стиль слоя (Layer- >Layer Styles) и установите следующие параметры:

-Внешняя тень (Drop Shadow):

-Внутренняя тень (Inner Shadow):


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

Pattern Overlay. Сохраните это изображение:

Откройте его в Photoshop/ выберите Редактировать->Определить узор (Edit->Define Pattern) и назовите его как-нибудь. (Либо можете скачать паттерн  здесь и установить его в Photoshop). Кликните два раза по слою, чтобы открыть его стили.

Теперь добавим эту заливку тексту, используя  следующие настройки:

-Контур (Stroke):

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

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

Шаг 4: Создаём фон

Добавим нашему фону некоторые настройки, чтобы придать ему глубину.  Перейдите в меню Слои – Стиль слоя (Layer- Layer Styles) или просто два раза кликните по слою, и добавьте следующие параметры:

-Внутренняя тень (Inner Shadow):

-Градиентная заливка (Gradient Overlay):

Для градиента используйте следующие цвета:
1. # 667c85 (светло-синий)
2. # 475e68 (тёмно-синий)

Результат:

Шаг 5: Добавляем блик тексту

Нажмите «Ctrl» и кликните по миниатюре текстового слоя на панели слоёв, чтобы создать выделение текста.

Создайте новый слой поверх остальных. Используя инструментом Градиент (gradient) от белого к прозрачному, протяните его сверху вниз.

Выберите инструмент Овальное выделение (Elliptical Marquee Tool) и создайте  такой же овал как на картинке ниже:

Перейдите в меню Выделение – Инверсия  (Select -> Inverse), чтобы инвертировать наше выделение и нажмите кнопку" delete" , чтобы удалить ненужные части градиента. У вас должен остаться блик только на верхней части текста.

Чтобы сделать наш блик более естественным, изменим режим наложения этого слоя  на Перекрытие (Overlay).

У нас должен получиться такой результат:

Скачать PSD-исходник

Урок создан по материалам loreleiwebdesign




Комментарии

  1. ve
    Thumb up Thumb down 0

    в третьем шаге не так картинка — уже с бликом:)

    а так спс.

  2. Sharp
    Thumb up Thumb down 0

    А как скачать шрифт с гугл-фонтс? :(

    Elena Ответ:

    Thumb up Thumb down 0

    Нажмите в правом верхнем углу страницы «Open Lobster in Google Web Fonts», затем «Download Your Collection» ;)

  3. Игорь
    Thumb up Thumb down 0

    В упор не понимаю, как 5 шаг выполнить.(

    Игорь Ответ:

    Thumb up Thumb down 0

    Инверсия неактивна, как ее выполнить?

    Т Ответ:

    Thumb up Thumb down 0

    qk9WanM.jpg

    Т Ответ:

    Thumb up Thumb down 0

    oops, моя вина, первый пример не верный! Если только, вы не хотите играться с настройками и слегка корректировать. Заранее извиняюсь, и заливаю другой. *CRAZY*

    T0OzAK1.jpg

    Т Ответ:

    Thumb up Thumb down 0

    не мой день, все из рук вон плохо, так что, просто оставлю ссылку на полную картинку: 

    i.imgur.com/T0OzAK1.jpg