Текст на запотевшем стекле

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

Почти вся работа заключается в следующем:
1)Обработка слоя под «запотевшее стекло»
2)Создание контура надписи
3)Удаление участка фото под надписью
И так нам надо открыть картинку в Photoshop и копировать слой-фон. Есть несколько способов это сделать, например: через опции верхнего меню, нажатием Ctrl+J или перетаскивание иконки слоя в палитре слоев на специальный значок-пиктограмму.


Следующее что нам нужно это размыть и сделать «мутным» изображение верхнего слоя, с которым будут производиться дальнейшие манипуляции. Для этого применяются фильтры Photoshop.
Фильтр: «Фильтр» - «Шум» - «Добавить шум» (Add Noise).


Степень шума выбираем около 25%. Распределение - по Гауссу. Монохромный.


Получается примерно так


Фильтр для смягчения шума: «Фильтр» - «Размытие» - «Размытие в движении» (Motion Blur).


Направление размытия 90 градусов (как падает дождь). Смешение - около 30 пикселей.


После этих действий моё фото выглядит примерно так


Наш следующий этап - создание надписи на фотографии. Для этого нужен инструмент «Горизонтальный текст» (Horizontal Type).
Примечание: под некоторыми значками на панели инструментов прячется несколько опций. Один из способов добраться до скрытой - нажать на значок и удерживать левую клавишу мыши.

Выбираем подходящий шрифт. Например, Comic Sans MS, который установлен по умолчанию в системе Windows (и который люто ненавидят дизайнеры).
Почти все настройки шрифта можно найти в панели настроек под верхним меню Photoshop: название шрифта, его начертание (выбираем bold - полужирный), размер. Цвет надписи в данном случае значения не имеет. Затем, чтобы сделать текст еще более жирным, открываем палитру символов. Кнопка справа вверху или...


…или справа на панели окон Photoshop. Нужно нажать кнопку «Псевдожирный» (Faux Bold).

Теперь набирается текст. Затем нужно выбрать инструмент «Перемещение» (Move) для дальнейшей работы со слоями (и масками).


Держим нажатой клавишу Ctrl и кликаем левой кнопкой мыши на иконку копии фонового слоя (того, к которому применялись фильтры). Вокруг букв должны побежать «муравьишки» - создана маска текстового слоя - контур надписи.


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


Верхний слой нужно удалить или скрыть (нажать на «глазик» слева от иконки слоя).

Убираем выделение через опцию верхнего меню «Выделение/Отменить выделение» или используя комбинацию клавиш Ctrl+D.
Иногда этого бывает достаточно для получения нужного эффекта


Чтобы сделать надпись более заметной, применяем к верхнему слою стиль «Тиснение» (или «Скос и рельеф», или Bevel and Emboss). Стиль можно поменять в верхнем меню «Слои/Стиль слоя» или в палитре слоев, нажав на пиктограмму стилей.


В окне настроек тиснения можно выбрать его стиль, глубину, направление и так далее. По вкусу. Особое внимание нужно обратить на параметр «Контур глянца» (Gloss Countour).


Пример моих настроек


Вот что у меня вышло, но все это на скорую руку, у вас может быть все намного лучше

Иногда можно уменьшить непрозрачность верхнего слоя, если «пейзаж за окном» плохо виден.

Если вам нужно сделать оригинальную открытку или просто сделать надпись на фотографии, то вы можете успешно использовать эффект запотевшего стекла .
Для начала откройте файл. Воспользуйтесь командой File – Open . Примените к изображению фильтр Blur - Gaussian Blur. Выберите подходящие настройки. В меню Filter выберите Blur - Motion Blur .

Кликнув правой кнопкой мыши по слою, в контекстном меню выберите команду Duplicate Layer. В меню Image выберите команду Adjustments - Hue saturation . Уменьшите показатель Saturation, чтобы изображение стало менее насыщенным. Добейтесь нужного оттенка. Затем создайте новый слой. Нажмите кнопку Create a new layer на панели слоев. Нажмите клавишу D, чтобы выбрать в качестве основного цвета черный, а в качестве дополнительно белый.
Примените фильтр Render – Clouds.
Измените показатель Opacity на 50 процентов. Кликнув правой кнопкой мыши по слою, выберите команду Merge down, чтобы соединить два слоя. В меню Filter выберите Blur - Motion Blur . Сделайте вертикальное размытие. Показатель Distance установить на значении 30. Чтобы усилить эффект запотевшего окна , воспользуйтесь инструментов Smudge tool .

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

Вы можете написать текст и с помощью инструмента Type. Но в таком случае надпись получится не естественной.

Вот мы и получили эффект надписи на запотевшем стекле .

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

Фактически все заключается в следующем:

1. Обработка слоя под «запотевшее стекло»
2. Создание контура надписи
3. Удаление участка фото под надписью

Нужно открыть картинку в Photoshop и копировать слой-фон. Есть несколько способов это сделать, например: через опции верхнего меню, нажатием Ctrl+J или перетаскивание иконки слоя в палитре слоев на специальный значок-пиктограмму.

Нужно размыть и сделать «мутным» изображение верхнего слоя, с которым будут производиться дальнейшие манипуляции. Для этого применяются фильтры Photoshop.

Фильтр: «Фильтр» - «Шум» - «Добавить шум» (Add Noise).

Степень шума около 25%. Распределение - по Гауссу. Монохромный.

У меня получилось вот что:

Фильтр для смягчения шума: «Фильтр» - «Размытие» - «Размытие в движении» (Motion Blur).

Направление размытия 90 градусов (как падает дождь). Смешение - около 30 пикселей.

Сейчас моё фото выглядит примерно так:

Следующий этап - создание надписи на фотографии. Для этого нужен инструмент «Горизонтальный текст» (Horizontal Type).

Примечание: под некоторыми значками на панели инструментов прячется несколько опций. Один из способов добраться до скрытой - нажать на значок и удерживать левую клавишу мыши.

Выбираем подходящий шрифт. Например, Comic Sans MS, который установлен по умолчанию в системе Windows (и который люто ненавидят дизайнеры).

Почти все настройки шрифта можно найти в панели настроек под верхним меню Photoshop: название шрифта, его начертание (выбираем bold - полужирный), размер. Цвет надписи в данном случае значения не имеет. Затем, чтобы сделать текст еще более жирным, открываем палитру символов. Кнопка справа вверху или...

…или справа на панели окон Photoshop. Нужно нажать кнопку «Псевдожирный» (Faux Bold).

С помощью клавиатуры набирается текст. Затем нужно выбрать инструмент «Перемещение» (Move) для дальнейшей работы со слоями (и масками).

Далее происходит нечто, очень похожее на то, что описывалось в очень красивом уроке « ». Держим нажатой клавишу Ctrl и кликаем левой кнопкой мыши на иконку копии фонового слоя (того, к которому применялись фильтры). Вокруг букв должны побежать «муравьишки» - создана маска текстового слоя - контур надписи.

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

Верхний слой нужно удалить или скрыть (нажать на «глазик» слева от иконки слоя).

Убираем выделение через опцию верхнего меню «Выделение/Отменить выделение» или используя комбинацию клавиш Ctrl+D.

Иногда этого бывает достаточно для получения нужного эффекта:

Чтобы сделать надпись более заметной, применяем к верхнему слою стиль «Тиснение» (или «Скос и рельеф», или Bevel and Emboss). Стиль можно поменять в верхнем меню «Слои/Стиль слоя» или в палитре слоев, нажав на пиктограмму стилей.

В окне настроек тиснения можно выбрать его стиль, глубину, направление и так далее. По вкусу. Особое внимание нужно обратить на параметр «Контур глянца» (Gloss Countour).

Пример моих настроек:

У меня получилась такая картинка - не самая лучшая, но и ничего так...

Иногда можно уменьшить непрозрачность верхнего слоя, если «пейзаж за окном» плохо виден.

Такой вот урок...

P.S. Что-то картинки немного перепутались в уроке, но переделывать пока не буду.

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

Создайте изображение размером 400?200, и залейте его светло серым цветом, я выбрал цвет: #e2e2e2 . Теперь применим к этому слою Filer ? Noise ? Add noise со следующими параметрами:

И примените к нему размытие Filter ? Blur ? Gaussian Blur, с параметром Radius равным 7 px. Для придания большей реалистичности применим к нашему слою Filter ? Disort ? Glass:

Теперь создайте новый слой water drops через Layer ? New ? Layer (Ctrl+Shift+N) и создайте на нем капли воды (как это делать описано в уроке «Капли Воды»). Смените режим наложения Blending Mode для этого слоя с Normal на Overlay. Теперь пришло время добавить текст. Создайте новый слой и с помощью инструмента Type Tool (T) добавьте желаемую надпись, цвет текста должен быть черным:

Примените к слою с текстом Filter ? Liquify, обработайте надпись, так как будто она растекается.