14 ресурсов для подбора стильных и бесплатных фото для сайта
- Фотография
- 3 мин на чтение
- 3747
Многим наверняка знакома ситуация, когда очень срочно нужно найти стильные и не примелькавшиеся изображения: для статьи, баннера, открытки, оформления сайта, блога или группы в социальных сетях и т.д. Приглашать фотографа, моделей и делать фото специально для проекта — не каждому по плечу и по карману такая задача. Это даже скорее долго, чем дорого. А картинка к статье нужна вот прямо сейчас. Как быть?
Тут выручают фотостоки и банки авторских фотографий.
И пока мы перекапывали интернет в поисках стильно-нейтрально-технологического фото, нашлось несколько сервисов, которые будут полезны и вам.
www.firestock.ru
Один из любимых сервисов. Большое количество категорий, где можно найти изображение для практически любых целей. Люди, дети, еда, пейзажи, техника и многое другое. Фото и картинки выполнены в различных стилях и с разным эмоциональным фоном.
ru.freepik.com
Один из самых популярных сервисов у дизайнеров. Большой банк векторных и PSD-файлов, которые можно доработать под свои нужды. Масса открыток для любого повода. Есть подборки для составления инфографики:
getrefe.tumblr.com
Отличные фотографии, которые разбиты на категории. Групп не так много, но фото в них достаточно качественные и подойдут для оформления сайта.
unrestrictedstock.com
На данном фотостоке, как и на Freepic можно найти векторную графику. Некоторые иконки постоянно нужны, а найти их можно на этом ресурсе. Плюс фотографии городов, животных, природы.
nos.twnsnd.co
Фотографии на этом ресурсе — старинные.
Винтажные изображения придадут своеобразный стиль публикации. Но использование изображений возможно только в личных и некоммерческих целях.
www.rgbstock.com
Ресурс предлагает тысячи фотографий, разбитых на тематические группы. Скачать картинку можно только после регистрации.
foter.com
Огромная база изображений на любые темы — более 200 миллионов фото. Удобно, что можно выбрать нужный размер картинки в пикселях и скачать именно его.
unsplash.com
Ресурс с очень спокойными и безумно красивыми фото. Качество изображений — отличное. При клике на фотографию она откроется в большом размере. Если вам нужна большая нейтральная фотография — вам сюда.
www.designerspics.com
Масса фото на различные темы. Одна из популярных и крупных категорий — бизнес. Фотографии достаточно спокойные, обычно в фокусе предметы интерьера, еда, руки людей.
picjumbo.com
Стильные и бесплатные картинки для сайта или блога. Есть любопытный инструмент — при наведении на фотографию появляется иконка — “Тест-драйв фото”.
Можно посмотреть, как выглядит изображение при различном его использовании, например, в качестве фона для страницы сайта.
jaymantri.com
На этом ресурсе очень много фото природы, городских пейзажей. Многие изображения отлично подойдут для фона сайта — спокойные, неяркие, но эффектные фото.
www.splitshire.com
Авторские фото Даниэля Нанеска. Можно свободно использовать фото в коммерческих целях. Удобно, что фото при клике разворачивается в крупное и сразу можно оценить, как оно будет выглядеть в качестве фона для страницы сайта. Пример:
www.gratisography.com
Множество фотографий от Райана Мак-Гира. Фото необычные, нестандартные и очень эмоциональные. Часто встречали их в анонсах к статьям в популярных блогах.
www.lifeofpix.com
По стилю фото похожи на jaymantri — качественные и спокойные изображения для фона сайта.
Данных ресурсов более чем достаточно, чтобы обеспечить сайт качественными изображениями, независимо от того, какой он тематики.
Приятно то, что эти сервисы бесплатны и самое большее — потребуют регистрации.
Источник: Spark
- #дизайн
- #статья
- #фотография
- #фотосток
- 0
Добавление фона на сайт | Weblium Help Center
Эта статья также доступна на:
Правильно подобранный фон поможет задать нужный тон для сайта, а также подчеркнуть имеющийся контент.
На Weblium вы можете добавить картинку, видео или сплошную заливку на фон своего сайта.
Следуйте инструкциям ниже, чтобы добавить фон на сайт.
Важно: имейте в виду, что на данный момент нет возможности добавить единый фон ко всему сайту. Фон должен быть установлен для каждого блока на странице отдельно.
Добавление фона на сайт
Для этого наведите на нужный блок и перейдите в его настройки, кликнув на появившийся «бегунок»:
В новом окне откройте вкладку Фон и выберите одну из трёх опций — Цвет, Изображение, Видео:
Добавление цветного фона
Опция Цвет даёт возможность залить фон блока сплошным цветом либо же выбрать градиент.
После включения этой опции выберите один из предложенных цветов из существующей палитры сайта:
Подсказка: чтобы изменить текущую палитру сайта, обратитесь к статье Изменение цвета текста.
Если вы хотите выбрать собственный цвет, нажмите на иконку заливки и подберите нужный цвет. Вы также сможете настроить прозрачность заливки справа от палитры:
Если вы выбрали собственный градиент, здесь вы можете настроить два основных цвета, а также градус градиента, чтобы обозначить его направление:
Добавление картинки на фон
С помощью опции Изображение вы можете загрузить собственную картинку или же выбрать одну из стоковых изображений в галерее.
Кликните Загрузить и выберите файл с вашего устройства. При клике на кнопку Галерея вы перейдёте к уже загруженным изображениям на сайт, или же сможете добавить бесплатные стоковые изображения с платформы Unsplash:
Как только добавите картинку, у вас откроются новые инструменты для настройки изображения — эффекты прокрутки, фильтры и заливка:
Подсказка: узнайте больше о том, как создать иллюзию объёма для фоновых изображений, в статье Настройка параллакс эффекта.
Нажмите на Настройки позиционирования, чтобы выбрать масштаб фоновой картинки, а также точку фокуса для отображения на мобильных устройствах:
Добавление видео на фон
В разделе Видео вы сможете добавить видео на фон только с платформ Youtube или Vimeo.
Подсказка: YouTube видео в формате shorts не поддерживается, поэтому нужно будет в ссылке заменить shorts/ на watch?v= чтобы преобразовать его в стандартный формат.
Для этого вставьте соответствующую ссылку в нужное поле:
Подсказка: после добавления фонового видео оно будет отображаться статичным для поддержания скорости работы редактора.
На опубликованном сайте видео будет проигрываться как нужно.
Как только видео будет добавлено, у вас появится возможность наложить на него другой цвет, чтобы оно соответствовало выбранной цветовой палитре сайта:
Примечание: для фоновых видео по умолчанию выключен звук, чтобы не портить взаимодействие пользователей с сайтом.
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Обновлено на: 07 / 12 / 2022
Как добавить собственный фон на страницы WordPress
- Фейсбук
- Твиттер
Вы хотите придать своему веб-сайту дополнительный уровень индивидуальной настройки, чтобы выделиться среди конкурентов? Если это так, вы можете рассмотреть возможность добавления пользовательского фона для страниц WordPress. Это поможет каждой странице чувствовать себя уникальной. Добавить собственный фон на ваш сайт очень просто. Большинство тем имеют встроенную поддержку пользовательских фоновых изображений WordPress, и есть из чего выбирать.
Есть два простых способа добавления пользовательских фонов в WordPress, и они практически не требуют времени для изучения. В первом используются встроенные функции, а во втором — подключаемый модуль фонового изображения WordPress. Сегодня я покажу, как добавить собственный фон для страниц WordPress, используя оба метода.
Зачем использовать собственный фон для страниц WordPress
Ответ довольно прост: они делают ваш сайт лучше. Многие веб-сайты будут использовать темы по умолчанию, предоставляемые WordPress, но многие не тратят время на полную настройку этих тем. Фоновые страницы действительно могут помочь новому веб-сайту выделиться среди более известных веб-сайтов, сделав его лучше. Конечно, выглядеть лучше — это вопрос личного мнения, поэтому очень важно понимать свою аудиторию.
Например, вы можете добавить пользовательский фон для категории, например, кошки, а затем иметь пользовательский фон кошки. Большинство людей, которые попадают в категорию о кошках, скорее всего, будут людьми, которые любят кошек, и этот конкретный вид веб-сайта может даже привлечь к вам новых постоянных клиентов.
Эта идея может быть применена к любой категории и действительно поможет вам выделиться среди других веб-сайтов, которые используют одни и те же скучные темы на каждой странице.
Как добавить собственный фон для страниц WordPress
Сегодня я покажу, как добавить собственный фон для страниц WordPress двумя способами. Первый метод — использование настроек вашей темы, а второй — использование плагина All-in-One Custom Backgrounds Lite. Чтобы использовать первый метод, вам нужно установить тему на свой веб-сайт WordPress, которая может не поддерживать настраиваемые фоны, но большинство тем поддерживает.
Начнем с метода настройки темы. На левой панели администратора нажмите «Внешний вид» и выберите «Настроить».
В меню слева выберите параметр «Фоновое изображение».
Теперь вам нужно нажать кнопку «Выбрать изображение». Вам понадобится изображение, сохраненное на вашем компьютере. Вы можете создать собственное изображение в программном обеспечении для редактирования изображений, таком как Photoshop или Paint, или просто загрузить изображение из Интернета.
Если вы уже загрузили изображение, которое хотели бы использовать, вы найдете его в Медиатеке. Если вы этого не сделали, перейдите на вкладку Загрузить файлы и нажмите кнопку «Выбрать файлы». Выберите свое изображение и загрузите его. Нажмите на кнопку «Выбрать изображение», когда вы выбрали подходящее изображение. Кроме того, вы также можете добавить GIF в качестве фонового изображения.
Теперь вы сможете увидеть, как выглядит фоновое изображение. Вы можете изменить местоположение изображения, нажав на одно из направлений под изображением. Если вы довольны своим выбором, нажмите кнопку «Сохранить и опубликовать».
Этот метод очень прост и может быть изменен в любое время. Конечно, вы можете привыкнуть решать все свои проблемы с помощью плагина, и добавление пользовательского фонового изображения в WordPress также может быть решено. Начнем с того, что перейдем в область плагинов WordPress и нажмем кнопку «Добавить новый».
Найдите простое полноэкранное фоновое изображение в доступном окне поиска.
Это подтянет дополнительные плагины, которые могут оказаться полезными.
Прокрутите вниз, пока не найдете плагин Simple Full Screen Background Image, нажмите кнопку «Установить сейчас» и активируйте плагин для использования.
На левой панели администратора нажмите «Внешний вид» и выберите параметр «Полноэкранное фоновое изображение». Откроется главная страница настроек плагина.
Нажмите кнопку «Выбрать изображение».
Как и в предыдущем методе, вам нужно выбрать изображение. Если вы еще этого не сделали, перейдите на вкладку «Загрузить файл» и загрузите изображение. Найдите изображение в медиатеке и нажмите кнопку «Использовать изображение». После выбора изображения нажмите кнопку «Сохранить параметры».
Поздравляем, вы успешно добавили пользовательское фоновое изображение двумя способами. Если ваша тема поддерживает настраиваемые фоны, первый способ может быть лучшим. Если нет, то вам подойдет плагин. Независимо от того, что вы решите использовать, у вас не должно возникнуть проблем с добавлением пользовательских фонов на ваши страницы.
Альтернативные плагины
Существуют тысячи плагинов, а настройка веб-сайтов — один из наиболее востребованных плагинов разработчиками. Существует множество плагинов, которые помогут добавить собственный фон на ваш сайт. Вот несколько плагинов, которые я могу порекомендовать использовать.
Full Background Manager
Full Background Manager — очень простой плагин для настройки вашего фона. Вместо добавления изображения вы найдете поле внизу каждого редактора страниц. Вместо этого вы можете изменить цвет фона на один сплошной цвет. Если это похоже на то, что вам интересно делать, то этот плагин для вас.
Полноэкранные фоновые изображения
Полноэкранные фоновые изображения не следует путать с Простым полноэкранным фоновым изображением. Это уникальный плагин, позволяющий добавить слайд-шоу в качестве фонового изображения. Это может быть очень полезно, когда вы не можете выбрать одно изображение в качестве фона. и с этим плагином вам не нужно, не стесняйтесь добавлять столько слайд-шоу и просматривать их все на своем веб-сайте.
Сохраняйте инновации на своем веб-сайте
Каждый день создаются тысячи веб-сайтов, а миллионы уже созданы. Чтобы выделиться в этой области, вам нужно, чтобы ваш веб-сайт был свежим и уникальным, и это достигается за счет инноваций. Просто изменить темы по умолчанию, которые использовались бесчисленным множеством других, — это один из способов казаться уникальным.
Конечно, выделяться — это здорово, но вам нужно убедиться, что у вас есть контент, который это поддерживает. Если посетители видят круто выглядящий сайт, на котором ничего нет, зачем им возвращаться? Важно использовать установленный контент и создавать собственный фон для записей и страниц WordPress, связанных с вашим сайтом.
Как вы решили использовать конкретное изображение в качестве фона вашего веб-сайта? Используете ли вы разные фоновые изображения в зависимости от категории, в которой находится страница?
- Фейсбук
- Твиттер
Изображения | Контрольный список веб-доступности
| Тема | Техника | WCAG AA Требование |
|---|---|---|
| Информативные изображения и активные изображения (например, ссылки, кнопки или элементы управления) | Альтернативный текст: Изображение ДОЛЖНО иметь альтернативный текст.
Методика испытаний 1.1.1.b | Требуется WCAG 1.1.1 |
Осмысленное описание: Альтернативный текст ДОЛЖЕН быть осмысленным (точно передавая цель изображения и замысел автора таким образом, чтобы это было полезно для тех, кто не может видеть изображение).
Методика испытаний 1.1.1.b | Требуется WCAG 1.1.1 | |
| Краткость: Длина альтернативного текста для информативных изображений СЛЕДУЕТ быть краткой (не более 250 символов). | лучшая практика | |
| Избегайте повторения того, что элемент является изображением: альтернативный текст НЕ ДОЛЖЕН включать слова, которые идентифицируют элемент как графику или изображение (например, избегайте таких фраз, как «графика» или «изображение» и т. д.), потому что программы чтения с экрана уже укажите роль (например, сказав «графический», а затем прочитав альтернативный текст). | лучшая практика | |
| Несущественные изображения (исключительно декоративные или избыточные, а не активные) | Необязательные изображения: изображениям, которые не передают содержание, являются декоративными или избыточными по отношению к содержимому, которое уже передано в тексте, СЛЕДУЕТ указывать нулевой (пустой) альтернативный текст ( alt="" ), ARIA role="presentation" или реализованы как фоны CSS. | лучшая практика |
| Сложные образы | Сложные изображения: Сложные изображения ДОЛЖНЫ быть кратко описаны с использованием альтернативного текста И ДОЛЖНЫ иметь более полное расширенное описание.
Методология тестирования 1.1.1.c | Требуется WCAG 1.1.1 |
| Фоновые изображения | Информативные фоновые изображения: если фоновое изображение передает информацию, ДОЛЖЕН быть предоставлен альтернативный текст (например, с помощью обычного видимого текста, путем добавления role=»image» и aria-label или другими способами). Методика испытаний 1.1.1.b | Требуется WCAG 1.1.1 |
Активные фоновые изображения: если фоновое изображение является единственным «содержимым» активного элемента (например, ссылки, кнопки или элемента управления), активный элемент ДОЛЖЕН иметь доступное имя (например, через Методология тестирования 1.1.1.a | Требуется WCAG 1.1.1 | |
| Цветовой контраст мелкого текста: Мелкий текст (менее 18 пунктов обычным шрифтом или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности не менее 4,5 к 1 относительно фона. Методология испытаний 1.4.3.a | Требуется WCAG 1.4.3 | |
Цветовой контраст крупного текста: Крупный текст (размером 18 или более пунктов или жирным шрифтом 14 пунктов) ДОЛЖЕН иметь коэффициент контрастности не менее 3 к 1 относительно фона. Методика испытаний 1.4.3.b | Требуется WCAG 1.4.3 | |
| Необязательные фоновые изображения: Альтернативный текст НЕ ДОЛЖЕН предоставляться для необязательных фоновых изображений. | лучшая практика | |
| Изображения текста | Нет изображений текста: изображение НЕ ДОЛЖНО включать информативный текст, если эквивалентное визуальное представление текста может быть воспроизведено с использованием реального текста (за исключением случаев, когда текст является важным — например, логотипом — или шрифтом, размером, цветом и фоном). настраиваемый.). Методология тестирования 1.4.5.a | Требуется WCAG 1.4.5 |
Цветовой контраст мелкого текста: Мелкий текст (менее 18 пунктов обычным шрифтом или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности не менее 4,5 к 1 относительно фона. Методология тестирования 1.4.3.a | Требуется WCAG 1.4.3 | |
| Цветовой контраст крупного текста: Крупный текст (размером 18 или более пунктов или жирным шрифтом 14 пунктов) ДОЛЖЕН иметь коэффициент контрастности не менее 3 к 1 относительно фона. Методика испытаний 1.4.3.b | Требуется WCAG 1.4.3 | |
| Анимированные изображения | См. требования к анимации, движению и синхронизированному содержимому. | Обязательно Несколько |
| Изображение CAPTCHA | Альтернативный текст: Элементы Image CAPTCHA ДОЛЖНЫ иметь альтернативный текст, описывающий назначение изображения. Методология тестирования 1.1.1.g | Требуется WCAG 1.1.1 |
Сенсорные альтернативы: Графические элементы CAPTCHA ДОЛЖНЫ быть дополнены хотя бы одним слуховым альтернативным методом.  |
Обратитесь к методикам для различных типов изображений: