Как сделать тень текста в фотошопе?
Всем доброго времени на fast-wolker.ru! Создание текстовых эффектов для различных целей занятие не только увлекательное, но и полезное особенно для тех, кто ведет в интернете свои странички.
Ведь придание тексту необычного вида всегда будет привлекать посетителей.
В этом уроке мы разберем на примерах, как сделать тень для текста.
Я предложу два разных варианта с разным изображением тени. Может у кого-то есть свои идеи и наработки, тогда поделитесь ими в комментариях.
Вариант создания тени текста в фотошопе № 1
Итак, открываем программу и создаем в ней новый документ. И заливаем его любым цветом. Создаем копию слоя.
После этого пишем нужный текст. Первоначально задаем ему цвет, отличный от цвета фона, размер шрифта и сам шрифт.
Затем, для лучшего отображения будущей тени создадим тексту обводку. Для этого зажимаем клавишу ctrl и кликаем по иконке текстового слоя в окне слоев. В результате появится выделение текста.
Затем создаем новый слой. В «палитре слоев» (в самом низу) кликаем на иконку нового слоя…
Теперь необходимо сделать обводку. Для этого идем в меню «редактирование» и там выбираем «выполнить обводку«.
Выбираем любой цвет. Остальные параметры остаются без изменений.
Далее, выбираем слой с текстом и дублируем его. Затем выбираем основной текстовый слой, два раза кликаем по нему, вызывая окно свойств слоя. Выбираем пункт «наложение цвета«. Устанавливаем черный цвет.
Далее слой «основной слой » смещаем немного в сторону и вниз, пока он не выйдет из-за букв, как тень.
Делаем это при помощи стрелок на клавиатуре. Тень можно сделать и пообъемнее. Для этого слой текста, (который играет роль тени) дублируем несколько раз, каждый раз смещая новый слой в том направлении, в котором смещали изначально.
В данном случае вправо и вниз. Количество дублированных слоев может быть разным и зависит от вас. У меня при создании этого примера получилось 10 копий:
Теперь все слои с тенью выделяем и объединяем их вместе. Для этого в меню слои выбираем пункт «объединить слои«.
Далее, можно немного размыть тень. Заходим в меню «фильтр», выбираем «размытие-размытие по гауссу«.
В открывшемся окне выбираем значение 2.
Что бы тень не выглядела слишком ярко немного снижаем уровень ее прозрачности.
В результате получаем готовый текст с тенью.
Вариант создания тени текста в фотошоп № 2
Все так же, создаем документ, пишем текст. Затем создаем слой-копию, а оригинал переименовываем в «Тень». Теперь слой «Тень» надо растрировать. Идем меню «слои«-«растрировать«-«слои«.
Затем идем в меню «редактирование» и там выбираем «трансформирование-масштабирование«.
Уменьшаем размер букв по высоте, перемещая за серединную точку текст вниз, примерно процентов на 60. В результате увидите задний текст и передний, который стал ниже. В центре находится опорная точка, ее смещаем вниз до центральной нижней.
Далее, идем вновь в «редактирование-трансформирование«, но выбираем уже «перспектива«:
Уменьшенный текст кладем так, как показано на рисунке. Для этого берем за угловую точку и тянем в сторону.
После этого заливку слоя «Тень» надо понизить до 0%. Далее, вызываем окно свойств слоя, два раза кликнув по нему. Здесь выбираем пункт «градиентная заливка» и применяем к слою «Тень» любой градиент.
Практически тень готова, но чтобы она не выглядела так резко — ее надо смягчить. Для этого воспользуемся фильтром «размытие по гауссу«.
В установках ставим такое значение, какое устраивает. В конечном итоге получаем следующее:
Получилось довольно неплохо. Это вариант, когда тень лежит за текстом, но если нужно тень положить перед текстом? Делаем все так же.
Дублируем основной слой и работаем с ним. Но, теперь его надо будет отразить по вертикали. Для этого выбираем соответствующий пункт в меню «трансформирование«.
В результате увидим один текст на другом, но в перевернутом виде.
Идем в меню «трансформирование-масштабирование«. Появится рамка, за которую перемещаем вниз перевернутый слой и ставим его точно под буквы оригинала.
Затем здесь же выбираем пункт «перспектива» и раздвигаем за любой угол тень в стороны.
Величину тени текста через масштабирование можно уменьшить. После, как и в предыдущих вариантах уменьшаем заливку до 0%, в свойствах слоя ставим наложение градиента.
И изменяем параметры градиента, выбрав какой нужен, а так же уменьшаем непрозрачность, чтобы тень не была слишком яркой. В результате получаем:
Вот и все, тень готова. Аналогично можно сделать любую тень в любом направлении и любого цвета. Успехов в творчестве!
CSS3. Работа с тенями. Часть 2
Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.
Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.
text-shadow vs box-shadow
Если вы вернетесь к разделу про синтаксис box-shadow в первой части, вы найдете такое описание:
Где последнее разворачивается в полном виде в такую конструкцию:
Спецификация CSS3 Text, описывая text-shadow, говорит буквально следующее:
В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:
Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.
text-shadow
Сдвиги и цвет
Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4): 
Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):
Отрицательные значения сдвигают вправо и вверх (1.2):
Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:
Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.
Размытие
Третий линейный параметр описывает радиус размытия тени (2.1–2.4): 
В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.
В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:
Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:
(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)
Растяжение и сжатие
Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.
Для увеличения тени spray-distance должен быть положительным (3.1):
Для уменьшения — отрицательным (3.2):
Если отступ тени нулевой, ее можно использовать для обводки текста (3.3):
Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spray-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 "[css3-text] Support the spread radius in text-shadow" в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста 😉
И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:
Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).
Множественные тени
Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):
Начиная с простейшей дублированной обводки (4.1):
И возможности смещения теней в разные стороны (4.2):
Продолжая эффектами типа неона (4.3):
И немного более изощренным вариантом (4.4)
Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):
Эмуляция растяжения
Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):
Можно было бы применить одновременно несколько теней, сдвинутых в разных направлениях (4.7):
Однако, если приглядеться, между ними заметна разница. Также важно понимать, что такой прием ограничен в применимости: он не только менее точен, но и отрицательно сказывается на производительности отрисовки страницы.
Интересные примеры
Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.
Начнем с классической радуги (5.1): 
Двойная тень для стрелки (5.2):
Традиционная огненная тень (5.3):
Традиционный «letter-press», — здесь также важен контраст с фоном (5.4):
Не менее традиционный 3d-text (5.5):
Двойная тень для винтажного эффекта (5.6)
Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)
Применение отдельной буквы для псевдо-класса ::first-letter (5.8)
Интерактив
Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: "Hands-on: text-shadow".
Internet Exlorer
text-shadow поддерживается в IE10+.
И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми правилами свойствами CSS и их одновременное использование может приводить к неожиданным последствиям.
text-shadow
CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations . Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.
Интерактивный пример
Syntax
Это свойство определено как разделённый запятыми список теней.
Каждая тень определена как два или три значения <длина> , за которыми следует необязательное значение <цвет> . Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y> . Третье необязательное значение <длина> задаёт <радиус-размытия> . Значение <цвет> определяет цвет тени.
Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.
Значения
Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.
Обязательные. Эти величины <длина> задают расстояние тени от текста. <смещение-x> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <смещение-y> определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в 0 , тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <радиус-размытия> .
Необязательный. Это величина <длина> . Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0 , в случае когда параметр не определён.
Урок за 60 Секунд: Как Добавить Тень к Тексту в PowerPoint
Andrew Childress Last updated Sep 14, 2017
Тень — это та функция, которая действительно поможет красиво выделить текст на вашем слайде. Сегодня, я научу вас, как использовать этот текстовый эффект при работе в PowerPoint.
У нас так же есть полезное дополнение к этому уроку. Загрузите нашу Бесплатную электронную Книгу: Полное Руководство По Созданию Отличных Презентаций (англ.).Скачайте ее прежде чем продолжите читать.
Как Быстро Добавить Эффект Тень к Тексту в PowerPoint
Примечание: Посмотрите этот короткий видеоурок или следуйте за описанием к видео ниже.
1. Выберите Эффект Тень, чтобы Применить Его к Вашему Тексту
Это название слайда — подходящий пример, чтобы оценить возможности использования эффекта тень с текстом. При выделенном тексте, я захожу в меню Формат, в верхней панели.
Тут есть парочка опций, как я могу применить эффект тень к тексту. И мой любимый вариант — это щелкнуть на кнопке с выпадающим меню Текстовые Эффекты.
В выпадающем меню Тень, я могу выбрать один из стилей. Стили, которые мы можем выбирать, отличаются в первую очередь тем, как падает тень.
Варианты Текстового Эффекта Тень в PowerPoint.
2. Применение Текстового Эффекта Тень в PowerPoint
Давайте попробуем один из эффектов. Теперь когда я использовал один из эффектов тени, текст стал действительно хорошо выделяться на фоне.
Применение текстового эффекта тень.
Завершаем работу!
Вы всегда может вернуться и попробовать другие стили, снова зайдя в меню и выбрав другой стиль тени. Этот эффект очень легко добавить в PowerPoint и вам не нужно открывать стороннее приложение, чтобы добавить стилизацию к тексту.
Каждый стиль изменяет направление или величину тени. Этот эффект, действительно позволяет выгодно выделить ваш текст на общем фоне.
Еще Больше Отличных Уроков по PowerPoint на Envato Tuts+
Узнайте больше из наших уроков по PowerPoint и коротких видеоуроков на Envato Tuts+. У нас есть целый ряд материалов по PowerPoint, которые помогут вам создать отличную презентацию:
Вы так же можете найти отличные шаблоны PowerPoint презентаций с коммерческим дизайном на GraphicRiver или на Envato Elements. Или, посмотрите на нашу подборку лучших дизайнов для Microsoft PowerPoint:
Создавайте Отличные Презентации (Бесплатная Электронная Книга PDF)
У нас есть так же отличное дополнение к этому уроку, которое проведет вас через весть процесс создания презентации. Узнайте как написать вашу презентацию, сделайте профессиональный дизайн, и подготовьтесь к впечатляющему докладу.
Загрузите нашу новую электронную Книгу: Полное Руководство по Созданию Отличных Презентаций. Она доступна совершенно бесплатно по подписке на новостную рассылку Tuts+ Business Newsletter.