Как сделать разметку в фотошопе

Обновлено: 21.11.2024

Пятнадцать причин, почему я создаю дизайн в браузере, а не в Photoshop.

Я считаю, что дизайн — это не то, как это выглядит, а то, как это работает.

Photoshop — отличный инструмент, и раньше он был второй частью моего процесса проектирования (после того, как я начал с карандаша и листа бумаги), но я изменился, и вот почему:

1. Вы можете поставить контент на первое место

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

2. Больше интерактивности

Улучшения взаимодействия с пользователем с помощью jQuery и CSS3 нельзя увидеть в плоском PSD. Это не только в интересах клиента, такие вопросы, как навигация и удобство использования, необходимо учитывать на этапе проектирования.

3. Лучшее сотрудничество

Нужна помощь? Любой может перейти на веб-страницы и помочь, но с psd вы предоставлены сами себе.

4. Сосредоточьтесь на том, как это работает, а не на том, как это выглядит

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

5. Эксперимент

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

6. Это легко изменить

Поступает отзыв о дизайне: "Можете ли вы просто изменить шрифт на Helvetica?" «Можете ли вы сделать закругленные углы радиусом 10 пикселей, а не 5?» «Можете ли вы изменить весь синий цвет на зеленый?» Подобные изменения интерфейса очень просты в CSS.

7. Принимайте важные решения

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

8. Возьмите управление на себя

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

9 Это безопаснее

Половина дизайна в HTML состоит в том, чтобы нажать кнопку "Сохранить". (Хорошо, я придумал это.) Но если фотошоп дает сбой, вы облажались, а фотошоп умеет делать это в самый неподходящий момент. Если ваш HTML-редактор выйдет из строя, вы вряд ли потеряете больше нескольких минут работы.

10. Это быстрее

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

11. Нам больше не нужны эффекты

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

12. Простые сетки

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

13. Поток текста

Получить текст в формате psd сложно. Не так в HTML. И не заставляйте меня начинать рендеринг текста.

14. От проектирования до развертывания просто

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

15. Это бесплатно

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

Убежден?

Дизайн в браузере для меня более эффективен, стимулирует творчество и приносит больше удовольствия! Попробуйте и решите сами.

Инструмент заметок можно использовать для добавления текстовых заметок к файлу в Photoshop. Документы, аннотированные таким образом, могут быть сохранены в форматах Photoshop (PSD), PDF или TIFF. Чтобы аннотировать открытый документ, выберите инструмент заметки, настройте параметры заметки на панели параметров (рис. 1) и щелкните внутри окна изображения. Значок заметки помещается в документ, и в то же время новая панель заметок (рисунок 2) становится активной. Затем вы можете ввести текст в текстовое поле панели «Примечания», например, краткое описание ретуширования, которое необходимо выполнить для определенной части изображения. Текстовая заметка останется в виде небольшого значка, плавающего над фактическим изображением. Хотя эти примечания можно просмотреть в Photoshop, они не появятся, когда вы приступите к печати изображения.

Этот метод аннотирования изображений упрощает управление отображением заметок и управлением ими.Я довольно часто использую этот инструмент на работе, потому что, когда клиент звонит мне, чтобы обсудить работу по ретуши, я могу открыть изображение, щелкнуть область, над которой нужно поработать, и использовать панель «Примечания», чтобы ввести инструкции для чего угодно. необходимо выполнить дальнейшую ретушь (обычно с приемником в одной руке и печатая в другой!) Однако, если клиент, с которым вы работаете, имеет Photoshop, он может использовать функцию заметок для пометки изображений, которые при открытии в Photoshop могут следует проверить, как показано на Рисунке 3 ниже.

Если вы сохраните копию изображения, аннотированного таким образом, в формате PDF и отправите его клиенту, он сможет открыть его в Adobe Reader, Apple Preview или Adobe Acrobat, а при использовании программы Adobe Acrobat они могут добавлять свои собственные комментарии к заметкам и экспортировать эти комментарии в виде файла заметок, который можно импортировать обратно в исходное изображение Photoshop.

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

Рис. 1. Панель параметров инструмента «Заметка».

Рис. 2. Панель «Примечания».

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

Мы не разрабатываем копии веб-страниц, мы разрабатываем веб-страницы.

Энди Кларк, цитаты о дизайне

По-старому

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

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

Отличный процесс, йоу!

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

Умри Фотошоп, умри

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

Приложение Adobe Photoshop CS4 неожиданно испортило вам день.

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

Текст, обработанный в Photoshop (слева) и Safari (справа).

Проблемы со сбоями и отрисовкой текста — это ужасно, но мы научились с ними жить. Настоящая проблема с использованием Photoshop для макетов — это ожидания, которые вы устанавливаете для клиента. Когда вы отправляете клиенту статичное изображение дизайна, вы не даете ему всей картины — они не могут увидеть, как будет работать гибкая сетка, как дизайн будет выглядеть в различных браузерах, основных взаимодействий, таких как :hover эффекты или поведение JavaScript. Подробнее о недостатках показа дизайна клиентам в виде изображений, а не веб-сайтов, читайте в статье Энди Кларка «Время прекратить показывать клиентам статичные изображения дизайна».

Неизбежное зло?

Раньше мы мирились с Photoshop, потому что он был жизненно важен для получения наших любимых закругленных углов, теней, внешнего свечения и градиентов. Однако с недавней адаптацией CSS3 в основных браузерах и медленной и радостной смертью IE6 браузеры могут отображать макеты так же красиво, как созданные в графическом редакторе. Благодаря возможностям RGBA , text-shadow , box-shadow , border-radius , прозрачных PNG и @font-face вы можете создать прототип, который излучает великолепие прямо в браузере. Если вы сможете дочитать эту эпическую статью до конца, я покажу вам шаг за шагом, как создать великолепный макет, используя в основном разметку.

Начните с раздевания

Контент предшествует дизайну.Дизайн в отсутствие содержания — это не дизайн, а украшение.

Джеффри Зельдман

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

Пример нестилизованного контента во всей его красе. Посмотреть в большом размере.

Очистить макет

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

Макет с выполненной базовой компоновкой.

Получить ваши сетки

Существует множество инструментов, позволяющих накладывать сетку на окно браузера. Для пользователей Mac я рекомендую использовать Slammer, а пользователи ПК могут проверить один из доступных букмарклетов, например 960 Gridder.

Макет с сеткой, примененной с помощью Slammer.

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

Начните свой стиль

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

РГБА ? Больше похоже на RGB, ура!

С помощью RGBA легко ввести цвет. Мне нравится начинать с основного цвета страницы, а затем использовать белый цвет с различной степенью прозрачности, чтобы выделить разделы контента.

В макете примера для фона тела задано значение rgba(203,111,21) , для контейнеров содержимого задано значение rgba(255,255,255,0.7) , а несколько элементов выделены цветом rgba(255,255,255,0.1). не знаете, как работает RGBA, ознакомьтесь с очень полезной статьей Дрю МакЛеллана на 24ways.

Тип укладки

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

В недавней статье A List Apart мастер веб-типографики™ Джейсон Санта-Мария предлагает отличный совет по выбору шрифтов:

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

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

Крупный план в шапке сайта.

Давайте посексуальнее

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

Добавьте немного свечения

Объекты в естественном мире отражают свет, поэтому, чтобы ваш дизайн казался осязаемым и органичным, придайте ему немного свечения. В примере дизайна я добился этого, создав два градиента от белого к прозрачному с различной непрозрачностью. Оба имеют сплошную белую рамку сверху, что придает краям эффект двойной границы и делает их более четкими. Использование text-shadow CSS3 для заголовков и box-shadow для модулей контента — еще один быстрый способ добавить глубины.

Общий и крупный план дизайна с добавленными градиентами, text-shadow и box-shadow. Информацию о том, как реализовать text-shadow и box-shadow с помощью RGBA, можно найти в статье, которую я написал об этом на прошлой неделе.

37 элементов стиля

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

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

Отправить

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

Не так быстро, Бастер!

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

Обновление типографики

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

Fakey McClient

Ой! К счастью, с помощью CSS удалить Грузию так же просто, как выполнить поиск и замену в таблице стилей. В моем пересмотренном макете я использовал @font-face и League Gothic для заголовков, чтобы придать типографике уникальное ощущение, которое ищет клиент.

Тот же макет с использованием @font-face в заголовках. Если вы не знакомы с реализацией @font-face , ознакомьтесь с полезной статьей Nice Web Type.

Добавление закругленных углов

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

Fakey McClient

Переключение на закругленные углы — это кошмар, если вы создаете макет в Photoshop, поскольку это означает воссоздание большинства форм и элементов пользовательского интерфейса в дизайне. К счастью, на помощь приходит CSS border-radius! Применив эту жемчужину стиля к нескольким классам, вы быстро освоитесь.

Мокап со скругленными углами, созданный с помощью border-radius. Если вы не знаете, как реализовать border-radius, ознакомьтесь с кратким руководством CSS3.info.

Внесение изменений в цвет

Дизайн слишком темный, это угнетает! Они называют это «блюзом» не просто так, тупица. Можете ли вы попробовать использовать более яркий цвет? Я хочу оранжевый, как у Зельдмана.

Fakey McClient

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

Мокап в оранжевой цветовой гамме. Лучше всего смотреть в большом размере.

Гм, а как насчет Internet Explorer?

Спасибо за напоминание, buzzkill. Некоторые функции CSS, которые я предложил вам использовать, такие как RGBA, text-shadow и box-shadow и border-radius, не поддерживаются в Internet Explorer. Я знаю, мне тоже становится грустно. Однако это не означает, что вы не можете опробовать эти методы в своих макетах на основе разметки. Суть здесь в том, чтобы сделать ваши макеты как можно более эффективными и с самого начала уделить внимание разметке.

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

Идея поощрения пользователей, выбравших современные браузеры, не нова. Дэн подробно описывает это в Handcrafted CSS, и в прошлом об этом неоднократно писали Аарон Густафсон и Энди Кларк.Я считаю, что нам не нужно проектировать с наименьшим общим знаменателем (кашель, пользователи IE6, кашель); вместо этого мы должны создавать дизайны, которые красивы в современных браузерах, но все же приятно ухудшаются для другого парня. Однако некоторые клиенты просто не настолько прогрессивны, и в этом случае вы всегда можете использовать фоновые изображения для теней и закругленных углов, как вы это делали раньше.

Заключительные мысли

С появлением CSS3 браузеры могут создавать красивые детализированные макеты так же, как и Photoshop, и в два раза быстрее. Я не единственный, кто приводит доводы в пользу этого пересмотренного процесса; в своей статье «Пора перестать показывать клиентам визуальные эффекты статического дизайна» и в своей презентации «Стены рушатся» Энди Кларк приводит фантастические доводы в пользу создания макетов с помощью разметки.

Поэтому я полагаю, что моя задача для вас на 2010 год – перейти от Photoshop к коду. Даже если аргументов в пользу проектирования в браузере недостаточно, чтобы заставить вас навсегда изменить свой процесс, стоит попробовать. Посмотрите на Новый год как на время для экспериментов; применение ограничений и оценка старых процессов могут творить чудеса для повышения вашей эффективности и творчества.

Об авторе

Меган Фишер увлекается совами, кофе и веб-дизайном. В своей постоянной миссии по улучшению Интернета она сотрудничает с некоторыми из лучших дизайнеров в отрасли, такими как SimpleBits, Happy Cog и Crush + Lovely. Когда она не создает интерфейсы, она говорит, пишет в Твиттере, пишет на Owltastic или публикует фотографии кофе в Art in my Coffee.

Предоставлено вам

Самый простой способ опубликовать быстрые и гибкие веб-сайты HTML5, которые понравятся вашим клиентам.

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

Обзор методов создания SVG-спрайтов

Сара Суэйдан показывает нам три способа создания спрайтов значков с помощью SVG : с помощью HTML , CSS и, возможно, наиболее действенного метода, с помощью идентификаторов фрагментов. SVG стремительно развивается в этом году. Будете ли вы делать то же самое в 2015 году?

Именование вещей

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

Надежные электронные письма в формате HTML

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

Подстрекать к бунту

Джереми Кит призывает к оружию по поводу разметки диалогов в HTML и, в частности, в HTML5. Держитесь твердо, хорошие дизайнеры и веб-разработчики, и не позволяйте плохо сформулированным спецификациям сбивать людей с пути!

Другой мой рождественский подарок – список определений

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

Разметка облака тегов

Марк Норман Фрэнсис рассказывает о все более распространенном облаке тегов и, в частности, о том, как его можно разметить в HTML . Очевидно, что это не однозначная проблема, так как все делают это по-своему. Что нам нужно, так это какой-нибудь наркоман разметки, чтобы взвесить предложенный им метод. Ой, подождите…

Это легко сделать с помощью программ для iPhone, Android, Windows и Mac

Молли К. Маклафлин пишет о технологиях с 2004 года. Ее работы публиковались на многих технических сайтах в Интернете, включая PCMag, Dealnews, Wirecutter и многие другие.

Кристин Бейкер – консультант по маркетингу с опытом работы с различными клиентами. Ее опыт включает социальные сети, веб-разработку и графический дизайн.

Что нужно знать

Мобильные устройства. На iPhone используйте инструмент «Разметка» в приложении «Фото». На Android используйте инструмент "Текст" в Google Фото.
На Mac: откройте приложение "Фото" и выберите изображение. Выберите «Правка» > «Дополнительно» > «Разметка» > значок «Текст» (T).
В Windows 10: откройте изображение в приложении "Фотографии". Выберите «Редактировать и создать» > «Редактировать с помощью Paint 3D» > «Текст».

В этой статье объясняется, как добавить текст к изображению на Mac, Windows, iOS и Android. Информация относится к iOS 13, iOS 12 и iOS 11; Андроид 8 и 7; macOS Catalina (10.15) через macOS Sierra (10.13); и Windows 10, 8 и 7.

Добавление текста к фотографиям на iPhone с помощью приложения «Фото»

Если у вас iPhone с iOS 11 или более поздней версии, выполните следующие действия, чтобы добавить текст к изображению.

Откройте приложение "Фото" и выберите изображение.

Нажмите «Изменить» в левом верхнем углу.

Нажмите значок меню (три горизонтальные точки) в правом верхнем углу.

Выберите Разметка во всплывающем меню.

Нажмите значок «плюс» (+) в инструментах в нижней части экрана «Разметка», чтобы добавить текст. Вы также можете выбрать ручку, маркер и карандаш.

Выберите Текст во всплывающем меню. На изображении появится текстовое поле. Вы можете перемещать его или изменять его размер, касаясь и перетаскивая его. Чтобы изменить шрифт текста, коснитесь значка "Шрифт" (большой и маленький A внутри круга).

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

Хотите рисовать на своих фотографиях? Есть несколько отличных приложений для добавления надписей к фотографиям.

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

В Google Фото есть аналогичный инструмент для добавления текста к фотографиям:

Откройте фотографию в Google Фото.

Внизу фотографии нажмите "Изменить" (три горизонтальные линии).

Нажмите значок "Разметка" (волнистая линия).

Вы также можете выбрать цвет текста на этом экране.

Нажмите инструмент «Текст» и введите нужный текст.

По завершении выберите "Готово".

Как использовать Photoshop Express для iOS и Android

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

Чтобы добавить текст к фотографиям на iOS или Android с помощью Photoshop Express:

Откройте приложение Photoshop Express и выберите изображение.

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

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

Теперь вы можете перемещаться по текстовым полям разных форм и стилей.

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

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

Нажмите «Шрифт», «Цвет», «Обводка» или «Выравнивание» внизу экрана, чтобы внести другие изменения.

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

Добавление текста к изображениям на Mac с помощью Apple Photos

Вы также можете добавлять текст к изображениям с помощью приложения Apple Photos на Mac. Как и в случае с iPhone, вы используете инструмент разметки.

Откройте приложение "Фото" на Mac и выберите изображение, чтобы открыть его.

Выберите «Изменить» в верхней части экрана.

В правом верхнем углу экрана выберите значок "Дополнительно" (три вертикальные точки) и выберите "Разметка" в раскрывающемся меню.

В верхней части экрана выберите значок "Текст" (T внутри поля), чтобы разместить на изображении поле с надписью "Текст".

Нажмите и перетащите текстовое поле, чтобы переместить его. Нажмите значок «Стиль текста» (прописная буква «А»), чтобы изменить стиль, размер и цвет шрифта, а затем выберите «Сохранить изменения».

Microsoft Photos и Microsoft Paint для Windows

Вы можете добавить текст к фотографиям на ПК с Windows 10 с помощью Microsoft Photos. Если у вас Windows 8 или Windows 7, вам нужно будет использовать Microsoft Paint. В Windows 10:

Откройте приложение "Фото" и выберите изображение.

В правом верхнем углу экрана выберите «Редактировать и создать» > «Редактировать с помощью Paint 3D».

В верхней части экрана выберите Текст.

Нажмите и перетащите, чтобы нарисовать текстовое поле.

Введите нужный текст.

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

В левом верхнем углу выберите Меню.

Выберите Сохранить или Сохранить как.

В Windows 8 и Windows 7

Чтобы добавить текст к изображениям в Microsoft Paint в Windows 8 и 7:

Запустите Microsoft Paint и откройте изображение.

Выберите A на панели инструментов, затем выберите фотографию.

Нажмите и перетащите, чтобы нарисовать текстовое поле.

В меню появится опция «Текст». Здесь вы можете изменить шрифт, фон и цвета. Введите желаемый текст.

Читайте также: