Один из лучших приемов из арсенала веб-дизайнера - использовать готовые фото и/или картинки в сочетании с текстом на них. Этот, на первых взгляд, один из самых простых приемов, может оказаться тем еще крепким орешком. И чтобы его раскусить, у вас должно быть " то самое" подходящее изображение, глаз-алмаз в мире типографики, и понимание того, что вы в итоге хотите получить, соединив всю эту жгучую смесь. Если вдруг сегодня утром вы встали с четким осознанием того, что для воплощения в жизнь своего горящего проекта вам срочно нужно поверх фотокарточки нанести текст - вам в помощь 10 действующих лайфхаков.
Добавьте контраст
Уж простите за тавтологию и очевидность, но, чтобы текст был читабельным, он должен быть читаемым. Для этого убедитесь, что цвет текста достаточно отличается от цвета изображения, и, соединив первое со вторым, текст отчетливо будет виден на фото. Белый на черном, черный на белом. В роли контраста может выступать так же размер текста и изображения - огромная картинка - мелкий шрифт и наоборот.
Сделайте текст частью картинки
Иногда в работе получается так, что текст становится продолжением картинки. На самом деле, такого сложно добиться, да и получается такой эффект только при соблюдении некоторых условий - объединение изображения со словом, или заключение изображения в текст.
Следуйте за визуальной составляющей
Работа с визуальной составляющей изображения - один из самых мощных приемов в работе с текстом и картинкой. В таких случаях нужен текст/слово по смыслу сочетающееся с определенным объектом на изображении. И, пожалуйста, не наносите текст поверх значимых объектов на картинке - на лица людей или продуктов, которые нужно продемонстрировать в первую очередь, а не убрать на второй план.
Что касается визуального потока, местоположение текста зависит от того, где будут размещены объекты изображения. В приведенных примерах, задействован языка тела (в данном случае, взгляда) человека - взгляд обоих мужчин устремлен на текст.
Размойте изображение
Один из самых легких приемов в работе с фотографией и текстом - блюр. Слегка "заблюриный"с помощью Adobe Photoshop фон фотографии поможет выделить текст и вынесет его на первый план. С помощью блюра так же можно добиться фокусировки на концепте дизайна в целом.
Поместите текст в рамку
Когда фото содержит множество цветных и ярких элементов, можно поместить текст внутрь "коробки", что сделает его заметным на фоне изображения. В выборе формы от квадратной до круглой - все зависит от ваших предпочтений и конечной задумки. Затем определитесь с цветом для поля, обеспечивающего достаточный контраст для отображения текста. Рассмотрите возможность использования рамки с некоторой прозрачностью для более мягкого ощущения, которое позволяет изображению просвечиваться.
Используйте текст в качестве фона
Еще один хороший прием - поместить текст на задний план изображения. Обычно фон не так перегружен, что оставляет больше возможностей работы с текстом. Помимо этого, как правило, задний план выдержан в едином цвете, что позволяет тексту быть более заметным и читаемым. В итоге мы получаем совершенно естественное месторасположение для текста, которое не требует внесения никаких доработок или изменений.
Играйте по-крупному
Когда еще не совсем уверены, какой прием сработает, попробуйте увеличить размеры. Это касается как изображения, так и текста. Игра с масштабом поможет привлечь внимание пользователя на нужные вам элементы. Используя большие изображения, как, например, увеличение кофейных зерен, решает вопрос с различиями в затенении и контрасте. Использование большого текста может добавить весомости буквам, чтобы они выглядели читаемыми практически на любом изображении.
Просто добавьте цвет
Добавив немного цвета можно так же повысить визуальный интерес к изображению. В сайтах, приведенных в качестве примера используются два совершенно разных подхода - в первом добавлен контрастирующий цвет, не встречающийся в самом изображении, во втором используется тон, который является продолжением самого изображения. Ода приема одинаково эффективно работают.
Накладывайте цвет
Эффект, набирающий все большую популярность, заключается в наложении цветового слоя поверх изображения. Конечно, такой прием может быть не так уж и прост, но при удачном исполнении дизайн будет потрясающим. Придерживайтесь оттенков вызывающих большой визуальный интерес. Баланс достигается путем создания прозрачности цветового слоя, до такой степени, что сквозь него хорошо просматривается само изображение, но так же слой и недостаточно прозрачен для того, чтобы нанесенный поверх текст не вступал во взаимодействие с изображением.
И никаких сложных щей
Проверенная временем рекомендация по дизайну «будь проще» относится и к тексту, и к изображениям. Ваша конечная цель, чтобы люди видели и фото, и слова. Поэтому применение слишком большого количества приемов может иметь совсем противоположный эффект.
При работе с изображениями используйте простую типографику и простое изображение для достижения наилучших результатов. Не забудьте разрешить показ важных частей изображения без препятствий и продолжайте работать над своим дизайном, пока текст не станет четким.
Источник материала: designmodo.com
Добавить комментарий