Как на фон наложить текст в фотошопе: Добавьте текст на изображение в Photoshop Elements

Содержание

5 способов разместить текст на изображении в Фотошоп / Creativo.one

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

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

1. Наложение Цвета

На изображении ниже, вы можете увидеть, что текст очень сложно прочитать, потому что отвлекает внимание задний фон. На заднем фоне слишком много деталей, в частности в области барной стойки. Хорошо подобранный шрифт “Buffalo Wings” полностью затерялся из-за нагромождения, которое создал задний фон. Тем не менее, в данном случае, у нас есть возможность улучшить контраст.

Первый шаг – создайте новый слой, назовите этот слой “наложение цвета”. Далее, выберите инструмент

Пипетка (Eyedropper), нажав клавишу (I). С помощью данного инструмента, отберите образец цветового оттенка с рубашки мужчины, а затем залейте новый слой выбранным цветовым оттенком (Shift+F5).

В заключение, уменьшите непрозрачность (opacity) слоя с заливкой до 50%, а затем, переместите данный слой вниз, расположив ниже слоёв с текстом.

Как вы видите, мы значительно улучшили контраст. Теперь, текстура шрифта “Buffalo Wings” стала более отчётливой и более различимой.

2. Стиль слоя Тень (Drop Shadow)

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

Первый шаг – подберите соответствующий цвет для текста.

Вы наверно догадались, что в данном случае, мы хотим, чтобы цвет текста был более светлым, предпочтительно белый.

Следующий шаг- это добавить стиль слоя Тень (drop shadow) к слою с текстом. Установите степень непрозрачности 52%. Также подкорректируйте значение Размаха (Spread) 16%, включая значение Размера (Size) 10px. Угол (angle) должен быть где-то, примерно, -144 градусов.

Мы значительно усилили контраст, просто добавив стиль слоя Тень (drop shadow).

3. Линии

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

Добавление двух линий….

.…создаёт наибольшее разделение между двумя элементами дизайна.

4. Фигурные Блоки для Текста

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

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

Чтобы усилить видимость текста, выберите инструмент Произвольная фигура(Custom Shapes Tool), нажав клавишу (U), чтобы создать фигурный блок. Фигурный блок может быть любой формы, здесь нет блока правильной формы или неправильной формы.

Залейте фигуру чёрным цветом, а также установите цвет Обводки (Stroke) белый, толщина обводки 3pt.

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

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

5. Размытие Заднего фона

5-й и последний способ улучшить контраст – это лёгкое размытие заднего фона.

Изначально, текст очень сложно различить на заднем фоне.

Первый шаг- преобразуйте слой с задним фоном в смарт-объект. Просто, щёлкните правой кнопкой мыши по слою с задним фоном и в появившемся окне, выберите опцию Преобразовать в смарт-объект (Convert to Smart Object).

Далее, идём Фильтр – Размытие – Размытие по Гауссу (Filters-Blur-Gaussian Blur).

Установите радиус размытия 3.8 px.

Теперь контраст значительно улучшен, а текст можно легко прочитать.

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

Автор: Maria Wendt

Источник: photoshopstar.com

Изменить фоновый эффект текста в Photoshop

В этом уроке я отвечу на один из самых популярных вопросов, которые мне задают, а именно: как сохранить текстовый эффект на прозрачном фоне, чтобы переместить эффект на другой фон? Обычно при создании текстового эффекта в Photoshop мы создаем его на простом цветном фоне, обычно черном или белом. Но как только эффект достигнут, мы часто хотим переместить его на другой фон, что означает, что нам нужен способ удалить исходный фон и заменить его прозрачностью. Так как мы это сделаем? На самом деле это очень просто, и в этом уроке мы узнаем три способа сделать это. Я буду использовать Photoshop CC, но любая последняя версия будет работать. Давайте начнем!

Текстовый эффект

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

Оригинальный текстовый эффект на черном фоне.

Новый фон

И вот новый фон, в который я хочу поместить текст. Я скачал этот с Adobe Stock:

Новый фон для эффекта.

Как сделать фон прозрачным

Я вернусь к своему текстовому эффекту. И если мы посмотрим на панель «Слои» , то увидим три слоя, которые составляют эффект. У нас есть слой «Sparkles» сверху и два слоя Type под ним. У нас также есть фоновый слой внизу, который заполнен черным:

Слои текстовых эффектов, а также фоновый слой.

Отключение фонового слоя

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

значок видимости :

Отключение фонового слоя.

Это оставляет наш текст на прозрачном фоне. Фотошоп представляет прозрачность с рисунком шахматной доски:

Фон за текстом был заменен прозрачностью.

Как переместить текстовый эффект на новый фон

Итак, теперь, когда мы сделали фон прозрачным, как переместить эффект на его новый фон? Есть несколько способов сделать это.

Метод 1: Использование формата файла PNG

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

Как сохранить эффект в виде файла PNG

Чтобы сохранить текстовый эффект в виде файла PNG, перейдите в меню « Файл» в строке меню и выберите « Сохранить как» :

Идем в Файл> Сохранить как.

В диалоговом окне назовите свой файл (я назову мой «Золотой текст»), а затем установите Формат в

PNG . Выберите, где вы хотите сохранить его, а затем нажмите Сохранить :

Сохранение текстового эффекта в виде файла PNG.

Настройка параметров формата PNG

Фотошоп попросит вас выбрать настройку сжатия для файла PNG. Это будет выглядеть по-разному в зависимости от того, какую версию Photoshop вы используете, но я всегда выбираю опцию для наименьшего размера файла. Нажмите OK, чтобы закрыть диалоговое окно:

Выбор наименьшего размера файла.

Открытие вашего нового фона

С сохраненным файлом откройте новый фон:

Открытие нового фонового изображения.

Размещение файла PNG в документе

Перейдите в меню « Файл» и в Photoshop CC выберите « Вставить встроенный файл» . В Photoshop CS6 или более ранней версии выберите « Место» .

Идем в Файл> Поместить встроенный.

Выберите PNG-файл, который вы только что сохранили, и нажмите « Разместить» :

Выбор файла PNG.

Фотошоп помещает файл перед фоном:

Поместить файл в документ.

Вы можете использовать маркеры Free Transform для изменения размера текста, если это необходимо. Но в моем случае я просто приму это, нажав Enter (Win) / Return (Mac) на моей клавиатуре. И так же, текстовый эффект был перенесен на новый фон:

Текст появляется перед новым фоном.

Если мы посмотрим на панель «Слои», то увидим, что наш текстовый эффект был добавлен как смарт-объект над изображением. Мы знаем, что это умный объект по значку в правом нижнем углу эскиза. Отличительной особенностью смарт-объектов является то, что мы можем изменять их размеры без потери качества. Вы можете узнать больше об изменении размера смарт-объектов в отдельном руководстве:

Фотошоп разместил файл как смарт-объект.

Способ 2: скопируйте и вставьте

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

корзину в нижней части панели «Слои»:

Удаление текстового эффекта.

Это оставляет меня только с моим фоновым изображением:

Остается только фоновое изображение.

Я переключусь на документ с текстовыми эффектами, и поскольку фоновый слой все еще выключен, мы все еще видим прозрачный фон за текстом:

Вернемся к текстовому эффекту.

Слияние текстового эффекта на новый слой

Другой способ перенести эффект на новый фон — скопировать и вставить его в другой документ. Чтобы сделать это проще, мы объединяем слои, которые составляют наш текстовый эффект, на новый слой.

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

Выбор верхнего слоя (с выключенным фоновым слоем).

Чтобы добавить текстовый эффект на новый слой, на ПК с Windows нажмите Shift + Ctrl + Alt + E на клавиатуре. На Mac, нажмите Shift + Command + Option + E . Это объединит все видимые слои на новый слой над ними. Этот новый слой содержит текстовый эффект и ничего больше:

Текстовый эффект был объединен в один слой.

Убедитесь, что объединенный слой выбран, а затем перейдите в меню « Правка» и выберите « Копировать» :

Собираюсь Правка> Копировать.

Откройте новое фоновое изображение:

Переключение на новый фон.

Затем вернитесь в меню « Правка» и выберите « Вставить» :

Собираюсь Правка> Вставить.

Photoshop вставляет текстовый эффект на новый фон:

Результат после вставки слоя с текстовым эффектом в новый документ.

На панели «Слои» мы видим слой с текстовыми эффектами над изображением. На этот раз это обычный слой, а не смарт-объект:

Слой текстового эффекта появляется над фоновым слоем.

Способ 3. Размещение документа с текстовым эффектом в качестве смарт-объекта

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

Удаление слоя с текстовым эффектом.

А потом я вернусь к документу с текстовыми эффектами:

Вернемся к текстовому эффекту.

Включение фонового слоя обратно

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

Включение фонового слоя обратно.

Это восстанавливает оригинальный черный фон за текстом:

Исходный фон возвращается.

Удаление объединенного слоя с эффектом текста

Я также удалю свой слой с эффектом объединенного текста, выделив его и нажав на клавиатуре клавиши Backspace (Win) / Delete (Mac):

Выбор и удаление объединенного слоя.

Сохранение и закрытие документа

Теперь, когда я восстановил документ обратно к тому , как это было изначально, я спасу его, перейдя к File меню и выбрав Сохранить :

Идем в Файл> Сохранить.

Затем я закрою свой текстовый эффект, вернувшись в меню « Файл» и выбрав « Закрыть» :

Идем в Файл> Закрыть.

Это оставляет меня только с новым фоновым изображением:

Документ с текстовым эффектом был закрыт.

Размещение текстового эффекта в качестве смарт-объекта

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

Чтобы поместить документ с текстовым эффектом в документ с фоновым изображением, я зайду в меню « Файл» и выберу « Поместить встроенный» . В Photoshop CS6 или более ранней версии я бы выбрал Place :

Идем в Файл> Поместить встроенный.

На этот раз вместо того, чтобы выбрать этот PNG-файл, который я сохранил ранее, я выберу фактический документ Photoshop с текстовым эффектом (файл .psd). Я нажму на него, чтобы выбрать его, а затем я нажму Place :

Выбор текстового эффекта в документе Photoshop.

Фотошоп размещает текстовый эффект перед фоном, как это было раньше:

Размещение документа с текстовым эффектом перед новым фоном.

Опять же, мы можем изменить его размер с помощью маркеров Free Transform, но я просто приму его, нажав Enter (Win) / Return (Mac). Однако обратите внимание, что оригинальный черный фон по-прежнему отображается за текстом, и он блокирует новый фон из вида. Это потому, что фоновый слой все еще был включен. Но это не проблема, потому что это легко исправить:

Эффект текста был добавлен, но оригинальный фон все еще отображается.

Редактирование содержимого смарт-объекта

Если мы посмотрим на панель «Слои», мы снова увидим текстовый эффект, добавленный в виде смарт-объекта над изображением:

Документ с текстовым эффектом был размещен как смарт-объект.

Но на этот раз, вместо того, чтобы держать файл PNG, смарт-объект содержит копию всего документа с текстовым эффектом. Чтобы открыть смарт-объект и просмотреть его содержимое, дважды щелкните его эскиз:

Открытие смарт-объекта для просмотра документа с текстовым эффектом.

Откроется текстовый эффект:

Документ с текстовым эффектом внутри смарт-объекта.

И если мы посмотрим на панель «Слои», то увидим, что все наши слои еще не повреждены:

Панель «Слои», на которой отображаются слои с текстовым эффектом и фоновый слой.

Отключение фонового слоя

Чтобы скрыть исходный фон, я отключу фоновый слой, щелкнув его значок видимости :

Отключение фонового слоя.

Это снова оставляет нас с прозрачным фоном:

Фон снова прозрачен.

Сохранение и закрытие смарт-объекта

Чтобы наше изменение появилось в основном документе, нам нужно сохранить и закрыть смарт-объект. Чтобы сохранить его, зайдите в меню « Файл» и выберите « Сохранить» :

Идем в Файл> Сохранить.

А затем, чтобы закрыть его, вернитесь в меню « Файл» и выберите « Закрыть» :

Идем в Файл> Закрыть.

Вернемся к основному документу: исходный фон исчез, и мы видим новый фон на его месте:

Результат после выключения фонового слоя в смарт-объекте.

Бонус: усиление эффекта

Чтобы закончить, я собираюсь использовать фоновое изображение, чтобы быстро усилить эффект свечения вокруг текста. На панели «Слои» я выберу фоновый слой:

Выбор фонового слоя.

Затем я сделаю копию изображения, нажав Ctrl + J (Win) / Command + J (Mac). Копия появляется над оригиналом:

Делаем копию фонового изображения.

Я нажму на копию и перетащу ее над текстовым эффектом:

Перетаскивание копии изображения над текстом.

Это временно блокирует текст для просмотра:

Текстовый эффект временно скрыт.

Наконец, чтобы скрыть участки черного цвета и смешать золотые блестки с текстом, я изменю режим смешивания изображения с «Обычный» на « Экран» :

Изменение режима наложения слоя на Screen.

И вот мой окончательный результат:

Окончательный, усиленный эффект.

И там у нас это есть! Вот как можно переместить текстовый эффект на новый фон в Photoshop! Узнайте, как создать эффект « Золотой текст», используемый в этом учебном пособии, или просмотрите наш раздел « Текстовые эффекты » для получения дополнительных руководств! И не забывайте, что все наши учебники по Photoshop доступны для скачивания в формате PDF !

Будьте первым, кто узнает, когда будут добавлены новые учебники!

Как наложить текстуру на текст в Фотошопе

Шрифты… Извечная забота фотошоперов – придание текстам привлекательности. Этого требуют различные обстоятельства, например, необходимость красиво подписать фото или другую композицию. Вариантов украшения масса – от поиска и применения готовых стилей (или создания своих) до использования текстур и режимов наложения слоев.

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

Наложение текстуры на текст

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

Для фона была выбрана вот такая стена из камня:

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

Расположение текстур на холсте

Создаем новый документ (CTRL+N) нужного нам размера.
Перетягиваем первую текстуру на окно Фотошопа в наш документ.
Как видим, на текстуре появилась рамка с маркерами, потянув за которые можно (нужно) растянуть ее на весь холст. Старайтесь минимально масштабировать текстуру во избежание потери качества последней.
То же проделываем и со второй текстурой. Палитра слоев у нас теперь выглядит следующим образом:

Написание текста

Выбираем инструмент «Горизонтальный текст».
Пишем.
Размер шрифта подбираем в зависимости от размера холста, цвет не важен. Для изменения характеристик необходимо перейти в меню «Окно» и нажать на пункт «Символ». Откроется соответствующее окно, в котором можно изменить характеристики шрифта, но это уже материал для другого урока. Пока пользуйтесь настройками со скриншота.

Итак, надпись создана, можно приступать к наложению на нее текстуры.

Наложение текстуры на шрифт

1. Перемещаем слой с текстом под слой с текстурой гранита. Текст пропадет из поля зрения, но это временно.

2. Зажимаем клавишу ALT и нажимаем ЛКМ на границу слов (верхней текстуры и текста). Курсор при этом должен поменять форму. Этим действием мы «привяжем» текстуру к тексту, и она будет отображаться только на нем.

Палитра слоев после всех действий:

Результат наложения текстуры гранита на текст:

Как видим, текстура «прилипла» к надписи. Осталось лишь придать тексту объема и завершенности всей композиции.

Заключительная обработка

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

1. Для начала займемся объемом. Дважды кликаем по слою с текстом и, в открывшемся окне настроек стиля, выбираем пункт под названием «Тиснение». Потянем ползунок размера немного вправо, а глубину сделаем 200%.

2. Для того чтобы наша надпись «отделилась» от стены, перейдем к пункту «Тень». Угол выберем 90 градусов, смещение и размер – по 15 пикселей.

Взглянем на конечный результат наложения текстуры на текст:

Мы получили стилизованную под гранит надпись.

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

Завершим урок несколькими советами.

Подбирайте правильный фон для Ваших надписей, так как именно от фона зависит общее впечатление от композиции.
Старайтесь использовать качественные текстуры высокого разрешения, потому что при обработке (масштабировании) может появиться ненужная размытость. Разумеется, можно придать резкости текстуре, но это уже лишняя работа.
Не слишком сильно воздействуйте стилями на текст. Стили могут придать надписи излишнюю «пластмассовость» и, как следствие, неестественность.

На этом все, освойте приемы, описанные в этом уроке, чтобы получать качественные стилизованные тексты.

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Photoshop: наложение прозрачного текста на любой фон изображения — Редактирование Изображений

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

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

Давайте начнем.

Шаг 1: Давайте начнем с открытия вашего изображения в Photoshop.

Открыв, перейдите в палитру слоев (на рисунке ниже), щелкните по ней правой кнопкой мыши и выберите Дублирующий слой…, Поскольку мое изображение называется «Фон», дублирующий слой называется «Фоновая копия» в Photoshop. Мы будем использовать эти имена с этого момента.

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

Шаг 3: Теперь мы будем заполнять новый слой белым. Для этого обязательно нажмите на него на Слои палитра, чтобы выбрать его первым.

После выбора в строке меню (или просто меню в Windows) перейдите к редактировать меню и выберите Fill … вариант.

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

Шаг 4: Когда новый слой создан и окрашен в белый цвет, выберите слой «Фоновая копия» на палитре слоев, чтобы добавь свой текст, После выбора нажмите на Тип инструмента а затем выберите нужный шрифт, его стиль и размер на панели параметров над главным окном.

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

Шаг 5: Теперь, когда текст написан на изображении, в палитре «Слои» перетащите слой «Текст» под слой «Фоновая копия», как показано ниже.

Как только вы это сделаете, нажмите на слой «Background copy». Не беспокойтесь, если текст не отображается. Это потому, что он «покрыт» слоем «Фоновая копия».

Шаг 6: Теперь давайте создадим конечный эффект, сделав текст прозрачным, а затем разместив его поверх изображения / фона. К счастью, все это можно сделать с помощью простой команды в Photoshop.

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

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

Шаг 7: Выберите текстовый слой на палитре слоев и затем нажмите на Последствия кнопка.

Это вызовет диалоговое окно Layer Style. Это установлено по умолчанию на Эффект Drop Shadow вариант, но не стесняйтесь играть с ним, пока не найдете эффект, который вам нравится. В этом случае я буду использовать эффект Drop Shadow, который добавляет приятный визуальный штрих к готовому изображению, как вы можете видеть ниже.

Надеюсь, вы найдете этот урок полезным. Как вы можете видеть, результаты выглядят довольно здорово и определенно показывают, как использование нескольких простых команд в Photoshop может дать мощные результаты.

Как выделить текст в Фотошопе или сделать обводку

Одним из самых используемых инструментов при работе в Фотошопе является “Текст”. И разработчики программы постарались наделить его широкими возможностями.

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

Этот урок будет целиком посвящен тому, как выделить текст в Фотошопе. Начнем!

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

Способ №1: Создаем слой с подложкой

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

и яркую фотографию. В нашем случае это будет прекрасное фото пляжа с белоснежным песком:

Логотип нужно будет разместить в правом нижнем углу. Выглядит это пока таким вот образом:

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

На панели слоев создаем новый слой и размещаем его между текстовым и фоновым слоями.
Затем необходимо взять инструмент “Выделение” -> “Прямоугольная область”.
На созданном слое (между слоями с текстом и фоном) выделяем прямоугольную область вокруг текста. Перед тем, как это делать, мы убрали рамки вокруг логотип. Смотрите скриншот ниже:
Остается только залить выделенную область желаемым цветом. Обычно для подложки используют черный цвет. Чтобы не прибегать к панели инструментов, воспользуемся комбинацией горячих клавиш SHIFT+F5. В появившемся окне выбираем в пункте “Содержание” -> “Черный” или любой другой подходящий вариант:
После того, как подложка закрашена, снимите выделение горячими клавишами CTRL+D, или кликнув инструментом выделение по любому месту на холсте.
Чтобы подложка не смотрелась так “грубо”, нужно поиграть со значением “Непрозрачность” на слое. В нашем случае мы установили ползунок на отметке 50%.
Почти готово. Остался последний штрих – добавление тени. Да, переходим в параметры наложения слоя, на котором находится текст. Для этого кликните правой кнопкой мыши на слой и выберите “Параметры наложения”.
Альтернативный способ вызова – двойной клик по нужному слою. Перед нами откроется окно с множеством настроек. Выбираем “Тень” и настраиваем, как у нас или на свой вкус:
Кликаем “ОК” и получаем неплохой результат, который является одним из самых распространенных.

Экспериментируйте с подложкой, ведь главное в этом деле – практика. Идем дальше.

Способ №2: Обводка текста

Есть еще один способ выделить надпись – сделать обводку. Данный способ подходит, когда у вас очень контрастное и разноцветное изображение. Мы взяли для пример черную версию нашего логотипа и фото леса:

Как видите, логотип практически незаметен. Приступим к выделению текста.

В этот раз нам не понадобится создавать дополнительный слой, как в первом случае. Все куда проще. Кликаем на слой с логотипом/текстом ПКМ и выбираем “Параметры наложения”.
После, устанавливаем галочку в пункте “Выполнить обводку”. Появятся настройки обводки. В нашем случае нам достаточно установить размер обводки в 3 пикс. и выбрать белый цвет, т.к. лого у нас черного.
После настройки обводки, не закрывая окно, переходим к пункту “Тень”. Здесь все параметры тоже индивидуальны, но в нашем случае они таковы:
После того, как мы ввели все необходимые параметры в пунктах “Выполнить обводку” и “Тень”, кликаем ОК и получаем результат:

Способ №3: Выделение текста при резкой смене цветов

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

А теперь давайте разбираться, как выйти из подобной ситуации.

Для начала нужно зажать клавишу CTRL и кликнуть на панели слоев по миниатюре слоя с надписью. Таким образом Фотошоп автоматически создаст выделенную область вокруг лого:
Затем необходимо перейти на слой с нашим фоновым изображением, кликнув ЛКМ по нему и, используя горячие клавиши CTRL+J, cкопировать выделение. Программа автоматически создаст новый слой с нашим текстом в цветах фонового изображения:
Переходим к волшебству. Убираем видимость (галочку) с самого верхнего слоя, где расположена наша надпись. Теперь нужно инвертировать цвета слоя благодаря комбинации клавиш CTRL+I. Должно получиться примерно так:
Получилось недурно, но еще есть над чем поработать. Давайте добавим нашему тексту немного обводки белого цвета в пункте “Выполнить обводку” в “Параметрах наложения”.
Затем “приправим” надпись немного тенями:

Вот и все! Кликаем “ОК” и получаем шикарный вариант выделенного текста на очень сложном фоне:

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

На этом все. Если остались вопросы, пишите об этом в комментариях. До встречи в наших следующих уроках.

Быстрый способ добавить текстовую надпись на фото или рисунок [Без Фотошопа]

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

Для начала просто перетаскиваем нужное фото в окно редактора и в верхнем меню переходим на закладку «Текст»:

Инструменты для работы с текстом будут находиться в правой части окна программы. Нажимайте кнопку «Добавить надпись» и вводите любой текст с клавиатуры:

При помощи соответствующих инструментов можно изменить:

Тип шрифта (шрифтов на выбор действительно очень много)
Размер и цвет букв
Прозрачность наложения текста
Стиль написания (жирный, курсив, подчеркнутый)
Способ выравнивания текста (слева, справа, по центру)
Цвет и толщину обводки букв

При помощи ползунка под названием «Угол» можно менять угол наклона надписи на фотографии:

Для работы с фоном (подложкой) текста служат инструменты, расположенные на вкладке «Фон». С их помощью можно задать:

Цвет фона и его прозрачность
Цвет, прозрачность и толщину рамки фона

Если Вы хотите добавить немного оригинальности и красоты к добавленной надписи, рекомендую применить один из заданных вариантов оформления. Он добавит поверх фотографии новый слой в виде стикера, на фоне которого и будет располагаться Ваш текст:

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

Вот собственно и вся работа 🙂 Кстати у разработчиков есть и собственная подобная инструкция на сайте программы. Если Вы хотите познакомиться и с ней, то узнать, как наложить текст на фото в программе от Movavi, можно прямо по ссылочке.

P.S. Напоминаю, что возможность сохранять результаты работы в фоторедакторе Movavi появляется только после покупки и введения ключа активации.

Автор статьи: Сергей Сандаков, 40 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.

Как сделать прозрачный фон в фотошопе

ТРИ СПОСОБА СДЕЛАТЬ НАДПИСЬ НА ФОТО

Если вы решили подписывать свои фотографии перед тем как размещать их в интернете, но не знаете как это сделать — то эта статья, возможно, поможет вам.

Расскажу о трех легких способах:

просто надпись в Paint
прозрачная выпуклая надпись в Photoshop
надпись в Picasa
Все картинки увеличиваются при нажатии.
Первый способ:
Не требует установки каких-либо программ, т.к. всё необходимое у вас уже есть. Это Paint — стандартная программа, которая входит в пакет программ на вашем компьютере.
Шаг 1: Откройте изображение с помощью этой программы. В меню выберите «Палитра» и подберите подходящий цвет текста. Это можно сделать и в правом нижнем углу экрана.
В меню «Рисунок» уберите галочку с пункта «непрозрачный фон»
Выберите инструмент «текст»
Сделайте надпись. Шрифт можно менять, делать жирным, изменять его размер.
Второй способ:
Программа Adobe Photoshop. Её надо установить на компьютер или можно пользоваться он-лайн версией.
Я покажу как сделать прозрачный выпуклый текст
Откройте рисунок с помощью этой программы. Выберите инструмент «Текст». Напечатайте свой текст.
Можно изменить шрифт и размер набранного текста. Изменения будут сразу отображаться на экране. Можно изменять и цвет, но нам это не принципиально, т.к. цвета у нас видно вообще не будет.
Выберите меню «Слой»>>>>»Тиснение». При этом вы должны находится в режиме текста (это тот слой с которым мы сейчас работаем; увидеть в каком слое мы сейчас можно на панели справа)
Можете поиграться с настройками «Тиснения» и посмотреть, что получится. А можете всё оставить как есть и ничего не трогать, эффект тиснения уже у нас получился.
Делаем прозрачным текст. Справа в окошечке у нас есть «бегунок» со словом Заливка. Ставим значение на ноль.
Сохраняем наш измененный рисунок: Файл>>>Сохранить как
Способ третий
Программа Picasa
Это гугловский продукт, распространяется бесплатно. Очень удобен при работе с фотографиями, т.к. не такой сложный как Фотошоп, всё понятно на интуитивном уровне. С помощью Пикасы можно pедактировать быстро редактировать фото, отправлять их в веб-альбомы или сразу в блог и много
чего еще. Но нас сейчас интересует текст
Непосредственно в самой программе можно написать текст поверх фото благодаря заветной кнопочке. На ней написано «ABC» (указана зеленой стрелкой). Нажимаете эту кнопочку и дальше следуете текстовым подсказкам. Всё очень-очень просто! Не забудьте сохранить свою подписанную фотографию.
Можно еще воспользоваться Picnik — он-лайн редактор фотографий.
Откройте картинку с помощью Picasa. Выберите там кнопочку Picniк (на предыдущем фото она обозначена красной стрелкой) и следуйте инструкции (помните, вы должны быть подключены к интернету).
Когда загрузился Picniк, выберите вкладку «создать» и в ней меню «текст»
В поле для ввода текста введите надпись и нажмите «добавить»
Появившуюся надпись можно повернуть по всякому, изменить её цвет, размер и даже сделать полупрозрачной — смотрите справа в окошечке.
Потом, когда закончите — не забудьте нажать на кнопку «Сохранить».
Вот три самых легких, на мой взгляд, способа сделать надпись на фотографии. Всем удачи!

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

Давайте разберемся, как можно сделать прозрачный фон для картинки с помощью редактора Adobe Photoshop . У меня установлена англоязычная версия Adobe Photoshop CS5, поэтому показывать буду на нем. Постараюсь приводить различные сочетания горячих клавиш.

Если у Вас еще не установлен фотошоп, Вы им очень редко пользуетесь или он на английском, можете сделать прозрачный фон в Paint.net . Это простой русскоязычный редактор изображений, который займет не много места на жестком диске. Перейдя по ссылке, Вы можете прочесть подробную статью. Скачать программу Paint.net можно с нашего сайта.

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

Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой» , нажмите в нем «ОК» . После этого замочек исчезнет.

Выбираем инструмент «Волшебная палочка» . В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D» .

Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete» .

Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D» .

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

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

Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.

Для просмотра результата нажмите «Q» . Розовым будут выделены те части изображения, которые станут прозрачными.

Копируем выделенные области, нажав «Ctrl+C» . Дальше создаем новый файл, «Ctrl+N» , с прозрачным фоном.

Вставляем в него скопированные фрагменты, «Ctrl+V» . Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик» . Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.

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

Оценить статью:

Как сделать прозрачный текст или надпись на прозрачном фоне в «Фотошоп»

Все вы не раз видели изображения, на которых указан адрес сайта или его логотип. Чаще всего текст со ссылкой при этом имеет некоторую степень прозрачности. В этом уроке мы постараемся самостоятельно создать полупрозрачный текст (для краткости можно называть его прозрачным). Затем вы сможете взять сохраненное изображение и наложить его на любую другую картинку.

Начинается всё с открытия программы Adobe Photoshop и создания нового файла. Делается это при помощи сочетания клавиш «Ctrl+N». Выберите любое удобное вам разрешение (в нашем случае это 700 x 700 пикселей). В поле «Содержимое фона» выберите вариант «Прозрачный». Нажмите кнопку «OK».

Прозрачный текст в Photoshop

Активируйте инструмент «Горизонтальный текст». Напишите какое-нибудь слово. У вас это может быть адрес сайта, собственное имя или что-либо ещё. В одном из предыдущих наших уроков было рассказано обо всех возможных операциях с текстом в Adobe Photoshop. Повторяться смысла не имеет. Сейчас вы сами сможете оформить текст. Выберите подходящий шрифт, его размер, а также примените к слою разные стили. Можете даже воспользоваться кнопкой «Деформировать текст».

Текст на прозрачном фоне в «Фотошоп»

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

Однако сначала воспользуйтесь инструментом «Рамка». С его помощью необходимо произвести кадрирование. Отсеките лишние места, оставив только часть с текстом.

Теперь из этой надписи нужно сделать прозрачный текст. В «Фотошопе» для этого используется панель «Слои». В её верхней части располагается строка «Непрозрачность».

В ней имеется ползунок, с помощью которого настраивается степень непрозрачности. Необходимый процент можно ввести и с помощью клавиатуры. Поставьте непрозрачность на уровне 50-60%. В некоторых случаях можно прозрачный текст в «Фотошопе» сделать ещё менее заметным. Всё зависит только от вашей фантазии и поставленных задач.

Остается лишь сохранить прозрачный текст. В Photoshop для этого используется сочетание клавиш «Ctrl+S». Сохранять изображение необходимо в формате PNG.
Накладывается полученная надпись на любое изображение очень просто. Откройте картинку с полупрозрачным текстом в «Фотошопе». Воспользуйтесь функцией «Выделить всё» (для этого можно задействовать сочетание клавиш «Ctrl+A»). Скопируйте изображение. Затем откройте в Photoshop фотографию, на которой вы хотите видеть вашу надпись. Нажмите комбинацию клавиш «Ctrl+V» или перейдите по пути «Редактирование >> Вставить». При помощи инструмента «Перемещение» поместите надпись в нужную область снимка. Также можно изменить размеры текста, воспользовавшись функцией «Свободное трансформирование». Если прозрачность кажется недостаточной, то на помощь придет соответствующий пункт в панели «Слои».

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

Вы хотите красиво подписать Ваши фото, но не знаете как? Я расскажу два простых способа как сделать надпись на фото:

1. Надпись в Paint .

2. Надпись в Photoshop.

Сделать надпись на фото в Paint .

Шаг №1 . Находим нужное изображение и к ликаем по нему правой кнопкой мыши. Выбираем графу — Открыть с помощью Paint . Подбираем нужный цвет надписи в разделе «Палитра» (Рис.1 ) .

Шаг №2 . В верхнем меню «Рисунок », убираем галочку «непрозрачный фон». Выбираем инструмент «Надпись » (Рис.2).

Шаг №3 . Выбираем область, где вы хотите сделать надпись. Появится таблица со шрифтами, размером. Если не появилась, заходим и ставим галочку «Вид » à « Панель атрибутов текста ». Выбираем нужные параметры для нашей надписи и делаем клик левой клавиши мышки в любую область картинки (Рис.3).

Шаг №3 . После получения надписи на фото, нажимаем «Файл» -> « Сохранить как », в ыбираем формат, в котором мы хотим сохранить наше изображение, пишем имя файла и выбираем место куда сохранить. (Рис.4).

Видео.Как сделать надпись на фото? Программа Paint.

Сделать надпись на фото в Photoshop.

Шаг №1 . Перед началом нужно установить Photoshop. Будем делать прозрачный выпуклый текст. Нажимаем на изображение правой кнопкой мыши, выбираем «открыть с помощью » -> «Photoshop» (если у вас он не установлен, в списке его не будет) . Выбираем инструмент «Текст » или « Horizontal Type Tool » (если у вас установлена английская версия). Набираем текст, выбираем размер, цвет и нужный шрифт (Рис. 1).

Шаг №2 . В меню выбираем «Слои » -> « Тиснение ». При этом, мы должны стоять на слое, с которым нам нужно работать. Справа в нижнем углу он подсвечен, синим цветом (Рис.2).

Шаг №3 . После нажатия «Тиснение» будет виден результат после чего, нажимаем «Да» и сохраняем наше изображения (« Файл » -> «Сохранить как ») или можете поэкспериментировать с параметрами и настройками. Далее делаем прозрачный текст (справа два значения по 100%, берем второе значение и регулируем прозрачность). После всех действий не забудьте сохранить ваше изображение.

Видео.Как сделать надпись на фото? Программа Photoshop.

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

Online-letters.ru – один из самых популярных сайтов с онлайн шрифтами в Рунете. Страница сайта имеет самое необходимое – то, зачем пришел посетитель, а именно красивые шрифты по видам и стилям. Попадая на главную страницу http://online-letters.ru , вы увидите перед собой виды шрифтов. Слева в блоке можно выбрать категории, например – печатный, gothic, сказочный. Чтобы написать текст онлайн шрифтом выберите один из разделов слева.

Сервис красивых шрифтов — online-letters.ru

Откроется окно, в котором вам нужно вписать текст, который будет преобразован в выбранный вами шрифт. Подтвердите соответствующей кнопкой.
На следующей странице вы должны выбрать один из предлагаемых вариантов шрифта. Для этого пролистайте и ознакомьтесь со всеми вариантами, а после того, как определитесь с выбором, установите чекбокс напротив нужного шрифта.
Справа от шрифта появится синяя кнопка «Далее», нажмите на нее.
В следующем окне вам нужно выбрать цвет шрифта, размер и обводку букв и после нажать «Сгенерировать».
Откроется окно, в котором вы увидите готовый вариант вашей фразы и варианты ее получения. Вы можете скопировать ссылку для форума, для скачивания, для вставки в HTML-код. Если вы хотите просто скачать надпись на свой компьютер, выберите «Для скачивания», скопируйте ссылку (для этого выделите ее, нажмите правую кнопку мыши и выберите «Копировать».
Затем откройте новое окно, вставьте ссылку в адресной строке браузера, нажав CTRL+V и перейдите на нее. В открывшемся окне будет ваша надпись, нажмите правую кнопку мыши и выберите «Сохранить».

Gfto.ru — красивый дизайн текста

Сервис написания красивого текста онлайн – http://gfto.ru . Этот сайт предоставляет дополнительные возможности в виде фона текста, а также масштабирования поля вокруг текста и настройки наклона шрифта. Здесь вы можете выбрать красивый шрифт и украсить его специальными шаблонами, которых здесь также имеется большое количество на любой вкус. Для того, чтобы создать свою необычную надпись, перейдите на главную страницу сайта.

X-lines.ru — сервис предоставляет большое количество шрифтов

Еще один сервис, который предоставляет пользователям создать текст с красивым шрифтом x-lines.ru. Дизайн сайта, как и в первом рассматриваемом сайте, без излишков, только то, что нужно пользователю. В левом блоке сайта находятся категории шрифтов. Выбрав одну из категорий вам предлагают выбрать стиль шрифта, указывая понравившийся из списка.

Перейдите на главную страницу сайта – http://x-lines.ru и выберите нужную категорию.

Сервис написания красивым шрифтом — x-lines.ru

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

Cooltext.com — уникальные шрифты

Онлайн-сервис cooltext.com является англоязычным и русской версии, к сожалению, не имеет. Но есть в этом и положительный момент – он здесь практически не нужен. Ведь все, что нам нужно, это выбрать понравившуюся надпись из богатого списка и красиво написать в окне нужный нам текст. А если вы пользуетесь браузером Chrome, то вы можете просто в один клик перевести страницу, для других браузеров есть также расширение-переводчики. Сайт приятно отличается от предыдущих тем, что здесь имеются уже готовые варианты как красивых шрифтов, так и их оформления в различных цветах и стилях.

Перейдя по ссылке https://cooltext.com/ на главную странице вашему взору открываются варианты готовых шрифтов, оформленных в виде логотипов. Для выбора других стилей, внизу вы найдете категории под заголовком «Generator categories».

Вводим в поле ввода необходимый текст — Cooltext.com

Fonts-online.ru добавляем текст удобно и быстро

Данный сайт также предназначен для написания вашего текста красивым шрифтом – Fonts-online.ru. Он содержит огромную базу шрифтов различного направления, вида и стиля. Такому набору сайт обязан большинству пользователей, которые могут самостоятельно добавить на сайт новый шрифт. Все здесь имеющиеся шрифты поделены на латинские, кириллические, графические, рукописные, декоративные, граффити и т.д.

Здесь, как и в других подобных сайтах, вам необходимо лишь ввести фразу в специальное поле, и вы увидите свою фразу в нескольких десятках, а то и сотнях стилей начертания шрифта. Помимо этого на сайте https://www.fonts-online.ru/ вы можете скачать любой шрифт на свой компьютер и пользоваться им в любое время, с одним лишь условием, если шрифт распространяется без каких-либо ограничений. Зайдите на главную страницу сайта, чтобы создать свою надпись.

Сервис красивого шрифта fonts-online.ru

Чтобы создать текст красивым шрифтом онлайн, зайдите на главную страницу этого сайта.
С правой стороны, под блоком «Поделиться», в окне введите фразу, которую необходимо украсить интересным шрифтом.
Под окном ввода текста расположено два блока с выбором цвета. Один из них – цвет текста, другой – цвет фона. Выберите нужные цвета для будущего шрифта.
Еще ниже находятся разделы с шрифтами, также выберите подходящий.
На странице скачивания опустите страницу в самый низ, чтобы ввести проверочные цифры и нажмите кнопку «Скачать».

Наложение текста на изображение в Photoshop

Автор Стив Паттерсон.

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

Этот популярный эффект «перекрытия» существует уже много лет, и в этом уроке Photoshop мы увидим, как простое использование слоев позволяет невероятно легко воссоздать этот эффект! Здесь я буду использовать Photoshop CS5, но подойдет любая версия Photoshop.

Вот фото, которое я буду использовать для этого урока:

Исходное изображение.

А вот как это будет выглядеть после добавления текста позади игрока с мячом:

Окончательный результат.

Этот урок из нашей серии «Фотоэффекты». Давайте начнем!

Загрузите это руководство в виде готового к печати PDF-файла!

Как наложить текст на изображение

Шаг 1. Добавьте текст

Выберите инструмент Horizontal Type Tool на панели инструментов или нажмите на клавиатуре букву T , чтобы быстро выбрать его с помощью сочетания клавиш:

Выберите инструмент «Горизонтальный текст».

Выбрав инструмент «Текст», выберите тип, стиль, размер и цвет шрифта на панели параметров в верхней части экрана, затем щелкните внутри окна документа и добавьте текст. Я наберу слово «Бейсбол». Я добавил несколько стилей слоя, чтобы придать моему тексту немного больше дизайна, но, конечно, внешний вид вашего текста полностью зависит от вас:

Добавьте свой текст к изображению.

Обратите внимание, как текст в настоящее время закрывает изображение для просмотра, и это потому, что если мы посмотрим на панель «Слои», мы увидим текстовый слой, расположенный над изображением на фоновом слое.Слой над другим слоем на панели «Слои» появляется перед слоем в окне документа:

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

Шаг 2: Выберите фоновый слой

Щелкните фоновый слой на панели «Слои», чтобы выбрать его. Он будет выделен синим цветом, давая нам понять, что теперь это активный слой:

Щелкните фоновый слой, чтобы выбрать его.

Шаг 3: Выберите область, которая будет перекрывать текст

Для этого эффекта я хочу, чтобы бейсболист появился перед словом «Baseball», что означает, что мне нужно выбрать его.Поскольку текст затруднит выделение нужной нам области, давайте временно отключим его, щелкнув значок видимости слоя (глазное яблоко) в левой части текстового слоя на панели «Слои». Текст исчезнет, останется только исходное изображение в окне документа:

Временно скройте текст, щелкнув по глазному яблоку на панели «Слои».

Как я уже упоминал, я хочу, чтобы бейсболист появился перед текстом, но поскольку текст блокировал его только верхнюю половину, нет необходимости выделять его полностью.Нам нужно только выбрать область, которая фактически будет перекрывать текст. Используйте инструмент выделения по вашему выбору ( Lasso Tool , Magnetic Lasso Tool , Pen Tool и т. Д.), Чтобы нарисовать контур выделения вокруг нужной области. Здесь я выбрал область от верхней части его шлема до его талии. Я могу игнорировать остальную часть его, так как она находится ниже того места, где появится текст:

Выберите область, которая будет перекрывать текст.

Шаг 4. Копирование выделенной области на новый слой

Сделав выбор, перейдите в меню Layer вверху экрана, выберите New , а затем выберите Layer через Copy .Или нажмите Ctrl + J (Win) / Command + J (Mac) на клавиатуре для сочетания клавиш:

Перейдите в меню «Слой»> «Создать»> «Слой через копирование».

В окне документа ничего не произошло, но если мы снова посмотрим на панель «Слои», то увидим, что выделенная область была скопирована на новый слой («Слой 1») между текстовым слоем и фоновым слоем. Мы можем увидеть скопированную область, посмотрев на миниатюру предварительного просмотра нового слоя слева от имени слоя:

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

Чтобы лучше видеть, что именно было скопировано на новый слой, удерживайте нажатой клавишу Alt (Win) / Option (Mac) и щелкните значок видимости слоя для слоя 1. Это временно скроется. все слои, кроме слоя 1, в окне документа, показывая нам, что находится на слое. В моем случае появляется только верхняя половина бейсболиста. Узор в виде шахматной доски, окружающий его, — это способ Photoshop представить прозрачность, то есть на слое больше ничего нет.Когда вы закончите, удерживайте Alt (Win) / Option (Mac) и еще раз щелкните значок видимости слоя для Layer 1, чтобы вернуться к нормальному виду:

Удерживайте Alt (Win) / Option (Mac) и щелкните по глазному яблоку для слоя 1, чтобы отобразить только содержимое этого конкретного слоя.

Шаг 5. Включите текстовый слой снова

Щелкните значок видимости текстового слоя на панели «Слои», чтобы снова включить текст в окне документа. На данный момент он все еще будет отображаться перед изображением, но мы исправим это следующим образом:

Снова включите текстовый слой.

Шаг 6. Перетащите слой 1 над текстовым слоем

Поскольку слой над другим слоем на панели «Слои» появляется перед слоем в окне документа, все, что нам нужно сделать, это переместить слой 1 над текстовым слоем. Щелкните слой 1 на панели «Слои» и перетащите его над текстовым слоем, отпуская кнопку мыши, чтобы поместить его на место. Текстовый слой теперь должен находиться между слоем 1 и фоновым слоем:

Щелкните слой 1 и перетащите его над текстовым слоем на панели «Слои».

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

Теперь перед текстом появляется бейсболист.

И вот оно! Вот как в Photoshop создать эффект перекрытия текста с изображением! Посетите наш раздел «Фотоэффекты», чтобы получить больше уроков по эффектам Photoshop!

Как заполнить текст изображениями в Photoshop

Оригинальная функция

CreativePro по заполнению текста изображениями пользуется огромной популярностью с момента ее публикации в 2009 году.Десять лет спустя пришло время для нового взгляда — и есть новый способ сделать это с помощью Photoshop CC 2019.

Шаг 1. Выберите изображение

Это изображение серфера можно загрузить бесплатно, любезно предоставлено pixabay — и вы можете скачать его здесь. Это идеальное фоновое изображение.

Шаг 2: Добавьте свой текст

Выберите жирный шрифт, в идеале без засечек. Тонкие шрифты почти не подойдут, так как сквозь них вы не сможете увидеть достаточно фона.Здесь я добавил слово SURF, написанное Acumin Condensed Black.

Больше после прыжка! Продолжайте читать ниже ↓
Члены бесплатной и премиальной версии видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.

Шаг 3: Затяните

Чтобы избежать больших промежутков между буквами, их стоит сблизить. С помощью инструмента «Текст» щелкните между каждой парой букв и используйте сочетание клавиш alt + левый курсор, чтобы приблизить буквы друг к другу.

Шаг 4: Переместите фон

Дважды щелкните фоновый слой, чтобы превратить его в обычный слой, затем перетащите его над текстовым слоем. Выберите «Слой»> «Создать обтравочную маску» или используйте сочетание клавиш G / Ctrl Alt G. Вот как теперь должна выглядеть панель «Слои» — маленькая стрелка слева от фона показывает, что шрифт используется как обтравочная маска.

Шаг 5: Результат

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

Шаг 6: Добавьте новый фон

Фон в виде шахматной доски появился, когда вы превратили исходный фон в обычный слой. Создайте новый слой и выберите «Слой»> «Создать»> «Фон из слоя». Это даст вам новый белый фон. Но положение серфера несколько неловкое.

Шаг 7: Переместите фон

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

Шаг 8: Другой подход

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

Шаг 9: Добавьте свой текст

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

Шаг 10: Добавьте пустую область

Создайте новый слой под текстовым слоем и нарисуйте прямоугольник с помощью инструмента «Прямоугольная область», покрыв весь текст.Нажмите D, чтобы сделать цвета переднего плана и фона черно-белыми по умолчанию, затем используйте Command Backspace / Ctrl Backspace, чтобы заполнить выделение цветом фона.

Шаг 11: Дублируйте фон

Выберите фоновый слой и используйте Command J / Ctrl J, чтобы продублировать его на новый слой. Перетащите его в верхнюю часть стека слоев, над слоем с текстом, затем используйте Command Option G / Ctrl Alt G, чтобы использовать слой с текстом в качестве обтравочной маски.

Шаг 12: Результат

Верхняя часть леса теперь сливается с надписью, а нижняя часть полностью видна под ней.

Шаг 13: подход Photoshop CC

Photoshop CC 2019 предлагает новый и более простой способ создания этой техники. Мы воспользуемся этим изображением Лондона из Википедии, которое вы можете скачать здесь.

Шаг 14: Добавьте свой текст

Добавьте текст, как прежде. Я установил слово «Лондон» так, чтобы восходящая буква «d» совпадала с башней с часами.

Шаг 15: Сделайте каркас

Выделите текстовый слой и выберите «Слой»> «Создать»> «Преобразовать в рамку».Поскольку это текстовый слой, он будет использовать текст в качестве своего имени.

Шаг 16: Слой кадра

Вот как выглядит слой рамки: вы можете просто выделить текст в виде синих контуров.

Шаг 17: Поместите фон в рамку

Дважды щелкните фоновый слой, чтобы превратить его в обычный слой, и Photoshop автоматически поместит его в рамку. Ваша панель слоев теперь будет отображать только один слой.

Шаг 18: Результат

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

Шаг 19: Перемещение содержимого вокруг

Слой состоит из двух частей: фрейма и содержимого. Если вы выберете рамку слева, вы переместите текст вместе с его содержимым. Но если вы выберете содержимое справа, вы можете перемещать (и масштабировать) фон внутри шрифта.

Как выделить фон текста в Photoshop — редактирование подписи

Как выделить фон текста в Photoshop

Простое руководство по выделению текста в Adobe Photoshop

Если вам интересно, как изменить цвет фона текстового поля в Adobe Photoshop, ты не одинок.

К сожалению, в Photoshop нет встроенного эффекта текстового фона (что довольно странно), но, к счастью, есть несколько простых обходных путей для добавления эффекта выделенного текста в Photoshop.

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

Как выделить текст в Photoshop — 2 простых способа

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

МЕТОД ВЫДЕЛЕНИЯ ТЕКСТА # 1

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

МЕТОД ВЫДЕЛЕНИЯ ТЕКСТА № 2

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

Вот как добавить цвет фона к вашему тексту в фотошопе.

Эффект выделения текста — это очень простой способ сделать ваш текст ярким, и, надеюсь, в будущем Photoshop добавит эту функцию по умолчанию, так что вам не придется воссоздавать внешний вид вручную!

Пожалуйста, дайте этому видео + отметьте, если оно было полезно для вас, и дайте нам знать, если у вас есть запросы на будущие учебные пособия!

А теперь создайте что-нибудь потрясающее,

-Ryan

Как реалистично наложить текст на фотографию в Adobe Photoshop

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

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

Спасибо за ознакомление с учебником на этой неделе.

Как добавить реалистичный текст к фотографии в Adobe Photoshop. Также работает над иллюстрациями.

Привет, Cafe Crew, это Колин Смит, и на этой неделе я покажу вам, как добавить текст на этот ствол, чтобы он выглядел реалистично, как будто он был выгравирован там.Итак, я просто собираюсь воспользоваться некоторыми режимами наложения и другими вещами в Photoshop.

Создайте и раскрасьте текст

Шаг 1

Откройте фотографию (или иллюстрацию), которую вы будете использовать.

Шаг 2.

Давайте выберем цвет.

Будем использовать цвет с фото. Возьмите палитру цветов и с помощью пипетки выберите темное дерево на стволе.

Шаг 3.

Выберите инструмент «Текст».Я использую сокращенный шрифт, это Bernard MT Condensed.

И я собираюсь ввести PHOTOSHOP CAFE и перетащить его на место.

Шаг 4

Самый быстрый способ изменить размер текста — нажать Ctrl T, это будет Command T на Mac, переместиться в угол, удерживать клавишу Shift, чтобы ограничить его, а затем перетащить его пропорционально Наполни эту бочку.

Нажмите Enter, чтобы применить.

Заставляем текст обтекать объект

Нам нужно сделать две вещи:

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

Шаг 5

Щелкните правой кнопкой мыши слой типа на панели «Слои» и затем выберите «Растрировать тип».Это преобразует его в пиксели, чтобы мы могли их исказить.

Шаг 6

Нажмите Ctrl / Cmd + T; бесплатно Transform.

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

Возьмитесь за среднюю часть и немного потяните ее вниз, чтобы она немного выпирала посередине.

Потяните вниз за края, чтобы они выглядели так, как будто они повторяют контур. Совет: с помощью инструмента Warp Tool вы можете щелкнуть по точкам ИЛИ вы можете перетащить внутрь меша, чтобы заставить его работать.

Нажмите Enter, чтобы применить.

Наложение текстуры на текст в Photoshop

Последнее, что нам нужно сделать, это наложить текст на текстуру, мы собираемся изменить режим наложения.

Шаг 7

В верхней части панели «Слои» вы увидите слово «нормальный», это режим наложения слоев.(Загрузите мою бесплатную электронную книгу о режимах наложения слоев, чтобы полностью понять их).

Измените режим наложения на Overlay Blend Mode. Это работает очень хорошо. Теперь мы можем видеть текстуру дерева, проходящую через текст, и она больше не выглядит застрявшей там.

Это основные шаги. Для большей реалистичности читайте дальше!

Xtra Кредит: Повышение реалистичности текста Photoshop с грубыми краями и тиснением.

Теперь немного сделаем его шероховатым.

Шаг 8

Создайте маску слоя на текстовом слое, выбрав текстовый слой и нажав кнопку Layer Mask в нижней части панели «Слои». (Значок прямоугольника с кружком внутри)

Нажмите клавишу D, чтобы выбрать черный цвет в качестве цвета переднего плана.

Нажмите клавишу B, чтобы выбрать инструмент «Кисть». Убедитесь, что непрозрачность равна 100, а режим наложения — нормальный.

Найдем грубую кисть. Если вы посмотрите на верхнюю панель параметров, щелкните кисть в верхнем левом углу.Вы увидите панель с шестеренкой. Щелкните значок шестеренки.

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

Выберите добавление из появившихся опций.

step 9

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

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

Совет: вы можете загружать кисти из таких мест, как Brusheezy или DeviantArt и тому подобное, и вы можете найти несколько пользовательских кистей, которые действительно справятся с этой задачей намного лучше (возможно, я скоро добавлю их в PhotoshopCAFE).

Добавление глубины 3D к тексту

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

Шаг 10

Выделив текстовый слой, щелкните маленький «fx» внизу панели слоев, чтобы добавить стиль слоя. Выберите внутреннюю тень. Поверните Непрозрачность полностью до 100 и немного увеличьте Distance и посмотрите, как это придаст ему такой точеный вид.

Измените угол, и вы увидите, что он начинает выглядеть так, как будто он высечен в древесине.

Так что, в любом случае, это действительно простой небольшой урок о том, как добавить Type и сделать его более реалистичным.

Теперь обратите внимание, что режимы наложения играют большую роль в создании реалистичного изображения, и есть множество вещей, которые вы можете сделать с помощью режимов наложения слоев. И поэтому я действительно создал для вас бесплатную электронную книгу. Здесь нет рекламы. Это просто чистый контент. Посмотрите эту электронную книгу. Он дает пример каждого отдельного режима наложения, а также множество мест, где его можно использовать. Загрузите бесплатную электронную книгу о режимах наложения слоев здесь! (На данный момент 200 000 загрузок! Ура!)

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

Надеюсь, вам это понравится, и каждую неделю будьте готовы к новому!

Не забудьте ознакомиться с нашими уроками премиум-класса для непревзойденного обучения работе с Photoshop!

До следующей недели.

Рад видеть вас здесь, в CAFE

Colin

5 способов улучшить контраст при наложении текста поверх изображений

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

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

1. Наложение цвета

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

Первый шаг — создать новый слой и переименовать его в «наложение цвета». Выберите инструмент выбора цвета (нажатие клавиши I) . Взяв цвет с мужской рубашки, залейте цвет новым слоем. (комбинация клавиш Shift + F5).

Наконец, установите непрозрачность слоя на 50% и перетащите слой под текстом.

Как видим, контрастность значительно улучшилась.Текстура шрифта Buffalo Wings стала более заметной и заметной.

2. Падающая тень

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

Первым шагом будет выбор подходящего цвета для текста.

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

Следующим шагом будет добавление нового стиля слоя и выбор тени. Установите непрозрачность на 52%. Измените Spread на 16% и Size на 10px. Угол должен быть где-то около -144 градуса.

Простое добавление тени значительно увеличивает контраст.

3. Строки

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

Добавление двух строк…

… дает гораздо лучшее различие между двумя элементами дизайна.

4. Блок формы

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

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

Для повышения разборчивости используйте инструмент Custom Shapes Tool (нажатие клавиши U) и создайте форму. Это действительно может быть что угодно, нет правильной или неправильной формы.

Залейте фигуру черным цветом и установите Обводку на белый цвет и 3pt.

Перетащите фигуру под слои текста и разделителя и установите непрозрачность слоя на 57%.

Конечный результат намного профессиональнее, а лот легче читать.

5. Размытие фона

Пятый и последний способ улучшить контраст — слегка размыть фон.

Изначально текст трудно отличить от фона.

Первый шаг — преобразовать фоновое изображение в смарт-объект. Просто щелкните правой кнопкой мыши и выберите «Преобразовать в смарт-объект».

Перейдите в Фильтры / Размытие / Размытие по Гауссу.

Установите радиус размытия 3.8 пикселей.

Контрастность теперь значительно улучшена, и текст хорошо читается.

Надеюсь, вам понравился этот урок! Не стесняйтесь задавать любые вопросы, которые могут у вас возникнуть — я буду следить за комментариями.

17 советов по дизайну шрифтом на фотографии

Дизайн • Дизайн веб-сайта Кэрри Казинс • 28 мая 2020 г. • 11 минут ПРОЧИТАТЬ

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

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

Как использовать текст поверх изображения

1. Добавить контраст

Текст должен быть удобочитаемым для успешного выполнения. Убедитесь, что текст достаточно различается по цвету, чтобы его можно было увидеть в сочетании с фотографией.Если у вас есть фотография на темном фоне, выберите белый (или светлый) текст. Если у вашей фотографии светлый фон, используйте шрифт темного цвета.

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

Конструктор электронных писем

С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны писем быстрее, чем когда-либо прежде.

Попробуйте бесплатноДругие продукты

2. Сделайте текст частью изображения

Иногда бывает так, что текст становится — или является — частью изображения, с которым вы работаете. Это может быть сложно достичь и работает только в ограниченных случаях. Вам нужно либо простое изображение и слово для работы, например, обработка McLaren выше, либо изображение, сделанное с текстом в нем.

3. Следуйте визуальному потоку

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

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

4. Размытие изображения

Один из самых простых инструментов, который вы можете иметь в своем наборе, — это возможность размыть часть изображения.Добавление небольшого размытия к фону изображения с помощью такого программного обеспечения, как Adobe Photoshop, может помочь вашему тексту выделиться. Размытие также может добавить акцента к вашей общей концепции, такой как веб-сайт Wallmob выше. Размытие делает реальный продукт и текст более четким для пользователей сайта.

5. Поместите текст в поле

Когда фотографии содержат много цветов или различия между светлыми и темными участками, размещение текста внутри другой рамки может действительно выделить их.

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

6. Добавьте текст на задний план

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

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

7. Развивайся

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

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

8. Добавьте цвет

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

9. Используйте цветовой оттенок

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

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

10. Будьте проще

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

11. Сдвинуть изображение в сторону

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

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

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

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

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

12. Мыслите нестандартно

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

Концепция подразумевает расширение визуальных границ и вытеснение контента за пределы фона. Вам нужно сделать две основные вещи: во-первых, растянуть заголовок; во-вторых, сузьте изображение на спине, создав тем самым огромные зазоры по периметру.

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

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

13. Вертикальный ритм

Иногда все, что вы можете сделать, чтобы создать шедевр, поместив текст на изображение, — это отказаться от традиционного пути и выбрать несколько фантастических трюков. Есть много способов сбиться с пути. Тем не менее, одна из самых недооцененных, но которые легко воплотить в жизнь — это использование вертикального ритма.

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

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

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

Наконец, вы можете придерживаться обычного горизонтального потока чтения с текстом поверх изображения, однако разделить его на слова и расположить их в столбце. Таким образом, вы убережете пользователей от неожиданных поворотов во время чтения, но при этом добавите уникальной изюминки.Взгляните на Le Clercq Associes, чтобы увидеть, как они использовали типографику на фотографии. Благодаря организации колонн и вертикальному расположению решение выглядит фантастически.

14. Динамические эффекты

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

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

15. Добавьте остроты с помощью эффекта параллакса

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

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

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

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

16. Реализация правил перспективы

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

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

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

Считайте TEDx ToughlaqRd характерным примером успешно принятого подхода. Здесь команда пошла еще дальше с идеей. Дело в том, что название разбито на несколько слоев, чтобы ненавязчиво выделить центральную часть. Обратите внимание на движение всего блока контента: оно настолько плавное и безупречное, что играть с ним — настоящее удовольствие.

17. Добавить эффект наведения

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

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

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

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

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

3 простых способа добавить тень к тексту в Photoshop

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

Но все имеет решение. В Adobe Photoshop вы можете добавить тень к тексту, чтобы решить эту проблему.

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

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

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

Давайте нырнем!

3 способа добавления тени к тексту в Photoshop

Примечание. Снимки экрана взяты из версии Photoshop CC 2021 для Mac. Windows или другие версии могут выглядеть немного иначе.

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

Советы. Измените стиль и цвет персонажа перед добавлением эффекта тени, чтобы лучше увидеть окончательный результат. Используйте панель «Символ», чтобы изменить шрифт и размер шрифта.

Метод 1. Быстрый доступ двойным щелчком

Шаг 1 : Дважды щелкните текстовый слой на панели Layers .

Примечание. Не щелкайте значок типа (T), потому что он выберет текст для изменения вместо слоя.

Откроется окно Layer Style .

Шаг 2 : Отметьте Drop Shadow в левой части окна в разделе «Стиль»> «Параметры наложения».

Шаг 3 : Отрегулируйте параметры тени соответствующим образом. Вы можете изменить режим наложения, угол, непрозрачность, расстояние, размер и т. Д.

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

Советы: Установите большее расстояние в пикселях для более очевидного результата.Вы можете распределить тень, переместив ползунок «Распространение» вправо, чтобы увеличить ее процентное соотношение, и отрегулировать размер, переместив ползунок «Размер».

Шаг 4 : Щелкните OK.

Метод 2: добавление стиля слоя

Шаг 1 : Нажмите кнопку fx в нижней части панели «Слои».

Шаг 2 : Отметьте Drop Shadow . Вы увидите то же окно стиля слоя, что и в описанном выше методе.

Шаг 3 : Измените настройки и нажмите OK.

Шаг 1 : Перейдите в верхнее меню Layer> Layer Style> Drop Shadow .

Шаг 2 : То же самое, появляется окно стиля слоя.

Шаг 3 : Измените настройки соответствующим образом и нажмите OK.

Супер просто, правда?

Часто задаваемые вопросы

Ниже приведены некоторые общие вопросы дизайнеров о добавлении тени к тексту в Adobe Photoshop.Вы знаете ответы?

Как добавить эффекты к тексту в Photoshop?

Вы можете добавлять эффекты к тексту с помощью кнопки Добавить стиль слоя (fx) в нижней части панели Layers , такие как тень, наложение цвета, сатин, градиенты, свечение и т. Д. Нажмите Blending Options , чтобы открыть В окне «Стиль слоя» проверьте параметры слева и настройте параметры, чтобы получить желаемые эффекты.

Как в Photoshop сделать текст толще?

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