%d1%84%d0%be%d0%bd %d0%b4%d0%bb%d1%8f %d1%82%d0%b5%d0%ba%d1%81%d1%82%d0%b0 PNG, векторы, PSD и пнг для бесплатной загрузки

естественный цвет bb крем цвета

1200*1200

три группы 3d реалистичное декоративное яйцо с золотым цветом на гнезде bd с золотым всплеском текстовый баннер

5000*5000

green environmental protection pattern garbage can be recycled green clean

2000*2000

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

1200*1200

схема бд электронный компонент технологии принципиальная схема технологическая линия

2000*2000

be careful to slip fall warning sign carefully

2500*2775

цвет перо на воздушной подушке bb крем трехмерный элемент

1200*1200

3d модель надувной подушки bb cream

2500*2500

в первоначальном письме bd логотипа

1200*1200

84 летие векторный дизайн шаблона иллюстрация

4083*4083

blue series frame color can be changed text box streamer

1024*1369

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

2000*3000

bd письмо 3d круг логотип

1200*1200

в первоначальном письме ба логотипа

1200*1200

облака комиксов

5042*5042

в первоначальном письме bd шаблон векторный дизайн логотипа

1200*1200

82 летняя годовщина векторный дизайн шаблона иллюстрация

4083*4083

номер 82 золотой шрифт

1200*1200

элегантный серебряный золотой bb позже логотип значок символа

1200*1200

в первоначальном письме bd логотип шаблон

1200*1200

в первоначальном письме bd шаблон векторный дизайн логотипа

1200*1200

84 летие векторный дизайн шаблона иллюстрация

4083*4083

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

3240*4320

капсулы или пилюли витамина b4 диетические

2000*2000

круглая буквица bd или db дизайн логотипа вектор

5000*5000

С Днем Пасхи 2021 84

1300*1300

bb крем ню макияжа постер Новый список преимущественный колос День святого

3240*4320

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

800*800

аэрозольный баллончик увлажняющий лосьон bb cream парфюм для рук

3072*4107

bb логотип дизайн шаблона

2223*2223

жидкая подушка крем bb

1200*1200

Креативное письмо bb дизайн логотипа черно белый вектор минималистский

1202*1202

испуганные глаза комиксов

5042*5042

bb логотип градиент с абстрактной формой

1200*1200

bd письмо логотип

1200*1200

серые облака png элемент для вашего комикса bd

5042*5042

12 7 84 clean

2000*2000

bd письмо логотип

1200*1200

Красивая розовая и безупречная воздушная подушка bb крем косметика постер розовый красивый розовый Нет времени На воздушной

3240*4320

red bb cream cartoon cosmetics

2500*2500

в первоначальном письме bd логотип шаблон

1200*1200

bd tech логотип дизайн вектор

8542*8542

bb градиентный логотип с абстрактной формой

1200*1200

две бутылки косметики жидкая основа белая бутылка крем bb

2000*2000

asmaul husna 84

2020*2020

bb логотип письмо дизайн вектор простые и минималистские ключевые слова lan

1202*1202

круглая буквица bd или db logo

5000*5000

iftar party ramadhan kareem 81

1300*1300

3d золотые числа 81 с галочкой на прозрачном фоне

1200*1200

аэрозольный баллончик увлажняющий лосьон bb cream парфюм для рук

2000*2000

Как вставить текст в картинку в Word? 3 способа.

На ваш выбор есть 3 основных способа вставить текст в картинку в ворде. Самый простой – это использование объекта WordArt. Он позволяет быстро создать “плавающий” текстовый блок, который можно переместить в любое место документа MS Word.

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

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

Способы вставить текст в картинку в Word

Текстовое поле

Тут мы поместим текстовый блок прямо на картинку, которую заранее вставили в документ MS Word. Для этого переходим: Вставка -> Текстовое поле -> Простая надпись.

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

1 Нажимаем на иконку параметров разметки и выбираем обтекание Перед текстом.

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

Передвигать нужно за линию рамки, а не за кружки, т.к. они отвечают за размер, а не за перемещение.

4 Для изменения цвета фона и рамки – ставим курсор на текстовом блоке и переходим: Формат -> Заливка фигуры и Контур фигуры. Если хотите вовсе убрать фон текста и рамку, то при выборе цвета укажите Нет заливки и Нет контура.

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

6 Еще можно поиграться с текстовыми эффектами (тенями, формой и т.д.) в меню: Формат -> Текстовые эффекты. Сам текст нужно предварительно выделить.

В итоге у меня получился такой вариант.

Объект WordArt

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

1 Создаем объект: Вставка -> Добавить объект WordArt.

2 Здесь нужно выбрать готовый стиль.

3 Размещаем текст на картинке. При необходимости корректируем оформление текста.

Разметка изображения

В предыдущих 2-х вариантах мы помещали именно текст на картинку, а сейчас будем перемещать само изображение. Картинка и текст уже должны присутствовать в документе Word.

1 Кликаем по изображению, чтобы появилось меню разметки.

2 В меню выбираем обтекание За текстом.

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

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

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

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

Вразброс лучший ответ это Для 2007 Офиса:
Разметка страницы-Фон страницы-Подложка-Настраиваемая подложка-Рисунок-Выбрать-ОК-Применить.
Все!! !
С другой стороны, Вы можете вставить рисунок, отредактировать яркость и контрастность, и поместить его ЗА ТЕКСТОМ.

Ответ от

22 ответа

Привет! Вот подборка тем с ответами на Ваш вопрос: Как поставить рисунок в ворд, чтобы она была на тексте, но чтобы он был прозрачным, не закрывал текст?

Ответ от Dimas
Здесь подробно описано
ссылка

Ответ от теософия
Выделить рисунок, на ленте зайти в Формат, найти кнопку Цвет и в раскрывающемся списке выбрать Установить прозрачный цвет. К сожалению, на одном рисунке можно сделать прозрачным только один цвет. Лучше рисунок обработать в графическом редакторе, удалить фон и сохранить в формате *.

png или *.gif (если устраивает 256 цветов)

Ответ от Невропатолог
это только можно делать если в режиме фона, в ворде не знаю такого нет вроде это только в презентациях вроде можно делать

Ответ от Лола Ахта
Вставьте нужную картинку в текст, выделите ее, появится окно работа с рисунками. Найдите кнопку «Обтекание текстом» и пробуйте разные варианты работы с изображениями. Вероятно Вам подойдет «За текстом»

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

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

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

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

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

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

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

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

Кликните правой кнопкой по нарисованной фигурке и выберите из контекстного меню пункт «Формат фигуры».

Откроется окно «Формат рисунка». В нем перейдите на вкладку «Заливка» и поставьте маркер в поле «Рисунок или текстура». Потом нажмите на кнопку «Файл».

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

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

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

В нарисованном прямоугольнике будут границы. Если они не нужны, перейдите на вкладку «Цвет линии» и отметьте маркером пункт «Нет линий».

Закройте окно «Формат рисунка», нажав на соответствующую кнопку.

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

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

Переместите его немного ниже, кликните по нему правой кнопкой мыши и выберите из списка «Формат фигуры».

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

Найдите картинку на компьютере, выделите ее и нажмите «Вставить».

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

Если линия вокруг картинки не нужна, разверните меню «Линия» и поставьте маркер в поле «Нет линий».

Область «Формат рисунка» можете закрывать.

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

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

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

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

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

На этом буду заканчивать. Теперь у Вас точно должно все получиться.

Поделитесь статьёй с друзьями:

Если вы часто работали с документами Word, вы скорее всего обращали внимание на выделения в тексте, которое рассчитано на привлечение внимания к определенному объекту в тексте. Это может быть как отдельная буква, слово, предложение или же даже ячейка в таблице, которая вставлена как объект. Возможно даже выделение фоном всего листа целиком или же всего документа. Но чрезмерное выделение может не только не выполнять свое предназначение, а и раздражать при просмотре и чтении документа. Я думаю что вы не увлекаетесь такими крайностями (хотя я видел такое часто) и в случае, если вам для чтения или ознакомления попадется такой документ, после прочтения вы будете знать как в ворде убрать фон за текстом, как убрать фон в ворде при копировании и как сделать фон. Давайте по порядку.

Статьи по теме:

• Как записать файл ISO
• Как в экселе сделать выпадающий список

Как в ворде убрать фон за текстом

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

Удаление фона страницы

Для удаления фона страницы сделайте следующее:

1. Для Word 2007-2010 в открытом документе в верхней части Ворд выбираете раздел «Разметка страницы», для Word 2013 вам надо выбрать раздел «Дизайн». Я использую Word 2013 и изображения привожу для этой версии.
2. В разделе находите панель «Фон страницы» в которой необходимо нажать на кнопку «Цвет страницы»
3. В выпадающем меню нажмите на ссылку «Нет цвета»

Убираем фон текста

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

1. Курсором выделите весь текст, фон которого необходимо убрать или изменить
2. Откройте вкладку «Клавная» в верхней части документа
3. Найдите иконку с изображением ведра с краской и нажмите на него
4. В выпадающем списке выберите нет цвета. Фон выделенного вами текста исчезнет.
5. Еще один инструмент чтобы убрать фон текста — это маркер. С его помощью можно выборочно отмечать нужные слова, а так же выборочно убирать фон. Вы просто выбираете этот инструмент, выбираете цвет выделения (если необходимо выделить) или пункт «Нет цвета» (если необходимо убрать цвет фона и просто выделяете интерактивно выборочный текст. Можно так же выделить весь текст.

Удаление фона всей таблицы

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

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

Удаление фона отдельных ячеек в таблице

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

1. Выделяете несколько ячеек правой кнопкой мыши (не отпуская ее), после выделения должно появиться всплывающее меню. Если не появилось, нажмите правой кнопкой мыши на выделенных ячейках. Для одной ячейки сразу нажимайте на ней правой кнопкой мыши.
2. Нажмите на иконке с ведром.
3. В выпадающем списке выберите «Нет цвета»

Как убрать фон в ворде при копировании

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

1. Выделите текст, который вы вставили.
2. Перейдите на вкладку «Главная», найдите иконку «Удалить все форматирование» с изображением ластика и буквой на его фоне. Нажмите на нее и Ворд уберет все форматирование и фон текста в том числе. Еще одним вариантом не «Заносить» ненужное форматирование в документ — это перед вставкой в Ворд использовать блокнот (входит в стандартный пакет Windows). Блокнот не воспринимает форматирование. Вы вставляете текст в блокнот, потом копируете этот текст из блокнота в Word.

Как сделать фон в ворде

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

Текст на картинке: 10 способов повысить читабельность

Автор Евгения Дычко На чтение 7 мин. Просмотров 2k. Опубликовано 19.01.2018

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

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

Чтобы текст на иллюстрации был читабельным, следуйте этим 10 рекомендациям.

Примеры графики сделаны на графическом онлайн-редакторе Crello.

#1 Настройте фон

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

Если цвет шрифта менять не хочется, поработайте с контрастностью фона:

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

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

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

#2 Делайте плашки

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

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

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

#3 Интегрируйте текст в дизайн

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

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

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

#4 Уважайте цветовые сочетания

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

Чтобы глазу было приятнее, берите не черный, а темно-серый, и не белый, а алебастровый. Ориентируйтесь на собственные эстетические ощущения — если цветовое сочетание режет глаз, хладнокровно отбросьте вариант. Понять, какие оттенки хорошо смотрятся вместе, помогут сервисы вроде Coolors, Paletton и Adobe Color CC. Там легко собрать свою палитру или взять уже готовые.

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

#5 Повторяйте элементы

Любое ненавязчивое повторение — оттенков, элементов, стилей шрифта — помогает графике смотреться собрано и целостно. Так в иллюстрации появляется ритм, как в стихотворении.

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

#6 Настраивайте шрифты

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

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

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

#7 Внимательно подбирайте расстояние

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

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

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

#8 Помните об иерархии

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

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

#9 Контраст, но не конфликт

Цвет или подложка — далеко не единственный способ выделить слово. Можно использовать несколько шрифтов в одной надписи, создавая контраст и приятное напряжение. Хорошо объединяются шрифты с засечками и без. Но не увлекайтесь — баланс и сочетаемость должны быть на первом месте.

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

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

#10 Группируйте текст

Не размещайте на иллюстрации много мелкого текста вместе с изображениями. Исключения составляют важные сообщения и цитаты, но в таком случае текст должен занимать 80-90% пространства.

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

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

•••

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

1. Текст должен легко читаться, для этого делайте достаточно контрастный и размытый фон.
2. Если не хочется затемнять фон, добавьте под текст плашку.
3. Вписывайте текст в шаблон. Используйте детали дизайна, чтобы сделать акцент на отдельных словах.
4. Аккуратно подбирайте цветовые сочетания с помощью Coolors, Paletton
5. Повторение элементов делает дизайн целостным и эстетически привлекательным.
6. Подбирайте шрифт под тему и настроение сообщения.
7. Настройте баланс расстояния между буквами и словами.
8. Соблюдайте иерархию в размерах: чем крупнее кегль, тем больше значимость этого текста.
9. Добавляйте контраста с помощью разных шрифтов и элементов дизайна.
10. Сгруппируйте текст на картинке: либо по центру, либо следуя правилу третей.

Подпишитесь на рассылку новостей. Никакого спама!

Email*

Подписаться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

Все изображения PressFoto: image-7999212 / image-7978247 / image-1315333 / image-5922072 / image-8008807 / image-8005515 / image-8005732 / image-8009797 / image-7587098 / image-6080528 / image-7402238 / image-8004027

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

Похожее

Как сделать фон в Ворде — 5 способов

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

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

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

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

• заливка цветом всей страницы документа;
• использование в качестве фона рисунка;
• изменение цвета фона только под текстом.

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

Изменения фона на странице выполняются в двух режимах, служащих для отображения документа в окне программы Word:

• Разметка страницы.
• Веб-документ.

В этом руководстве вы найдете инструкции о том, как изменить фон в Word 2019, 2016, 2013, 2010, 2007 несколькими способами: выполнить заливку фона на всю страницу, добавить рисунок (изображение) в качестве фона страницы, как поменять фон за текстом, не изменяя фон всей страницы.

Как в Ворде сделать фон страницы

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

Выполните следующие действия:

1. Откройте документ Word, войдите во вкладку «Конструктор» (в Word 2019).

В Word 2016 и в Word 2013 откройте вкладку «Дизайн», а в Word 2010 и в Word 2007 зайдите во вкладку «Разметка страницы».

2. В правом верхнем углу ленты нажмите на кнопку «Цвет страницы», находящуюся в группе «Фон страницы».

3. Откроется окно «Цвета темы», в котором нужно выбрать подходящий цвет для заливки фона страницы.

4. Если, вам не подошли стандартные цвета, нажмите на «Другие цвета…», для выбора нужного варианта. В окне «Цвет», во вкладках «Обычные» или «Спектр» подберите необходимый цвет для заливки фона.

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

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

Выполните настройки способа заливки:

1. Нажмите на кнопку «Цвет страницы».
2. В окне «Способы заливки» находятся вкладки «Градиентная», «Текстура» «Узор», «Рисунок». Выберите подходящий вариант и тип заливки.

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

Как поменять фон Word на рисунок — 1 способ

Сейчас мы сделаем фоновым изображением документа рисунок. Рисунок (изображение, фото, картинка) с компьютера будет использован в виде фона на странице документа Word.

Для этого, необходимо выполнить следующие шаги:

1. Войдите в меню «Конструктор» (в Word 2019), в группе «Фон страницы» нажмите на кнопку «Цвет страницы».

В Word 2016 и в Word 2013 откройте меню «Дизайн», а в Word 2010 и в Word 2007 зайдите в меню «Разметка страницы».

2. В окне «Цвета темы» нажмите на пункт «Способы заливки…».
3. В окне «Способы заливки» откройте вкладку «Рисунок».
4. Нажмите на кнопку «Рисунок…».

5. В открывшемся окне «Вставка изображений» нажмите на кнопку «Из файла», или загрузите картинку из интернета.

6. В окне Проводника выберите подходящее изображение (файл графического формата, поддерживаемый Microsoft Office) со своего ПК.
7. В окне с выбранным фоновым изображением нажмите на кнопку «ОК».

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

Изображение в качестве фона страницы Word — 2 способ

Существует еще один способ для добавления картинки в качестве фонового изображения на страницу документа Word.

1. Откройте вкладку «Вставка» в группе «Иллюстрации».
2. Нажмите на кнопку «Рисунки» («Рисунок»).
3. В открывшемся окне выберите рисунок со своего ПК.
4. Щелкните по картинке, по краям изображения появятся маркеры, с помощью которых можно растянуть рисунок до нужного размера.
5. Во вкладке «Формат рисунка» найдите пункт «Обтекание текстом», в контекстном меню выберите опцию «За текстом».

6. Кликните по картинке, введите текст, который будет отображаться на изображении.

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

Как изменить фон текста Word

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

Вам также может быть интересно:

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

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

Добавление фона после текста — 1 способ

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

Для добавления фона выполните следующие действия:

1. Выделите текст в документе Word.
2. В программе MS Word откройте вкладку «Главная», в группе «Шрифт» нажмите на кнопку «Цвет выделения текста».
3. Выберите нужный цвет.

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

Подобным способом можно выделять отдельные слова или предложения.

Делаем фон за текстом — 2 способ

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

Проделайте следующее:

1. Выделите нужный фрагмент текста.
2. Во вкладке «Главная», в группе «Абзац» нажмите на кнопку «Заливка».
3. В окне «Цвета темы» выберите нужный цвет. Помимо стандартных цветов, здесь имеется возможность для выбора других цветов, которые можно использовать в качестве фона в документе.

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

Выводы статьи

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

Похожие публикации:

методов дизайна для отображения текста поверх фоновых изображений

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

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

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

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

Портфолио фотографий Винарта Фостера на Dribbble

Вот еще один.

Статьи Альтернативные карточки от Олюра на Dribbble

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

Позвольте мне попытаться воссоздать для вас этот дизайн.

Текст с наложением сетки

Насколько теперь читается текст?

Хорошо, это не та картинка. Но это все еще океанские волны.

Фоновое изображение откровенно тревожное. Но имидж не виноват. В конце концов, когда вы решите наложить текст, вы должны быть готовы к ЛЮБОМУ изображению. Значит, изображение может быть любым.

Хороший дизайн — это когда мы учитываем все возможные сценарии.

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

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

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

Проблема 2-в-1 с наложением текста

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

Когда вы накладываете текст на изображение, вы жертвуете двумя вещами:

1. Четкость изображения
2. Читаемость текста

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

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

Изображение может быть любым

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

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

---

Решения для наложения текста

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

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

1. Использование холста

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

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

Я оставляю вам процент непрозрачности.Опять же, это вопрос личного вкуса.

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

Scrim — наложение градиента

Рекомендуемые руководства по холсту:

• Непрозрачность 40%
• Настройки градиента
• Высота: 50% высоты изображения

Это несложные правила. Но, как вы можете видеть из приведенного выше дизайна, эти настройки работают хорошо.

Вы можете прочитать об этом в руководстве Material Design Imagery.

Настройки градиента сетки в Sketch

Преимущества:

• Самое простое и распространенное решение
• Увеличивает контраст для лучшей читаемости текста
• Незаметное изменение дизайна, которое едва заметно

Недостатки:

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

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

Но подожди, пока не уходи! Есть и другие решения, которые могут вам больше подойти.

2. Наложение всего изображения

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

Верно. Возможно, изображение для вас не важно. Текстовая метка — ваш приоритет. Или, может быть, текст покрывает весь размер изображения.

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

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

Короче говоря, это 40% -ная непрозрачность черного на изображении.

Преимущества:

• Полезно для крупного текста (заголовки?), Который покрывает все изображение
• Когда ваш приоритет — текст, а не изображение

Недостатки:

• Может скрыть все изображение
• Может принести в жертву видимость изображения
• Может уменьшить фоновое изображение, как будто оно существует только для эстетики

Вот несколько популярных приложений, которые используют этот подход:

Средняя серия на Android 85000+ Статус и котировки 2017 Android-приложение от Pratik Butani

3.Цветное наложение

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

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

Вот пример.

Обычно выбирается цвет бренда.

Приложение Playgong от Дейвидаса Граужиниса

Если у вас возникли проблемы с выбором цвета, воспользуйтесь инструментом Canva Color Wheel Tool.Он использует теорию цвета и цветовые комбинации в дизайне, чтобы помочь вам найти цвета, которые хорошо сочетаются друг с другом!

4. Мягкие градиенты

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

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

Вы можете использовать такие веб-инструменты, как Coolors и Kuler от Adobe. Это может помочь вам создать цветовые пары, которые хорошо сочетаются друг с другом.

Вот пример.

Веб-агентство Мохаммада Шохага

Преимущества:

• Лучшее выделение бренда (если используется цвет бренда)
• Одноцветный тон позволяет улучшить контраст текста

Недостатки:

• Не подходит для изображений людей, так как их нельзя распознать

5. Полупрозрачное изображение

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

Техника состоит из 3-х слоев (снизу):

1. Низ — сплошной цвет
2. Посередине — полупрозрачное изображение (непрозрачность 40%)
3. Верх — текстовый слой

Преимущества:

• Более мягкое изображение позволяет тексту выделяться
• Делает изображение монотонным, уменьшая шум изображения

Недостатки:

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

6.Размытие

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

Сглаживание изображений за счет уменьшения шума и деталей изображения — Размытие по Гауссу

Пользователи

iOS будут знакомы с этой техникой. В принципах дизайна iOS для обозначения глубины используется размытие. В то время как Android (материальный дизайн) использует тени для обозначения глубины (высоты).

Вот размытие на 16 пикселей слева и размытие на 4 пикселей справа. Убедитесь, что вы не слишком размываете изображение, чтобы основное изображение было полностью неузнаваемым!

Размытие не решает одну и ту же проблему цвета текста и изображения

Преимущества:

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

Недостатки:

• Полностью жертвует изображением ради текста.
• По-прежнему не решает проблему наложения одного цвета.
• Может не соответствовать стилю вашего продукта.Используете размытие в мире материального дизайна?

7. Выделение текста

Здесь мы применяем цвет фона к самому тексту. Этот эффект имитирует традиционный способ выделения текста на бумаге.

Текст с эффектом выделения

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

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

Преимущества:

• Хорошая четкость текста на любом фоне
• Хорошая контрастность

Недостатки:

• При выборе цвета выделения текст может казаться отделенным от изображения
• Может полностью блокировать нижележащее изображение

8. Перейти в оттенки серого

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

С помощью изображения в оттенках серого.

Фильтр изображений в оттенках серого

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

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

Изображение в градациях серого с комбинированной нижней сеткой

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

9. Игра с цветом и позиционирование

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

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

Модули Университета от Flatstudio

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

---

TL; DR — Используйте достаточный контраст

Состояние разительно отличаться от чего-то еще в тесном общении.- Контрастность

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

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

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

Заключение

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

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

Вы даже можете смешивать и сочетать две техники. Ваше воображение — предел. Наложение цвета на холст?

Так какую технику вы собираетесь использовать? Пропустил ли я какой-нибудь популярный метод? Я хотел бы услышать твои мысли.Поговорим в комментариях ниже.

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

Обеспечьте высокую контрастность текста поверх изображений

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

Поскольку изображения играют такую ​​важную роль, часто дизайнеры в конечном итоге помещают текст поверх изображения, чтобы усилить привлекающий внимание аспект фотографии, одновременно предоставляя текстовое содержимое для передачи фактической информации. Однако эти попытки обычно приводят к обратным результатам, обычно когда контраст между текстом и фоном слишком низкий. В соответствии с требованиями доступности для цветового контраста, текст, который не является чисто декоративным или является частью логотипа, должен иметь коэффициент контрастности не менее 4.5: 1 (или 3: 1 для крупных символов, определяемых как шрифт из 18 пунктов или полужирный шрифт из 14 пунктов).

Тонкие настройки имеют большое значение в удобстве использования

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

Нельзя:

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

Сделать:

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

При выборе размещения текста поверх изображения учитывайте как цвет текста, так и основной цвет изображения. Изображения со светлым фоном или изображения, отредактированные так, чтобы казаться блеклыми, не подходят для белого текста, потому что цвета слишком похожи.В таких ситуациях фон необходимо затемнить, чтобы обеспечить достаточный контраст. Это можно сделать либо путем обработки самого изображения, либо путем добавления полупрозрачного черного градиента поверх изображения в CSS. Такой инструмент, как расширение браузера Chrome Color Contrast Analyzer от NCSU, может помочь определить, когда фон стал достаточно затемненным, чтобы обеспечить адекватный контраст для наложенного текста.

Нельзя:

Слева: сайт «Комплименты», посвященный мебели, отображает ссылки на категории продуктов в виде белого текста поверх фотографий.Эти ссылки на категории трудно читать из-за низкой контрастности и, вероятно, будут проигнорированы в пользу более удобных для чтения элементов сетки. Справа: большинство текстовых областей с фотографическим фоном не соответствуют норме контрастности 3: 1 для текста большого размера.

Сделать:

Слева: в этой отредактированной версии к нижней части фотографий, содержащих текст, добавлено размытие, а цвет шрифта был изменен на темные цвета по умолчанию вместо белого. Кроме того, текст был перемещен вниз для согласованного размещения с другими элементами сетки, что позволяет сдерживать размытие в меньшей части изображения.Справа: текст теперь имеет необходимый коэффициент контрастности 3: 1 для доступности. Более того, текст имеет соотношение 4,5: 1 для текста небольшого размера, что обеспечивает удобство чтения для пользователей.

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

Нельзя:

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

Сделать:

Слева: в нашем редизайне мы слегка увеличили непрозрачность до 50% вместо 30% для всех черных текстовых полей, сохранив общий фирменный стиль и обеспечив более высокий контраст, необходимый для белого текста на фоне облаков. Справа: текст в поле теперь проходит тест на контрастность 3: 1.

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

Заключение

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

Добавить текст поверх фотографии

Выберите программу Office, которую вы используете, из раскрывающегося списка.

Используйте WordArt для добавления текста поверх фотографии

1. Убедитесь, что вы вставили фотографию в свою электронную таблицу.

2. На вкладке Вставить в группе Текст щелкните WordArt , щелкните нужный стиль текста и введите текст.

3. Щелкните внешний край объекта WordArt, чтобы выделить его, перетащите текст по фотографии, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

4. Щелкните внешний край фотографии, нажмите и удерживайте CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.

5. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Используйте текстовое поле для добавления текста поверх фотографии

1. Убедитесь, что вы вставили фотографию в свою электронную таблицу.

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

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

4. Щелкните внешний край текстового поля, перетащите текст на фотографию, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

5. Убедитесь, что текстовое поле все еще выделено, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур выполните следующие действия:

   1. Щелкните Заливка формы , а затем щелкните Без заливки .

   2. Щелкните Контур фигуры , а затем нажмите Без контура .

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

7. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Верх страницы

Используйте WordArt для добавления текста поверх фотографии

1. Убедитесь, что в презентацию вы вставили фотографию.

2. На вкладке Вставить в группе Текст щелкните WordArt , щелкните нужный стиль текста и введите текст.

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

4. Щелкните внешний край фотографии, нажмите и удерживайте CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.

5. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Используйте текстовое поле для добавления текста поверх фотографии

1. Убедитесь, что в презентацию вы вставили фотографию.

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

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

4. Щелкните внешний край текстового поля, перетащите текст на фотографию, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

5. Убедитесь, что текстовое поле все еще выделено, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур выполните следующие действия:

   1. Щелкните Заливка формы , а затем щелкните Без заливки .

   2. Щелкните Контур фигуры , а затем нажмите Без контура .

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

7. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Верх страницы

Используйте WordArt для добавления текста поверх фотографии

1. В документе щелкните, чтобы выбрать точку вставки.

2. На вкладке Вставить в группе Иллюстрации щелкните Фигуры , а затем щелкните Новый холст для рисования .

3. Щелкните холст для рисования, а затем на вкладке Вставить в группе Иллюстрации щелкните Изображения .

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

5. На вкладке Вставить в группе Текст щелкните WordArt , щелкните нужный стиль текста и введите текст.

6. Щелкните внешний край объекта WordArt, чтобы выделить его, перетащите текст по фотографии, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

7. Щелкните внешний край фотографии, нажмите и удерживайте CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.

8. В разделе Работа с рисунками на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Используйте текстовое поле для добавления текста поверх фотографии

1. В документе щелкните, чтобы выбрать точку вставки.

2. На вкладке Вставить в группе Иллюстрации щелкните Фигуры , а затем щелкните Новый холст для рисования .

3. Щелкните холст для рисования, а затем на вкладке Вставить в группе Иллюстрации щелкните Изображения .

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

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

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

7. Чтобы изменить шрифт или стиль текста, выделите текст, а затем выберите нужное форматирование текста в контекстном меню.

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

9. Убедитесь, что текстовое поле все еще выделено, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур выполните следующие действия:

   1. Щелкните Заливка формы , а затем щелкните Без заливки .

   2. Щелкните Контур фигуры , а затем нажмите Без контура .

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

11. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Верх страницы

Выберите программу Office, которую вы используете, из раскрывающегося списка.

Используйте WordArt для добавления текста поверх фотографии

1. Убедитесь, что вы вставили фотографию в свою электронную таблицу.

2. На вкладке Вставить в группе Текст щелкните WordArt , щелкните нужный стиль текста и введите текст.

3. Щелкните внешний край объекта WordArt, чтобы выделить его, перетащите текст по фотографии, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

4. Щелкните внешний край фотографии, нажмите и удерживайте CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.

5. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Используйте текстовое поле для добавления текста поверх фотографии

1. Убедитесь, что вы вставили фотографию в свою электронную таблицу.

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

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

4. Щелкните внешний край текстового поля, перетащите текст на фотографию, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

5. Убедитесь, что текстовое поле все еще выделено, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур выполните следующие действия:

   1. Щелкните Заливка формы , а затем щелкните Без заливки .

   2. Щелкните Контур фигуры , а затем нажмите Без контура .

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

7. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Верх страницы

Используйте WordArt для добавления текста поверх фотографии

1. Убедитесь, что в презентацию вы вставили фотографию.

2. На вкладке Вставить в группе Текст щелкните WordArt , щелкните нужный стиль текста и введите текст.

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

4. Щелкните внешний край фотографии, нажмите и удерживайте CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.

5. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Используйте текстовое поле для добавления текста поверх фотографии

1. Убедитесь, что в презентацию вы вставили фотографию.

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

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

4. Щелкните внешний край текстового поля, перетащите текст на фотографию, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

5. Убедитесь, что текстовое поле все еще выделено, а затем в разделе Средства рисования на вкладке Формат в группе Стили фигур выполните следующие действия:

   1. Щелкните Заливка формы , а затем щелкните Без заливки .

   2. Щелкните Контур фигуры , а затем нажмите Без контура .

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

7. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Верх страницы

Используйте WordArt для добавления текста поверх фотографии

1. В документе щелкните, чтобы выбрать точку вставки.

2. На вкладке Вставить в группе Иллюстрации щелкните Фигуры , а затем щелкните Новый холст для рисования .

3. Щелкните холст для рисования, а затем на вкладке Вставить в группе Иллюстрации щелкните Изображение .

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

5. На вкладке Вставить в группе Текст щелкните WordArt , щелкните нужный стиль текста и введите текст.

6. Щелкните внешний край объекта WordArt, чтобы выделить его, перетащите текст по фотографии, а затем, если хотите, поверните текст под углом, который лучше всего подходит для вашей фотографии.

7. Щелкните внешний край фотографии, нажмите и удерживайте CTRL, а затем щелкните край объекта WordArt, чтобы выбрать оба элемента.

8. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Используйте текстовое поле для добавления текста поверх фотографии

1. В документе щелкните, чтобы выбрать точку вставки.

2. На вкладке Вставить в группе Иллюстрации щелкните Фигуры , а затем щелкните Новый холст для рисования .

3. Щелкните холст для рисования, а затем на вкладке Вставить в группе Иллюстрации щелкните Изображение .

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

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

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

7. Чтобы изменить шрифт или стиль текста, выделите текст, а затем выберите нужное форматирование текста в контекстном меню.

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

9. Убедитесь, что текстовое поле все еще выделено, а затем в разделе Инструменты для текстовых полей на вкладке Формат в группе Стили текстовых полей выполните следующие действия:

   1. Щелкните Заливка формы , а затем щелкните Без заливки .

   2. Щелкните Контур фигуры , а затем нажмите Без контура .

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

11. В разделе Инструменты рисования на вкладке Формат в группе Упорядочить щелкните стрелку рядом с Группа , а затем щелкните Группа .

Верх страницы

Альтернативный текст для фоновых изображений, доступность альтернативного текста

Избегайте представления информационных изображений на фоне CSS

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

По причинам доступности авторам не следует использовать фон изображения как единственный способ передачи важной информации. См. Интернет Руководство по доступности контента F3 [WCAG20]. Изображения недоступны в неграфических презентациях, и фоновые изображения могут быть отключены в высококонтрастные режимы отображения. Источник .

Не могу избежать использования изображений CSS или добавить замещающий текст для «неважные» фотографии окружающей среды и т. д.?

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

При предоставлении альтернативного текста для изображения CSS есть количество соображений

Если