Каллиграфия и типографика, выпуск десятый, то ли о буквах, то ли о свете

Каллиграфия и типографика, выпуск десятый, то ли о буквах, то ли о свете

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

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

Нашел вот на shotgunmag.co.uk красивый текстовый эффектик:

Стал разбираться, как делать. Все написаннное, вроде, выполняю, а получается не то:


Не светится.


Светится, но как-то не так:-(Жестко. Некрасиво.


Опять лажа.

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

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

Но как объяснишь, где подкрасить и подмазать? Я сам добивался этого понимания раз за разом перерисовывая сияние, и то неточно повторил. Столько нюансов и мелочей, что нормально их не распишешь. Собственно, в том тьюториале и не расписано. Но нас спасет видео.

В общем и целом, порядок действий таков:

  1. Рисуем пером (P) сами буквы или узор (удобно предварительно нарисовать заготовку себе на бумажке и потом с нее срисовывать);
  2. Делаем Stroke path with brush шириной в один пиксель и неярким цветом;
  3. Ставим полученной линии Outer glow;
  4. Делаем копию линии уже без Outer glow и более яркую;
  5. Подтираем её резинкой в нужных местах, чтобы получился эффект блеска (да-да, как делать этот блеск, тоже пришлось впетривать самому, потому что в тюториале этот момент раскрыт не на много подробнее чем «ну я тут резиночкой подтер»);
  6. Делаем копию этого слоя, чтобы блеск был поярче;
  7. Ещё раз копируем этот слой (я его назвал «блики») и делаем ему Filter — Blur — Radial Blur. Он усиливает свечение и делает его интереснее (этот пункт я забыл показать в видео).
  8. А дальше ручками рисуем свечение.

Насчет свечения могу дать такую рекомендацию. Его удобно рисовать на трех слоях. Например, если рисуем голубое свечение, но на нижнем слое голубой кистью с маленькой непрозрачностью (5–8%) рисуем дальнее свечение — по большому радиусу от источника (в нашем случае от буквы). На среднем берем цвет промежуточный между голубым и белым и рисуем свечение меньшего радиуса (я, кстати, начинаю всегда со среднего). На верхнем слое рисуем белым цветом, маленькой кистью и более жесткое свечение. То есть правило следующее: чем меньше радиус свечения, тем белее цвет.

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

Если не получается, есть резон попробовать сначала с одним цветом.

Не забываем, что в Фотошопе очень удобно изменять размер кисти с помощью клавиш квадратных скобок — [ и ]. Очень ускоряет работу, так как не нужно лазить в меню кисти. Хотя, я все равно иногда забываю и лезу туда.

Вариации результата:

Все, слова кончились, смотрим киношку:


Светящийся текст
from Alexander Kirillov on Vimeo.

В следующий раз у нас будет мясной текст. Или молочный. Или еще что-нибyдь.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 7

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

PS
Потому что некоторые вещи на видео понимать все же _З_ело удобнее - опечатка))
Valeriy
Вообще видео контент в последнее время рулит.
Спасибо за видео.
Саша Кириллов
KIVagant
> Оригинальная картинка автора все-равно красивее всех.
В этом ты прав. Промучившись полтора дня, я так и не
смог сделать так же ярко и гармонично, как автор ориги-
нальной статьи.

Neutron
> Потому что некоторые вещи на видео понимать все же _З_ело удобнее - опечатка))
Да не, это такое словцо старое, которое означает «очень».

Valeriy
> Вообще видео контент в последнее время рулит.
Да. Теперь мне осталось освоить видео со звуком,
и все у нас вообще будет пучком.
Николай
Видео-уроки очень наглядно демонстрируют возможности и эффекты. Спасибо за работу.
Reeka
а ещё очень здорово рисовать свечение колордоджем (color dodge). Не знаю почему, в общем, но если взять любой тёмный фон, отличный от чёрного (можно даже взять тёмно тёмно тёмно синий), и на новом леере нарисовать белым загогулину, потом этот леер положить в папочку и именно папочке указать метод смешивания колор додж, то тогда можно достигнуть оч хороших результатов, меняя прозрачность слоя в папочке. Получается действительно нечто светящееся :)
#
Reeka
kix
О, спасибо. Хороший урок :)
Почему-то мне кажется, что мясной и молочный тексты делать попроще будет, по крайней мере ничего не надо будет подтирать.
#
kix  

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler