Как фоновые изображения работают в Avada — Конструктор веб-сайтов Avada
Перейти к содержимомуПоследнее обновление: 13 февраля 2023 г.
Поиск:
Мы регулярно получаем запросы в службу поддержки с вопросами, почему фоновое изображение обрезано или увеличено. Итак, вот некоторая информация о том, как работают фоновые изображения, чтобы помочь объяснить те ситуации, когда фоновое изображение выглядит не так, как вы ожидаете.
Все начинается с понятия соотношения сторон изображения. Это соотношение между шириной и высотой изображения. Таким образом, если изображение размером 1200 на 800 пикселей, оно имеет соотношение сторон 3:2, то есть, если бы его длина была равна 3, его высота была бы равна 2.9.0003
В этом документе мы рассмотрим добавление фоновых изображений в контейнер, а затем в столбцы.
Фоновые изображения контейнера
При добавлении фонового изображения в контейнер происходит следующее. Изображения, установленные в качестве фона в контейнерах, охватывают высоту 90 017 или ширину 90 018 контейнера при сохранении соотношения сторон; эффективно, всегда заполняя контейнер.
Но контейнеры сами по себе вообще не имеют высоты, поэтому их высоту определяет содержимое (или отступы), а ширину определяет параметр «Ширина сайта» (или экран, на котором он просматривается с шаблоном ширины 100%).
Пример
Давайте рассмотрим простой пример для иллюстрации. На диаграмме ниже изображение имеет ширину 1200 пикселей и высоту 800 пикселей. Допустим также, что ширина сайта была установлена на 1200 пикселей в параметре Layout > Site Width , а высота контейнера равна ровно 800 пикселей либо по содержимому, либо по отступам. В этом случае изображение отображается полностью с исходным соотношением сторон.
Теперь, если высота контейнера была увеличена до 1000 пикселей либо за счет содержимого, либо отступов, то изображение теперь будет отображаться с высотой 1000 пикселей и с сохранением соотношения сторон и шириной 1500 пикселей. Так что здесь изображение будет немного увеличено и слегка обрезано с обеих сторон.
Вот реальный пример.
Контейнер ниже полностью пуст (без столбцов или элементов) и имеет отступы, установленные на 200 пикселей по высоте. Изображение, установленное в качестве фонового изображения, имеет размер 1200 x 750 пикселей и поэтому немного увеличивается до ширины макета сайта (в данном случае 1300 пикселей), и (по крайней мере, на рабочем столе) мы можем видеть только 200 пикселей его высоты, в середине страницы. изображение, так как это изображение имеет фоновое положение Center Center.
Но на мобильном устройстве происходит нечто другое. Сайт переходит в адаптивный режим, и, поскольку ширина устройства намного меньше, но остается отступ в 200 пикселей, мы получаем изображение высотой 200 пикселей, и при такой ширине экрана мы снова видим почти все изображение. Именно так работает адаптивный веб-дизайн.
Шаблон ширины 100%
Ситуация немного отличается, когда вы добавляете фоновое изображение на страницу с шаблоном ширины 100%. Затем в игру вступает размер экрана пользователя.
При использовании монитора с большим разрешением, например, монитора 4K с разрешением 3840 x 2160 пикселей, возможно, потребуется значительно увеличить масштаб изображения. Это всегда баланс между размером файла изображения и размером в пикселях, поэтому типичный подход заключается в том, что при загрузке фонового изображения контейнера в шаблоне ширины 100% необходимо убедиться, что изображение имеет ширину не менее 2000 пикселей, поэтому масштабирование сохраняется до минимум.
Пример
Вот последняя иллюстрация, показывающая пример контейнера на странице с использованием шаблона ширины 100% на большом мониторе. Изображение отображается с шириной, равной разрешению экрана (минус полосы прокрутки и т. д.), и изображение будет обрезано по высоте, если только высота контейнера не будет равна собственному соотношению сторон изображения. Таким образом, для изображения с соотношением сторон 3:2 и размером 2000 пикселей высота контейнера должна быть около 1333 пикселей, чтобы обрезка не происходила.
Таким образом, в большинстве ситуаций произойдет некоторая обрезка, и изображение будет увеличено. Если ваше изображение сильно пикселизировано в такой ситуации, это потому, что загруженное фоновое изображение недостаточно велико для масштабирования на большом мониторе без пикселизации.
Фоновые изображения столбцов
Столбцы немного отличаются от контейнеров. Они увеличиваются до размера вставленного фонового изображения. Ниже то же изображение, вставленное в качестве фона столбца в пустой столбец 1/1. Столбец регулирует свою высоту, чтобы изображение отображалось полностью. В этом случае, поскольку изображение имеет ширину всего 1200 пикселей, а ширина сайта составляет 1300 пикселей, изображение также немного увеличивается.
Если мы изменим размер столбцов, изображение будет отображаться меньше, всегда показывая полное изображение. Однако, если содержимое нашего столбца превысит соотношение сторон изображения, то высота изображения всегда будет заполнять столбец, а изображение будет обрезано по ширине, чтобы сохранить соотношение сторон изображения неизменным.
См. два примера ниже.
Примеры
В левой части размер столбца просто изменен на 1/2. Изображение остается в полном размере и просто уменьшается до размера 1/2. Однако с правой стороны было добавлено содержимое, которое выдвигает высоту столбца за пределы того значения, которое было бы установлено соотношением сторон изображения. Итак, высота изображения сохраняется, в то время как изображение увеличивается по бокам, обрезая изображение, но сохраняя соотношение сторон.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Vitae et leo duis ut diam quam. Cras semper auctor neque vitae. Porta non pulvinar neque laoreet suspendisse. Elementum curabitur vitae nunc sed velit. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Bibendum arcu vitae elementum curabitur vitae nunc. Eget nunc lobortis mattis aliquam faucibus. Volutpat commodo sed egestas egestas. Ut sem nulla pharetra diam sit amet nisl.
Semper eget duis attellus at urna. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Velit egestas dui id ornare arcu odio ut. Ut consequat semper viverra nam libero justo laoreet.
Надеемся, что эта статья поможет объяснить, как изображения работают в качестве фона контейнера и столбца. Есть много сценариев, которые мы здесь не рассмотрели, но принципы те же. Веб-дизайн может быть сложным, но с пониманием принципов игры вокруг темы и того, как она взаимодействует с изображениями, вы сможете каждый раз получать удовлетворительный результат.
Ваш отзыв получен.
В этой статье
- Фоновые изображения контейнеров
- Пример
- Шаблон ширины 100%
- Пример
- Фоновые изображения столбцов
- Примеры
Как использовать изображение в качестве фона веб-сайта: 4 рекомендации | by Justinmind
Опубликовано в
·
Чтение: 7 мин.
·
22 июня 2018 г.
Ознакомьтесь с нашими советами экспертов по созданию идеальных фонов для веб-сайтов, которые заставят пользователей задержаться на сайте
Фон вашего веб-сайта или приложения не просто приятно иметь — это неотъемлемая часть UX-дизайна вашего сайта.
Согласно The Next Web, фон вашего веб-сайта может стать мощным инструментом рассказывания историй и помочь укрепить имидж вашего бренда, а также оказать эмоциональное воздействие на ваших пользователей. И как бы вы ни решили создать фон своего веб-сайта — с неподвижным изображением, иллюстрацией, видео или сплошным цветом — есть над чем подумать.
В сегодняшней статье мы расскажем вам о разработке фона веб-сайта с изображениями, а также покажем, как начать работу с прототипом Justinmind. Чтобы ваш веб-сайт или приложение были доступны и выглядели великолепно, следуйте этим четырем рекомендациям по созданию фона веб-сайта с изображениями.
4 рекомендации по использованию изображений в качестве фона вашего веб-сайта
Прежде чем мы перейдем к тому, что нужно и чего нельзя делать с дизайном фона веб-сайта, давайте настроим вас с помощью Justinmind. Начните с загрузки 30-дневной бесплатной пробной версии здесь. После установки инструмента Justinmind должен открыться автоматически.
Хорошо, приступим к прототипированию!
1 — Выберите правильное изображение для фона вашего сайта
Прежде всего, вам нужны изображения высокого качества (300 dpi). По данным Nielsen Norman Group, большинство пользователей решают, хотят ли они оставаться на вашем сайте, в течение первых 10–20 секунд просмотра. Фоновое изображение вашего веб-сайта обычно будет первым элементом пользовательского интерфейса, загружаемым на страницу, следовательно, первым элементом пользовательского интерфейса, который увидят ваши пользователи. Поэтому, если вы хотите, чтобы пользователи видели ценность вашего сайта при использовании фонового изображения, вам необходимо использовать высококачественные визуальные эффекты.
На самом деле, чем больше, тем лучше. Хитрость заключается в том, чтобы использовать максимально возможный файл, не замедляя работу вашего сайта. Разумное отношение к типу файла вашего изображения гарантирует, что оно не только будет выглядеть великолепно, но и не повлияет на производительность вашего сайта или взаимодействие с пользователем.
Изображения с большим количеством деталей следует сохранять в формате JPEG. JPEG может отображать миллионы цветов и совместим с различными платформами, браузерами и графическими редакторами. По данным HubSpot, JPEG — лучший тип файла для обеспечения высокого качества изображений при минимально возможном размере файла — идеально подходит для оптимизации скорости страницы вашего сайта.
Если вам нужно масштабировать изображение до различных размеров, SVG — ваш лучший друг. SVG (масштабируемая векторная графика) позволяет изменять размер изображений без потери качества, что отлично подходит для разработки адаптивного веб-сайта.
Создайте прототип с помощью Justinmind: Justinmind позволяет работать с изображениями с различными типами файлов, включая векторы SVG.
Просто перетащите изображение на холст, чтобы масштабировать изображения SVG без потери качества изображения. Для масштабирования перетащите углы изображения, как в любом другом инструменте дизайна, или измените размер на палитре свойств.
2 — Разумно используйте цвет пользовательского интерфейса на фоне вашего веб-сайта
Выбор цветов и их комбинаций важен, поскольку они влияют на то, как пользователи будут читать ваш сайт, как в прямом, так и в переносном смысле.
Выбор потрясающего фонового изображения веб-сайта в теории звучит великолепно, но не в том случае, если ваши пользователи не могут прочитать текст, размещенный поверх изображения. Точно так же слепой выбор любого старого изображения повлияет на эмоциональный заряд всего дизайна вашего сайта.
Текст должен быть читаемым и сканируемым, а в сочетании с фоном сайта должен иметь приемлемый коэффициент контрастности.
Чтобы содержимое было читабельным и хорошо видимым, Wix рекомендует использовать резкий цветовой контраст, который выделяет текст и кнопки призыва к действию, а не позволяет им теряться на заднем плане.
Создайте прототип с помощью Justinmind: Цветовая палитра Justinmind позволяет изменять цвет любого элемента пользовательского интерфейса, а также настраивать уровни его прозрачности. Для этого просто перейдите в палитру свойств.
В палитре свойств вы также можете изменить прозрачность фонового изображения, чтобы оптимизировать цветовой баланс фона вашего веб-сайта. Кроме того, рассмотрите возможность добавления четкой границы вокруг основного контента, чтобы отделить его от фона и вывести его вперед в визуальной иерархии.
И если вы работаете с изображениями SVG, не забывайте, что вы можете изменить цвет ваших изображений, а также их размер в Justinmind. Опять же, все, что для этого нужно, — это зайти в палитру свойств.
3 — Рассмотрите расположение фонового изображения вашего сайта
При правильном использовании большие фоновые изображения могут помочь передать цель и видение вашего бренда.
Однако полноэкранное фоновое изображение иногда может отвлекать внимание от других элементов пользовательского интерфейса на странице. Очень важно найти баланс между большим впечатляющим изображением, которое привлекает пользователей, и изображением, которое отвлекает их от важного контента.
Начните с рассмотрения различных типов фонового изображения: фон v главные заголовки. Основные изображения прикрепляются к заголовку веб-сайта и относятся к содержимому, которое находится непосредственно под ним. Они помогают донести сообщение о конкретной функции вашего сайта.
Напротив, фоновые изображения не закрепляются на странице и отображаются при прокрутке пользователем. Они лучше всего подходят для создания общей темы или атмосферы сайта, а не для выделения определенного аспекта сайта.
Что бы вы ни выбрали, фоновое изображение вашего веб-сайта должно служить визуальной подсказкой для ваших пользователей, а не занимать центральное место. Для получения дополнительной информации о различных типах фоновых изображений и о том, как разместить их на своем веб-сайте, ознакомьтесь с этой публикацией в журнале Smashing.
Создайте прототип с помощью Justinmind: С помощью Justinmind вы можете управлять функциональностью фоновых изображений вашего веб-сайта в своем прототипе. С нашей новой функцией прототипирования параллакса вы можете закрепить элементы пользовательского интерфейса на холсте, чтобы они оставались видимыми при прокрутке пользователем.
Кроме того, если вы хотите добавить главное изображение поверх своего веб-прототипа, вы можете поместить его в заголовок. Просто нажмите на элемент пользовательского интерфейса, который вы хотите содержать в качестве основного изображения, и перейдите на палитру свойств.
В разделе «Фон» нажмите «Добавить изображение», выберите изображение, которое будет вашим основным изображением, и нажмите «Открыть». Вернувшись в палитру свойств, выберите «Обложка» из раскрывающегося списка, если вы хотите, чтобы изображение заполнило элемент пользовательского интерфейса, или «Содержать», если вы хотите, чтобы оно содержалось внутри элемента пользовательского интерфейса.
4 — Сделайте адаптивным фоновое изображение вашего веб-сайта
Поскольку пользователи просматривают сайты с множества устройств, ни один веб-дизайнер, имеющий лицензию Adobe XD, не мечтает о разработке веб-сайта, не экспериментируя с различными размерами экрана и разной шириной окна браузера.
Так почему же должно быть по-другому, когда дело доходит до фона вашего сайта? Использование изображения, которое, как вы надеетесь, будет выглядеть одинаково хорошо на маленьком и большом экранах при масштабировании, уже недостаточно хорошо. Пользователи ожидают, что ваш контент будет идеально адаптироваться к их устройствам — в конце концов, на дворе 2018 год.
Чтобы представить свой сайт как можно большему количеству пользователей, вам следует протестировать фон вашего сайта как на мобильных устройствах, так и на настольных компьютерах.
Создайте прототип с помощью Justinmind: отзывчивый дизайн не является чем-то новым для Justinmind.
Наш холст, элементы пользовательского интерфейса и взаимодействия были созданы с учетом различных разрешений экрана, чтобы вы могли создавать контент, который адаптируется к любым устройствам. Недавнее обновление сделало масштабирование контента еще проще — ознакомьтесь с нашими обновлениями адаптивных функций здесь.
Но что действительно интересно, так это то, что мы объявили в нашем последнем выпуске. Теперь вы можете тестировать экраны разного размера в одном и том же прототипе для идеального многоканального взаимодействия с пользователем.
Просто создайте новый экран в палитре «Экраны» и выберите тип устройства, для которого вы хотите создать экран. Затем перетащите фоновые изображения на каждый экран и уменьшите масштаб! Простые.
Мы рекомендуем начать с мобильных устройств, так как это поможет вам оптимизировать контент для устройств меньшего размера, а также фоновое изображение. И, как всегда, начните с копии, потому что контент — это главное.
Как использовать изображение в качестве фона: заключение
Говорят, что картинка стоит тысячи слов.