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

Как заменить фон в Photoshop

Если у вас уже есть опыт работы с графическими редакторами, вы можете сделать всё то же самое в Adobe Photoshop. Если вам привычен интерфейс программ Adobe Creative Suite, вам будет просто сменить фон на фото следующим образом:


1. Запустите Photoshop и откройте фото

Есть два способа это сделать. Во-первых, вы можете найти нужное изображение на своём компьютере. Щёлкните на него правой кнопкой мыши, выберите опцию Открыть с помощь и кликните на название программы в выпадающем меню. Во-вторых, вы можете сначала запустить Adobe Photoshop, открыть меню Файл, кликнуть Открыть и найти картинки. Или просто перетащите их в программное окно.

2. Выберите рабочую область

Воспользуйтесь инструментом Быстрое выделение — Quick Selection Tool (W). Перетащите инструмент на изображение. Если ваш основной объект хорошо контрастирует с фоном, программа выделит его автоматически.

Иногда бывает проще выделить не сам объект, а фон – для этого можно зажать комбинацию клавиш Shift + Ctrl + I на Windows или Shift + Cmd + I на Mac.

3. Отредактируйте выделение

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

4. Выделение и маска

Найдите инструмент Выделение и маска в верхней панели опций. Откроется панель инструментов для работы с выделенной областью. Теперь перейдите в панель Свойств, выберите Режим просмотра и определите, как вы будете видеть выделение. Нажмите Перекрытие, чтобы чётко видеть контраст, или нажмите F, чтобы увидеть ваш объект на разных фонах – это поможет вам увидеть любые огрехи выделения.

5. Растушуйте границы

Выберите снова инструмент Быстрое выделение или Лассо/Полигональное Лассо, чтобы продолжить работать с крупными областями выделения. Для подгонки мелких деталей поработайте с кистями: обычная подойдёт для выраженных границ и контрастов, а кисть Уточнить края поможет органично выделить мягкие линии и переходы.

Когда будете использовать опцию Уточнить края, не забудьте отметить галочкой «Умный» радиус под надписью Обнаружение краёв в правой панели. Эта опция поможет программе распознать твердые и мягкие границы. Нажимайте P,чтобы переключаться между “До” и “После”.

6. Добавьте свой фон

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

7. Отрегулируйте цвета

Теперь подгоните цвета так, чтобы ваш объект органично вписался в новый фон. Выберите ваш передний слой и нажмите Изображение->Коррекция->Подобрать цвета. Откроется новые окно, где нужно будет нажать Параметры изображения и выбрать нужное изображение. Выберите нужный слой. Теперь отметьте галочкой пункт Нейтрализовать. Теперь настраивайте Светимость и Интенсивность, пока ваши слои не будут смотреться, как одно целое. Можно попробовать Ослабить цвета, чтобы достичь оптимального результата. Нажмите Превью, чтобы проверить, что получилось. 

Синий (основной цвет)

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

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

Примеры:

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

Благодаря темно-синему цвету (особенно в сочетании с белым фоном) сайт выглядит профессионально. Светло-голубые акценты делают его более интересным.

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

Светлый, приглушенный голубой придает сайту ощущение расслабленности и спокойствия.

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

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

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

Будьте проще

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

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


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

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

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

Кремовый и цвет слоновой кости

Кремовый цвет и цвет слоновой кости — достаточно утонченные цвета: в них есть чуть-чуть теплоты коричневого и много прохлады белого. Эти цвета обычно приглушенные, навевают мысли о прошлом. Цвет слоновой кости — очень спокойный; он теплее белого, но также несет ощущение чистоты.

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

Примеры:

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

Натуральные коричневые цвета элементов страницы делают серо-кремовый фон теплее.

Если бы не кремовый фон, этому сайту не доставало бы элегантности.

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

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

Вкратце

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

Сочетание цветов в одежде. Зеленый

Бильярдный цвет или цвет полыни.

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

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

Бирюзово зеленый цвет.

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

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

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

Цвет «Атлантида» или бирюзово-зеленый цвет.

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

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

Цвет весенней зелени

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

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


Использованы материалы с сайта — www.julia-bannykh.livejournal.com/39866.html

Белый

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

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

Примеры:

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

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

Белый в сочетании с серым придает дизайну мягкости и чистоты.

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

Histogram

Действия в ней следующие:

  • открыть фотографию;
  • выбрать инструмент «Layer», затем «New Adjustiment Layer» и «Adjustiments» — эти действия создадут новый слой для выполнения цветокоррекции;
  • на открывшейся хистограмме переместить белый бегунок к самому сильному скоплению серого цвета — это действие осветлит фон;
  • аналогично создать новый слой для выполнения цветокоррекции;
  • выбрать инструмент «Elliptical Marquee Tool»;
  • с его помощью выделить предмет на фотографии;
  • создать еще один слой цветокоррекции, что превратит выделенную область в маску;
  • в настройке «Adjustiment» переместить белый бегунок на максимум;
  • открыть «Mask», кликнуть выделенный предмет, нажать «Invert»;
  • открыть «Feather», что позволить растушевать очертания маски.

Мы предложили вашему вниманию наиболее популярные методы придания фону белого цвета. Теперь идеально отредактировать фотографию не составит труда.

Серый

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

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

Примеры:

Светло-серый цвет делает этот дизайн очень приглушенным и спокойным.

Типографика делает этот сайт современным, а светло-серый фон усиливает этот эффект.

Холодный серый цвет делает этот сайт утонченным и современным.

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

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

Зеленый (второстепенный цвет)

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

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

Примеры:


Ярко-зеленый хедер сайта в сочетании с листочком создают очень естественное и живое впечатление.

Зеленый оливкового оттенка выглядит естественно и “природно”, что очень соответствует содержимому страницы.

Яркие “ретро” оттенки зеленого создают очень свежий и энергичный облик.

Еще один оливковый сайт с духом природы.

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

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

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

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

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

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

Черный

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

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

Примеры:

Черные акценты, в сочетании с яркими цветами и темно-кориченевым фоном, делают дизайн очень оригинальным.

В сочетании с ледяным голубым цветом, черный выглядит холоднее.

Дизайн смотрится оригинально благодаря черному цвету в сочетании с темно-серым и лаймовым зеленым.

Черные акценты здесь привносят утонченность и современность.

Сильные черные акценты делают дизайн сайта утонченным.

Элементы декора

На вишневые стены подвешивают:

  • ажурные полки из металла, светлого или окрашенного дерева;
  • зеркала, крупные фотографии или картинки на светлом фоне в необычных рамках.

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

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

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

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

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

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

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

Photoshop

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

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

Потребуется выполнить следующие шаги:

  • открыть редактируемое видео в программе Photoshop;
  • сильно увеличить изображение, чтобы его было удобно редактировать;
  • выбрать инструмент «Ластик»;
  • установить следующие параметры: размер кисти — 30 пикселей, жесткость — 0%, вид — мягкая круглая;
  • обвести очертания предмета;
  • уменьшить фотографию, чтобы она вся помещалась на экран;
  • выбрать инструмент «Волшебный ластик»;
  • щелкнуть им в любом месте проведения ластиком;
  • выбрать инструмент «Магнитное лассо»;
  • обвести контур предмета;
  • скопировать выделенное изображение;
  • создать новый документ;
  • вставить скопированное изображение на белый фон;
  • сохранить полученный результат.


С этим читают