html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

10 правил размещения текста на фото в веб-дизайне

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

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

1. Добавьте контраст

packdog

force

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

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

2. Сделайте текст частью фотографии

mmd

toast

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

3. Следуйте за визуальным потоком

hogan

schmid

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

Следование за визуальным потоком означает размещение текста там, куда смотрит (в прямом или переносном смысле) объект на фото. В качестве примеров рассмотрите два примера выше.

4. Размойте изображение

niche

wallmob

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

5. Поместите текст на подложку

tradestone

fall

Когда на фотографии много разноцветных объектов, или перепадов от светлых к темным тонам, вы можете поместить текст на подложку, тем самым сделав его более заметным.

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

6. Добавляйте текст на фон

square

wicker

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

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

7. Увеличивайте масштаб

plain

coffee

Если вы не уверены в своем дизайне, попробуйте добавить масштаб! Это применимо к обоим элементам сегодняшней темы — тексту или изображению, элементы которого можно сделать больше, чем в жизни. Увеличенный объект привлекает внимание, а разница в масштабах между текстом и изображением может неплохо сочетаться.

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

8. Добавьте цвета

knuckles

moving

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

9. Используйте наложение цвета

winshape

brandv

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

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

10. Будьте проще

sa

cohen

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

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

Автор статьи Carrie Cousins

Перевод — Дежурка

Смотрите также:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

628
    +610 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • шрифт
          • adobe photoshop
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции