Сайт

Белый фон для сайта – Светлые фоны для сайта

09.07.2018

50 оттенков белого. Советы по использованию белого цвета в качестве фона сайта | Обучение веб-дизайну

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

Бесшовные текстуры и темные цвета на фоне канули в Лету? Если честно, никогда не любила бесшовные текстуры на фоне сайта… Так что черт с ними.

Зато использование белого цвета набрало обороты и кажется, что самый простой и безопасный способ создавать так называемый clean design и не переборщить с разнообразностью цветовой схемы. Так ли это?

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

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

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

Почему именно белый?

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

  1. Responsive Web Design (Отзывчивый/адаптивный веб-дизайн). Создание дизайна по гибкой сетке и последующее хорошее отображение сайтов на всех типах устройств упрощает белый фон, т.к. это всегда просто в реализации и выглядит современно.
  2. Flat стиль и минимализм в веб-дизайне – все еще стильно и актуально с 2013 года. И как раз таки белый фон является воплощением простоты, которая пронизывает оба этих стиля, а во flat стиле – отлично сочетается с яркими, иногда громоздкими флэтовскими цветами.

О чем молчит белый?

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

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

50 оттенков белого

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

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

Советы по использованию белого цвета в качестве фона

Создавайте контраст

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

Будьте проще

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

Делайте акцент на типографике

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

Пространство – ваш друг

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

Резюме

Белый, наверное – любимый цвет всех дизайнеров. И не зря: сам по себе он одновременно и простой (с ним не сложно во всех смыслах) и одновременно требует создания во круг себя определенной «изюминки».

Новичкам я бы советовала начинать именно с белого (или близкого к белому цвета в качестве фона для своих макетов.

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

Напишите мне в комментариях:

Как часто Вы рисуете «белые» сайты или как часто встречаете такие в сети? И как по-вашему, это способ дизайнера упростить себе задачу или хорошо продуманное решение?

Есть еще 5 минут? Узнайте больше о психологии цвета и о том, какой цвет лучше всего будет продавать для конкретной тематики сайта.

vilchinskaya.com

Веб-сайты с белым фоном. Примеры красивый сайтов

Веб-сайты с белым фоном

В этой статье авторы сделали подборку красивых и простых веб-сайтов, которые имеют белый фон.

На показанных примерах можно увидеть, как дизайнеры используют «отсутствие» цвета в фоне – грамотно и красиво.

1. Sennep

Sennep

2. Fear the Grizzly

Fear the Grizzly

3. Color Grade It

Color Grade It

4. Face Works

Face Works

5. Jonathan Krause

Jonathan Krause

6. VBG

VBG

7. Alcian Blue

Alcian Blue

8. Made by Sofa

 

Made by Sofa

9. Subtraction

Subtraction

10. Fell Swoop

Fell Swoop

11. TCM Summer Under the Stars

TCM Summer Under the Stars

12. Ditto

Ditto

13. BVD

BVD

14. The Manual

The Manual

15. MmDesign

MmDesign

16. Casey Britt

Casey Britt

17. One Day Without Google

One Day Without Google

18. Sherpa

Sherpa

19. Foundry Co

Foundry Co

20. Julien Millies – Art Director

Julien Millies – Art Director

21. Lotta Nieminen

 

Lotta Nieminen

22. Genny Official Site

Genny Official Site

23. Kyan

Kyan

24. What Happens Next

What Happens Next

25. La Wine Agency

La Wine Agency

26. Posh CSS

Posh CSS

27. Ui Tuneup

Ui Tuneup

28. BKWLD

BKWLD

29. Homo Studiosus – Interested Man

Homo Studiosus – Interested Man

30. Harlo Interactive

Harlo Interactive

31. We Are Pollen

We Are Pollen

32. Visual Supply Co

Visual Supply Co

33. Skillshare

Skillshare

34. CSS Piffle pitch

CSS Piffle pitch

35. Hering Berlin

источник

Нажмите на кнопку и поделитесь с друзьями:

fixatoria.com

Белый фон для сайта

На чтение: 2 мин

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

Те из вас, кто ведет свои блоги на платформе WordPress, скачивают шаблоны тем оформления с разных ресурсов интернета, в том числе и я.

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

Где мы обычно размещаем блоки рекламы?  В поле для текста статьи или в сайдбарах.

И очень часто поле текста белого цвета, а сайдбары — цветные. В этой статье я поделюсь секретом о том, как сделать общий белый фон для сайта (блога), чтобы цвет поля текста и  цвет сайдбаров  не отличались.

Но еще раз повторюсь, речь идет только о БЕЛОМ цвете.

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

А если поле для контента(текста) и (или) сайдбары состоят из многократно повторяющихся графических блоков (их можно найти в файлах темы, в  папке images) — тогда как ?

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

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

Возьмем, к примеру,  тему оформления   nightgate:

Слева — первоначальный вариант. Красивое сочетание цветов, не спорю, мне тоже нравится .

Справа — измененный вариант: поле для текста и сайдбары стали белого цвета.

Скучно, скажете вы? Дело вкуса, конечно, зато рекламные блоки будут вписываться органичнее. А если поменять парочку других элементов — шапку, бэкграунд (общий фон), то белый фон для сайта будет смотреться очень даже неплохо. Как это можно сделать —  читайте в следующей статье.

net4lady.ru

Белые заголовки в веб-дизайне

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

 

Believe.in

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

DraughtMaster

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

The Form Group

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

Where2GetIt

На этом сайте в качестве фона используется статичное изображение. Оно немного размыто, что позволяет тексту аккуратно выделяться. Еще один приятный момент: когда вы заходите на сайт, надпись «Transforming the way businesses» остается неподвижной, а слово под ней меняется на «get discovered», «get found», «engage» и «market».

Zeis Excelsa

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

Tap In Guide

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

UNE

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

Adveris

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

Night Walk

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

Smart Codes

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

Allstate’s Holiday Home Decorator

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

Astuteo

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

The Ernest Hemingway Collection

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

InVision App

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

Profleet

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

Surprisingly

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

Denim Academy

На этом сайте в качестве фона используется джинсовая текстура. Белый текст просто создан для нее!

Check-In Arte

А этот сайт выполнен в виде табло прибытий и вылетов и включает звуковые эффекты при нажатии и крутящиеся буквы.

Imagina nas Ferias

На этом сайте использовано множество небольших блоков пастельных цветов с большим блоком с белым текстом посредине. Также на сайте множество эффектов при наведении мышки.

WebVDEO

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

Автор статьи Carol Francis

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

Белый фон для фото (19 фото) • Прикольные картинки и юмор

Далее предлагаем посмотреть и бесплатно скачать белый фон для фото.

Фон белая мятая бумага.

Белый фон для фото.

Белый фон абстракция.

Текстурный белый фон.

Фон белый цветок.

Фон белый бетон.

Фон объемные кубы.

Взрыв голубой краски на белом фоне.

Нарисованные девушки на белом фоне.

Белый цветок на белом фоне.

Фон белая ткань.

Фон белая кирпичная стена.

Фон белые фактурные доски.

Белая кирпичная стена.

Белый фон для фото абстракция.

Фон белое фактурное дерево.

Фон белая ткань.

Красные розы на белом фоне.

Будь человеком, проголосуй за пост!

Загрузка…

Еще интересные подборки:


 

« Предыдущая запись Следующая запись »

bipbap.ru

«Белый фон» — как быстро и бюджетно сделать в фотошопе.

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

Посмотрите исходную фотографию девушки, снятой на белом фотографическом фоне BD Super White.

Дело в том, что белым в web считается цвет по RGB 255 255 255, где

R — red (красный)

G — green (зеленый)

B — blue (синий)

255 255 255 — это максимально возможное значение яркости цвета соответственно.

Посмотрите изображение ниже, белый квадрат на фоне как раз имеет белый цвет. А фон который казалось бы белый, на самом деле светло-серый.

Попробуем выбить фон при помощи инструмента Curves (Кривые Image=>Adjustments=>Curves). Для наглядности, я подписал значения, в каком месте гистограммы что находится. Что-бы выбить фон, надо нижний движок переместить так, что бы горб фона остался в правой части. Т. к. при этом средние тона тоже становятся светлее, их подожмем к исходной линии.

 

 

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

 

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

www.all-foto.com

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

Ваш адрес email не будет опубликован.