Как разместить текст на картинке

Как разместить текст на картинке

Как разместить текст на фотографии: советы дизайнерам

Умение грамотно разместить текстовую надпись на фото или иллюстрации — один из ценнейших навыков в арсенале UX/UI-дизайнера. Внутри статьи вы найдете 10 приемов, которые помогут «подружить» тексты с изображениями.

19 июля 2022

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

Добавьте контраста

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

Интегрируйте текст в изображение

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

Учитывайте логику изображения

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

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

Размытие картинки

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

Разместите текст в поле

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

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

Вынесите текст на фон

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

Больше, значит лучше

Чтобы текст смотрелся на фото лучше и был более заметным, можно поэкспериментировать и увеличить или размер шрифта, или само изображение. С одной стороны, крупная надпись хорошо привлекает внимание. С другой — масштабирование изображения поможет выделить на нем 1-2 крупных объекта, которые будет проще совместить с текстом.

Раскрасьте текст

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

Используйте полупрозрачное покрытие

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

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

Выйдите за рамки фона

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

1. Увеличить основную текстовую надпись (слоган, название бренда или проекта, призыв к действию).
2. Сжать фоновое изображение.

Заключение

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

Добавление текста на фотографию

Excel для Microsoft 365 Word для Microsoft 365 Outlook для Microsoft 365 PowerPoint для Microsoft 365 Excel 2021 Word 2021 Outlook 2021 PowerPoint 2021 Excel 2019 Word 2019 Outlook 2019 PowerPoint 2019 Excel 2016 Word 2016 Outlook 2016 PowerPoint 2016 Excel 2013 Word 2013 Outlook 2013 PowerPoint 2013 Excel 2010 Word 2010 PowerPoint 2010 Excel 2007 Word 2007 PowerPoint 2007 Еще. Меньше

Вы можете использовать текстовое поле или объект WordArt для добавления текста поверх фотографии в Word, Outlook,PowerPoint или Excel.

Текстовое поле над фотографией

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

Объект WordArt над фотографией

Если текст краткий и вам нужен стилизованный внешний вид, аналогичный тому, который вы можете увидеть на открытке, то wordArt может быть лучшим вариантом.

Какое приложение вы используете?

Word или Outlook

Добавление текста на фотографию с помощью надписи

1. В документе щелкните место, куда вы хотите вставить фотографию.
2. На вкладке Вставка в группе Иллюстрации нажмите кнопку Фигуры, а затем выберите пункт Новое полотно.
3. Щелкните полотно, а затем на вкладке Вставка в группе Иллюстрации нажмите кнопку Рисунки.
4. Найдите и дважды щелкните фотографию, которую вы хотите использовать, а затем щелкните за пределами полотна.
5. На вкладке Вставка в группе Текст нажмите кнопку Текстовое поле, а затем выберите пункт Добавление надписи внизу меню.
6. Введите текст, который будет отображаться в текстовом поле, а затем перетащите его в нужное место в верхней части рисунка.
7. Чтобы изменить шрифт или стиль текста, выделите текст и выберите нужное форматирование в контекстном меню.
8. Щелкните внешний край надписи и перетащите ее на фотографию.
9. Убедитесь, что текстовое поле по-прежнему выбрано, а затем на вкладке Формат фигуры в группе Стили фигуры выполните следующие действия.
   1. Нажмите кнопку Заливка фигуры и выберите команду Нет заливки.
   2. Нажмите кнопку Контур фигуры и выберите пункт Нет контура.

   

   

10. Щелкните внешний край фотографии, нажмите и удерживайте нажатой клавишу CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.
11. На вкладке Формат фигуры в группе Упорядочить выберите Группа >Группа.

Добавление текста на фотографию с помощью WordArt

1. В документе щелкните место, куда вы хотите вставить фотографию.
2. На вкладке Вставка в группе Иллюстрации нажмите кнопку Фигуры, а затем выберите пункт Новое полотно.
3. Щелкните полотно, а затем на вкладке Вставка в группе Иллюстрации нажмите кнопку Рисунки.
4. Найдите и дважды щелкните фотографию, которую вы хотите использовать.
5. На вкладке Вставка в группе Текст нажмите кнопку WordArt, выберите нужный стиль и введите текст.
6. Щелкните внешнюю границу объекта WordArt, чтобы выбрать его, перетащите текст на фотографию и при необходимости поверните его под нужным углом.
7. Щелкните внешний край фотографии, нажмите и удерживайте нажатой клавишу CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.
8. На вкладке Формат рисунка в группе Упорядочить выберите Группа >группа.

PowerPoint или Excel

Добавление текста на фотографию с помощью надписи

1. Убедитесь, что вы вставили фотографию в файл.
2. На вкладке Вставка в группе Текст нажмите кнопку Текстовое поле, щелкните рядом с рисунком и перетащите указатель, чтобы нарисовать надпись, а затем введите текст.
3. Чтобы изменить шрифт или стиль текста, выделите текст, щелкните его правой кнопкой мыши и выберите в контекстном меню нужное форматирование.
4. Щелкните внешнюю границу надписи, чтобы выбрать ее, перетащите текст на фотографию и при необходимости поверните его под нужным углом.
5. Убедитесь, что текстовое поле по-прежнему выбрано, а затем на вкладке Формат фигуры в группе Стили фигуры выполните следующие действия.
   1. Нажмите кнопку Заливка фигуры и выберите команду Нет заливки.
   2. Нажмите кнопку Контур фигуры и выберите пункт Нет контура.

   

   

6. Щелкните внешний край фотографии, нажмите клавишу CTRL, а затем щелкните край текстового поля, чтобы выбрать оба элемента.
7. На вкладке Формат фигуры в группе Упорядочить выберите Группа >Группа.

Добавление текста на фотографию с помощью WordArt

1. Убедитесь, что вы вставили фотографию в файл.
2. На вкладке Вставка в группе Текст нажмите кнопку WordArt, выберите нужный стиль и введите текст.
3. Щелкните внешнюю границу объекта WordArt, чтобы выбрать его, перетащите текст на фотографию и при необходимости поверните его под нужным углом.
4. Щелкните внешний край фотографии, нажмите и удерживайте нажатой клавишу CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.
5. На вкладке Формат фигуры в группе Упорядочить выберите Группа >Группа.

Какое приложение вы используете?

Word или Outlook

Добавление текста на фотографию с помощью надписи

1. В документе щелкните место, куда вы хотите вставить фотографию.
2. На вкладке Вставка в группе Иллюстрации нажмите кнопку Фигуры, а затем выберите пункт Новое полотно.
3. Щелкните полотно, а затем на вкладке Вставка в группе Иллюстрации нажмите кнопку Рисунки.
4. Найдите и дважды щелкните фотографию, которую вы хотите использовать, а затем щелкните за пределами полотна.
5. На вкладке Вставка в группе Текст нажмите кнопку Текстовое поле, а затем выберите пункт Добавление надписи внизу меню.
6. Введите текст, который будет отображаться в текстовом поле, а затем перетащите его в нужное место в верхней части рисунка.
7. Чтобы изменить шрифт или стиль текста, выделите текст и выберите нужное форматирование в контекстном меню.
8. Щелкните внешний край надписи и перетащите ее на фотографию.
9. Убедитесь, что надпись по-прежнему выбрана, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур сделайте следующее:
   1. Нажмите кнопку Заливка фигуры и выберите команду Нет заливки.
   2. Нажмите кнопку Контур фигуры и выберите пункт Нет контура.

   

   

10. Щелкните внешний край фотографии, нажмите и удерживайте нажатой клавишу CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.
11. В разделе Средства рисования на вкладке Формат в группе Упорядочить выберите Группировать >группа.

Добавление текста на фотографию с помощью WordArt

1. В документе щелкните место, куда вы хотите вставить фотографию.
2. На вкладке Вставка в группе Иллюстрации нажмите кнопку Фигуры, а затем выберите пункт Новое полотно.
3. Щелкните полотно, а затем на вкладке Вставка в группе Иллюстрации нажмите кнопку Рисунки.
4. Найдите и дважды щелкните фотографию, которую вы хотите использовать.
5. На вкладке Вставка в группе Текст нажмите кнопку WordArt, выберите нужный стиль и введите текст.
6. Щелкните внешнюю границу объекта WordArt, чтобы выбрать его, перетащите текст на фотографию и при необходимости поверните его под нужным углом.
7. Щелкните внешний край фотографии, нажмите и удерживайте нажатой клавишу CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.
8. В разделе Работа с рисунками на вкладке Формат в группе Упорядочить выберите Группировать >группу.

PowerPoint или Excel

Добавление текста на фотографию с помощью надписи

1. Убедитесь, что вы вставили фотографию в файл.
2. На вкладке Вставка в группе Текст нажмите кнопку Текстовое поле, щелкните рядом с рисунком и перетащите указатель, чтобы нарисовать надпись, а затем введите текст.
3. Чтобы изменить шрифт или стиль текста, выделите текст, щелкните его правой кнопкой мыши и выберите в контекстном меню нужное форматирование.
4. Щелкните внешнюю границу надписи, чтобы выбрать ее, перетащите текст на фотографию и при необходимости поверните его под нужным углом.
5. Убедитесь, что надпись по-прежнему выбрана, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур сделайте следующее:
   1. Нажмите кнопку Заливка фигуры и выберите команду Нет заливки.
   2. Нажмите кнопку Контур фигуры и выберите пункт Нет контура.

   

   

6. Щелкните внешний край фотографии, нажмите клавишу CTRL, а затем щелкните край текстового поля, чтобы выбрать оба элемента.
7. В разделе Средства рисования на вкладке Формат в группе Упорядочить выберите Группировать >группа.

Добавление текста на фотографию с помощью WordArt

1. Убедитесь, что вы вставили фотографию в файл.
2. На вкладке Вставка в группе Текст нажмите кнопку WordArt, выберите нужный стиль и введите текст.
3. Щелкните внешнюю границу объекта WordArt, чтобы выбрать его, перетащите текст на фотографию и при необходимости поверните его под нужным углом.
4. Щелкните внешний край фотографии, нажмите и удерживайте нажатой клавишу CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.
5. В разделе Средства рисования на вкладке Формат в группе Упорядочить выберите Группировать >группа.

Как красиво разместить текст на картинке

Простые советы, которые помогут вам профессионально оформлять рекламные посты, статьи, макеты и многое другое.

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

Играйте на контрастах

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

Темный текст на светлом фоне выглядит аккуратно.

Более строгий вариант — светлый текст на темном фоне.

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

Размывайте изображение

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

Затемняйте изображение

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

Используйте плашки

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

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

Цветные плашки могут быть как комплиментарными, так и контрастными по отношению к изображению.

Еще один пример цветной плашки, которая сочетается с одеждой модели.

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

Расставьте акценты

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

Встройте текст в изображение

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

Текст как будто нанесен на беговую дорожку.

Используйте пустое пространство

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

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

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

Как наложить текст на картинку в html?

Или вариант что был предложен или воспользуйтесь position: absolute что бы поместить блок поверх другого.

14 фев 2018 в 4:25

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

      
Космоинфо
 
Погрузись в космос вместе с нами!
 
Новости Вопросы Основная

  

Отслеживать

ответ дан 14 фев 2018 в 4:22

user176262 user176262
Попробуй задать как фоновое изображение через CSS/SASS.
.image < background: url('image/image1.png'); width: 320px; height: 280px; //размер условный >
 
Текст Текст Текст
 
 
Отслеживать

6,641 6 6 золотых знаков 30 30 серебряных знаков 52 52 бронзовых знака

ответ дан 28 июл 2019 в 17:05

Анна Панина Анна Панина

21 1 1 бронзовый знак
Вариант 1, с использованием position: absolute
.container < position: relative; >.container img < position: absolute; >.container p
 
 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla?
 
Вариант 2, с использованием background-image (нужно знать размеры блока)
.bg < background: url('https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg') center center no-repeat; width: 300px; height: 300px; >.bg span
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, rerum. 
Отслеживать

ответ дан 14 фев 2018 в 4:31

2,298 1 1 золотой знак 9 9 серебряных знаков 12 12 бронзовых знаков
* < margin: 0; padding: 0; box-sizing: border-box; >.wrapper < display: grid; gap: 10px; grid-template-columns: 1fr; >.container < display: grid; place-items: end center; >.container img < width: 100%; object-fit: cover; >.container p < position: absolute; font-size: 20px; color: #fff; margin: 10px 10px 20px; > 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, fugiat. A, ipsum architecto sit nihil minus tenetur mollitia sequi est nostrum laudantium praesentium doloremque blanditiis recusandae, dolorum assumenda sed qui perspiciatis dolores? Quidem, itaque suscipit rerum, cupiditate delectus nesciunt dignissimos vel, odio corporis exercitationem facere nihil modi ducimus quas fugit.