Как сделать картинку под текстом
Позиционирование текста на картинке в CSS
Я часто вижу в комментариях к урокам или на форумах, когда новички спрашивают: «Я хочу разместить текст поверх картинки, а он оказывается под или над картинкой. Помогите.» Давайте рассмотрим на конкретном примере, как написать текст на картинке в любом месте.
Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.
Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.
HTML-разметка
Первым делом создаем контейнер для овощной картинки и для надписей. Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах.
После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?
Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.
Теперь займемся текстом.
CSS-стили
В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.
.container <
width: 90%;
position: relative;
text-align: center;
color: #000;
font-family: arial black;
font-size: 250%;
>
Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.
.left <
position: absolute;
top: 26%;
left: 6%;
>
.center <
position: absolute;
top: 17%;
left: 42%;
>
.right <
position: absolute;
top: 1%;
right: 27%;
>
Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.
Медиа-запросы
На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.
@media screen and (max-width: 768px) <
.container <
font-size: 150%;
>
>
Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.
@media screen and (max-width: 470px) <
.container <
font-size: 90%;
>
>
Конечный результат
Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.
Демонстрация.
Из данного видео-курса «HTML5 и CSS3 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как в Ворде (Word) вставить текст в картинку
Как разместить текст поверх рисунка в Word
Обычно для того чтобы вставить текст в картинку пользователи используют растровые графические редакторы. Например, Adobe Photoshop или другие подобные программы. Но, во многих ситуациях можно обойтись и без применения таких мощных программ. В этом материале вы узнаете сразу два способа, как вставить текст в картинку в Word 2007, 2010, 2013 или 2016.
Видео на тему: Как вставить текст в картинку в Ворде: наложение текста поверх картинки в Word
Способ № 1. Простая надпись.
Самый простой способ вставить текст в картинку в текстовом редакторе Word, это воспользоваться функцией «Надпись». Для этого нужно перейти на вкладку «Вставка», нажать на кнопку «Надпись» и в появившемся меню выбрать вариант «Простая надпись».
После этого, на странице появится рамка с текстом. Особенностью данной рамки является то, что она позволяет разместить текст в любой точке документа Word. При этом над текстом в этой рамке можно выполнять различные манипуляции. Например, вы можете поворачивать текст под углом.
Для того чтобы вставить текст в картинку в Ворде, нужно переместить рамку с текстом на вашу картинку. Для этого просто кликните левой кнопкой мышки на краю рамки и не отпуская кнопку мышки переместите рамку на нужное место.
В результате должен получится примерно такой результат, как на картинке внизу.
Дальше нужно выделить мышкой текст внутри рамки и изменить его. Таким образом вы вставите нужный вам текст в картинку.
Если хотите убрать белый фон под текстом, то нужно установить курсор в рамку с текстом и перейти на вкладку «Формат». Здесь нужно нажать на кнопку «Заливка фигуры» и выбрать вариант «Нет заливки».
Похожим способом можно убрать и контур вокруг текста. Для этого нужно нажать на кнопку «Контур фигуры» на вкладке «Формат» и выбрать вариант «Нет контура».
После этого вы получите просто текст поверх картинки.
Данный способ удобен не только тем, что позволяет вставить текст в любом месте картинки. Он еще позволяет использовать дополнительное оформление текста.
Чтобы воспользоваться этими возможностями нужно выделить текст, перейти на вкладку «Формат» и выбрать один из предложенных стилей текста.
В результате можно получить, например, вот такой текст, вставленный поверх картинки.
И все это исключительно с помощью возможностей текстового редактора Word.
Способ № 2. Обтекание текстом.
Второй способ ставить текст в картинку в Ворде заключается в использовании функции под названием «Обтекание текстом».
Для этого нужно кликнуть правой кнопкой мышки по вставленной в Ворд картинке и в появившемся контекстном меню выбрать вариант «Обтекание текстом – За текстом».
После этого картинку можно свободно перемещать по документу Word и при этом она всегда будет под текстом.
Благодаря этому вы можете пододвинуть картинку под нужный вам текст. Таким образом можно вставить текст в картинку в нужном месте документа Word.
Данный способ особенно удобен при использовании больших картинок, который занимают все пространство листа Word.
Дорогой читатель! Добавьте этот сайт в закладки своего браузера и поделитесь с друзьями ссылкой на этот сайт! Мы стараемся показывать здесь всякие хитрости и секреты. Пригодится точно.
Делаем наложение картинки на текст в Adobe Photoshop
В современном дизайне, а иногда и для личных целей может использоваться эффект наложения изображения на текст. Это можно сделать и в специальных интернет-сервисах, которые выполняют нужную задачу за пару кликов без серьёзных временных затрат. Правда, возможный результат сильно ограничен функциональностью сервиса, который вы будете использовать.
Идеальным решением в этом случае выступает программа Adobe Photoshop. Вам будет достаточно минимальных навыков работы с этим инструментом, если вы будете следовать инструкции. Плюс, Фотошоп предлагает практически безграничные возможности в творческой реализации.
Как сделать наложение картинки на текст в Photoshop
Функционал и инструментарий программы позволяет реализовать задуманное неограниченными комбинациями действий. Однако рядовому пользователю будет достаточно только двух очень простых способов, которые будут рассмотрены ниже.
Вариант 1: Установить обтравочную маску
Самый просто и популярный способ. Выполняется по следующей инструкции:
В этом случае создаётся маска из текстового слоя. Примечательно, что текст можно редактировать, но при этом редактировать маску (в привычном понимании) нельзя.
Ранее мы уже писали статью про работу с масками в Adobe Photoshop. Можете ознакомиться с ней для лучшего понимания.
Вариант 2: С помощью выделения
Этот способ чуть менее популярен, чем предыдущий, плюс, он не так удобен. Однако мы всё равно рассмотрим его, так как иногда приходится использовать для вставки картинки в текст. Итак, инструкция к данному варианту выглядит следующим образом:
Несмотря на то, что этот способ выглядит более функциональным он менее гибок и чуть сложен в исполнении. Например, у вас не получится быстро заменить текст, так как его слой рекомендуется растрировать. Можно и не выполнять растрирование, но тогда есть риск некорректного отображения/выделения.
В ходе данной статьи было рассмотрено два основных способа наложения изображения на готовый текст. Второй способ предлагает больше возможностей, но при этом более сложен в исполнении и не всегда понятен новичкам. Первый же способ является самым популярным решением.
Добавляем текст поверх картинки в Microsoft Word
Помимо работы с текстом, программа MS Word также позволяет работать и с графическими файлами, которые в ней можно изменять (хоть и по минимуму). Так, нередко добавленную в документ картинку требуется как-нибудь подписать или дополнить, причем, сделать это необходимо так, чтобы сам текст находился поверх изображения. Именно о том, как наложить текст на картинку в Ворде, мы и расскажем ниже.
Существует два метода, с помощью которых можно наложить текст поверх картинки — это использование стилей WordArt и добавление текстового поля. В первом случае надпись будет красивая, но шаблонная, во втором — вы имеете свободу выбора шрифтов, типа написания и форматирования.
Добавление поверх рисунка надписи в стиле WordArt
1. Откройте вкладку “Вставка” и в группе “Текст” нажмите на пункт “WordArt”.
2. Из развернувшегося меню выберите подходящий стиль для надписи.
3. После того, как вы кликните по выбранному стилю, он будет добавлен на страницу документа. Введите необходимую надпись.
Примечание: После добавления надписи WordArt появится вкладка “Формат”, в которой можно выполнить дополнительные настройки. Кроме того, вы можете изменить размер надписи, потянув за границы поля, в котором она находится.
4. Добавьте в документ изображение, воспользовавшись инструкцией по ссылке ниже.
5. Переместите надпись WordArt, расположив ее поверх изображения так, как вам это необходимо. Кроме того, вы можете выровнять положение текста, воспользовавшись нашей инструкцией.
6. Готово, вы наложили надпись в стиле WordArt поверх изображения.
Добавление поверх рисунка обычного текста
1. Откройте вкладку “Вставка” и в разделе “Текстовое поле” выберите пункт “Простая надпись”.
2. Введите необходимый текст в появившееся текстовое поле. Выровняйте размеры поля, если это необходимо.
3. Во вкладке “Формат”, которая появляется после добавления текстового поля, выполните необходимые настройки. Также, вы можете изменить внешний вид текста в поле стандартным способом (вкладка “Главная”, группа “Шрифт”).
4. Добавьте изображение в документ.
5. Переместите текстовое поле на картинку, если это необходимо, выровняйте положение объектов, воспользовавшись инструментами в группе “Абзац” (вкладка “Главная”).
- Совет: Если текстовое поле отображается в виде надписи на белом фоне, перекрывая таким образом изображение, кликните по его краю правой кнопкой мышки и в разделе “Заливка” выберите пункт “Нет заливки”.
Добавление подписи к рисунку
Кроме наложения надписи поверх изображения, вы также можете добавить к нему подпись (название).
1. Добавьте изображение в документ Word и кликните по нему правой кнопкой мышки.
2. Выберите пункт “Вставить название”.
3. В открывшемся окне введите необходимый текст после слова “Рисунок 1” (остается неизменным в этом окне). Если это необходимо, выберите положение подписи (над или под изображением), развернув меню соответствующего раздела. Нажмите кнопку “ОК”.
4. Подпись будет добавлена к графическому файлу, надпись “Рисунок 1” можно будет удалить, оставив только введенный вами текст.
На этом все, теперь вы знаете, как сделать надпись на картинке в Ворде, а также о том, как подписывать рисунки в этой программе. Желаем вам успехов в дальнейшем освоении этого офисного продукта.
Текст из картинки в Photoshop. Быстро и просто!
Привет пикабушники и пикабушницы! Так как мне нечего делать, я покажу вам как сделать текст из картинки в Photoshop CS/CC.
Вот так вот выглядит готовая работа:
Разрешение и название может быть любым.
2. Закидываем картинку, из которой мы будем делать наш текст (У меня например, космос) и маштабируем с зажатой кнопкой «SHIFT» под наш разрешение созданного файла.
3. Выбираем инструмент «Горизонтальный текст» (можно воспользоваться английской буквой «T») и пишем что хотим.
4. Выбираем инструмент «Перемещение» (можно воспользоваться английской кнопкой «V»), нажимаем комбинацию «CTRL+T» и зажимая «SHIFT» маштабируем текст если надо.
6. Меняем слои местами (слой фона ставите поверх текста). Что бы поменять их местами надо ПКМ зажать слой и перенести ниже или выше.
7. Зажимая «ALT» ставите курсор на линию между слоями и нажимаете ПКМ.
Вот что у нас получилось. Можем добавить фон и наша работа будет готова.
8. Можно добавить фон на ваш вкус. У меня тут будет белый.
9. Сохраняем и выйебываемся перед теми кто ничего не смыслит в фотошопе.
Это был мой первый урок по Photoshop’у так что не судите строго. И извините за присутвующие ошибки.
Название шрифта «Uni sans»
Найдены дубликаты
Ребят а чего вы выебываетесь? Нормальный урок для новичков. Им тоже нужно на чем то учиться. В данном уроке допустим раскрыта полезная фишка быстрой маски Alt+ клик между слоями.
Никто не решает что это нужно знать всем. Но для тех кто этим не интересуется — оно и не нужно. А тем кому это бы пригодилось и так знают три способа как это сделать. И раз это был урок, то стоило бы и их привести тоже и рассмотреть плюсы и минусы. Получается что весь урок сводится к: «Хей, ребзя! Если зажать Альт + ПКМ и перенести верхний слой на нижний, то нажав ЛКМ мы получим квик векторную маску по контурам нижнего слоя».
При этом не рассматривается ситуация как добавить к этой маске еще слои, или как это работает с растром. И получается что это не урок, а частичная перепись хелпа.
Тоже самое силами стандартного paint:
1) Рядом с нашей картинкой пишем белый текст на черном фоне
2) Выбираем прозрачное выделение
3) Переносим текст на нашу картинку
4) С помощью заливки убираем лишнее
Может не ПКМ а ЛКМ?
Хм, а я бы перешёл на слой с картинкой, зажав CTRL щёлкнул по картинке слоя с текстом, скрыл слой с текстом, на слое с картинкой нажал CTRL+I и следом DEL. Мой путь длиннее.
Сразу подумал об этом же.
Да, в фотошопе есть как минимум 3 разных варианта решения одной и той же задачи.
@moderator, я не знаю, что тут делаю
В чем именно заключается Ваш вопрос?
в следующий раз будет урок по сложнее
Свой путь в фотошопе я начинал с сайта demiart.ru
Не рекламы ради, сайт полезен, как по мне. Надеюсь я не нарушил правил Пикабу?
Clipping mask делает это намного быстрее и эффективнее
А потом он будет рассылать уроки фотошопа за 14999.
ита бизнес, йа бизнасмен
йа должин здилат урок как аткрыть фаташоп
я понимаю что этот урок для слишком тупых в фотошопе
вот сейчас обидно было
Не совсем уверен, что ЭТОМУ здесь место. Есть тысяча сайтов для начинающих.
Именно по-этому ты делаешь ебаные скрины комментариев и заливаешь их обратно на пикабу?
Им тут место?
Да, ведь скачать и поставить фотошоп очень сложно
Сканы пленочного зерна для фотографий
В мире цифровой фотографии многие обладатели камер пытаются максимально приблизить свои снимки к пленочным. Тут большую роль играет то самое зерно. Однако создание его в редакторе, например Lightroom, не даёт хорошего результата. Благодаря Борису Ситникову, мы получили возможность пользоваться сканами настоящей плёнки. Я заботливо складываю их вот здесь. Внутри 23 скана: Fuji, Ilford, Kodak, Lucky и Svema. Пользоваться ими очень просто, сейчас покажу как это делать.
Открываем фотографию в Photoshop.
Поверх накладываем нужный вам скан пленочного зерна. Я возьму с наиболее высоким ISO. Это будет Ilford_delta_3200, да и к тому же, на нем наиболее видно само зерно.
Растягиваем по кадру до нужных вам размеров и вида самого зерна (с зажатой кнопкой Shift крутить будет удобней).
Далее я предпочитаю выбрать «Мягкий свет», но вы можете экспериментировать с другими вариантами наложения слоя. Например, многие выбираю «Жесткий свет», на нем лучше видно зерно, а снимок становится более контрастным.
Убавляете непрозрачность слоя до нужных вам значений, у меня это обычно 30-40%.
Объединяете слои и получаете готовый результат. Сканы пленки разные, попробуйте применить каждый. Вот, например, что у меня вышло с Fuji_Velvia_100.
Ещё больше бесплатных и полезных уроков по фотосъемке на моём канале. Тыкаем тут и прокачиваем свои знания. Все с любовью и специально для пикабушников.
Как создавать блики и эффекты на фотографии
В этой статье расскажу как можно разнообразить серию фотографий добавляя различные эффекты. Большая часть из них создается на самой съемке, что не требует знания программ для обработки.
Один из самых простых и часто используемых эффектов на съемке. Достаточно снимать при закатном солнце в контровике, но так же можно создать блик с помощью фонаря или вспышки.
Старайтесь не брать сам источник света в кадр, это позволит избежать лишних пересветов. Кстати, грязь на объективе дает отличные блики в контровике)
Следите за количеством блика, чтобы он не перекрывал весь кадр или не закрывал полностью модель (хотя иногда это уместно)
2. Огоньки и засветки на переднем или дальнем плане
Очень красиво их создать из гирлянд или лампочек, опять же используя светосильный объектив или большое фокусное расстояние.
Для появления огоньков на переднем плане подносите из как можно ближе к камере. Чем объемнее сцена, тем больше будет разнообразие в размытых пятнах.
Снимайте в тусклом и не интенсивном свете, иначе лампочки будут выглядеть блекло.
На открытых пространствах используйте большее фокусное расстояние, это позволит сильнее выделить моделей и увеличить огни на заднем плане.
Следите за расположением огоньков, потому что это сильный композиционный элемент.
3. Дымка, светящиеся узоры и «гуляющий» фокус
Любые предметы около объектива размываются достаточно сильно. Зная это свойство можно подносить любой блестящий предмет и он будет давать блик. Я обычно использую полиэтилен или простой файл А4 (3 и 5 кадр) и оборачиваю вокруг объектива. Можно взять стеклянные украшения, подвески от люстр и тд.
Не забывайте оставлять точку фокуса открытой, иначе будет плохо фокусироваться. Перекрывая весь кадр можно создать эффект дымки (3 кадр). Этот эффект можно имитировать в фотошоп, но вживую он более интересно выглядит за счет складок и неравномерности самого материала.
Еще один эффект это «Тилт шифт» со снятым объективом. Люблю добавить в серию несколько таких кадров (1,2 и 4)
Интересно то, что фокус одновременно находится на фоне и на модели, но при этом не вся модель в фокусе.
Переключитесь в режим LiveView (когда изображение выводится на экран), снимите объектив с камеры, выставите фокус на бесконечности и наклоняйте в разные стороны. При этом весь эффект будет отображаться на экране. Поскольку это достаточно неудобно и долго, то лучше снимать статичные сцены.
Мне удобнее использовать 50мм или 85мм, но экспериментировать можно с любой техникой.
4. Отражения и двойная экспозиция
Первый эффект создается с помощью стекла или зеркала, или даже экрана телефона расположенного перед объективом.
Располагайте под разными углами для более интересного отражения (1,2 и 3 кадры). Так же отслеживайте что именно отражается.
Отлично подходит когда в помещении есть другие источники света, например: лампы, окна, гирлянды и тд. А на улице это могут быть просветы в деревьях, свет между домами и тд.
Двойная экспозиция доступна на многих современных камерах. Либо есть возможность «склеить» снимки в редакторе.
Не забывайте, что для подобных кадров нужен контраст где находятся главные персонажи (4 и 5 снимок).
5. Добавка засветок в фотошоп
Я меньше люблю создавать свет в Фотошоп, но и без него иногда не обходится.
Первый способ когда мы используем заготовки (с бликами или боке) скачанные из интернета и накладываем их через осветляющие режимы (например «экран»)
Можно использовать даже небольшое разрешение исходника с бликом, и стирать эффект в тех местах где он не нужен (1-5 кадры).
Второй способ создается из градиентов, и я им пользуюсь чаще. Обязательно используйте кадры с контровым светом, иначе эффект будет слишком не реалистичен.
Я использую белый цвет чаще, но теплые и холодные засветки тоже бывают уместны. (6-8 кадры)
Способов создать необычную фотографию очень много. Главное не бояться экспериментов, включить фантазию и у вас все получится!
Спасибо, что дочитали до конца! Буду рад ответить на любые вопросы или замечания.