Тень для текста

Создаём эффект угасания длинной тени и дорабатываем надпись

В заключительной части урока мы создадим эффект угасания длинной тени по мере её приближения к нижней границе изображения. Для этого будем использовать маску слоя. А также акцентируем надпись с помощью добавления отбрасываемой тени.

Шаг 1

а) Сделайте правый клик на теневом слое и выберите Добавить маску слоя.

б) В окне параметров маски выберите Белый цвет (полная непрозрачность).

Нажмите Добавить.

Шаг 2

а) Возьмите инструмент Градиент и настройте его следующим образом:

Цвет переднего плана – Чёрный;
Градиент – Основной в прозрачный;
Форма – Линейная.

б) Протяните линию градиента снизу-вверх, как показано на скриншоте – от нижней границы холста до верхней кромки буквы. Зажмите клавишу Ctrl, чтобы сохранить линию градиента во время протяжки прямой.

Сведите непрозрачность слоя с маской до 60,0 px.

Текст с угасающей длинной тенью будет выглядеть примерно так.

Переключитесь на верхний слой с текстом белого цвета.

Выберите в меню Фильтры – Свет и тень – Отбрасываемая тень. Оставьте настройки фильтра по умолчанию и нажмите ОК.

Активируйте слой Drop Shadow и уменьшите непрозрачность отбрасываемой тени до 30,0 px.

Шаг 7

В завершении, выберите в меню Изображение – Свести изображение.

Оцените готовый результат:

На этом урок по созданию текста с длинной тенью в GIMP закончен.

Текстовые тени в IE

Хотя IE вплоть до 8-й версии не понимает text-shadow, у него хватает своих «примочек». В частности для создания теней есть фильтр dropShadow (). Чтобы тени появились, у элемента должен быть установлен layout. Устанавить можно несколькими способами:

задав элементу свойства display: block + высоту(height) или ширину (width))
задав элементу position: absolute
задав float: left/right
задав zoom: 1

h1 {
	filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true");
	zoom: 1;
}

Казалось, что можно кричать «Ура!!!» и радоваться жизни, но посмотри, как этот фильтр в реальности работает:

вот так отобразится текст, если к нему применить фильтр dropShadow

Для тех кто не понял, по пуктам недостаки этого фильтра:

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

Такой результат не приемлем в реальных проектах. Непонятно кто и как принял такую работу у разработчиков.

Kilian Valkhof предложил использовать эмуляцию тени:

не применять фильтр непосредственно к тексту
использовать вместо dropShadow и shadow комбинацию фильров glow и blur

Это позволит избежать искажения текста и сделать тень более гибкой.

<h1>Тестовый заголовок <!--><span>Тестовый заголовок</span><!--></h1>

h1 {
	text-shadow: 3px 3px 3px #cccccc;
	position: relative;
	zoom: 1;
	color: #000;
}
h1 span {
	position: absolute;
	left: -3px;
	top: -3px; 
	z-index: -1;
	filter:
		progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1)
		progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='true')
	;
	zoom: 1;
}

Но даже с таким подходом, все равно остается ряд недостатков:

несемантический код — лишний элемент, да еще и с дублированием текста скажется не лучшим образом на логичной структурности содержимого, СЕО оптимизации. Эту проблему можено решить с помощью javascript, который будет вставлять для IE дополнительный элемент при загрузке страницы
не соотвествие отображению в других браузерах (которые понимают text-shadow) — фильтры позволяют проэмулировать тень, с минимальными настройками. Схожести тени с другими браузерами далеко не всегда получиться добиться
меньшая гибкость — фильтры не дадут всех возможностей text-shadow, например не получится реализовать множественные тени

Для создания теней для IE можно воспользоваться javascript (не в первый раз javascript спасает)

Множественная текстовая тень

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Пример блока объявлений для множественной тени:

.multipleShadow {
text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */	
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример создания множественной текстовой тени</title>
<style> 
.test {
text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */
line-height: 150px; /* задаем высоту строки */
text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red; /* используем 8 теней в одном объявлении */
} 
.test2 {
text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5); /* устанавливаем тень смещенную вправо */
} 
.test3 {
text-shadow: -6px 6px 2px rgba(0, 255, 0, 0.5); /* устанавливаем тень смещенную влево */
} 
.test4 {
text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5); /* используем только радиус размытия, получая неоновый эффект */
} 
</style>
</head>
	<body>
		<div class = "test">Радужный текст</div>
		<div class = "test2">Текст с добавленной тенью</div>
		<div class = "test3">Текст с добавленной тенью</div>
		<div class = "test4">Текст с добавленной тенью</div>
	</body>
</html>

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

Для последнего блока мы установили радиус размытия 6px, а значения горизонтальной и вертикальной тени указали 0px, что придает некий неоновый эффект.

Рис. 68а Пример создания множественной текстовой тени.

Тень в иллюстрации

Если иллюстрация векторная и плоская, тень обычно не нужна. На многих современных сайтах, например на промостранице Notion, иллюстрации простые, и тени на них смотрелись бы странно.

Здесь иллюстрации без теней выглядят хорошо. Скриншот: сайт Notion

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

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

Книги и видео, которые помогут узнать больше о тенях

Книги:

«Игра света и тени для художников», Бёрн Хогарт.
«Искусство цвета», Иоханнес Иттен.
«Основы учебного академического рисунка», Николай Ли, — об основах перспективы, построения объектов, падающих теней, композиции.
Статья Lights and Shadows Бартоша Цехановского — о свете, тенях и их природе. На английском.

Видеоуроки:

на английском,
с русскими субтитрами.

Больше о Figma

Выравнивание в Figma: Auto Layout
Как создать тёмную тему в Figma
Как работать с модульной сеткой в Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Как Быстро Добавить Эффект Тень к Тексту в PowerPoint

Примечание: Посмотрите этот короткий видеоурок или следуйте за описанием к видео ниже.

1. Выберите Эффект Тень, чтобы Применить Его к Вашему Тексту

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

Тут есть парочка опций, как я могу применить эффект тень к тексту. И мой любимый вариант — это щелкнуть на кнопке с выпадающим меню Текстовые Эффекты.

В выпадающем меню Тень, я могу выбрать один из стилей. Стили, которые мы можем выбирать, отличаются в первую очередь тем, как падает тень.

Варианты Текстового Эффекта Тень в PowerPoint.

2. Применение Текстового Эффекта Тень в PowerPoint

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

Применение текстового эффекта тень.

Завершаем работу!

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

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

Создавайте Отличные Презентации (Бесплатная Электронная Книга PDF)

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

Загрузите нашу новую электронную Книгу: Полное Руководство по Созданию Отличных Презентаций. Она доступна совершенно бесплатно по подписке на новостную рассылку Tuts+ Business Newsletter.

Озаглавим наш слайд и напишем комментарии к рисункам.

Раздел «Шрифт».

Поработаем с заголовком:

Изменим шрифт.

Изменим размер шрифта.

Чтобы изменить шрифт либо размер для конкретного слова или словосочетания, просто выделяете его мышкой и выполняете инструкцию выше.

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

Кнопки «Полужирный», «Курсив», «Подчеркнутый» и «Тень текста» служат для внешнего изменения текста. Например, применим к заголовку курсив, подчеркнем его и сделаем тень. Если вы часто используете эти кнопки, для быстроты работы есть их аналоги на клавиатуре (CTRL+B, CTRL+I, CTRL+U).

Кнопка «Межзнаковый интервал» устанавливает расстояние между буквами и цифрами. Применим опцию к заголовку.

Текст можно зачеркнуть с помощью кнопки «Зачеркнутый». Зачеркнем наш заголовок.

Кнопка регистр делает все буквы в выделенном слове или предложении либо заглавными, либо строчными. Сделаем заглавными заголовок слайда.

Кнопка «Цвет текста» задает цвет для выделенного фрагмента текста. Поработаем над заголовком.

Если вы решили отменить все действия над текстом и вернуть его к оригинальному состоянию, используйте кнопку «Удалить все форматирование». Перед этим не забудьте выделить нужный фрагмент.

Раздел «Абзац».

Здесь есть кнопки создания маркированного и пронумерованного списка. Создадим оба списка.

Следующие кнопки меняют отступ элемента списка. Поменяем отступ в двух списках.

Можно увеличить или уменьшить междустрочный интервал. Часто используют для экономии места или чтобы «размазать» текст, создать видимость заполненности.

Есть кнопки для выравнивания текста по горизонтали и вертикали, можно поделить текст на несколько колонок, изменить написание (справа налево) или преобразовать фрагмент текста в объект SmartArt.

Раздел «Рисование».

Можно вставлять в любое место слайда готовые фигурки. Разместим несколько на нашем слайде.

Кнопка «Заливка фигуры» позволяет менять фон для текстового блока: выполнять однотонную заливку, ставить картинку в качестве фона, создавать градиент или вставлять текстуру. Для примера сделаем однотонную заливку для заголовка (желтый цвет).

Кнопка «Контур фигуры» задает рамку вокруг выбранно блока. Кнопка «Эффекты фигур» добавляет свечение, отражение, рельеф к блоку.

Раздел «Редактирование».

Здесь 3 кнопки: «Найти», «Заменить» и «Выделить». Можно произвести поиск по тексту, поиск и замену текста написанным фрагментом другого текста, выделить все блоки. Для примера выделим все блоки на нашем слайде.

Теперь, когда вы знакомы с основными функциями работы с текстом, создайте собственый слайд с текстовыми блоками — для закрепления материала.

Добавление тени за текстом PowerPoint может сделать текст выделенным и сделать весь слайд более удобным для чтения. По этой причине многие шаблоны PowerPoint используют тени. Тисненый текст выглядит так, как будто он выточен в камне. PowerPoint достигает эффекта рельефа, добавляя вместо текста темную тень, а не темную тень, которая появляется под текстом при создании теневого текста. Вы не можете создать текст, который будет затенен и рельеф; вы можете использовать только один эффект или другой.

Описание свойства text-shadow

Рассмотрим схематически составные части (параметры), с помощью с которых работает данное правило:

X — это число, отвечающее за сдвиг по воображаемой горизонтальной оси прямоугольной системы координат;
Y — это число, отвечающее за сдвиг по воображаемой вертикальной оси прямоугольной системы координат;
коэффициент размытия — это параметр, отвечающий за то, какое число пикселей теневой области подвергнется блюрированию (размыванию) .

Следует отметить, что тень всегда находится под текстовым содержимым и не наезжает на него.

text-shadow
Значения:
смещение по горизонтали	Параметр задает горизонтальное смещение теневой области. Указываемое числовое значение может быть как больше нуля, так и меньше. Указывать обязательно.
смещение по вертикали	Параметр задает вертикальное смещение теневой области. Прописываемое числовое значение может быть как больше нуля, так и меньше. Указывать обязательно.
размытие	Указывается для задания коэффициента размывания тени. Чем больше задаваемый параметр, тем больше степень размытия теневой области. Указывать не обязательно
цвет	Если этот параметр не указывать, то он автоматически приравнивается к цвету текста. Задавать можно следующие форматы цветов: HEX, RGB, RGBA (подробнее про цвета — http://paratapok.ru/frontend/4726_css-cveta/). Указывать не обязательно
	Установка этого параметра приведет к удалению (выключению) тени у текста. Является начальным значением.
	Будет установлено в начальное значение.
	Унаследовать правило от родителя.

Пример кода

Пример отображения

Рекламный слоган

Тень в интерфейсах

Тени помогают выделить элемент интерфейса, показать его интерактивность или состояние: тень под кнопкой показывает, что на неё можно нажать. Использовать тени необязательно — также элемент можно выделить с помощью цвета, размера, формы.

Источник света

Значения X и Y зависят от источника света. Например, если источник стоит в левом верхнем углу, тень будет падать от предмета в правый нижний угол.

Обычно в интерфейсах на все элементы «светит» один источник света. Часто он располагается в верхнем левом углу или просто сверху.

Если источник в верхнем левом углу, X и Y должны быть больше нуля. Если просто сверху — X равен нулю, а Y больше нуля: