Пять способов выделить текст на фоновом изображении
Текст на фоне больших фотографий — это один из главных современных трендов. Несмотря на то, что этот прием кажется несложным в выполнении, все не так просто. Одна из главных проблем при создании подобного дизайна — отсутствие достаточного контраста между текстом и фоном. В этом уроке мы расскажем о пяти способах решить эту проблему. Все техники выполняются в Adobe Photoshop, однако понимая сам принцип, несложно выполнить то же в других программах или же непосредственно в верстке.
1. Наложение цвета
На нашем изображении видно что надпись теряется на фоне. Надпись очень сложно прочесть, так как фоновое изображение изобилует деталями и само по себе отвлекает. Текстура “Buffalo Wings” полностью теряется из-за перегруженности фотографии. Давайте исправим это.
Для начала создайте новый слой и назовите его “color-overlay”. Возьмите пипетку (нажав на клавишу «I»). Выберите цвет с рубашки стоящего слева мужчины.
Залейте новый слой этим цветом (Shift + F5).
Укажите слою opacity/непрозрачность в 50% и перетащите его под слой с текстом.
Как вы можете заметить, появился контраст между надписью и фоном. Текст легко читается и текстура “Buffalo Wings” хорошо видна.
2. Тень
В этом случае у нас есть тонкий, изящный шрифт на фоне детализированной части изображения. Добиться контраста между надписью и фотографией в этом случае непросто.
Для начала нам нужно выбрать подходящий цвета для текста.
Конкретно в этом случае подойдет светлый оттенок, желательно вообще белый цвет.
Теперь укажите слою new layer style/новый стиль слоя и выберите вариант drop shadow/тень. Укажите opacity/непрозрачность в 52%. Настройте Spread/Размах на 16% и Size/Размер на 10px. Угол должен быть примерно в -144 градусов.
В результате простого наложения тени, у нас получилась отличная выделяющаяся на фоне надпись.
3. Линии
Это самый простой способ сделать надпись заметнее.
Просто добавьте тексту две линии — одну ниже, вторую выше надписи — это выделит вашу типографику на фоне фотографии.
Всего две линии создают такой ощутимый контраст между фоном и текстом.
4. Подкладка
Еще один способ выделения надписи на фоне изображения — создание полупрозрачной подкладки под текстом. Смотрите как это делается.
Как мы видим, исходной версии не хватает контраста между текстом и фото. Надпись просто теряется на изображении из-за деталей здания.
Чтобы исправить это, возьмите инструмент Custom Shapes/Заказные фигуры (U) и создайте фигуру. Не столь принципиально какой формы будет ваша подкладка. Вы можете сделать ее просто кругом или прямоугольником, или же создать фигуру в стиле ретро как в нашем примере.
Укажите фигуре черный цвет заливки и белую обводку толщиной в 3pt.
Перетащите подкладку под слой с текстом и укажите ей Opacity/Непрозрачность в 57%.
Результат выглядит профессионально и стильно.
А главное — надпись отлично читается и выделяется на фоне изображения.
5. Размытие фона
Пятый и последний способ привлечь внимание к надписи — незначительное размытие фона.
Вновь возьмем пример, в котором текст теряется из-за детализированного изображения на фоне.
Для начала нам нужно конвертировать фон в смарт-объект. Для этого просто кликните правой кнопкой по слою и выберите Convert to Smart Object/Преобразовать в смарт-объект.
Затем в меню выберите Filters>Blur>Gaussian Blur/Фильтры>Размытие>Размытие по Гауссу.
Укажите радиус размытия в 3.8 px.
Мы добились желаемого контраста между фоном и текстом.
Автор урока Maria Wendt
Перевод — Дежурка
Смотрите также:
- Психология восприятия шрифта и ее практическое применение
- Правила использования крупной типографики в веб-дизайне
- Текст против изображений: что выбрать?
Как сделать текст по кругу в Фотошопе (Photoshop)
Фотошоп — удобный и распространённый инструмент, который позволяет создавать профессиональные дизайнерские макеты для различны целей.
Одним из интересных приёмов, который можно использовать для создания оригинального проекта, является размещение текста по кругу. В этой статье мы расскажем, как пошагово сделать круговой текст в Photoshop.
Вариант первый: контур
Для того, чтобы пустить текст по кругу в фотошопе можно использовать универсальный и популярный способ — инструмент «Перо» или «Фигуры», который упрощает процесс выделения нужной области, но обо всём по порядку.
Шаг 1: Ищем нужный инструмент
Вы можете нарисовать произвольный контур с помощью инструмента «Перо», который находится в основной панели справа, либо, чтобы сделать фигуру более ровной, использовать одноимённый инструмент «Фигуры». Этот инструмент задаёт готовый контур, по которому вы сможете разместить необходимый текст. Контур более удобен, так как вы можете более аккуратно и просто сделать круговой текст.
Шаг 2: Работаем с фигурой
Переходим в инструмент «Фигуры» и выбираем там «Эллипс». Отметим, что выбирать заливку цветом — необязательное действие, однако важно следить, чтобы ваша фигура была отчётливо видна на фоне.
Шаг 3: Переходим к тексту
Ищем в панели инструментов кнопку «Текст» и наводим курсор на нашу фигуру. Нужно, чтобы инструмент определил окружность. Нажмите левой кнопкой мыши и убедитесь, что фигура готова для нанесения текста. Готовность можно определить по внешнему виду курсора. Если изначально он выглядел, как английская буква I а затем на нём появилась волнистая линия — можно начинать работу, смело нажмите клавишей мыши. Заранее изучите актуальные горячие клавиши, чтобы ускорить создание вашего макета, нужная клавиша значительно упростит создания нового проекта. Самые популярные варианты: ctrl+D (отмена выделения), ctrl+Z (отмена последнего действия) и многие другие.
Шаг 4: Дополнительные штрихи
Когда текст будет нанесён вы можете оставить контур эллипса, чтобы подчеркнуть его, либо убрать и оставить исключительно ваш слоган или слово. Текст без контура даёт более минималистичный эффект, наличие же контура тоже может быть уместно, но для этого ваше изображение должно быть однотонным без крупных деталей.
Если вы давно хотели научиться работать в Фотошопе или поднять свой профессиональный уровень, то мы собрали лучшие онлайн-курсы по графическому дизайну с сайта tutortop:
- «Графический дизайн. Расширенный курс» от Pentaschool
- «Профессия Графический дизайнер с нуля до PRO + Английский для дизайнеров в подарок» от Contented
- «Профессия графический дизайнер + стажировка в студии» от Логомашины
- «Онлайн-курс Графический дизайнер» от Бруноям
Сейчас мы дарим 10 000 ₽ на обучение в любой из школ-парнёров, представленных на сайте tutortop.
Вариант второй: деформация текста
Ещё один вариант создания текста по кругу.
Шаг 1: Создайте новый документ в Фотошопе, выберите инструмент «Текст»
Щёлкните на кнопку «Файл» в меню верхней панели Photoshop и выберите пункт «Создать». После этого установите необходимые параметры для создания документа. Затем выберите инструмент «Текст» из панели инструментов.
Шаг 2: Наберите текст
Теперь можно приступить к набору текста. Щёлкните на инструмент «Текст» в фотошопе и начните вводить нужные слова или фразы.
Шаг 3: Настройте параметры траектории дуги для текста
Чтобы создать текст по кругу, нужно настроить параметры траектории дуги, чтобы текст шёл по контуру, заданному вами в произвольной или точной форме. Для этого щёлкните на «Деформацию текста» «Тип траектории», выберите пункт «Стиль» и настройте нужные параметры, чтобы контур располагался так, как вам нужно. Например, можно изменить радиус, центр траектории и угол. Сразу сделайте несколько слоёв на случай, если работа пойдёт не по плану и нужно будет вернуться к оригинальному изображению.
Шаг 4: Настройте параметры текста по кругу
Для того чтобы настроить параметры текста по кругу, нужно выделить текст и перейти в панель свойств. Можно создать нужные параметры текста, например, размер шрифта, цвет, выравнивание. Если вы делаете текст поверх изображения, то помните, что ваша надпись не должна перекрывать основное изображение, для этого сразу оцените размер картинки и подстройте под неё размер текста.
Шаг 5: Измените форму дуги и расположение текста
Если необходимо изменить форму дуги или расположение текста в Photoshop, выберите инструмент «Тип траектории» и внесите соответствующие изменения. Например, можно изменить форму дуги, переместить текст по траектории или повернуть саму дугу.
Шаг 6: Сохраните готовый документ
Когда текст по кругу успешно создан, сохраните готовый документ из photoshop на ваш компьютер. Для этого нужно выбрать пункт «Файл» в верхней панели и выбрать опцию «Сохранить как…». Заполните нужные параметры, чтобы сохранить документ.
Советы
Текст в форме круга в Фотошоп — отличный способ сделать макет более современным, визуально выделить информацию, на которой вы хотите заострить внимание зрителя. Учитывайте комментарии заказчика в процессе изготовления макета, чтобы работа с текстом была быстрее и подошла под потребности конкретного сайта. Чтобы ваш проект был актуален и соответствовал всем требованиям, внимательно изучите сайт, для которого делаете работу. Найдите его главный посыл к пользователям, что сайт хочет донести через ваш визуал.
Вы можете добавить несколько кругов текста, написать таким образом слоганы или названия компании. С его помощью вы можете сделать нестандартный и привлекательный дизайн. Также текст в формате круга можно использовать для создания логотипов, оформления баннеров, и других креативных проектов.
Как выделить текст в Photoshop — Brendan Williams Creative
Хотите ли вы выделить и отредактировать текст, добавить выделение для стилистических целей или даже добавить выделение в PDF-файл в Photoshop, это очень легко сделать.
Здесь вы узнаете, как использовать фигуры для выделения слов, как выделять отдельные буквы в одном слове или как выделять важный текст в документах PDF с помощью кисти. Итак, приступим!
Как выделить текст, чтобы отредактировать его в Photoshop
Одной из причин выделения текста является его редактирование. Временное выделение позволяет вам определить текст, который вы хотите отредактировать, подобно текстовому документу.
Например, введите текст с помощью инструмента Type Tool (T).
Затем выберите текстовый слой на панели «Слои» , щелкнув его.
Затем вы можете выделить текст несколькими способами. Вы можете либо дважды щелкнуть, либо трижды щелкнуть, либо щелкнуть и перетащить, чтобы выделить разное количество текста.
Двойной щелчок для выделения
Наведите курсор на слово, которое хотите выделить, или на его конец.
Затем дважды щелкните, чтобы выделить это слово.
Этот метод позволяет выделить одно единственное слово.
Тройной щелчок для выделения
Если вы хотите выделить весь текст, вы можете сделать тройной щелчок. Следуя тому же совету, что и в предыдущем шаге, наведите курсор в любом месте текста и быстро трижды щелкните мышью.
Хотя этот метод кажется удобным, он часто занимает больше времени, чем следовало бы. Это связано с чрезмерным нажатием из-за быстрого нажатия; текст может быть выделен и не выделен еще до того, как вы это осознаете.
По этой причине часто бывает быстрее и менее неприятно использовать следующий совет, чтобы вместо этого выделить весь текст.
Нажмите и перетащите, чтобы выделить
Это наиболее распространенный метод выделения текста для его редактирования. Вы можете использовать эту технику для букв, отдельных слов, нескольких слов или всего текста. Хотя это может занять немного больше времени, это самый точный метод выделения текста для редактирования.
Как и в случае с другими методами, выберите текстовый слой на панели «Слои» и убедитесь, что у вас также выбран инструмент «Текст».
Затем поместите курсор рядом с конечной буквой слова или слов, которые вы хотите выделить.
Нажмите, а затем перетащите курсор к другому концу любого слова или буквы, которые вы выделяете. Когда все, что вы планируете выделить, будет выделено, можно отпустить мышь.
Вы можете редактировать выделенный текст с помощью панели параметров или панели символов , чтобы изменить шрифт, размер, цвет или другие атрибуты.
Вы также можете нажать Удалить , чтобы удалить выделенный текст с холста.
Как выделить текст с помощью слоев-фигур
Если вы хотите выделить текст фигурой, чтобы выделить его, это также легко сделать. Используя инструменты формы и панель «Слои», вы можете легко создавать цветные рамки вокруг текста.
После того, как вы написали текст, выберите Rectangle Tool (U) . Для нетрадиционной формы подсветки вы также можете использовать другие формы, такие как эллипс или звездообразная форма.
Традиционные выделения текста имеют прямоугольную форму, но если щелкнуть и удерживать значок инструмента «Форма» в Панель инструментов , появляются другие параметры формы. Выберите, что вы хотите использовать.
Выбрав фигуру, нажмите образец цвета переднего плана на панели инструментов и установите цвет.
Чтобы нарисовать фигуру выделения, щелкните один угол текста и перетащите его к диагональному углу слова или слов, которые вы выделяете. Ваша фигура скроет текст.
На панели «Слои» перетащите текстовый слой наверх, щелкнув и перетащив его над слоем формы.
Если вам нужно изменить размер, чтобы выделить текст более эффективно, выберите слой формы.
Затем используйте Инструмент «Перемещение» (V) , чтобы изменить его размер, щелкнув любую опорную точку и перетащив, чтобы изменить размер фигуры.
Чтобы выровнять текст и фигуру выделения по центру, что лучше всего работает, если вы выделяете только фразу из одного слова или выделяете весь текст, выберите оба слоя, удерживая Control (Windows) или Command ( Mac) и выберите каждый слой.
При активном инструменте «Перемещение» ( V ) на панели параметров используйте инструменты выравнивания, чтобы центрировать текст и выделить его вместе на холсте. Использование инструментов выравнивания таким образом будет работать, только если ваша форма выделения предназначена для всего текстового слоя.
Используйте инструменты для выравнивания по центру для сбалансированных результатов: Выровняйте центры по горизонтали и по вертикали .
Оттуда рекомендуется связать фигуру и текстовый слой вместе, чтобы убедиться, что они остаются в центре и перемещаются вместе, если вам нужно изменить их положение в проекте.
Как выделить текст с помощью инструмента «Кисть»
Вы можете выделять текст в документах PDF, а также в исходных файлах в Photoshop. Это отличная альтернатива иногда неудобной функции выделения Acrobat и, возможно, более экологичная альтернатива печати документов и использованию маркера.
В этом примере я буду использовать страницу из моей электронной книги Photoshop Blueprint (бесплатно доступна здесь).
Открыв PDF-файл в Photoshop, перейдите на панель «Слои» и выберите Создайте новый слой .
Затем выберите инструмент Кисть (B).
На панели параметров выберите жесткую круглую кисть и установите жесткость на 100%.
Установите размер немного больше текста. Вы можете изменить размер кисти в настройках кисти на панели параметров , или, если вы наведете курсор на текст, вы увидите кружок, показывающий размер кисти. Чтобы изменить размер, нажмите [ , чтобы уменьшить или ] , чтобы сделать его больше.
Дважды щелкните образец цвета переднего плана на панели инструментов и установите цвет выделения. Вы можете остаться традиционным с неоновым желтым или зеленым или выбрать любой другой цвет, который вы хотите, используя палитру цветов.
Нажмите кисть на одном конце текста, который вы выделяете, затем удерживайте Control (Win) или Command (Mac) и щелкните курсором там, где должно заканчиваться выделение. Удерживая Command или Control, линия остается идеально прямой и соответствует тексту.
После добавления выделения вы не увидите выделенные слова. Чтобы исправить это, перейдите на панель Layers, оставьте выбранным слой с кистью, щелкните раскрывающееся меню Blending Modes и выберите Multiply .
Придает выделенному цвету эффект полупрозрачного выделения.
Затем вы можете повторить этот процесс выделения с теми же настройками кисти на всех страницах PDF. Оттуда вам просто нужно будет экспортировать PDF-файл из Photoshop, чтобы основные моменты были видны в новой версии документа!
Удачного выделения!
Как выделить текст в Photoshop-igi5studios.com
Хотите узнать, как выделить текст в Adobe Photoshop ? Это руководство предоставит вам различные стратегии для решения этой работы.
Основное назначение маркера — привлечь внимание зрителей к определенной части текста. Поскольку Photoshop не поставляется с эксклюзивным инструментом для выполнения этой работы, пользователи могут протестировать два метода, чтобы получить желаемый результат.
Метод 1. Используя подчеркивание, изменяяМожно создать выделение под текстом, используя точную геометрическую форму, однако вы должны изменить подчеркивание, которое вы создаете, используя копию текста. Это один из наиболее часто используемых методов, описанный авторами учебников по Photoshop, и я объясню, как это сделать.
ШАГ 1.
Создание новой рабочей области в PhotoshopЕсли уже есть background image вы можете импортировать изображение в Photoshop, перетащив его на рабочий стол или нажав кнопку «Открыть».
Если у вас нет изображения, вам необходимо создать совершенно новый документ, используя Cmd+N (Mac) или Ctrl+N (Windows).
Нажмите «Файл» > «Создать». Выберите «Создать» в рабочей области «Пуск». Начните с «Новый» в рабочей области «Пуск». Щелкните правой кнопкой мыши документ, который хотите открыть, и выберите пункт «Новый документ» в контекстном меню.
ШАГ 2.
Введите необходимый текстНа панели «Слой» создайте совершенно новый слой. Выберите значок текста и введите нужное слово в выбранном стиле и шрифте. Вы можете добиться еще более яркого эффекта, если добавите жирный шрифт в Photoshop.
Шаг 3.
Скопируйте текстСкопируйте текст на дополнительную страницу, нажав клавиши Ctrl и J. Выберите цвет текста, используя цветовую палитру.
Шаг 4.
Создайте подчеркивание Выделите нижнюю часть текста. Откройте окно, затем выберите «Символ «Подчеркнуть», затем выберите «Подчеркнуть», затем выберите параметр «Подчеркнуть текст». Это полностью автоматизированный инструмент, который может создать геометрически правильное подчеркивание на соответствующем расстоянии сверху и снизу, а также по краям текста.
5.
Преобразование текста в фигуруСледующее, что вам нужно сделать, чтобы выделить текст в Photoshop, — преобразовать текст в фигуры. Щелкните правой кнопкой мыши имя слоя и выберите в раскрывающемся меню пункт «Преобразовать в форму» «Преобразовать в форму». Имейте в виду, что изменить текст после этого действия невозможно.
ШАГ 6.
Используйте инструмент «Выделение пути»Используйте инструмент «Выделение пути» (A), чтобы выделить весь текст (кроме подчеркивания) и удалить текст в Photoshop. Таким образом, вы будете подчеркивать только в своей рабочей области.
Читайте также:- Зачем компаниям нужна компания по ретуши фотографий, чтобы удовлетворить потребности вашего бизнеса?
Шаг 7. Перенесите точки на нужную высоту
Чтобы получить вид, который вы видите в учебниках Photoshop по манипулированию, используйте стрелку вверх на клавиатуре. Точки привязки будут перемещаться вверх до тех пор, пока вы не достигнете желаемого размера прямоугольника.