Красивые фоны для сайта: Бесшовные фоны для сайта — Bgrounds.Ru

A (Фон) Изображение стоит 1000 слов: использование фотофона в веб-дизайне

Поделиться

• Доля
• Твитнуть
• Поделиться
• Приколи

Дизайн • Дизайн веб-сайта Кэрри Казинс • 11 октября 2012 г. • 6 минут ПРОЧИТАТЬ

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

Но вы не можете просто использовать любое старое изображение.

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

Большие, жирные изображения

Келли Шоу

Минерва

Невеандхок

Кассандра Бэй Отель

Сосьете Женераль

Топливные фильмы

Цвет

Слепой парикмахер

Дружелюбные джентльмены

JWI Лувр

Encandle

Нечеткие изображения

ДАЮЩИЕ

ТАГ Интератива

Собрать контент

Ник Джонс

Увеличить, Уменьшить

Книга бород

Инцайт

Lavazza 20Календари

Спортивное агентство Onside

Фонд общественного искусства

Типография

Керем Суэр

Дизайн чистого удовольствия

Рояль

Истории исцеления

Сент-Джонс

Big, Bold Images

Kelly Shaw

Minerva

neveandhawk

Kassandra Bay Hotel

Societe Generale

Fueld Films

The No. 1 rule of using фотография, особенно большие фотографии , чтобы закрепить дизайн-проект качество. Не соглашайтесь на некачественное изображение. Используйте только самые лучшие, самые смелые и наиболее подходящие фотографии для проекта.

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

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

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

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

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

Color

Слепой парикмахер

Дружественный госпожа

JWI LOUVRES

Encandle

Решайте на ваш вид.

Вы предпочитаете яркого цвета ? Или более приглушенные тона черно-белой фотографии?

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

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

Нечеткие изображения

Givers

TAG Interativa

GatherContent

Ник Jones

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

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

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

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

Zoom In, Zoom Out

A Book of Beards

Inzeit

Lavazza 20Calendars

Onside Sports Agency

Public Art Fund

It is important to look at images, особенно те, которые используются при больших размерах, при различных уровнях масштабирования .

Насколько близко должно быть лицо/действие/сцена на фотографии? Является ли подход сайта откровенным или более тонким?

Большие, близкие изображения могут быть смелыми и интригующими. И наоборот, они также могут быть пугающими и подавляющими.

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

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

Типография

Kerem Suer

Pure Wreat Design

ROYALE

HEALING HISORIES

.0222

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

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

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

Иногда фотография слишком важна, чтобы ее скрывать.