Подбор фотографий для сайта: фотостоки, поиск изображений и авторское право

В этом уроке разбираем, где искать фотографии для мудборда и дизайна сайта. На примере Pixabay, Pexels и Freepik (ныне Magnific) рассмотрим поиск изображений, работу с запросами и фильтрами, выбор подходящей композиции, ориентации и разрешения фотографий.

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

Материалы урока:

• Freepik (ныне Magnific) - magnific.com
• Unsplash - unsplash.com
• Pixabay (нужен vpn) - pixabay.com
• Pexels (нужен vpn) - pexels.com

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

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

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

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

Например, если нужно передать ощущение уюта, необязательно искать только по запросу «уют». Вспомните дерево ассоциаций и расширьте поле поиска: уют → дом → семья → тепло → свет → утро → интерьер → отдых.

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

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

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

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

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

Всегда представляйте фотографию внутри будущего блока сайта. Если всё пространство кадра плотно заполнено объектами, рядом с ними может быть сложно разместить текст, заголовок или кнопку.

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

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

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

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

Если формат фотографии сильно отличается от формата блока, изображение придётся сильно кадрировать, и важные части композиции могут потеряться.

Фотография должна поддерживать общую стилистику сайта. Обращайте внимание на:

• температуру изображения;
• насыщенность;
• контраст;
• характер освещения;
• основные оттенки;
• стиль обработки.

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

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

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

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

Оценивайте:

• естественность эмоций;
• позы;
• одежду;
• окружение;
• освещение;
• типаж;
• степень постановочности кадра.

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

Здесь нет универсально правильного варианта. Важно соответствие выбранной визуальной концепции и естесственность людей.

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

Для начала можно использовать: Pixabay, Pexels, Freepik, Unsplash.

Важно запомнить простое правило: если изображение можно скачать, это ещё не значит, что его можно использовать.

У фотографии есть автор или правообладатель, а её использование регулируется условиями лицензии.

Изображения из Google, Яндекса, Pinterest, социальных сетей, чужих сайтов и других источников нельзя автоматически использовать в коммерческом проекте.

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

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

• разрешено ли коммерческое использование;
• требуется ли указание автора;
• можно ли изменять изображение;
• есть ли ограничения на распространение;
• чем отличаются условия бесплатной и платной лицензии.

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

Если лицензия предусматривает атрибуцию, необходимо выполнить это требование.

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

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

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

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

Это важно разделять уже на этапе работы с мудбордом.

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

Каждую найденную фотографию оценивайте со всех сторон: смысл → настроение → композиция → ориентация → цвет → качество → лицензия.

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

Смотреть следующий урок