Как наложить текст на фото без установок новых программ
Часто блогеры и владельцы сайтов сталкиваются с проблемой иллюстраций. Какие простые решения существуют для быстрого и качественного превращения картинки в стильный баннер или иллюстрацию для статьи? Рассмотрим наложение текста на примере онлайн-редактора Canva, в котором появился новый набор бесплатных шрифтов с поддержкой кириллического алфавита.
Решение Canva по наложению текста не требует установки – это облачный инструмент, работающий по freemium-модели, основные возможности которого доступны сразу после регистрации. В аккаунте хранятся все черновики и готовые изображения, поэтому к ним можно возвращаться в любое время и с любого компьютера (или с мобильного приложения).
Есть два варианта:
- добавление надписи в готовую иллюстрацию или снимок;
- создание новой иллюстрации с нужным текстом.
Как добавить текст к вашему фото
В этом случае перейдите в раздел “Моё” и добавьте в папку файл с вашего компьютера. После этого выберите подходящий по соотношению сторон формат из предложенных или воспользуйтесь кнопкой “Использовать специальные размеры” в правом верхнем углу. Затем просто перетащите ваше фото на макет.
Теперь работаем с текстом. Перейдите в соответствующую вкладку – здесь можно выбрать простой блок для заголовка или абзаца, или текстовый блок, объединяющий строчки с разными шрифтами. Однако помните, что далеко не все из них поддерживают русский и украинский языки. Но, тем не менее, и здесь есть, из чего выбрать.
Уменьшать или увеличивать кегль можно простым “растягиванием” блока в разные стороны. Другой вариант – выделить нужный текст и изменить кегль вручную в верхней панели. Там же изменяется шрифт, цвет, добавляется курсив или полужирный шрифт при их поддержке данным шрифтом.
Когда все готово, нажмите Скачать, выберите один из форматов – JPG, PNG, PDF – и сохраните файл на жесткий диск.
Смотрите также:
Работу с изображениями, видео, аудио и галереями в Уроках WordPress.
Создание иллюстрации с нуля
Этот путь отнюдь не долгий, как может показаться. Для каждого формата (баннер, запись в Инстаграм, открытка, пост для соцсетей и т.д.) редактор предлагает дизайнерские шаблоны, которые можно взять за основу и просто изменить в них несколько деталей. На всех шаблонах уже есть определенный текстовый блок. Вы можете выбрать композицию, которая подходит для вашего замысла – и слегка адаптировать ее под себя. В шаблонах редактируется все: от цвета и текстуры фона до фотографий и любых мелких деталей.
Еще несколько полезных функций, которые могут пригодиться при добавлении надписей на фотографию: возможность размытия фона. Настройку можно найти в “Расширенных параметрах” при открытии меню “Фильтры”. На размытом кадре ваш текст станет гораздо более читабельным – из поля зрения пропадут отвлекающие детали.
Другая полезная функция – настройка прозрачности в правом углу верхней панели редактирования. С ее помощью можно сделать любой элемент макета полупрозрачным, накладывать их друг на друга по слоям и так далее. Часто это может пригодиться, чтобы сделать надпись более контрастной по отношению к фону.Если он слишком яркий, вы можете “приглушить” его, сделав прозрачным, тогда зрительское внимание переключится на ваше сообщение.
Качественный и уникальный графический контент улучшит любую статью вашего блога не только для поисковых машин, но и для читателей. И главное, что создание стильных иллюстраций займет совсем немного времени.
Как в канве сделать обтекание картинки текстом
Содержание
- Быстрый выбор объекта
- Поиск бесплатных шаблонов
- Быстрый доступ к текстовому полю
- Свободное перемещение элемента
- Группировка элементов
- Быстрая отмена и повтор действия
- Нестандартный шрифт
- Перемещение элементов с помощью клавиш со стрелками
- Быстрое изменение масштаба
- Использование рамок
- Оптимизация для различных платформ
- Преобразование текста в верхний или нижний регистр
- Быстрая вставка рамки для текста
- Сохранение пропорций на изображениях
- Создание тени для текста
- Быстрые объекты
1. Быстрый выбор объекта
При работе над сложным дизайном бывает непросто найти нужный элемент в нижней части интерфейса.
Для того чтобы быстро перемещаться между объектами с помощью клавиш вверх и вниз, необходимо зажать COMMAND на MAC (или CTRL на ПК).
2. Поиск бесплатных шаблонов
Canva предлагает как бесплатные, так и платные объекты для использования. Чтобы отобразить только бесплатные элементы, необходимо ввести в строку поиска следующие коды: «brand:BAAMOuJH0Ec» или «brand:BAAAAP7rQ8M».
3. Быстрый доступ к текстовому полю
Когда дизайнер слишком увлечен созданием шедевра, каждая секунда на счету. Для того чтобы быстро открыть окно ввода текста, можно нажать клавишу T на клавиатуре.
4. Свободное перемещение элемента
Чтобы перемещать объекты без привязки к направляющим, необходимо зажать клавишу SHIFT. Так можно разместить элемент именно там, где нужно.
5. Группировка элементов
Выравнивание групп с большим количеством объектов может показаться непростым делом. Чтобы сгруппировать выбранные элементы, необходимо зажать клавишу SHIFT, выбрать их, а затем нажать «Группировать» в правом верхнем углу. Так вы сможете перемещать группу как один объект.
6. Быстрая отмена и повтор действия
В Canva есть кнопки для отмены и повтора действия, но чтобы ускорить работу, можно использовать сочетания клавиш:
- отменить: COMMAND + Z (CTRL + Z),
- повторить: COMMAND + SHIFT + Z (CTRL + SHIFT + Z).
7. Нестандартный шрифт
Если вы используете платную версию Canva, у вас есть возможность загружать собственные шрифты, но в бесплатной версии такой функции нет. Однако существует способ сделать текст более креативным с помощью различных элементов.
При использовании стандартных шрифтов вы можете добавить завитки (в разделе линий), чтобы придать тексту необычный вид.
8. Перемещение элементов с помощью клавиш со стрелками
Иногда дизайнеру приходится выполнять точные операции: например, передвинуть объект всего на несколько пикселей. Для этого можно использовать клавиши со стрелками. Они перемещают элемент ровно на 1 пиксель. Если зажать SHIFT и клавишу со стрелкой, объект переместится на 10 пикселей. (Примечание: это не работает с текстовыми полями).
9. Быстрое изменение масштаба
Для увеличения и уменьшения масштаба обычно используются кнопки «+»/«-» в правом нижнем углу интерфейса. Однако есть и более быстрый способ.
- Чтобы увеличить масштаб зажмите COMMAND или CTRL и клавишу «+».
- Чтобы уменьшить — COMMAND или CTRL и клавиша «-».
10. Использование рамок
Чтобы создать более креативные надписи, можно использовать необычные рамки для букв. Они работают так же, как и обычные рамки для изображений, поэтому вы можете добавить в них различные текстуры, узоры или даже фотографии.
В строке поиска введите «буквенные рамки» или «рамки в форме букв». Выберите нужные буквы и вставьте изображение для каждой из них.
11. Оптимизация для различных платформ
Этот совет будет актуален только для тех, кто использует платную версию сервиса. Иногда нужно быстро оптимизировать дизайн для разных платформ, однако ручная настройка может занять много времени.
Чтобы ускорить этот процесс, нужно нажать на вкладку «Изменить размер» в верхнем меню. В выпадающем списке выберите нужные размеры (один или несколько). Нажмите кнопку «Копировать и изменить размер» внизу. После чего откроется новая вкладка для каждого размера. Далее вы сможете перейти к каждому из них и внести необходимые правки.
12. Преобразование текста в верхний или нижний регистр
Для того, чтобы изменить регистр, необязательно удалять текст и набирать его заново. Просто выделите все буквы и нажмите клавишу A в верхнем меню.
13. Быстрая вставка рамки для текста
Чтобы отделить текст от фона, можно добавить рамку. Для этого нужно нажать OPTION + SHIFT + B или ALT + SHIFT + B.
Если нужно увеличить ее толщину, нажмите OPTION (ALT) + SHIFT + =, чтобы сделать границу более толстой. Или OPTION (ALT) + SHIFT — =, чтобы сделать ее тоньше.
14. Сохранение пропорций на изображениях
Чтобы объекты не теряли свою первоначальную форму, нужно зафиксировать их пропорции. Для этого необходимо выбрать слой, затем, удерживая клавишу SHIFT, перетащить курсор в том направлении, в котором нужно масштабировать изображение.
15. Создание тени для текста
Введите нужный текст и выделите его. Затем нажмите кнопку «Дублировать» в верхнем правом меню или сочетание клавиш COMMAND + C. Далее можно изменить цвет одного из текстовых полей и расположить его слева или справа от исходного, чтобы создать тень.
16. Быстрые объекты
В сервисе предусмотрены сочетания клавиш, которые позволяют быстро создавать некоторые геометрические элементы. Например, нажмите R, чтобы создать прямоугольник, L — линию, C — круг.
Как сделать обтекание картинки текстом в html
В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег <img>, чтобы иметь базовые знания по изображениям на html страницах.
1. Обтекание с помощью стилей тега <img>
Картинку можно выровнять только оперируя со стилями CSS тега <img> . Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:
где VALUE может принимать значения
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
- top — выравнивание по верхней строке текста
- middle — выравнивание по базовой строке текста
Вот как это будет выглядеть на странице:
Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.
Вариант 1.1. Через свойство CSS — hspace и vspace
Для этого в атрибутах тега <img> добавляем два значения:
Вот как это будет выглядеть на странице:
Атрибут hspace задает горизонтальный отступ в пикселях, vspace — соответственно вертикальный
Вариант 1.2. Через свойство CSS — padding и margin
Для этого в атрибутах тега <img> добавляем два значения:
Вот как это будет выглядеть на странице:
Выглядит лучше за счет того, что мы не стали делать отступ слева. Вместо margin можно использовать padding , эффект будет аналогичный.
Использование свойства float вместо align
Помимо свойства align в атрибутах тега <img> в стилях есть CSS свойство float , которое также отвечает за выравнивание. Синтаксис следующий:
Например, если написать в предыдущем примере вывод картинки следующим образом:
То это преобразуется в следующее:
Благодаря float можно задавать единый class для картинок, что очень даже удобно.
2. Обтекание изображения через <div>
Все изображения можно помещать в блоки <div>. А уже самому тегу <div> задать стиль с выравниванием относительно страницы и отступами.
Как сделать обтекание картинки текстом?
У данного макета, как я понимаю, нет общего контейнера, но все блоки выравниваются по левой линии. Как мне сделать обтекание картинки текстом с тем условием, чтобы вертикальное выравнивание блоков не слетело?
float тут помогает, но тогда опять же при сужении экрана нарушается вертикальное выравнивание у самих блоков.
- Вопрос задан более двух лет назад
- 110 просмотров
- Вконтакте
Так делать — правильно. Свойство float создает обтекание. Мы указали значение left, значит картинка будет находиться слева. Можно указать, также, значение right (полный список значений можно найти в документации свойства). То есть, по сути, текст обтекает картинку справа, а вместе с ним, идущий за ним элемент (остальные элементы, идущие за текстом ведут себя нормально). И, чтобы убрать обтекание следующего элемента ему необходимо присвоить свойство clear со значением both. Это уберет обтекание. Надеюсь, помог))