Важность подбора изображений
для использования на сайте
На что нужно обращать внимание при подборе изображений
1
Стилистика
Изображения сайта должны быть подобраны в едином стиле. Например, если в слайдере размещены фотографии отеля, то в баннерах услуг также должны быть тематические фото.
И наоборот, если в элементах используются иллюстрации (скетчи, коллажи), то и во всех остальных элементах также размещаем иллюстрации (скетчи, коллажи)
Удачные примеры
Так делать не стоит
2
Цветовое решение
Изображения на сайте, кнопки, подложки под навигацией и т.п. должны сочетаться в цветовом плане: тон, контраст, светлота.
Можно подбирать изображения, используя цветовые схемы (готовые удачные цветовые решения), учитывая цвета логотипа и фирменный стиль компании.
Удачные примеры
Так делать не стоит
3
Читаемость текста на изображениях
Часто при подборе изображений на сайт не учитывается, что текст и кнопки, которые будут размещены поверх фона, должны хорошо читаться с любых устройств. Картинки, отлично выглядящие на большом мониторе компьютера, могут на мобильных устройствах открываться с размытым текстом.
Поэтому, в месте размещения текста и кнопки, фон изображения должен быть достаточно однотонным и контрастным по отношению к тому, что на ней будет размещено.
Надо учитывать, чтобы логотип, навигация и др. элементы в шапке сайта хорошо читались на изображении, размещенном во всю высоту первого экрана.
При адаптиве блоки, текст, кнопки, элементы навигации должны корректно отображаться в браузере и легко читаться.
Удачные примеры
Так делать не стоит
4
Подбор изображений для баннеров, состоящих из двух «слоев» (подложки и изображения сверху)
Подложка — это размытый или однотонный фон, бэкграунд. Изображение - это обрезанное,обработанное фото, которое располагается поверх подложки.
Открывая такой вариант баннера на сайта с телефона или планшета видно, что верхнее изображение скрывается и остается только подложка с заголовком, текстом и кнопками.
При подборе подложки и верхнего изображения следует учитывать описанные выше правила (стилистика, цветовое решение, читаемость текста).
Изображение, которое размещается поверх подложки, должно соответствовать размерам шаблона и не заходить на текст. Картинка должна быть ровно обрезана, с гладкими и не лохматыми краями. Формат изображения, размещаемого поверх подложки — .png (прозрачный).
Удачные примеры
Так делать не стоит
5
Иконки
Подбор иконок для сайта тоже очень важен. Все иконки стоит подбирать в одном стиле и хорошего качества (линейные, плоские, объемные, комбинированные), чтобы сайт смотрелся аккуратно и гармонично.
Удачные примеры
Так делать не стоит
Где подбирать и обрабатывать изображения
- Искать изображения для сайта можно на бесплатных фотостоках, например:
- Либо для более обширного выбора использовать платные, вроде:
- Наймите фотографа, который проведет профессиональную фотосъемку в едином стиле
После выбора изображений, следует их обрезать под нужные размеры.
Для этих целей лучше использовать Фотошоп (десктопную, онлайн версию) или альтернативные программы на веб-сайтах, например:
Размеры смотрим в соответствии с вашим сайтом.
Напомним, что нужно следить чтобы все изображения сочетались между собой и учитывалось то, что в дальнейшем на них будет размещен текст, кнопки или другие элементы сайта.
Если у вас в штате нет дизайнера и вы сами не справляетесь с задачей по подбору изображений на сайт, то мы предлагаем свою помощь
Пример клиентского сайта до/после нашей работы с его визуальной частью
