Картинка, совмещенная с текстом, может вызвать ассоциации или рассказать целую историю. Именно из-за этого работа с изображением в большинстве случаев, гораздо сложнее, чем просто изменение прозрачности или добавление текста на передний план картинки.
Вот несколько приемов, для того чтобы объединить текст и фото
1. Вписать текст в фотографию
В данном примере видно, что надпись является частью фотографии. Так же виден баланс — морковь в левой части картинки уравновешена текстом в правой.
![blog_image](/uploads/blog/2015-11-19/1text_pic.jpg)
2. Сделать надпись частью изображения
В данном примере текст не воспринимается отдельно от картинки, а является ее частью. Буквы взаимодействуют с гитарой, скрываются за её очертаниями. Также видно, что гитара отбрасывает тень на надпись, что еще больше связывает два этих элемента фотографии.
![blog_image](/uploads/blog/2015-11-19/2%20text_pic.jpg)
3. Текст на подложке для улучшения читаемости
В данном примере хорошо читается текст, находящийся на подложке, но, так же, и видна часть фотографии, скрывающаяся за ним.
![blog_image](/uploads/blog/2015-11-19/3%20text_pic.jpg)
4. Уменьшение яркости изображения для лучшей читаемости
Для увеличения акцента на тексте, нужно сделать фотографию под ним менее яркой. Данный прием хорошо работает только с небольшим количеством текста.
![blog_image](/uploads/blog/2015-11-19/4text_pic.jpg)
5. Добавление простого изображения для определения акцентов
Пусть большое количество свободного пространства на фото вас не пугает. Легкий шрифт содействует тому, что взгляд перемещается на второй акцент на фото — лампу справа.
![blog_image](/uploads/blog/2015-11-19/5%20text_pic.jpg)
6. Дополнительные элементы акцентирования взгляда на тексте
Для усиления акцента можно не просто уменьшить яркость фото, но и подчеркнуть текст рамкой и жирным начертанием шрифта. Важно учитывать то, чтобы фотография и текст сочетались по смыслу.
![blog_image](/uploads/blog/2015-11-19/6text_pic.jpg)
7. Вовлечение частей фотографии и текста в одну композицию
Изображение на фоне способствует вовлечению надписи в общую композицию и взаимодействие элементов. В данном способе хорошо смотрится контрастный шрифт по отношению к фотографии.
![blog_image](/uploads/blog/2015-11-19/7text_pic.jpg)
8. «Параллакс-эффект» изображения и текста
Параллакс-эффект на сайте — это изменение видимого положение объекта по отношению к удаленному фону в зависимости от нахождения наблюдателя.
«Параллакс» добавляет динамичности и оригинальности контенту, но также он является весьма противоречивым. Из-за того, что текс и картинка движется, внимание постоянно переключается между элементами, и сложнее сфокусироваться на чем-то одном.
![blog_image](/uploads/blog/2015-11-19/8%20text_pic.jpg)
Подобные эффекты и изображения можно использовать на технических страницах сайта, что приятно удивит посетителей. Например, для оформления страницы с 404 ошибкой.