dropcrop
Войти

dropcrop Блог

Как добавить текст на фото — с кириллицей и без кракозябр

· 7 мин чтения

Как добавить текст на фото — с кириллицей и без кракозябр

Добавить текст на фото бесплатно можно прямо в браузере, без установки программ: откройте dropcrop.ru, загрузите снимок и в разделе «Текст и слои» нажмите «+ Заголовок» или «+ Текст». Дальше — про то, как не получить квадратики вместо русских букв, какой кегль останется читаемым на телефоне и что сделать, чтобы надпись не резалась при смене формата фото.

Зачем вообще подпись на фото

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

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

Как добавить текст: пошагово

  1. Откройте dropcrop.ru и загрузите фото.
  2. Перейдите в раздел «Текст и слои» в левом меню.
  3. Нажмите «+ Заголовок» для крупной надписи или «+ Текст» — для подписи помельче: это две разные кнопки, заголовок сразу встаёт крупным кеглем, текст — читаемым для абзаца, и не приходится каждый раз уменьшать его вручную.
  4. Впишите свои слова в поле надписи или наберите прямо на кадре: двойной клик по надписи (или Enter, когда она выбрана) ставит курсор в буквы.
  5. Настройте шрифт, размер, цвет и остальное — панель справа от кадра (подробно ниже).
  6. При необходимости добавьте подложку кнопкой «+ Плашка», чтобы текст не терялся на пёстром фоне.
  7. Проверьте кадр кнопкой «Как в поиске» в шапке редактора — он покажет фото в размере плитки выдачи, том самом, в котором его увидит покупатель.
  8. Нажмите «Скачать» → выберите размер в списке «Размер под площадку» → «Скачать фото».

Для цены, даты или комплектации отдельного инструмента нет — это тот же текстовый слой, просто набранный цифрами: кнопка «+ Текст» одинаково подходит и для слова, и для даты.

Что можно настроить у надписи

У выбранной надписи меняется куда больше, чем шрифт и цвет:

  • Шрифт — выбирается отдельным окном, начертания (насыщенность) показываются только те, что реально скачаны: если у шрифта есть один вес, кнопка будет одна, редактор не станет утолщать буквы синтетикой;
  • Размер — ползунок в пикселях кадра;
  • Межстрочный интервал и разрядка букв — для подписи вразрядку («К А Р Т О Ч К А») и для многострочного текста;
  • Выравнивание строк — по левому краю, по центру, по правому;
  • Цвет — сплошной или градиент;
  • Заливка — сплошная или «только контур» (буква держится на обводке, без заливки внутри);
  • Обводка — толщина и цвет отдельно от заливки;
  • Тень от слоя — готовые пресеты падения тени с настройкой угла, длины, мягкости и плотности;
  • Объём — наклон вбок и «прижать по высоте», чтобы надпись легла как на грани коробки, а не плоско;
  • Перенос строки — «Переносить» с шириной строки в процентах ширины кадра или «В одну строку», когда длинный заголовок нарочно уходит за край.

Все настройки применяются сразу к нескольким выделенным надписям: кнопка «Все надписи · N» в списке слоёв выбирает все текстовые слои разом, и шрифт или цвет меняются у всех одновременно — не приходится подгонять каждую подпись отдельно.

Почему кириллица ломается в других редакторах — и что здесь иначе

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

В dropcrop это исключено на уровне каталога: шрифтов в редакторе 211 семейств, и Google Fonts они выбраны с расчётом на то, что все включают кириллицу и лежат на своих серверах (самохост, не внешняя загрузка на каждый показ). Разбиты по группам — «Без засечек», «Узкие», «С засечками», «Акцидентные», «Рукописные», «Моноширинные» — так что для афиши, товарной карточки или винтажной подписи найдётся подходящий, и переключение шрифта никогда не превращает русский текст в кракозябры.

Иконки вместо слов

Не каждую характеристику обязательно писать буквами — короткую подпись легко заменить пиктограммой. Кнопка «+ Иконка» открывает каталог значков с поиском по русскому слову: наберите «доставка», «стирка» или «гарантия» — покажутся подходящие. Значков в каталоге 4181, они разбиты на 13 категорий, а под каждой открытой категорией рядом с готовой подборкой подгружается остаток той же тематики из общего набора. Рядом — вкладка «+ Эмодзи» с отдельным набором для подписей вроде цены или акцента («🔥», «✅», «⭐»): эмодзи ложится обычной надписью из одного знака, поэтому у него те же настройки, что у текста — поворот, наклон, тень.

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

Читаемость на телефоне: кегль и подложка

Большинство покупателей открывают карточку с телефона, а до этого видят её ещё мельче — плиткой в ленте выдачи. Надпись, которая отлично читается на весь экран монитора, там нередко превращается в серую полоску: проверяйте кеглем именно в «Как в поиске», а не на глаз по холсту, и увеличивайте размер прямо на месте, не дожидаясь скачивания.

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

  • Контраст с фоном. Тёмная надпись на тёмном фото или светлая на светлом теряется в первую очередь — цвет надписи и обводку стоит подбирать по кадру, а не по вкусу отдельно от него.
  • Подложка-плашка. Кнопка «+ Плашка» кладёт под текст сплошную, скруглённую или «стеклянную» (с размытием того, что под ней) заливку — на пёстром фоне подпись поверх плашки читается ровно, даже когда сам снимок пёстрый.

Выравнивание и поля, чтобы текст не резался при смене пропорции

Если фото сначала оформили под один формат (например, квадрат), а на «Скачать» выбрали пресет площадки с другими пропорциями (скажем, вертикаль 3:4), редактор предложит два варианта:

  • «Уместить целиком» — кадр входит полностью, по краям добавляется белое поле, ничего не обрезается;
  • «Обрезать по краям» — кадр заполняет собой весь размер площадки, а то, что не поместилось, срезается по краям.

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

Держать надписи на месте помогают инструменты самого редактора:

  • при перетаскивании слой сам липнет к центру кадра, к краям и к третям — линия-подсказка появляется, когда надпись встала ровно;
  • кнопки «Центр ↔», «Центр ↕» и «В центр» ставят надпись ровно по центру кадра или одной из осей одним нажатием;
  • у надписи можно включить перенос строки шириной в процентах от кадра — тогда при изменении размера холста строка не убегает за край, а переносится по той же пропорции.

Частые ошибки

  • Ставить кегль «на глаз» по монитору, не проверив «Как в поиске». На большом экране всё читается, в плитке выдачи — уже нет.
  • Класть текст впритык к краю кадра. При смене формата на «Скачать» именно край обрезается первым.
  • Одинаковый цвет текста для всех фото карточки. Если фон между кадрами разный, один и тот же цвет надписи на одном снимке контрастный, а на другом сливается; подложка-плашка снимает проблему сразу.
  • Разные шрифты на разных фото одной карточки. Кнопка «Все надписи · N» одним нажатием приводит шрифт и цвет ко всем подписям, если они разъехались.
  • Писать на фото то, что запрещает площадка. Прежде чем оформлять инфографику с ценами, скидками или сроками — разбор запрещённых и разрешённых формулировок, а общий сценарий сборки карточки — в статье про карточку самому.

Когда кадр обрезан под нужный размер и текст на месте, остаётся нажать «Скачать» → выбрать пресет в списке «Размер под площадку» → «Скачать фото»: файл сохранится сразу в нужном размере, на белом поле и в JPEG.