25.06.10 — Рубрика: дизайн , Уроки

Letterpress — популярный web-эффект

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

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

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

Запускаем фотошоп и создаем документ размером 551px. на 251px. Пишем произвольное слово, я использовал шрифт BaseNine, который можно найти в одной из коллекций.

Далее открываем свойства слоя и настраиваем параметр Inner Shadow как на картинке. Нам нужно выставить параметр дистанции и размера тени. Обычно я использую 1px в обоих случаях.

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

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

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

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

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

Спонсор поста:

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

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

  • Sbioko
    25.06.2010

    Bravo! ;-)

  • Mike
    25.06.2010

    Без обид, но по-моему эффект, примененный к слову Read в нарезке смотрится более красиво и реалистично что-ли ;-)

    • Mike
      25.06.2010

      *ошибочка: к слову Ready

      • 25.06.2010

        Не понял юмора))

    • Там просто другой эффект! Там вдавленная надпись! Мне кажется, что нечего мудрить — делать примерно так же как и автор этого блога. Не думаю, что буржуйнетовцы этим очень уж сильно заморачиваются. Разве что какие-нибудь фанатики)))

  • 25.06.2010

    красиво )

  • eVAnt
    07.07.2010

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

  • eVAnt
    07.07.2010

    Юзаем "Bevel аnd Emboss"
    из плюсов: нету никаких дублирующихся шрифтов, куда нужно туда и передвинул без лишних заморочек. Ещо можно настроить градиент немножко подругому, я использовал Ваш, но если поставить прозрачность ростяжки и использовать только ЧБ — на любом фоне мы получим ефект тиснения, так как шрифт не будет иметь собственного цвета.
    А вот как оно на самом деле (Ваш градиент, только с использованием Bevel аnd Emboss) http://img580.imageshack.us/img580/3103/bevelande…

  • yonik
    10.08.2010

    Как то сложно все у вас, я все проще делаю: http://s02.radikal.ru/i175/1008/27/38820af218ed.j…

    • Vir2al
      10.08.2010

      Тоже можно)

  • yonik
    10.08.2010

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

  • klimmka
    26.07.2011

    или еще вариант )
    Inner Shadow сдвигаем на 1 px вниз и влево
    Drop Shadow выставляем в режим Color Burn и берем цвет тени из фона.
    Одна надпись.
    2 эффекта.
    Один слой :)

  • Denchique
    13.08.2011

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

    • Vir2al
      13.08.2011

      Я писал об этом)))