Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Фоновые картинки для сайта: Фоновые картинки для сайта — 65 фото

Картинки для сайта: как подбирать правильно

Вы заметили, что мы говорим “не почитай на сайте”, а “посмотри на сайте”. Сайты мы любим и воспринимаем в первую очередь глазами. Без картинок на сайте никто не удостоит ваш сайт даже взглядом. Только если графический контент оформлен хорошо, пользователи возьмутся за изучения сайта. Только тогда они оценят его полезность и удобство.

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

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

Содержание

Что выбрать: стоковые фото, иллюстрации для сайта или фото от профессионального фотографа

Первое, что вам нужно знать. Правильного ответа на этот вопрос нет.

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

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

Фотограф создаст уникальный контент именно о вас или о вашем продукте. Если вы заказываете профессиональную съёмку, вы должны говорить на одном языке с фотографом. Язык этого общения – техническое задание (ТЗ). О том, как составить ТЗ для фотографа, мы расскажем ниже.

Где брать картинки для сайта: фото и иллюстрации

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

Для поиска фото мы рекомендуем обращаться к Unsplash, Pexels, Pixabay, StockSnap, Freerange Stock. С этими фотостоками вам не нужно указывать авторов фотографий, упоминать их источник или платить роялти. Изображения можете использовать в коммерческих целях и изменять их любым нужным образом. Поиск на стоках позволяет применять фильтры сортировки профессиональных бесплатных фотографий и выбирать нужные вам тематики.

 

Иллюстрации на условиях бесплатной лицензии вы можете найти на стоках Ouch.pics, Freepik, unDraw, Manypixels. Дополнительно искать иллюстрации для сайта вы можете и на упомянутых ранее фотостоках (там есть также и разделы с иллюстрациями). Если вы загорелись идеей подобрать ваши уникальные иллюстрации, ищите их через Google. Есть буквально сотни сайтов с небольшими наборами бесплатных картинок.

Бесплатные стоковые фото для сайта: как правильно искать

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

Используйте разные слова в запросах на стоке

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

Выше расположены фотографии по запросу “тренировка” на фотостоке Unsplash. Вы можете увидеть, что у всех этих фото нет характера: улыбки, много счастья и конфетная дружественность. Разве вам нужны такие стерильные изображения?

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

Обращайте внимание на коллекции 

Когда вам попадётся подходящая фотография, вы можете найти похожие изображения для сайта тремя способами.

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

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

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

Иллюстрации для сайта: какие бывают стили

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

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

Чтобы все иллюстрации на сайте были похожими, вам нужно бегло разбираться в типе иллюстраций – их художественных особенностях. Исходя из этих особенностей иллюстрации делятся следующим образом:

В зависимости от объемности исполнения

иллюстрации делятся на плоские, полуплоские и выполненные в 3D. В плоских иллюстрациях используется заливка цветом. В полуплоских появляются тени или разделение объектов на несколько фигур в перспективе. С распознаванием 3D у вас не будет сложностей.

На основе использованных художественных средств 

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

Исходя из особенностей использования контуров

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

В зависимости от реалистичности исполнения

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

Исходя из сложности сюжета и обилия деталей

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

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

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

Заказанная фотосъёмка: как поставить ТЗ и найти фотографа

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

  • Задача фотосессии. Опишите для какой цели вы нанимаете фотографа, что нужно сфотографировать, на чем нужно сделать акцент, какие эмоции должны вызывать фотографии и какое действие в результате просмотра контента должен сделать посетитель сайта.
  • Стилистика и концепция. Определитесь с жанровыми особенностями фотографий: предметная, интерьерная репортажная, фуд, корпоративная, художественная или техническая съемка. Приложите понравившиеся примеры фотографий (референсы). Укажите ведущие цвета.
  • Сфера использования. Расскажите вкратце о сайте, для которого создаются фотографии. Дополнительно вы можете показать макет сайта или понравившиеся сайты с похожей тематикой. Не лишней будет информация о вашем бренде, особенностях бизнеса и целевой аудитории.
  • Локации, реквизит, обслуживание. Договоритесь о всех технических деталях. Где будет проходить съёмка и нужно ли арендовать для неё студию. Нужны ли профессиональные модели или их роль будет выполнять кто-то из ваших знакомых. В каком виде нужно подготовить реквизит или предметы съёмки. Узнайте, нужны ли визажисты и аренда света.
  • Количество и вид фото. Установите количество фотографий, которое вам нужно получить в результате съёмки. Дополнительно перечислите, что конкретно должно присутствовать на фото. Не забудьте указать формат будущих фото, то есть соотношения их сторон.
  • Обработка и сроки сдачи. Фотограф может делать просто фото или дополнительно их обрабатывать. На срок и конечную цену за работу фотографа влияет сложность обработки. По градации сложности обработка делится следующим образом: простая цветокоррекция, художественная ретушь, сложная обработка с удалением или добавлением элементов.
  • Цена. Исходя из сложности, времени, количества фото и типа обработки изображений, фотограф назовёт стоимость работы. Вам остаётся только обсудить порядок и очередность оплат.

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

Всегда рассматривайте несколько вариантов фотографов и обращайте внимание на работы в портфолио. Чем ближе стилистически работы в портфолио к желаемому вами

На что обратить внимание, выбирая картинки для сайта

Избегайте клише

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

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

Придерживайтесь цветовой схемы

Объединяйте все изображения на вашем сайте единым цветовым решением. Постарайтесь выбирать фото с повторяющиеся цветами. На некоторых фотостоках есть цветовой фильтр изображений – он поможет выбрать подходящие изображения.

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

Проводите проверку эмоциями

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

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

Думайте о мобильном виде сайта

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

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

Не забудьте об оптимизации изображений

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

На размер картинок влияет формат изображения и степень сжатия. Больше о форматах и оптимизации вы узнаете в разделе статьи, посвящённому SEO-оптимизации изображений. Для уменьшения размера картинок вы можете использовать сервисы Kraken.io, TinyPNG.com, Compressor.io, Imagecompressor.com.

Куда добавлять картинки на сайт: первый экран, фото продукта или услуги, галерея, фон

Изображение главного экрана. Одно изображение – одна мысль

Первый экран страницы – это фильтр для посетителя. За пару секунд он решает: продолжить просмотр или закрыть страницу. Поэтому уделяйте особое внимание подбору изображения для этого блока.

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

Фото товаров и услуг на вашем сайте. Советы по выбору и размещению

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

  • Взаимодействие в фото товаров на сайте. На таких фотографиях вы показываете результат или процесс взаимодействия клиента с вашим продуктом. Например, вы продаёте кофеварки с очень простым уходом – покажите процесс её обслуживания. Данный тип фотографий можно использовать, когда выгоду легко показать.
  • Детализация в фото товаров на сайте. Хотя бы раз пользователю нужно показать товар или услугу с должной детализацией. Лучше всего делать серию предметных фотографий и размещать их в галерее. Допустим, вы продаёте обувь ручной работы. Для демонстрации своего продукта размещайте фотографии с последовательной детализацией. Например, вид сверху – система шнуровки – макрофото фурнитуры системы шнуровки.
  • Контекст в фото товаров на сайте. Показывайте условия или ситуацию, в которых ваш продукт уместный. Так вы демонстрируете причину, которая вызывает потребность в товаре или услуге. Например, ваши индикаторы дыма в помещениях могут быть не только функциональными, но и стильными. Правильный вариант их размещения – фото в современных и красивых интерьерах.

Галерея на сайте. Польза и экономия пространства

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

Галерея – это случай интерактивного контента на странице сайта.

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

Выбираете галерею? Пользователь сможет просмотреть важную информацию в одном месте, но посетитель должен быть заинтересован в лишних кликах.

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

Картинка как фон. Правила размещения изображений-фонов на сайте

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

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

  • Не размещайте смысловой и композиционный центр фоновых изображений под текстом. В таком случае посетитель не сможет сконцентрироваться ни на фото, ни на тексте. Композиционный центр – это логическая и визуальная точка концентрации внимания на изображении. Не забывайте, что участок фотографии под текстом должен быть однородным по цвету и свету.
  • Делайте текст и изображение самодостаточными. То есть посетитель должен понять смысл фото и текста по отдельности без привязки друг к другу. Но связь этих элементов должна добавить глубины к пониманию или эмоциональному восприятию темы блока.
  • Составляйте композиционные пары из фото и текста с элементами сайта. У изображений или блоков есть композиционные центры. При правильном сочетании точки внимания изображения ведут к точкам внимания в тексте.

Картинки для сайта на Weblium

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

Точно так же мы максимально упростили работу с изображениями, чтобы ваш дизайн сайтов появлялся за часы – а не дни.

Бесплатные изображения с фотостока Unsplash

Прямо из меню работы с изображениями вы можете найти свои картинки из 1 000 000 изображений на стоке. Для добавления иконок из меню управления элементом иконки ищите необходимое в бесплатных библиотеках Icons8 и The Noun Project.

Базовые возможности редактирования изображений

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

Оптимизация изображений и её отключение

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

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

Автор

Александр Громов

Автор блога Weblium.

Другие статьи автора

Где найти красивые бесплатные картинки для сайта. 9 бесплатных фото стоков


 

Если вы используете Windows, изменение фона может не работать, даже если этот параметр отображается.


 

Компьютеры Mac с Процессоры Intel Core i5 серии 5000 (например, в MacBook Air 2017 года) не поддерживают виртуальный фон.


 		 900 02 Поддерживаются только устройства Android, соответствующие этим требованиям.

Опция

Описание

Миниатюра текущего обоев

Изображение рабочего стола, используемое в настоящее время на вашем Mac.

Название обоев и всплывающее меню

Во всплывающем меню просмотрите имя текущего изображения рабочего стола и выберите тип внешнего вида во всплывающем меню, если обои являются динамическими обоями. изображение или изображение из светлых и темных обоев:

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

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

  • Автоматически: Доступно, если в качестве обоев выбрано изображение «Светлые и темные обои», которое переключается со светлого на темное на закате в зависимости от вашего текущего местоположения. Однако, если вы выбрали «Темный режим» в настройках «Внешний вид» (или во время установки macOS), изображение рабочего стола по умолчанию представляет собой темное неподвижное изображение.

  • Свет (неподвижный): На рабочем столе отображается статичная облегченная версия изображения.

  • Темный (неподвижный): На рабочем столе отображается статическая темная версия изображения.

Изображение (или имя изображения)

Выберите тип размещения во всплывающем меню, если фоновый рисунок является изображением, добавленным вами вручную (см. «Добавить папку» и «Добавить фотоальбом»). ниже). Варианты включают «Заполнить экран», «По размеру экрана», «Растянуть на весь экран», «По центру» и «Мозаика». Для некоторых вариантов компоновки можно выбрать цвет вокруг изображения. Некоторые параметры могут искажать изображение.

Сменить изображение

Выберите временной интервал во всплывающем меню, чтобы указать, как часто меняются изображения и цвета обоев, когда вы устанавливаете для них автоматический цикл (см. «Автоповорот» ниже).

Перебирайте изображения или цвета по порядку или выберите Случайный выбор.

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

Миниатюры выбора обоев

Миниатюры отображаются в категориях, включая «Динамические обои» (изображения, которые меняются в течение дня), «Светлые и темные обои», «Цвета», а также папки и фотоальбомы, которые вы добавляете вручную (см.

«Добавить папку» и «Добавить фотоальбом» ниже).

Для некоторых изображений необходимо щелкнуть значок загрузки при подключении к Интернету.

Если ваши фотографии не отображаются, возможно, они не в ожидаемом формате файла — JPEG, PICT, TIFF, PNG или HEIC. Используйте предварительный просмотр, чтобы открыть фотографии и сохранить их в одном из поддерживаемых форматов. См. Сохранение PDF-файлов и изображений в режиме предварительного просмотра.

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

Цвета

Выберите цвет в качестве изображения на рабочем столе.

Автоповорот

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

Добавить папку

Выберите изображение со своего компьютера в качестве изображения рабочего стола.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

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

Карта сайта