Html как сделать надпись на картинке: Как сделать текст на изображении

Как напечатать текст на фото, рисунке

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

 

Для ее запуска щелкните по Пуск, в списке найдите «Стандартные-Windows» и выберите Paint.

Примерно так выглядит программа:

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

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

Когда откроете нужное место и найдете рисунок (фото), кликните по нему два раза левой кнопкой мышки.

Чтобы найти изображение быстрее, щелкните правой кнопкой внутри окошка (по белой части), из списка выберите «Вид» и укажите «Крупные значки», «Огромные значки» или «Эскизы страниц».

 

Изображение добавится в программу. Часто оно довольно большого размера и целиком не помещается (как будто обрезается). Для уменьшения масштаба используйте ползунок в правом нижнем углу.

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

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

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

Рядом можно выбрать цвет букв.

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

Укажите нужные параметры (шрифт, размер и другие) и напечатайте текст.

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

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

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

Для закрепления надписи (окончательного её нанесения) щелкните по пустому месту левой кнопкой мыши.

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

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

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

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

В поле «Имя файла» введите для него название. То есть сотрите то, которое указано по умолчанию, и наберите другое (например, цифру). И щелкните по «Сохранить».

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

Автор: Илья Кривошеев

Добавьте текст на изображение в Photoshop Elements


 

Загрузите пробную версию Photoshop Elements | Изучите линейку продуктов Elements

 


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

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

Текст в одну строку (вверху изображения) и текст в абзаце (внизу изображения).


Примечание.

Используйте инструмент «Текст-маска» (нажмите «Alt/Option» > инструмент «Текст», чтобы изменить активный инструмент), чтобы создать выделенный фрагмент в форме текста. Затем текст-маску можно использовать для создания различных спецэффектов.

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

Примечание.

При добавлении текста на изображение в режиме индексированных цветов программа Photoshop Elements не создает новый текстовый слой. Вводимый текст появляется в виде маски.

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

  2. Выполните одно из следующих действий:

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

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

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

  3. (Необязательно) Выберите параметры текста, например шрифт, стиль, размер и цвет на панели «Параметры инструмента».

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

    Текст появится в своем собственном слое. Чтобы просмотреть слои, нажмите F11 во вкладке «Эксперт».

  5. Завершите создание текстового слоя, выполнив одно из следующих действий.

    • Нажмите кнопку «Применить» .

    • Нажмите кнопку «Ввод» на цифровой клавишной панели.

    • Нажмите изображение за пределами текстового поля.

    • Активизируйте другой инструмент на панели инструментов.

На панели параметров задайте следующие параметры текстового инструмента:

Гарнитура

Задает гарнитуру нового или имеющегося текста.

Начертание

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

Размер шрифта

Задает размер·нового или имеющегося шрифта.

Цветное меню

Задает цвет нового или выделенного текста.

Главное меню 

Задает промежуток между строками нового или выделенного текста.

Трекинг

Задает промежуток между символами нового или выделенного текста.  

Псевдополужирный 

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

Псевдокурсив 

Задает курсивное начертание нового или имеющегося шрифта.

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

Подчеркивание 

Задает подчеркивание текста.

Зачеркивание 

Задает перечеркивание текста.

Выравнивание текста

Указывается выравнивание текста. Горизонтальная ориентация текста позволяет выравнивать текст: по левому краю, по центру или по правому краю. При вертикальной ориентации текста: по верху, центру и низу.

Вкл./ выкл. ориентацию текста 

Изменяет вертикальную ориентацию текста на горизонтальную и наоборот.

Деформирование текста 

Деформирует текст на выделенном слое.

Сглаживание 

Применяет алгоритм сглаживания для создания более гладких границ текста.

Применение алгоритма сглаживания


A. Флажок «Сглаживание» снят B. Флажок «Сглаживание» установлен 

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

  1. Выберите инструмент «Текст вдоль фигуры» . Чтобы быстро сменить активный инструмент «Текст», выберите «Параметр» и нажмите активный инструмент.

    Инструмент «Текст вдоль фигуры»


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

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

    Изменяйте текст таким же способом, как изменяется обычный текст.

    Нажмите и введите текст.


  4. После добавления текста нажмите «Применить» . Для некоторых фигур текст должен быть написан внутри. Можно перемещать текст по контуру или внутри/снаружи него. Для этого удерживайте нажатой клавишу Cmd и одновременно нажмите и перетащите курсор мыши (текст появляется по маленькой стрелке). Можно перетащить курсор в выделенную область: путь текста может проходить внутри или за пределами области.

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

  1. Выберите инструмент «Текст в выделенном фрагменте» . Чтобы быстро сменить активный инструмент «Текст», выберите «Параметр» и нажмите активный инструмент.

Инструмент «Текст в выделенном фрагменте»

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

Выбор фрагмента.


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

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

Добавление текста.


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

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

Можно начертить и добавить текст по заказному контуру.

  1. Выберите инструмент «Текст по заказному контуру» . Чтобы быстро сменить активный инструмент «Текст», выберите «Параметр» и нажмите активный инструмент.

    Инструмент «Текст по заказному контуру»


  2. Создайте в каждом делении заказной контур на изображении. Можно сохранить/отменить созданный в каждом делении контур, чтобы перерисовать его от панели параметров инструмента.

  3. Чтобы уточнить или перерисовать контур, нажмите «Изменить»·на панели параметров инструмента. Используйте узлы, которые появляются на контуре, для его изменения.

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

    Добавление текста.


  5. После добавления текста нажмите «Применить» .

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

Результат использования инструмента «Горизонтальный текст-маска» для создания заполненной области выделения.


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

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

  3. Выберите дополнительные параметры шрифта (См. раздел «Параметры текстовых инструментов») и введите нужный текст.

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

Правовые уведомления   |   Политика конфиденциальности в сети Интернет

Тег HTML figcaption

❮ Назад Полный справочник HTML Далее ❯


Пример

Используйте элемент

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


  Trulli
 
Рис.1 — Трулли, Апулия, Италия.

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Тег

определяет заголовок для элемента
.

Элемент

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


Поддержка браузера

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

Элемент
8,0 9,0 4,0 5.1 11,0

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.


Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.



Другие примеры

Пример

Используйте CSS для оформления

и
:





<рисунок>
  jpg» alt=»Trulli»>
 

Рис. 1 — Trulli, Апулия, Италия


Попробуйте сами »


Связанные страницы

Ссылка HTML DOM: Figcaption Object 2 CSS Настройки по умолчанию

20 9018

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

figcaption {
  display: block;
}

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

31 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

3 Top1s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

html — Показать подпись к изображению внизу изображения

Задавать вопрос

спросил

Изменено 4 года, 9 месяцев назад

Просмотрено 4к раз

Я пытаюсь отобразить подпись к изображению внизу.

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

, содержащего изображение, не изменяется в соответствии с изображением.

 <рисунок>
    
    
Подпись

Я поискал и обнаружил, что обычно нужно добавить 9Отображение 0022: встроенный блок , как предлагается здесь. Здесь это не влияет. Я подозреваю, что это связано с тем, что само изображение имеет CSS с position: absolute . Если я удалю этот бит, макет сломается. (Не мой CSS, и я не веб-разработчик.) Итак, похоже, мне нужен способ заставить

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

  • html
  • css
  • рисунок

я бы предложил сделать так position: absolute; для figcaption не img что цифра может принимать ширину из img

 цифра {
  граница: сплошная 1px;
  отображение: встроенный блок;
  маржа: 0;
  положение: родственник;
}

figcaption {
  положение: абсолютное;
  внизу: 1см;
  слева: 0;
  цвет фона: желтый;
  ширина: 100%;
} 
 <рисунок> 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *