Красивый текст в Фотошопе на фоне | Pixelbox.ru — Дополнения и уроки по Фотошопу

Содержание

• Шаг 1. Создаем изображение в Фотошопе.
• Шаг 2. Подготавливаем фон.
• Шаг 3. Добавляем текст и эффект.
• Шаг 4. Электрический эффект
• Шаг 5. Корректируем цвет

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

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

Шаг 1. Создаем изображение в Фотошопе.

Откройте в фотошопе картинку с фоном. Сохраните как .psd.

Шаг 2. Подготавливаем фон.

Откройте текстуру и поместите её на изображение отдельным слоем сверху.

Дважды кликните на слой с текстурой и установите режим смешивания Мягкий Свет (Soft Light)

Теперь фото с водой. Разместите сверху остальных.

Режим смешивания Перекрытие (Overlay)

Шаг 3.

Добавляем текст и эффект.

Используйте шрифт LOT free font, напишите текст белым цветом. Я набрал слово FUTURISTIC.

Перейдите во вкладку Каналы (Channels) и с зажатым CTRL выделите все каналы и изображение(+SHIFT). Сохраните это выделение – Выделение – Сохранить.

Мы будем использовать его позже, а пока снимите выделение CTRL+D.

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

Тиснение (Bevel and Emboss)

Градиент (Gradient Overlay)

Тень (Drop Shadow)

Установите основной цвет черный. (см. стрелочку)

Создайте новый слой с заливкой (Solid Color), режим наложения Перекрытие (Overlay). Назовите слой Color Fill 1.

Примените фильтр Фильтр – Рендеринг – Облака с наложением (Difference clouds).

Перейдите во вкладку Каналы (Channels), правой кнопкой кликните на маску Color Fill 1 – выберите Удалить канал. Зажмите CTRL и кликните на логотип канала Alpha1, далее меню Слой – Слой маска – Показать выделение.

На панели слоев создайте новый слой.

Выберите огромную кисть 1000 пикселей, 20% жесткости.

В разных местах нанесите цветовые пятна.

Режим наложения этому слою установите Перекрытие (Overlay)

Во вкладке Каналы с зажатым CTRL нажмите на логотип канала Alpha 1, а потом меню Слой – Слой маска – Показать выделение.

Текст примет такой вид, с прикольным эффектом.

Шаг 4. Электрический эффект

Скопируйте слой с текстом (FUTURISTIC) – CTRL+J.

Отмените на нем все стили, перекрасьте в черный цвет. Нажмите на него правой кнопкой (на слой) и выберите Растрировать.

Дальше Редактирование – Заливка, выбираем белый цвет, режим наложения Умножение (Multiply)

Применяем фильтр Размытие – Размытие по Гауссу в 4 пикселя.

Выполните команды меню:

Фильтр – Стилизация – Соляризация.

Изображение – Автотон.

Фильтр – Искажение – Полярные координаты

Изображение – Разворот – Разворот на 90.

Изображение – Коррекция – Инвертирование

Фильтр – Стилизация – Ветер (2 раза)

Изображение – Коррекция – Инвертирование

Изображение – Автотон

Фильтр – Стилизация – Ветер (2 раза)

Изображение – Разворот – Разворот на 90 (обратно)

Фильтр – Искажение – Полярные координаты

Режим наложения Экран (Screen)

Шаг 5. Корректируем цвет

Добавляем слой Фотофильтр

Вибрация

Это даст металлический оттенок тексту.

Автор перевода – Александр Акимов

Как красиво разместить текст на картинке

Простые советы, которые помогут вам профессионально оформлять рекламные посты, статьи, макеты и многое другое.

Текст и изображения прекрасно дополняют друг друга, но когда нужно написать что-то прямо поверх картинки, часто возникают трудности: то изображение не видно, то буквы не разобрать. Мы подготовили список приемов, благодаря которым вы сможете делать красивые надписи на любых картинках.

Играйте на контрастах

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

Темный текст на светлом фоне выглядит аккуратно. 

Более строгий вариант — светлый текст на темном фоне. 

Для энергичных проектов можно использовать смелые цветовые сочетания: здесь сиреневый текст контрастирует с желтым велосипедом.  

Размывайте изображение

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

Затемняйте изображение

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

Используйте плашки

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

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

Цветные плашки могут быть как комплиментарными, так и контрастными по отношению к изображению.

Еще один пример цветной плашки, которая сочетается с одеждой модели.

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

Расставьте акценты

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

Встройте текст в изображение

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

Текст как будто нанесен на беговую дорожку.

Используйте пустое пространство

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

Рука модели указывает на надпись.

Все изображения PressFoto: image-7999212 / image-7978247 / image-1315333 / image-5922072 / image-8008807 / image-8005515 / image-8005732 / image-8009797 / image-7587098 / image-6080528 / image-7402238 / image-8004027

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

750+ Фоновые картинки для текста | Скачать бесплатные изображения на Unsplash

750+ Фоновые картинки для текста | Download Free Images on Unsplash

• A framed photoPhotos 10k
• A stack of photosCollections 10k
• A group of peopleUsers 0

background

wallpaper

nature

texture

flower

website

food photographerdry foodfood photo

plantblossomHD обои сакуры

Nature imagesdeutschlandschönbrunn

mobile phonehuman handwell-dressed

writingPaper backgroundsblog

succulentHd green wallpapersbotanical

Hd computer wallpapersHd laptop wallpapersphotography

denmarkHd pattern wallpapersroom for text

Hd autumn wallpapersTree images & pictureswien

Hd minimalist wallpapersinteriorHd white wallpapers

desktopminimallay

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – – .

Vintage фоновая фоновая фоновая фоновая картинка и картинки

HD Желтые обои на обоях. HD картинкиHD абстрактные картинкиHd обои

Текстура фоныКоричневые фоныHd фиолетовые обои

Оборудование для BottleLabelmedical

Связанные коллекции

BB Фана заголовка может добавить текст

331 Фотографии · Куратор Кристанса Харлоу

Текстовый фон

25 Фото by Эрин Л. Тодд0011

Hd computer wallpapersHd laptop wallpapersphotography

Texture backgroundsBrown backgroundsHd purple wallpapers

Hd minimalist wallpapersinteriorHd white wallpapers

Vintage backgroundsLight backgroundsSunset images & pictures

Nature imagesdeutschlandschönbrunn

writingPaper backgroundsblog

Flower imagesHd blue wallpapersflat

denmarkHd pattern wallpapersroom for text

Hd осень фоткиДерево фотоwien

настольный минималлай

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

HD Желтые обои на обоях, фона фона дизайна,

Plantblossomhd Cherry Blossom обои

HQ фоновые изображения изображения и Pictureschristmas изображения

Рабочие пространства Изображения и Pictures Office

Связанные коллекции

BB.

Text background

25 photos · Curated by Emily Boushey

Flat Background for Text

78 photos · Curated by Erin L. Todd

succulentHd green wallpapersbotanical

Hd wallpapersHd abstract wallpapersHd wallpapers

bottlelabelmedical equipment

Unsplash logo

Unsplash+

В сотрудничестве с Моникой Грабковской

Unsplash+

Разблокировать

фуд-фотографсухая едаеда фото

Roberto Nickson

Винтажные фоныСветлые фоныИзображения заката

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– –– – –– –––– – –.

Joanna Kosinska

Hd желтые фоткиФон для сайтаHd обои дизайн

растение в цветуHd вишневый цвет обои

Erol Ahmed

Hq фон фотоОсень фото и обоиНовогодние фото

Marc Grove

11 фото 90de0011 Unsplash Logo

Unsplash+

в сотрудничестве с Getty Images

Unsplash+

Разблокировка

Мобильный телефон. серые обоиботанический сад Вроцлавского университетаВроцлав

Скотт Уэбб

сочныеHD зеленые обоиботанический

Darren Nunis

Flower imagesHd blue wallpapersflat

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

Hd computer wallpapersHd laptop wallpapersphotography

Gradienta

Hd wallpapersHd abstract wallpapersHd wallpapers

Rasmus Smedstrup Mortensen

denmarkHd узор обоикомната для текста0011

Simon Berger

Hd autumn wallpapersTree images & pictureswien

Sarah Dorweiler

Hd minimalist wallpapersinteriorHd white wallpapers

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

bottlelabelmedical equipment

Leone Venter

deskminimallay

Просматривайте премиум-изображения на iStock | Скидка 20% на iStock

Логотип Unsplash

Сделайте что-нибудь потрясающее

Методы проектирования для отображения текста поверх фоновых изображений

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

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

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

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

Фотопортфолио Винарта Фостера на Dribbble

Вот еще.

Карточки статей Альтернатива от Oliur на Dribbble

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

Позвольте мне попытаться воссоздать этот дизайн для вас.

Текст с наложением холста

Насколько читабелен теперь текст?

Хорошо, это не та картинка. Но это все равно океанские волны.

Фоновое изображение откровенно тревожное. Но картинка не виновата. Ведь когда вы решите наложить текст, вы должны быть готовы к ЛЮБОМУ изображению. Это означает, что изображение может быть любым.

Хороший дизайн — это когда мы учитываем все возможные сценарии.

Не поймите меня неправильно. Эти 2 дизайна ни в коем случае не плохи. На самом деле, мне нравится типографика, использованная во втором. Оба – хорошо разработанные интерфейсы талантливыми людьми. Просто некоторые дизайны интерфейсов (мокапы) предназначены только для эстетических целей.

Любой, кто переведет их в работающий проект, сразу поймет, что не так. Отображаемый текст не учитывает фоновые изображения.

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

Задача 2-в-1 с наложением текста

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

Подробная карта поездки, автор Харшин Каур

Когда вы накладываете текст на изображение, вы жертвуете двумя вещами:

1. Четкость изображения
2. Читабельность текста

Читабельность — это легкость, с которой читатель может понять написанный текст. Это показатель того, насколько легко читатель может отличить отдельные буквы или символы друг от друга. – Wikipedia

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

Изображение может быть любым

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

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

Решения для наложения текста

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

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

1. Использование Scrim

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

Scrim — это градиент от сплошного до прозрачного, который находится за текстовой меткой. Так, например, ваша текстовая метка может быть постоянно белого цвета. Тогда ваш холст будет градиентом, скажем, от 40% черного до прозрачного.

Я оставляю процент непрозрачности на ваше усмотрение. Опять же, это дело личного вкуса.

Но 40% от черного до прозрачного работает очень хорошо. Это не слишком заметно и не портит изображение. Он плавно исчезает, придавая текстовой метке необходимый контраст, делая ее читабельной.

Scrim – наложение градиента

Рекомендуемые рекомендации по использованию Scrim:

• 40% непрозрачность
• настройки градиента
• высота: 50% высоты изображения

Это не жесткие правила. Но, как видно из приведенного выше дизайна, эти настройки работают хорошо.

Вы можете прочитать об этом в рекомендациях по использованию изображений в материальном дизайне.

Настройки градиента SCRIM в Sketch

Преимущества:

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

Disadvantage:

Disadvantages: 9000

:

:

. сломать привлекательность изображения

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

Но подожди, не уходи! Есть и другие решения, которые могут удовлетворить ваш вкус лучше.

2. Наложение всего изображения

Как и в случае с холстом, только вместо градиента вы примените ко всему изображению полный 40% черный цвет.

Верно. Возможно, изображение не имеет для вас значения. Текстовая метка является вашим приоритетом. Или, может быть, текст занимает весь размер изображения.

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

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

Короче говоря, это 40% непрозрачность черного на изображении.

Преимущества:

• Подходит для большого текста (заголовков?), который занимает все изображение
• Когда текст важнее изображения

Недостатки:

• Может скрыть все изображение
• Можно пожертвовать видимостью изображения
• Можно уменьшить фоновое изображение, как если бы оно существовало только для красоты

Вот некоторые популярные приложения, которые используют этот подход: Android85000+ Статус и цитаты Android-приложение 2017 г. Пратик Бутани

3. Наложение цвета

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

Наложение цвета на изображение — идеальный способ нейтрализовать загруженное изображение. Он блокирует все разные цвета, делая изображение монотонным.

Вот пример.

Обычно предпочтительным цветом является фирменный цвет.

Приложение Playgong от Дейвидаса Граужиниса

Если у вас возникли проблемы с определением цвета, воспользуйтесь инструментом Canva Color Wheel. Он использует теорию цвета и цветовые комбинации в дизайне, чтобы помочь вам найти цвета, которые хорошо смотрятся вместе!

4. Мягкие градиенты

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

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

Вы можете использовать веб-инструменты, такие как Coolors и Kuler от Adobe. Это может помочь вам создать цветовые пары, которые хорошо сочетаются друг с другом.

Вот пример.

Веб-агентство Мохаммада Шохага

Преимущества:

• Лучшее выделение бренда (при использовании фирменного цвета)
• Одноцветный тон обеспечивает лучшую контрастность текста

Недостатки:

• Не подходит для изображений людей, так как может быть неразличимым

-прозрачное изображение на однотонном фоне.

Это помогает «успокоить» шумный фон, чтобы текст мог выделиться.

Техника состоит из 3 слоев (снизу):

1. Низ – сплошной цвет
2. Middle-полупрозрачное изображение (40% непрозрачность)
3. Верх-текстовый слой

Преимущества:

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

    Сглаживание изображений за счет уменьшения шума и детализации — размытие по Гауссу

    Пользователи iOS знакомы с этой техникой. Принципы дизайна iOS используют размытие для обозначения глубины. В то время как Android (Material Design) использует тени для обозначения глубины (возвышения).

    Вот размытие 16px слева и размытие 4px справа. Убедитесь, что вы не размываете изображение слишком сильно, чтобы фоновое изображение стало полностью неузнаваемым!

    Размытие не решает проблему одинакового цвета текста и изображения

    Преимущества:

    • Помогает уменьшить «занятость» на изображениях
    • Разрубленные изображения позволяют тексту выделяться

    Недостатки:

    • Полностью жертвы. Цветное наложение
    • Может не подойти по стилю к вашему продукту. Использование размытия в мире Material Design?

    7. Подсветка текста

    Здесь мы применяем цвет фона к самому тексту. Этот эффект имитирует традиционный способ выделения текста на бумаге.

    Текст с эффектом подсветки

    Этот прием хорошо работает, когда в дизайне минимум текста и просторный фон.

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

    Преимущества:

    • Хорошая четкость текста на фоне любого фонового изображения
    • Хорошая контрастность

    Недостатки:

    • Выбор цвета выделения может сделать текст отделенным от изображения
    • Может полностью заблокировать основное изображение

    8. Перейти в оттенки серого

    Хорошо, это скорее изменение изображения, чем текста. Но мы все еще можем использовать его для достижения того, чего хотим.

    С помощью изображения в градациях серого.

    Фильтр изображения «Оттенки серого»

    Однако помните, что оттенки серого включают цвета от самого яркого белого до самого темного черного. Только они находятся на полярных концах вибрации. Следовательно, вы, возможно, захотите сначала смягчить изображение. Вы можете сделать это, смешивая и сочетая с любыми другими методами, упомянутыми здесь.

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

    Изображение в оттенках серого с нижним комбинированным холстом

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

    9. Игра с цветом и позиционированием

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

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

    Модули «Университет» от Flatstudio

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

    ---

    TL;DR – Используйте достаточно контраста

    Состояние разительно отличающегося от чего-то другого в тесной связи. — Контраст

    Вы заметили? Все рассмотренные выше методы — это способы повысить контрастность текста. Контраст — это то, что делает элемент отличным от другого. Между текстом и изображением должен быть высокий контраст. Это позволяет тексту быть читаемым.

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

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

    Заключение

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

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

    This entry was posted in Популярное