Стеклянные эффекты входят в число популярных эффектов и никогда не выйдут из моды. В этом уроке вы узнаете, как создать стильный и элегантный стеклянный текст, используя только Стили слоя (Layer Styles) программы Photoshop.

В данном уроке вы найдёте пару подсказок, которые помогут улучшить эффект при использовании других типов и размеров шрифтов.

Итоговый результат

Исходные материалы:

Шаг 1

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

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

Итак, начнём с создания нового документа 850 x 550 px. Переместите текстуру Боке на наш рабочий документ, расположив поверх слоя с задним фоном. Примените масштабирование к текстуре Боке при необходимости, а затем вы можете объединить слой с текстурой Боке и слой с задним фоном.

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

Итак, напишите текст заглавными буквами, используя шрифт Rialto, размер шрифта 220 pt.

Уменьшите Заливку (Fill) слоя с текстом до 0 %, а затем трижды продублируйте слой с текстом, таким образом, у вас получится всего 4 слоя с текстом.

Шаг 2

Дважды щёлкните по оригинальному слою с текстом, чтобы применить следующие Стили слоя (Layer Style):

Тиснение (Bevel and Emboss)

Размер (Size): 27
Уберите галочку в окошке Глобальное освещение (Use Global Light)
Угол (Angle): 149
Высота (Altitude): 58
Контур глянца (Gloss Contour): Cone - Inverted
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим подсветки (Highlight Mode) - Непрозрачность (Opacity): 100%
Режим тени (Shadow Mode) - Непрозрачность (Opacity): 3%

Вы можете уменьшить значение непрозрачности режима подсветки, если вы захотите создать более нежный эффект.

Контур (Contour)
Поставьте галочку в окошке Сглаживание (Anti-aliased).

Обводка (Stroke)

Размер (Size): 1
Тип обводки (Fill Type): Градиент (Gradient)
Угол (Angle): 90
Градиент (Gradient): stainless steel 10x - но вы также можете попробовать другие градиенты, выбрав из набора градиентов CHROMES.grd.

Внутренняя тень (Inner Shadow)
Непрозрачность (Opacity): 25%

Увеличивая значение Непрозрачности (Opacity) сделает эффект более характерным.

Тень (Drop Shadow)

Непрозрачность (Opacity): 19%
Уберите галочку в окошке Глобальное освещение (Use Global Light)
Угол (Angle): -143
Смещение (Distance): 18

Поиграйте с параметром Угол (Angle), чтобы изменить угол положения тени. Вы также можете щёлкнуть мышкой по тени + удерживая кнопкой мыши тень + потянуть тень в нужное направление, до того, как нажать кнопку OK.

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

Шаг 3

Дважды щёлкните по первому дубликату слоя с текстом, чтобы применить следующие Стили слоя (Layer Style):

Тиснение (Bevel and Emboss)

Размер (Size): 10
Уберите галочку в окошке Глобальное освещение (Use Global Light)
Угол (Angle): 63
Высота (Altitude): 69
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим подсветки (Highlight Mode) - Непрозрачность (Opacity): 100%
Режим тени (Shadow Mode) - Непрозрачность (Opacity): 0%

Вы можете потянуть за маленький крестик или кружок внутри маленького кружка, чтобы изменить значения опции Угол (Angle) и Высота (Altitude) и вы можете сразу увидеть, какие изменения появляются. Выберите значения, которые вам понравятся, а затем нажмите OK.

Это простой шаг, он добавляет больше блеска на верхние края текста.

Шаг 4

Дважды щёлкните по второму дубликату слоя с текстом, чтобы применить следующие Стили слоя (Layer Style):

Тиснение (Bevel and Emboss)

Глубина (Depth): 150%
Размер (Size): 15
Уберите галочку в окошке Глобальное освещение (Use Global Light)
Угол (Angle): -129
Высота (Altitude): 58
Контур глянца (Gloss Contour): Log
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим подсветки (Highlight Mode) - Непрозрачность (Opacity): 100%
Режим тени (Shadow Mode) - Непрозрачность (Opacity): 0%
Примечание переводчика: если у вас нет в наборе соответствующего контура глянца, то вы можете самостоятельно отредактировать контур.

Контур (Contour)

Контур (Contour): Half Round
Поставьте галочку в окошке Сглаживание (Anti-aliased).

Данный шаг добавляет блеск и глянец на нижние края, а также добавляет к тексту ощущение 3D.

Шаг 5

Дважды щёлкните по третьему дубликату слоя с текстом, чтобы применить следующие Стили слоя (Layer Style):

Тиснение (Bevel and Emboss)

Размер (Size): 21
Уберите галочку в окошке Глобальное освещение (Use Global Light)
Угол (Angle): -135
Высота (Altitude): 69
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим подсветки (Highlight Mode) - Непрозрачность (Opacity): 100%
Режим тени (Shadow Mode) - Непрозрачность (Opacity): 0%

Контур (Contour)

Контур (Contour): Cone - Asymmetrical
Поставьте галочку в окошке Сглаживание (Anti-aliased).

Данный шаг добавляет блеск в центр текста. Поиграйте с различными значениями настроек Угол (Angle) и Высота (Altitude) параметра Тиснение (Bevel and Emboss), чтобы получить отличительный результат.

Шаг 6

Данный шаг выборочный, но он завершает эффект. Создайте новый корректирующий слой Градиент (Gradient) через нижнюю панель инструментов.

Создайте градиент от прозрачного до заливки цветом, цвет #7c7c7c. Установите Стиль (style) на Радиальный (Radial), а Масштаб (Scale) на 500.

Поменяйте режим наложения для корректирующего слоя Градиент (Gradient) на Линейный затемнитель (Linear Burn), непрозрачность слоя 30%.

Подсказка: Данный эффект 100% масштабируется. Поэтому, вы можете зайти в меню Изображение - Размер изображения (Image > Image Size), не забудьте поставить галочку в окошке Масштабировать стили (Scale Styles), а затем изменить размеры изображения, сделав его либо большим, либо маленьким на своё усмотрение.

Для более больших размеров, вы можете скачать полный размер текстуры Боке, а затем поменять задний фон, чтобы избежать пикселизации.

И мы завершили урок. Надеюсь, вам понравился данный урок.

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

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

Переведите текст в растр (правой кнопкой по слою с текстом и в списке выберите Rasterize Type ).

2. Делаем текст прозрачным. Для этого используем стеклянный стиль

Для каждого стиля не забывайте менять Scale Effects (нажимаем правой кнопкой мыши на букву f у того слоя, к которому стиль применили) , ведь конкретный стиль привязан к определенному размеру. Туда-сюда ползунок и стиль встанет как вам надо.

3. Делаем обводку надписи. Выделяем буквы (щелчок по слою с буквами с нажатой клавишей Ctrl – вокруг букв появится выделение) . Создаем новый слой и идем в меню Edit и выбираем Stroke . Выберите необходимую ширину обводки, цвет опять же не имеет значения и расположение обводки – я выбираю снаружи – Outside . Нажмите Ok .

На новом слое появится созданная обводка. Снимите выделение (Ctrl+D ).

4. Применяем к обводке стиль. Я использовала Серебряный стиль

5. Теперь занимаемся «наполнением» текста. Это самая трудоемкая и долгая работа. Для начала откроем картинку, которую будем использовать для «начинки».

6. Активизировав инструмент Move перетаскиваем картинку в документ с текстом и слой с ней располагаем ниже слоя со стеклянными буквами.

7. Теперь нам нужно удалить начинку за текстом. Для этого проделаем несколько действий:

• Выделим слой с текстом (щелчок по слою с нажатой клавишей Ctrl )
• Используем Select > Inverse чтобы выделить область с "начинкой" за текстом
• Теперь в окне "Layers " выделяем слой с "начинкой" (нажимать на Ctrl не надо!)
• Нажимаем на клавишу Del

8. Применим к нашей "начинке" Layer Style > Bevel and Emboss , чтобы она казалась объемной. Со значениями можно поэкспериментировать.

9. В принципе, уже можно оставить наши буквы такими. Такая надпись мне нравится больше! Но можно их сделать полузаполненными. На Ваш вкус! ;-)

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

Стеклянные спецэффекты почти во все времена дизайна считаются актуальными и востребованными, поэтому и мы не можем обойти эту тему. В данном уроке мы попробуем создавать стеклянный, прозрачный текст, и помогут нам в этом стили слоя (Layer Styles) имеющиеся в арсенале Photoshop.

То что мы хотим получить:

Используемые материалы:

1 шаг:

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

Создаём документ размером 850 x 550 px, перемещаем в него текстуру с боке, размещаем её над слоем с задним фоном. Используем масштабирование для подгонки к границам, затем объединяем оба слоя.

Ещё один важный момент – выбор шрифта. Наилучший вариант – полужирный курсив тонкими линиями. Определившись с ним, выводим нужную надпись заглавными буквами, в нашем примере это шрифт Rialto, 220 pt.

Минимизируем Заливку (Fill) слоя с текстом до нуля, после чего создаём три копии слоя с текстом, чтобы в итоге получить 4 слоя.

Шаг 2

Кликаем два раза по оригиналу с текстом и применяем такие Стили слоя (Layer Style):

• Размер (Size) - 27
• Угол (Angle) - 149
• Высота (Altitude) - 58
• Контур глянца (Gloss Contour) - Cone – Inverted
• Режим тени (Shadow Mode) – Непрозрачность (Opacity) - 3%
• Уменьшить непрозрачность можно по желанию.

• Ставим галочку в окне Сглаживание (Anti-aliased)

Для параметра Обводка (Stroke):

• Размер (Size) - 1
• Тип обводки (Fill Type) - Градиент (Gradient)
• Угол (Angle) - 90
• Градиент (Gradient) -- stainless steel 10x

Для параметра Внутренняя тень (Inner Shadow):

• Непрозрачность (Opacity) - 25%

Задирая значение Непрозрачности (Opacity) мы сделаем эффект более выраженным.

Для параметра Тень (Drop Shadow):

• Непрозрачность (Opacity) - 19%
• Забираем галочку в окне Глобальное освещение (Use Global Light)
• Угол (Angle) – минус 143
• Смещение (Distance) - 18

По-экспериментируем с параметром Угол (Angle), чтобы настроить угол искривления тени, также можно щёлкнуть мышкой по ней с одновременной тягой тени в нужную сторону.

На данном этапе, эффект начинает получать конкретные очертания, но это ещё далеко не всё.

Шаг 3

Два раза кликаем по первой копии слоя с текстом, и применяем к нему такием Стили слоя (Layer Style)

Для параметра Тиснение (Bevel and Emboss):

• Размер (Size) - 10
• Забираем галочку в окне Глобальное освещение (Use Global Light)
• Угол (Angle) - 63
• Высота (Altitude) - 69
• Режим подсветки (Highlight Mode) – Непрозрачность (Opacity) - 100%

Этим мы добавим надписи большего блеска, особенно по границам.

Шаг 4

Два раза кликаем по следующей копии текста, и активируем к нему такие Стили слоя (Layer Style).

Для параметра Тиснение (Bevel and Emboss):

• Глубина (Depth) - 150%
• Размер (Size) - 15
• Забираем галочку в окне Глобальное освещение (Use Global Light)
• Угол (Angle) – минус 129
• Высота (Altitude) - 58
• Контур глянца (Gloss Contour) - Log
• Выставляем галочку в окне Сглаживание (Anti-aliased)
• Режим подсветки (Highlight Mode) – Непрозрачность (Opacity) - 100%
• Режим тени (Shadow Mode) – Непрозрачность (Opacity) - 0%

Для параметра Контур (Contour):

• Контур (Contour) - Half Round
• Ставим галочку в окне Сглаживание (Anti-aliased)

Шаг 5

Два раза кликаем по третьей копии слоя с текстом, чтобы активировать к нему такие Стили слоя (Layer Style).

Для параметра Тиснение (Bevel and Emboss):

• Размер (Size) - 21
• Убераем галочку в окне Глобальное освещение (Use Global Light)
• Угол (Angle) – минус 135
• Высота (Altitude) - 69
• Выставляем галочку в окне Сглаживание (Anti-aliased)
• Режим подсветки (Highlight Mode) – Непрозрачность (Opacity) - 100%
• Режим тени (Shadow Mode) – Непрозрачность (Opacity) - 0%

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

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

Все картинки кликабельны

2. Выбираем инструмент (текст), необходимый шрифт и делаем надпись. Документ у меня формата А4, а размер шрифта я выбрала 320. Это важно, так как делать эффект стеклянных букв мы будем при помощи стилей. Эффекты стиля привязаны к слою и изменяются вместе с ним, т.е. при изменении размера стеклянных букв их внешний вид будет меняться, поэтому ваш результат может немного отличаться от моего.
Итак, надпись создана.

Слой с текстом должен быть активным. Выбираем его в панели Layers.

3. Далее выполняем команды Layer / Layer Style и тем самым вызываем окно работы со стилями. Так же мы можем его вызвать, дважды кликнув по слою мышкой.
Теперь остается последовательно выполнить необходимые настройки. Чтобы получить эффект - стеклянные буквы .

Drop Shadow / эффект падающей тени.

Inner Shadow / эффект внутренней тени.

Inner Glow / эффект внутреннего свечения.

Bevel and Emboss / эффект объема.

Contour / эффект контур.

Stroke / эффект обводка.

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

Если у вас нет времени каждый раз вручную выставлять настройки эффектов стиля, то можете скачать на сайте готовые . В архиве имеется текстовый документ по установке стилей в программу Adobe Photoshop.

Еще один перевод урока от известного автора и дизайнера проекта — Colis. В этом уроке он
покажет и расскажет способы создания эффекта стекла с помощью стилей в Photoshop. Colis
мастер веб дизайнов и знает смысл в создании красивых элементов, который приятно смотрятся
на экране вашего монитора. На месте Colisa я бы использовал маски слоя, заместо прямой
заливки градиента и обрезки бликов. Даже в этом легком деле не нужно делать необратимые
изменения в дизайне. Но хватит длинных прелюдий.

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

Итак, создаем фон

Вначале нарисуем мягкий и приятный задний фон рабочей области. Не смотря на то, что главный
градиент в Фотошопе двухцветный, вы сможете создать любое кол-во цветов. Для этого просто
надо выбрать инструмент Gradient Tool и нажать по полоске градиента вверху меню настоек. Я
добавил всего три цвета. Вариант зеленого и переход к двум оттенкам синего цвета.

Разноцветный градиент создает задний фон более своеобразным. Также можно
воспользоваться радиальным градиентом. Вот номера цветов: #2e5b15 #103533 #090e13

Затем, пишем текст

Нам нужна любая буква. Я выбрал букву Q. Она достаточно красиво смотрится в стиле serif.
Шрифт такой: Adobe Caslon Pro, он входит основным в Фотошопе. Цвет моей буквы, очень
приятный зелено-голубой. Номер цвета #41a993

Стили для стеклянной буквы

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

Снизил невидимость слоя через Fill где-то на 20%. Fill создает невидимый слой, но никак не стили
слоя.

Затем, создал большой ряд стилей, которые бы имитировали объемность моей буквы и блики. Так
же я использовал ряд разных режимов наложения к моим стилям.

Если у вас множество объектов вы сможете с легкостью скопировать стиль слоя с одного на другой
объекта. Для этого нужно просто нажать правой кнопкой мыши по слою и из меню нажать Copy
Layer Styles .

Стеклянная буква

Нужно обрать внимание на то, что я сделал стиль так, что свет на стеклянную букву исходит снизу.

Создаем блики

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

Для того, чтобы задать градиент нужно выбрать инструмент Gradient Tool и нажать по полоске
градиента в панели настроек вверху. Ранее, мы делали подобное в нашем уроке. В окне
редактора градиента вы увидите ползунки градиента. Верхний задает степень прозрачности, а
нижний задает цвет.

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

Затем снова нажимаем CTRL и кликаем по нашему слою буквы, для того чтобы загрузить новое
выделение. Снова делаем новый слой и заливаем новый градиент, но уже с другой стороны. Приглушим его, сделав невидимость 40% Opacity в настройках слоя.

Затем, на этом же нашем слое нужно выбрать инструмент Elliptical Marquee Tool и создайте область выделения. Нажмите снова CTRL+SHIFT+I , для того чтобы инвертировать его и нажмите Select >Inverse . Затем, просто удалите выделенную часть блика.

Дополнительные блики стекла

Теперь стекло красиво блестит, добавим совсем немного дополнительных бликов. Нужно выбрать
инструмент Polygon Tool , на панели ваших настроек инструментов, затем выбираем настройку Star
и 99% . Вы так же можете нарисовать звезды с режимом Fill Pixels на первом слое, но лучше всего, конечно работать с режимом Layer Shapers и векторными фигурами.

Окончательный вариант

Вот окончательный вариант нашей с вами стеклянной буквы в Фотошопе.