Как нарисовать вдавленную надпись в Expression Design

Меня периодически спрашивают, как же в Expression Design сделать вдавленную надпись: ведь тут нет Inner Glow, Inner Shadow, да и Bevel, вроде как не позволяет вдавить :)

Настало время раскрыть секрет, как добиться эффекта вдавленной надписи.

Прежде всего, делаем общий фон (заливку соответствующим паттерном) и пишем поверх необходимую надпись. При необходимости с помощью эффекта “Hue, Saturation and Lightness” можно подправить оттенок:

Следующий шаг: выбираем текст и превращаем его в Path (Object → Convert Object to Path, или ctrl+shift+O):

Делаем копию фона! и помещаем на задний слой с небольшим сдвигом вниз, вправо.

Выбираем фон и текст, превращенный в Path. Выбираем Path → Back Minus Front. Убираем у картинки обводку.

Выбираем фон, в эффекте “Hue, Saturation and Lightness” уменьшаем Lightness (у меня –25):

Выбираем вернее изображение с дырками, добавляем эффект “Drop Shadow” (Softness и Offset выставляем в 2):

Добавляем эффект “Outer Glow” (Size 1, Opacity 0.4, Glow Color – темный оттенок, близкий к цвету дерева):

Добавляем еще один эффект “Drop Shadow” с аналогичными параметрами, но с измененным Light Angle — ставим 135.

Наконец, добавляем эффект “Bevel” (Width 0.2, Contrast 0.1, Softness 0.4, Profile — Curve Out):

Надпись готова:

 

Исходники к обоим надписям можно найти в приложении.

Напоминаю, что Expression Design студентам, школьникам и аспирантам доступен бесплатно по программе DreamSpark .

Другие “рисовальные” посты

• Как нарисовать слона в Expression Design
• Как нарисовать шарик в Expression Design
• Как нарисовать иконку RSS в Expression Design
• Как нарисовать иконку для twitter`а в Expression Design
• Как нарисовать летающую тарелку в Expression Design

Inner Shadow Effect.zip

Comments

• Anonymous
  March 03, 2011
  Отличный урок! Как раз то, что искал.

• Anonymous
  March 03, 2011
  Константин, у меня есть вопрос. Не обращали ли вы внимание на то, что в программе iTunes от Apple обычный текст в главном меню программы (которое сверху) хоть и небольшого размера, но он объемный (точнее как бы вдавленный)? Но с виду это обычный текст - не картинка. Так вот, теперь вопросы: вы не знаете можно ли в wpf приложении сделать подобный эффект к обычному тексту (который можно запросто отредактировать и изменить надпись)? Можно ли сделать эффект "вырезанных" букв и при этом сохранить текст(т.е. не преобразовывать его в путь)? (Это все к тому, что бы было меньше заморочек с переводом программы на другие языки)

• Anonymous
  March 03, 2011
  Леонид, я не пользуюсь iTunes, поэтому не знаю, какие там надписи :) Можете приложить скриншшот, чтобы было понятно, о чем речь?

• Anonymous
  March 03, 2011
  Вот скриншот (100% размер и увеличенный, чтобы лучше видно было) cid-e88dd7ce8e64ed67.photos.live.com/.../%d1%81%d0%ba%d1%80%d0%b8%d0%bd%d1%88%d0%be%d1%82%20iTunes.png А если не заморачиваться с iTunes, то мне интересно, можно ли каким-то способом сделать вдавленную надпись (как в этом посте или подобную по визуальному восприятию) с редактируемым текстом?

• Anonymous
  March 03, 2011
  Кликните по картинке, он(скайдрайв) ее лучше покажет))

• Anonymous
  March 03, 2011
  Я понял, что даже если в expression design это сделать, то при переносе "художества" в wpf проект, текст станет изображением. Начал побывать делать вдавленный текст в Expression Blend - частично получилось. Для того что я хочу получить, нужно "раздобыть" несколько дополнительных эффектов для бленда. Еще раз спасибо за урок!

• Anonymous
  March 06, 2011
  Понял о чем речь. Честно говоря, не видел готового способа реализовать динамчную вдавленную надпись на WPF или внутри Design. В частности, к сожалению, нет эффекта внутренней тени, которая могла бы помочь в этом деле.