Как сделать надпись на изображение при верстке
Учитывая современные тренды использовать высококачественные изображения в качестве заднего фона на страницах Интернет сайтов , очень важно обеспечить высокий контраст между текстом и задним фоном. Очень важно, чтобы текст был разборчивым, таким образом, посетители сайта смогут получить ту информацию, которую хотят донести владельцы сайтов.
В этом уроке представлены 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.
Итоговый результат выглядит более профессиональным, а текст намного легче прочитать.
5. Размытие Заднего фона
5-й и последний способ улучшить контраст - это лёгкое размытие заднего фона.
Изначально, текст очень сложно различить на заднем фоне.
Первый шаг- преобразуйте слой с задним фоном в смарт-объект. Просто, щёлкните правой кнопкой мыши по слою с задним фоном и в появившемся окне, выберите опцию Преобразовать в смарт-объект (Convert to Smart Object).
Установите радиус размытия 3.8 px.
Теперь контраст значительно улучшен, а текст можно легко прочитать.
Надеюсь, вам понравился данный урок!
Всем привет! Здравствуйте дорогие и уважаемые читатели блога сайт . Из этой статьи вы узнаете о самом простом способе нанесения надписи на изображение. Мы разберемся, как вставить в картинку текст, используя стандартный редактор Paint , входящий во все редакции Windows.
Конечно, использование Фотошопа или другой серьезной программы, позволяет сделать более качественную надпись на картинке. Но с учетом того, что основной аудиторией блога являются начинающие пользователи, рассмотрим, как подписать картинку или фотографию, применяя штатный графический редактор Paint .
Запустить редактор очень просто. Для этого щелкните на кнопке «Пуск » или нажмите клавишу Win (клавишу с эмблемой Windows). В открывшемся меню выберите «Все программы » - «Стандартные » - «Paint », после чего откроется окно графического редактора.
Цифрами на рисунке обозначены: 1 – кнопка «Paint
»; 2 – лента (панель инструментов); 3 – рабочая область.
Открытие изображения в редакторе
Для вставки нужного изображения в редактор, нажмите кнопку «Paint » и выберите в меню пункт «Открыть ».
В появившемся окне Проводника найдите требуемое изображение и нажмите «Открыть
».
Еще один способ вставить картинку в окно редактора - щелкнуть по ней (нужной картинке) ПКМ, а затем выбрать в открывшемся меню пункт «О ткрыть с помощью » - «Paint ».
При подготовке скриншота (снимка экрана), изображение, помещенное в буфер обмена после нажатия клавиши Prt Scr , вставляется в редактор щелчком по кнопке «Вставить » (1).
Добавление текста к изображению
Для вставки текста в изображение используется инструмент «Текст », обозначенный на предыдущем рисунке цифрой 2. Для примера нанесем надпись на какую-нибудь реальную картинку.
В первую очередь щелкните мышкой сначала на инструменте «Текст », а затем на том месте картинки, куда вам нужно вставить надпись. При этом на изображении должна появиться выделенная штрихами область с мигающим курсором, а на панели инструментов - дополнительное меню для ввода текста.
Выберите нужную гарнитуру, размер и остальные характеристики шрифта.
Щелкните на кнопке «Цвет 1 » и, в группе «Цвета », выберите подходящий цвет текста.
Введите текст надписи. Щелкните мышкой в любом месте рисунка, за пределами выделения. В результате, границы выделения исчезнут, а надпись зафиксируется на выбранном месте картинки. После этого изменить ее будет нельзя – можно только удалить и сделать все повторно.
До фиксации надписи на постоянном месте, ее можно изменить, то есть выделить и переписать, или переместить в любое другое место изображения.
Для перемещения надписи, наведите курсор на границу выделения, чтобы он превратился в двухстороннюю стрелку или крестик, зажмите рамку мышкой и тяните в нужном направлении. Стрелка позволяет передвинуть сторону выделенной области, а крестик – все выделение вместе с надписью.
Если вам нужна надпись с фоном, то добавлять его нужно также до фиксации надписи. Для этого, щелкните на кнопке «Непрозрачный » в группе «Фон », нажмите кнопку «Цвет 2 » и, перемещая указатель по квадратикам палитры, подберите нужный фон для надписи.
В том случае, если ни один цвет вас не устраивает, выберите любой цвет фона с помощью кнопки «Изменение цветов ».
Не бойтесь испортить рисунок в ходе нанесения надписи. С помощью изогнутой стрелки, расположенной в левом верхнем углу окна, всегда можно отменить одно или несколько последних действий.
Вот и все, что я хотел рассказать о нанесении текста на изображение. Посмотрите, как это получилось у меня.
На этом я заканчиваю и надеюсь, что статья будет вам полезна.
Вы узнали, как вставить в картинку текст с помощью стандартного редактора Paint , а это может пригодиться вам в работе. Спасибо за внимание. Удачи!
Каждый день на форумах html новички спрашивают: «Как разместить текст поверх изображения?». Некоторые находят неправильный выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.
Используя методы, описанные в уроке, мы можем получить такой результат:
Подготовка
Возьмём картинку
Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.
Способ первый: картинка как фон div
Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.
Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.
Результат:
Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css
Способ второй: наложение двух тегов друг на друга
Суть этого способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого верхнего угла контейнера.
Example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока.example2.
Example2 span:
display:inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute — для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left — отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)
Результат:
Минусом этого способа является то, что нарушается семантика кода, появляется много лишних тегов. Но зато он не привязан к размерам картинки, он позволяет делать фон у текста, делая его более читаемым, да и вообще даёт нам полную свободу в настройке стилей.
Играя с css и структурой тегов можно добиться и такого результата:
Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.
Код последнего результата:
Я - заголовок
А я - комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.Помимо работы с текстом, программа MS Word также позволяет работать и с графическими файлами, которые в ней можно изменять (хоть и по минимуму). Так, нередко добавленную в документ картинку требуется как-нибудь подписать или дополнить, причем, сделать это необходимо так, чтобы сам текст находился поверх изображения. Именно о том, как наложить текст на картинку в Ворде, мы и расскажем ниже.
Существует два метода, с помощью которых можно наложить текст поверх картинки — это использование стилей WordArt и добавление текстового поля. В первом случае надпись будет красивая, но шаблонная, во втором — вы имеете свободу выбора шрифтов, типа написания и форматирования.
1. Откройте вкладку “Вставка” и в группе “Текст” нажмите на пункт “WordArt” .
2. Из развернувшегося меню выберите подходящий стиль для надписи.
3. После того, как вы кликните по выбранному стилю, он будет добавлен на страницу документа. Введите необходимую надпись.
Примечание: После добавления надписи WordArt появится вкладка “Формат” , в которой можно выполнить дополнительные настройки. Кроме того, вы можете изменить размер надписи, потянув за границы поля, в котором она находится.
4. Добавьте в документ изображение, воспользовавшись инструкцией по ссылке ниже.
5. Переместите надпись WordArt, расположив ее поверх изображения так, как вам это необходимо. Кроме того, вы можете выровнять положение текста, воспользовавшись нашей инструкцией.
6. Готово, вы наложили надпись в стиле WordArt поверх изображения.
Добавление поверх рисунка обычного текста
1. Откройте вкладку “Вставка” и в разделе “Текстовое поле” выберите пункт “Простая надпись” .
2. Введите необходимый текст в появившееся текстовое поле. Выровняйте размеры поля, если это необходимо.
3. Во вкладке “Формат” , которая появляется после добавления текстового поля, выполните необходимые настройки. Также, вы можете изменить внешний вид текста в поле стандартным способом (вкладка “Главная” , группа “Шрифт” ).
4. Добавьте изображение в документ.
5. Переместите текстовое поле на картинку, если это необходимо, выровняйте положение объектов, воспользовавшись инструментами в группе “Абзац” (вкладка “Главная” ).
- Совет:
Если текстовое поле отображается в виде надписи на белом фоне, перекрывая таким образом изображение, кликните по его краю правой кнопкой мышки и в разделе “Заливка”
выберите пункт “Нет заливки”
.
Добавление подписи к рисунку
Кроме наложения надписи поверх изображения, вы также можете добавить к нему подпись (название).
1. Добавьте изображение в документ Word и кликните по нему правой кнопкой мышки.
2. Выберите пункт “Вставить название” .
3. В открывшемся окне введите необходимый текст после слова “Рисунок 1” (остается неизменным в этом окне). Если это необходимо, выберите положение подписи (над или под изображением), развернув меню соответствующего раздела. Нажмите кнопку “ОК” .
4. Подпись будет добавлена к графическому файлу, надпись “Рисунок 1” можно будет удалить, оставив только введенный вами текст.
На этом все, теперь вы знаете, как сделать надпись на картинке в Ворде, а также о том, как подписывать рисунки в этой программе. Желаем вам успехов в дальнейшем освоении этого офисного продукта.
