Цветовые контрасты — это типы сочетания цветов и степень их выразительности. Существует 7 типов. Как их променивать? Фото
При соотношении двух противоположностей, по какому либо качеству, свойства каждого из группы приумножается. Так, например, длинная полоска кажется еще длиннее рядом с короткой. Дорогие, дизайнерские вещи на фоне развален смотрятся еще более богатыми.
В сочетании цветов действует такой же принцип, в общей сложности различают 7 вариантов контраста:
— это сочетание разных цветов. Его построение основано на теории , где описаны самые удачные комбинации и метод их создания с помощью геометрических манипуляций. Часто к этому типу присоединяются другие контрасты, например, световой, тепловой и т. д. (см. ниже)
Этот контраст влияет на подсознание. Если рассматривать цвет, как источник информации об окружающем мире, то такое сочетание будет нести информационное послание. (а в некоторых случаях вызывать эпилепсию).
Светлые оттенки и темные создают ощущение свето-тени. Такую разницу легко улавливает глаз. Основной характеристикой в нем будет — четкость линий на границе светлых и темных тонов. В той или иной мере светло-темный контраст присутствует практически в каждом сочетании, однако он может быть резким или приглушённым. О его отсутствие можно сказать только в том случае, если комбинацию можно перевести в серый и граница цветов будет неразличима.
Сочетания построенные по этому типу могут внести определенность в образ или композицию. За счет этого эффекта можно достичь объемности, реалистичности изображения. Он легко воспринимается, распознается, поэтому и считается одним из самых привлекательных.
Основан на разнице «тормозящих» и возбуждающих оттенков и нашему желанию достичь покоя. вместе создают гармонию целостности, хотя, как и в любом контрасте противоположности усиливают друг друга: холодный рядом с теплым становится еще более ледяным, а теплый — горячим.
Этот контраст хорош для создания образов с разной активностью: от «снежной королевы» до «борца за справедливость».
— это сочетание цветов, волны которых в сумме дают серый спектр. Если смешать краски двух дополнительных цветов, то мы получим грязный, коричневый оттенок. Такие противоположные цвета — самая яркая комбинация из контрастов по тону. Найти дополнительную пару можно на цветовом круге Иттена: тона, которые находятся друг напротив друга будут иметь искомые свойства.
Этот контраст так же стремится к стабильности, как и тепло-холодный (кстати, он всегда присутствует в дополнительной паре), но если разница по температуре создает «движение», то данная пара достигает стабильности. Поэтому эти сочетания редко используется в повседневности, так как впечатление от него может быть слишком ярким.
А вот в живописи этот инструмент весьма уместен.
– его не существует вне нашего восприятия. Он возникает в сочетании с серым цветом другого насыщенного (не монохромного или нейтрального) оттенка, когда в сером — мы видим дополнительный тон к нему. То есть, например, красный с серым, при беглом взгляде на серый. в таком соседстве, мы можем увидеть зеленый тон. Это очень важно, особенно при создании мелкого рисунка, например, в текстиле. Красно-серый галстук — это приемлемый, строгий элемент костюма, но если вы видите красно-зеленый рисунок в таком изделии — первое, что вы ощутите — это замешательство, так как такое сочетание неприемлемо для строгого мужского (да и женского) образа.
Для нейтрализации симультанного контраста в серый добавляется толика тона соседа, в случае с красным, серый будут иметь теплый, едва уловимый лиловый подтон. Мы не заметим этой перемены, но наш глаз не будет перевирать нейтральный цвет.
Этот контраст более других подтверждает стремление нашего сознания к золотой середине.
Проверьте это сами: если сосредоточенно смотреть на каждый серый прямоугольник по очереди, дожидаясь, когда глаз устанет, то серый изменит оттенок на дополнительный по отношению к фону.
На оранжевом, серый примет голубой оттенок;
на красном – зеленый;
на фиолетовом – желтоватый.
Называют сочетание бледных и ярких оттенков. Он может быть составлен из оттенков одного тона, один из которых будут выделятся, как бы светится на фоне остальных. Чем насыщенней оттенок, тем ближе он к спектральному цвету. Однако, на фоне бледных тонов, даже просто выраженный средний тон — будут выделяться.
Контраст по насыщенности присутствует не только в одной гамме, это может быть и сочетание разных оттенков среди которых есть такой, который приковывает к себе внимание.
Этот контраст можно отнести к акцентирующему. Он может быть очень ярким, а может быть умеренным. Его используют в создании и подборе различных аксессуаров.
7 Контраст по размеру цветовых пятен . Основан на количественной разнице между цветами. В этом контрасте можно достигнуть равновесия или динамики. Замечено, что для достижения гармонии светлого должно быть меньше, чем темного. Этот эффект подсказала нам природа и ощущение облегчения при виде света в темноте.
Одна из наиболее популярных в современном веб-дизайне техник — использование текста на фотографии. Этот метод не просто так применяется повсеместно. Если подойти к его реализации с умом, он может стать настоящим ключом к успеху. В этой публикации вы узнаете 10 правил успешного расположения текста на фотографии.
Итак, что вам нужно? Правильное фото, наметанный глаз в типографике и понимание того, чего именно вы хотите добиться, добавляя текст на фотографию. Если вы готовы попробовать, давайте приступим!
1. Добавьте контраст
В качественном дизайне текст должен хорошо читаться. Убедитесь что цвет текста отличается от цвета фотографии достаточно, чтобы быть хорошо заметным. Если у вас фотография с темным фоном, выбирайте белый (или светлый) цвет текста. Если фотография светлая, используйте темный шрифт.
Контраст также может быть реализован и в размерах. То есть текст может быть контрастно больше или меньше на фоне происходящего на фото. К примеру на сайте Pack, который вы видите выше, фотография большая, с крупными элементами, а текст тонкий и светлый. Элементы хорошо сочетаются, но также составляют контраст.
2. Сделайте текст частью фотографии
Иногда получается сделать так, чтобы текст стал частью изображения, с которым вы работаете. Это нелегко добиться, да и работают подобные решения не всегда. Для подобной работы вам понадобится простое изображение и простая типографика, как в примере выше.
3. Следуйте за визуальным потоком
Работа с направлением, заданным фотографией — одно из самых важных умений в работе с текстом и фото. Вы должны расположить слова в той части изображения, в которой они будут смотреться логично. Также будьте внимательны и не размещайте текст поверх важной части изображения, таких как лица или продукт, который продаете.
Следование за визуальным потоком означает размещение текста там, куда смотрит (в прямом или переносном смысле) объект на фото. В качестве примеров рассмотрите два примера выше.
4. Размойте изображение
Один из самых простых методов, которой вы можете использовать при работе с текстом и изображением это размытие фотографии или ее части. Небольшое размытие фона при помощи инструментов типа Adobe Photoshop поможет выделить текст, поместить его на первый план. Размытие также поможет навести фокус на главный объект, как это видно в примере сайта Wallmob. Размытие придает продукту и тексту особую четкость, привлекая внимание пользователя.
5. Поместите текст на подложку
Когда на фотографии много разноцветных объектов, или перепадов от светлых к темным тонам, вы можете поместить текст на подложку, тем самым сделав его более заметным.
Выберите форму подложки которая будет хорошо смотреться с вашим текстом (в примере выше вы видите прямоугольник и круг). Затем выберите цвет, который будет контрастировать с цветом текста достаточно, чтобы шрифт был хорошо заметен. Попробуйте сделать подложку полупрозрачной, чтобы привнести мягкости в дизайн.
6. Добавляйте текст на фон
Еще один отличный способ размещения текста — на фоне изображения. Обычно фон меньше загружен элементами, с ним проще работать и размещать на нем текст. Также задний план чаще однотонный, поэтому цветной текст будет на нем лучше заметен и более читабельным.
Конечный результат выглядит натурально и не требует применения особых эффектов к самой фотографии. Поэкспериментируйте с еле заметным эффектом тени. Смотрите как примерах выше текст на фоне также придает дизайну эффект глубины.
7. Увеличивайте масштаб
Если вы не уверены в своем дизайне, попробуйте добавить масштаб! Это применимо к обоим элементам сегодняшней темы — тексту или изображению, элементы которого можно сделать больше, чем в жизни. Увеличенный объект привлекает внимание, а разница в масштабах между текстом и изображением может неплохо сочетаться.
Увеличивая изображение, как в примере с кофе, можно сыграть на контрасте. А увеличенный текст будет куда проще прочесть.
8. Добавьте цвета
Добавление нового оттенка может также сделать страницу интереснее. Выше вы видите два примера того, как цветной текст внес новый оттенок в общую картину. В одном случае это цвет отражающий общую цветовую картину изображения, во втором — это новый цвет, которым в изображении и не пахнет. Оба варианта могут быть одинаково эффективны.
9. Используйте наложение цвета
Эффект, который становится все популярнее — наложения цвета поверх изображения, и текст сверху. Это не самая простая техника, но она может сделать ваш дизайн потрясающим.
Главная сложность состоит в том, чтобы соблюсти баланс и сделать цветовое наложение достаточно прозрачным, чтобы была видна картинка, но в то же время достаточно непрозрачным, чтобы текст хорошо читался. Вам придется поэкспериментировать с настройками фотографий и цвета, чтобы наловчиться в использовании этой техники. Не знаете какие оттенки использовать? Начните с цветов вашего бренда.
10. Будьте проще
Проверенный временем совет «будь проще» в веб-дизайне особенно важен. Когда речь заходит о сочетании фотографии и текста, он также актуален. Вы хотите, чтобы посетитель видел и текст и картинку. Применение большого количества эффектов может вызвать обратный эффект.
Выбирайте незамысловатую типографику и простые изображение, чтобы добиться лучшего результата. Не забывайте выставлять на видные места важные элементы изображений и следите чтобы текст легко читался.
Перевод — Дежурка
Мало кто задумывается о том, насколько сильно цвета и их сочетания влияют на нашу повседневную жизнь. Цвета привлекают наше внимание, влияют на наше настроение, вызывают определенные эмоции и даже могут изменить наш образ мыслей. Любой дизайнер знает поговорку о том, что картинка стоит тысячи слов. Это действительно так. Визуальные образы человеческий мозг усваивает намного лучше, чем текст, но для того, чтобы сообщение дошло для адресата, нужно знать, какие именно сочетания цветов наиболее сильно воздействуют на целевую аудиторию.
Порой бывает трудно определиться, с чего именно следует начинать подбор цветовой гаммы проекта. Что именно нужно донести с помощью цвета? Какие оттенки выбрать: яркие или приглушенные? Понадобится ли использовать контраст в своей работе? Единственно верного ответа на все эти вопросы не существует. В любом случае потребуется провести ряд экспериментов, тестируя различные цветовые схемы и комбинации – без этого невозможно найти оптимальное решение. Конечно, для того, чтобы собрать красивую палитру, нужно достаточно хорошо разбираться в теории цвета и понимать, как различные оттенки воздействуют на психику человека. Также нужно понимать, что контрастное сочетание цветов может усилить воздействие. И на этом моменте стоит остановиться подробнее.
Значение контраста
Как правило, при слове «контраст» многие вспоминают о противоположностях. Черное и белое, большое и маленькое – ход мыслей примерно таков. Однако все не так просто. Контраст является одним из основополагающих принципов дизайна и он обязательно должен присутствовать в любом проекте. Но зачем? Все просто: контраст позволяет лучше организовать процесс проектирования, с его помощью можно выстроить визуальную иерархию, показывая зрителям, какая часть дизайна является наиболее важной. К тому же использование контраста вызывает повышенный интерес со стороны аудитории и неважно, в каком виде дизайна он используется – это может быть логотип, плакат, сайт, цифровая иллюстрация или наружная реклама – правильное использование контраста может сделать успешным любой проект.
Согласно теории цвета, контрастные оттенки расположены на противоположных сторонах цветового круга. Желтый резко контрастирует с фиолетовым, а синий с оранжевым цветом. Если дизайнер хочет использовать сильный контраст, то после того, как он определится с основным цветом, ему нужно потратить некоторое время на то, чтобы подобрать подходящий комплиментарный оттенок. Но этого недостаточно. Подбирая контрастные цветовые сочетания, нужно не забывать о таких вещах, как яркость, насыщенность и цветовая температура.
Говоря об оттенках, нужно прежде всего помнить о 12 основных цветах, которые мы видим на цветовом круге. Для каждого из этих оттенков можно быстро найти контрастную комплиментарную пару. Но иногда этого недостаточно, прежде всего потому, что автоматическое использование контраста может сделать дизайн скучным и непривлекательным. Значит, нужно использовать в дизайне другие сочетания цветов.
Например, сплит-комплиментарную схему. В данном случае основной цвет дополняют два оттенка, которые на цветовом колесе расположены рядом с комплиментарным цветом. Такая схема достаточно контрастна, но обладает менее драматическим эффектом.
Также в работе можно использовать триады – это три цвета, которые расположены на круге на равном расстоянии друг от друга. Это очень жизнеспособная схема, которая позволяет привнести в дизайн необходимое цветовое разнообразие.
Насыщенность
Под насыщенностью понимают интенсивность цвета по отношению к белому или черному оттенкам. Любой цвет, если подразумевать под этим чистоту и яркость, обладает 100% насыщенностью. И чем больше падает интенсивность, тем менее контрастным становится оттенок. О насыщенности нужно помнить всегда, особенно занимаясь проектированием ключевых элементов. Чем более ярким и насыщенным будет цвет, тем легче дизайнеру будет привлечь внимание зрителя к важным частям своего проекта.
Любой человек подсознательно разделяет все цвета на три группы. Это холодные, теплые и нейтральные оттенки. Например, красный, желтый и оранжевый однозначно воспринимаются как теплые цвета. Синий, фиолетовый и зеленый входят в «холодную» группу. Черный, белый и серый цвета являются нейтральными. При этом в число нейтральных цветов также могут входить оттенки бежевого или коричневого, но в этом случае все зависит от контекста. Контраста можно добиться, сочетая оттенки с разной цветовой температурой. Наиболее сильным воздействием обладают резкие сочетания теплых и холодных оттенков.
Контрастные цвета в дизайне логотипов
Немного скучную теоретическую часть лучше всего разбавить примерами. Очень многие бренды используют контрастные цвета для того, чтобы донести свой мессидж до целевой аудитории. Вот наиболее яркий пример: логотип напитка Mountain Dew.
В дизайне этого логотипа активно задействованы насыщенные оттенки красного и зеленого, причем зеленый цвет является основным. Зеленый, как и само название Mountain Dew вызывает ассоциации с природой, навевая мысли о свежести и чистоте. Но если бы дизайнер ограничился только оттенками зеленого, то логотип не смог бы донести свое основное сообщение до потребителя. Поэтому слово Dew сделано красным, в результате чего логотип хлестко бьет по глазам и прекрасно запоминается.
В логотипе платежной системы Visa также используется контрастное сочетание цветов. Но в данном случае все немного сложнее. Да, желто-оранжевый и синий являются контрастными цветами, так как они располагаются на противоположных сторонах цветового круга. Но значение имеет не только позиция – у каждого из этих цветов есть свое значение. Синий цвет традиционно ассоциируется с надежностью, доверием и лояльностью. Желтый, являясь оттенком теплой группы, означает доброжелательность и участие. Таким образом, логотип Visa сигнализирует целевой аудитории, что бренд ценит доверие, верность принципам и старается привнести радость в жизнь своих клиентов. Это как раз то, что люди ждут от компании, которой они доверяют распоряжаться своими деньгами.
В случае с веб-дизайном использование контрастных оттенков немного усложняется. Дизайнеру нужно прежде всего найти удачное цветовое сочетание между основным контентом и фоном. Это очень непростая задача, так как в дизайне нередко приходится использовать сложные контрастные схемы, состоящие из нескольких оттенков. Никаких ограничений по количеству цветов в дизайне цифровых проектов не существует, однако лучше не впадать в крайности и разумно использовать основные и дополнительные цвета. А для того, чтобы усилить драматический эффект, можно поэкспериментировать с насыщенностью и цветовой температурой.
Контрастные цвета в веб-дизайне позволяют не только усилить впечатления зрителя, но и правильно структурировать все основные сообщения, выделив главные элементы и приглушив второстепенные. Например, при создании главной страницы сайта mint.com дизайнер использовал одну из самых мощных контрастных цветовых комбинаций. Белый текст, ярко-оранжевые кнопки с призывом к действию и броский зеленый логотип резко контрастируют с темным фоном. Намеренное усиление контраста привело к тому, что все самые важные части дизайна мгновенно считываются пользователем. Что интересно, дизайнер не забыл и о цветовой температуре: фон он специально сделал подчеркнуто холодным, текст нейтральным, а для кнопки CTA, которая является самым главным элементом, подобрал наиболее яркий и «горячий» оттенок оранжевого.
В дизайне печатной продукции принципы использования контрастных цветов работают точно так же, как и в других видах визуального проектирования. Если дизайнеру нужно создать листовку, брошюру или журнал, то ему нужно помнить не только об иерархии элементов, но и о контрасте. Так проще всего сделать дизайн более заметным и связать все ключевые элементы воедино, при этом выделив самое главное. Контраст может привнести в дизайн необходимые для печатного документа ясность и организацию.
Например, в дизайне брошюры Hilton Hanoi Opera контрастные цвета использовались не только для того, чтобы сделать фотографии более привлекательными, но еще и для того, чтобы усилить воздействие текстового контента.
Еще один яркий пример эффективного использования цветового контраста – это реклама плеера Apple iPod. Перед дизайнером стояла задача привлечь внимание зрителя к инновационному проигрывателю и эта задача была решена максимально простым и эффектным способом. В рекламе использовались яркие контрастные цвета, при этом два основных оттенка относятся к нейтральной группе. Контрастируя с очень насыщенным фоном, эти цвета позволяют усилить драматический эффект.
Вывески, баннеры и прочая наружная реклама также нуждается в правильном цветовом оформлении. При этом дизайнеру нужно думать не только о цветовой схеме вывески, но и о пространстве, в которой ей предстоит находиться. Следовательно, в этом случае обязательно использовать контраст, иначе наружная реклама просто сольется с фоном и не будет привлекать внимание. Вот несколько хороших примеров.
Вывод
Как уже говорилось в самом начале, не существует секретной формулы по подбору контрастных цветовых сочетаний. Подбирая оттенки, дизайнер должен руководствоваться здравым смыслом и принимать условия, в которых будет работать его дизайн. Поэтому необходимо экспериментировать, подыскивая наиболее удачные сочетания цветов. Очень часто к успеху приводит правильное использование контраста. И дело не только в привлечении внимания зрителя – контраст позволяет более внятно донести сообщение до зрителя и повлиять на его восприятие контента.
Дизайн очень тесно связан с юзабилити, они неотделимы. Ведь дизайн оказывает огромное влияние на конечное восприятие и на удобство взаимодействия с сайтом.
Дизайн может вызывать различные эмоции, побуждать к чему-либо, обращать внимание на отдельные элементы. Важно правильно использовать силу дизайна и не совершать ошибок, которые присутствуют на многих сайтах.
Начнем разбор ошибок с самых глобальных и закончим мелкими, но не менее серьезными.
1. Строго по сетке!
Дизайн-макет сайта начинается с создания сетки. Если буквально, то это разделение макета страницы сайта вертикальными и/или горизонтальными направляющими. Сетку можно считать единым каркасом для размещения всех элементов сайта.
Для работы можно скачать готовую, например, http://960.gs/ , http://gridpak.com/ .
Дизайнеры часто создают собственную сетку под каждый проект.
Как определить, использованы ли в дизайне сетки?
Да очень просто! Если в дизайне ими пренебрегали, то визуально посетителям сайта кажется, что отдельные элементы будто висят в воздухе, отсутствуют взаимосвязи с остальными элементами на странице.
Наш мозг стремится к упорядочиванию, и мы не замечаем выравнивания. Но мы легко увидим беспорядочность в случае его отсутствия. Просто присмотритесь:
Пренебрежение сеткой: элементы хаотично раскиданы по странице
Все элементы выровнены по сетке, на странице порядок
2. Единообразие? Нет, не слышали
Всем нам знакомо понятие стиля. У сайта тоже есть свой стиль.
Отдельные элементы дизайна нужно объединять общим стилем (дизайн-шаблоном), который применяется глобально, для всех страниц сайта. Это поможет достичь единообразия и облегчит взаимодействие посетителей с сайтом – они быстро освоятся и поймут что к чему. Общение пользователей с таким сайтом будет легким и непринужденным, и, скорее всего, они придут еще не один раз.
Как же достичь единообразия в дизайне?
Проверьте, чтобы все однотипные элементы на сайте были оформлены одинаково:
- заголовки внутренних страниц;
- подзаголовки в текстах;
- тексты;
- ссылки;
- кнопки;
- меню;
- иконки;
- фильтры и сортировки;
- поиск.
Отсутствие единообразия в оформлении текста и картинок на главной странице
Компоновка (сетка) однотипных страниц также должна быть типовой: структура карточек товаров или статей в блоге.
Хорошо и удобно, когда однотипная информация в карточках товаров представлена в одной и той же форме и в одном и том же месте.
Например, характеристики всех товаров строго на отдельной вкладке и строго в форме таблицы.
Переходя из карточки в карточку, посетитель уже будет знать, где искать характеристики товара
3. А где тут у вас главное?
Попав на сайт, посетитель часто не замечает нужную информацию, так как ее сложно различить среди прочего «шума», беспорядка.
Данная проблема возникает из-за большого количества броских, отвлекающих внимание элементов. Следует избегать визуального шума, который создают:
- нагромождение ярких графических элементов: картинок, баннеров;
- слишком большое количество функций, особенно если они не упорядочены, а разбросаны по странице;
- использование более 2-х шрифтов в различных размерах и цветах;
- применение большого числа цветов в оформлении элементов;
- отсутствие единообразия в оформлении однотипных элементов.
Все это отвлекает посетителей, и важные элементы сайта просто теряются из виду.
Помогите пользователям своего сайта: выделяйте для них важную информацию и наиболее важные функции среди прочих элементов.
Сравните эти два примера:
На сайте слева видно, что использовано очень много броских элементов, которые мешают сосредоточиться на чем-то одном. Мы немного поколдовали над сайтом, убрали все лишнее. Что получилось – смотрите на картинке справа. Согласитесь, стало намного лучше.
4. Функции первичны
Практически на всех сайтах есть стандартные функциональные элементы, например, кнопки, поля ввода. Для стандартных функциональных элементов применяются стандартные визуальные шаблоны.
В дизайне сайта нужно показывать, что кнопка является кнопкой, поле ввода – полем.
Именно поэтому в погоне за уникальным дизайном не стоит отказываться от визуальных шаблонов, которые упростят работу с сайтом. Например, не стоит делать кнопки похожими на картинки, так как посетители могут и не догадаться, что это кнопки.
Кнопки в корзине похожи на цветные баннеры
Кнопка «Продолжить покупки» похожа на баннер
5. Это ссылка или текст?
Чтобы облегчить посетителям навигацию по сайту, ссылки в тексте всегда нужно выделять. Общепринятый шаблон оформления ссылок – подчеркивание и /или выделение синим цветом . Но этим устоявшимся шаблоном пренебрегают на большинстве сайтов.
Шаблон оформления ссылок часто используют для обычного текста, из-за чего он неизбежно ассоциируется со ссылкой.
Бездумное использование подчеркивания и оформления цветом для основного текста запутывает посетителей, осложняет навигацию по сайту:
Заголовок «Световые короба» – не ссылка, а простой текст
6. Смотреть больно
Чтобы дизайн сайта был приятен глазу, важно грамотно подобрать цвета.
В дизайне сайта могут быть различные проблемы, связанные с неправильным использованием цветов: недостаточный контраст, насыщенные дополнительные цвета рядом (например, красный текст на синем фоне), чрезмерная цветовая насыщенность элементов.
Посмотрите на картинку ниже, думаю, комментарии к ней не нужны.
К сожалению, до сих пор многие владельцы «сделанных на коленке» сайтов уверены, что их дизайн самый лучший.
Выбирайте цвета правильно!
При выборе цветов нужно руководствоваться контекстом: какова тематика сайта и кто его целевая аудитория.
В подборе нужной палитры поможет цветовой круг . Как правило, плохо подобранные цветовые схемы сразу заметны, иначе говоря – «вырви глаз».
В дизайне всегда лучше придерживаться более спокойных и универсальных вариантов сочетания цветов:
- нейтральный светлый фон (белый либо светло-серый),
- темные заголовки страниц и основной текст,
- привлекающие внимание цвета (но не кричащие) для элементов управления.
Важно! Цветной фон для сайта лучше не использовать, так как тексты на любом фоне, кроме белого, тяжело читать.
Текст для чтения должен хорошо контрастировать с фоном. Должно быть 80% контраста.
Недостаточный контраст приводит к тому, что текст сложно читать. Да и поисковые системы это не любят, могут и фильтр применить:
Серый шрифт на сером фоне
Некомфортный для зрения красный фон
7. Контент – наше всё
Для многих сайтов текстовый контент – основная составляющая, поэтому текст должен быть удобочитаемым.
На сайте лучше использовать:
- шрифты без засечек и с резкими контурами, такие как Arial, Verdana, Tahoma, Open Sans. Шрифты с засечками вроде Times и Georgia на экране могут выглядеть несколько «неопрятно», читать их просто некомфортно.
- размер от 14px. Текст мельче 10 пикселей трудно читать. Для заголовков страниц и подзаголовков текст должен быть крупнее – от 16px.
- строчные буквы для основного текста. Прописные буквы (КАПС) следует использовать с осторожностью, не применять для целых предложений и абзацев. Такой текст допустим только в заголовках и подзаголовках.
В целом для дизайна сайта достаточно 2 шрифта: для основного текста и заголовков.
Пункты меню оформлены заглавными буквами, читаются тяжело
Хорошо, нажму, только не кричите! =)
Важно! Использование большого числа шрифтов разных размеров и цветов приводит к появлению визуального шума:
4 разных по цвету и размеру шрифта в одном баннере – это перебор
8. Украшательство без причины
В дизайне нужно знать меру. Мы уже говорили, что яркие цвета, картинки, рамки помогают привлечь внимание, выделить важное. Но их нужно применять только тогда, когда они служат для решения какой-либо задачи.
Иначе есть риск увлечься оформительством и начать делать «дизайн ради дизайна».
В этом случае оформление будет отвлекать от полезного содержимого сайта.
Примите как должное: посетитель приходит на сайт не полюбоваться дизайном, а найти информацию. Дизайн должен ему в этом помогать!
Если декоративный элемент (иконка, картинка, рамка) не несет смысловой нагрузки, а размещается на сайте для красоты, его можно смело удалять:
Массивный дизайнерский «арт-объект» в шапке сайта
Излишнее оформление в шапке сайта
Итоги:
Разрабатывайте дизайн сайта для целевой аудитории, с учетом ее потребностей и особенностей. У каждого, даже самого небольшого, элемента в дизайне должно быть свое практическое назначение.
Если хотите, чтобы ваш сайт был инструментом бизнеса – относитесь к нему именно так, и забудьте слова «а мне это нравится, а это нет», сайт не должен нравиться вам, он должен нравиться вашей целевой аудитории и приносить вам прибыль.
P.S. Если на вашем сайте присутствуют ошибки, закажите его редизайн . Услуга редизайна стоит от 89 000 рублей – значительно дешевле разработки «с нуля». Но при этом вы получите интересную, привлекательную страницу. К тому же, мы не просто дизайн поменяем, но и текст напишем новый. .
Кривые (Curves) - невероятно мощный инструмент. Они как ничто другое обеспечивают скорость и эффективность процесса постобработки. Однако для новичка они могут быть даже слишком мощными. Не бойтесь! Кривые - не такие сложные или ошеломляющие, как могут показаться.
В этом уроке мы пройдемся по основным функциям корректирующего слоя Кривые (Curves Adjustment Layer), узнаем, откуда происходит его функционал, и рассмотрим, как эффективно использовать этот инструмент для локальной коррекции фотографий.
Изображение ДО:
Изображение ПОСЛЕ:
Перед тем, как переходить к изучению техники, мы затронем немного теории. Вот, что будет в этом уроке:
- Как работают Тон, Контраст и Кривые
- Как читать кривые тонов и гистограммы
- Как использовать контрольные точки
- Порядок операций
- Как осуществлять локальные коррекции контраста при помощи Кривых
Готовы? Давайте начнем.
Часть 1. Динамический диапазон
Когда вы создаете корректирующий слой Кривые (Curves Adjustment Layer) в Adobe Photoshop, то получаете тональную кривую, гистограмму, а также множество других настроек и кнопок. Что это все такое?
Вся суть в Динамическом диапазоне
Прежде всего, помните одну вещь: каждое цифровое изображение представляет собой сетку из крошечных пикселей.
Динамический диапазон (dynamic range) изображения показывает, сколько оттенков серого, от черного до белого, есть на снимке. В 8-битной монохромной фотографии, которую мы будем рассматривать ниже, каждый пиксель может иметь одно (и только одно) из 256 дискретных значений интенсивности, или, проще говоря, оттенков серого. James Thomas недавно рассматривал цветовые модели , и я рекомендую глубже почитать про то, как работают цифровые фотографии.
Гистограмма (histogram) - это удобная визуализация. По сути, она представляет собой изображение вашего изображения. Для любой заданной интенсивности она показывает, сколько пикселей определенного оттенка серого есть на снимке. Это быстрый способ получить представление о динамическом диапазоне фотографии, не глядя на нее. Такое разделение фотографических значений от визуальной информации очень полезно. Ниже мы узнаем, как этим воспользоваться.
Кривая (curve) - способ манипулировать распределением этих тонов при помощи графика, а также ключевой момент нашего урока. Идем дальше, чтобы узнать подробнее!
Часть 2. Читаем кривые тонов и гистограммы
Как объяснил Harry Guinness : "Инструмент Кривые (Curves Tool) - это график. По оси Х у нас Входной (Input) уровень, по оси Y - Выходной (Output) уровень. У каждой оси есть значения от 0 до 255." Слева направо и снизу вверх:
- В нулевой точке, которая находится в нижнем левом углу графика, расположился черный (black) цвет: пиксели, у которых нет интенсивности.
- Вверх и вправо от черного идут тени (shadows), фотографы часто называют их "darks".
- В середине графика средний серый (middle grey), с обеих сторон окруженный "полутонами".
- Еще выше и правее находятся светлые зоны, они же "блики".
- В самом верхнем правом углу, со значением 255, находится белый (white): пиксели с полной интенсивностью.
Верхняя часть кривой управляет светом, средняя - полутонами, а нижняя - тенями.
Наклон кривой контролирует контраст
Контраст (contrast) выражает разницу между тональными значениями изображения. Мы можем обозначить два его вида: глобальный для всего изображения и локальный для определенного участка.
Каждая новая кривая изначально представляет собой прямую линию с наклоном 45 градусов. Это значит, что соотношение между Вводом (Input) и Выводом (Output) один к одному, фильтр не влияет на изображение.
Изменение наклона линии меняет соотношение. Если наклон больше 45 градусов, контраст усиливается, если меньше - снижается.
Перемещение кривой также управляет уровнями. Смещение целой кривой вниз снижает выходное значение: фотография становится темнее. Если переместить всю линию вверх, выходное значение увеличивается, а снимок светлеет.
Глядя на гистограмму нашего примера, можно заметить, что большинство пикселей находятся в середине тонального диапазона, почти поровну разделены между тенями и бликами с углублением в зоне полутонов. Есть также много пикселей в темных и светлых участках. Это показывает, что мы имеем изображение с относительно равным распределением, а также хорошей всесторонней экспозицией. Вот сам снимок, чтобы вы могли оценить исходный вид:
Предельно плоский снимок прямо с камеры - довольно нормальный и желаемый результат. Чтобы защитить блики и тени, производители цифровых фотоаппаратов осторожно подходят к интерпретации сырой, линейной информации с сенсоров в саму фотографию. Лучше начать с немного плоского результата, чем потерять важную информацию ради чрезмерного контраста!
Сила контраста
Наш взгляд всегда цепляется за контрастные участки. Подумайте о полярном медведе на фоне снега. Его трудно заметить, не так ли? Это низкий контраст. Теперь представьте пантеру на снегу; ее увидеть намного проще: это высокий контраст. Весь трюк с получением правильного количества контраста (и это довольно субъективно) заключается в том, чтобы сделать белое не слишком белым, а черное не слишком черным.
Проще говоря, контраст - это разница между светлой и темной частью фотографии. При увеличении этой разницы снимок будет объемнее, а если ее сократить, снимок станет более плоским или тусклым. Глобальные коррекции контраста в целом полезны, но они не так мощны, когда нужно сделать определенные фотографии идеальными. Для этого нам нужны локальные коррекции.
Мы используем локальные коррекции контраста для добавления акцента к изображению или его участкам, увеличивая либо сокращая разницу. Мы регулируем распределение тонов на снимке, чтобы максимально полно использовать динамический диапазон и, что еще более важно, направлять взгляд зрителя. Как вы будете это делать - целиком зависит от содержимого каждой фотографии.
Часть 3. Как использовать контрольные точки
Вы можете подумать, что это все похоже на инструмент Уровни (Levels) и будете правы. Однако есть ключевое различие: Кривые (Curves) позволяют использовать контрольные точки для получения тонких настроек вместо грубых коррекций диапазонов черного, белого и серого.
Контрольные точки (Control points) - это координаты на кривой. Их можно перетягивать вверх или вниз для изменения отношений между Вводом (Input) и Выводом (Output). Место расположения точки влияет на то, какую часть тонального спектра нужно изменить.
Чтобы это продемонстрировать, я сделал три контрольные точки на нашей демонстрационной фотографии: одну возле нижней части, другую посередине, а третью возле верха. Я отрегулировал их, получив S-образную кривую. Можете посмотреть, как это повлияло на изображение:
Тени стали темнее, блики - ярче, а полутона остались почти нетронутыми, но получили больше контраста. S-образная кривая добавляет контраст полутонам, сокращая его для бликов и теней. (Также она усиливает насыщенность цветного изображения.) Подобная кривая - частый шаг для глобальной коррекции.
Перемещение контрольных точек может показаться не интуитивным, но по ним нужно просто кликнуть, а затем перетянуть в нужное место.
Когда точка выделена, ее также можно двигать при помощи стрелок на клавиатуре. Это помогает при тонких коррекциях. Нажмите Tab , чтобы переключаться между точками.
Перетяните точку за график, если хотите ее убрать.
Часть 4. Порядок операций
Теперь, когда мы прошлись по основамкривых и контрольных точек, давайте рассмотрим процесс регулирования локального контраста.
Шаг 1. Выполните все глобальные коррекции и регулировки
Знаю, вам не терпится начать улучшать свои фотографии прямо сейчас, но убедитесь, что каждый снимок прошел через глобальные коррекции перед тем, как переходить к локальным работам. Если начать локальные регулировки на одной фотографии перед тем, как общая работа закончена на других снимках, ваша группа изображений не будет гармоничной, а процесс их коррекции усложнится. Всегда помещайте фотографии из группы на одинаковый этап постобработки.
В случае с нашим примером, а также в большинстве ваших фотографий, плавной S-образной кривой будет достаточно для глобальных улучшений.
Шаг 2. Сделайте необходимые локальные коррекции
Некоторые фотографии нуждаются в дополнительной обработке. Перед тем, как вы будете делать локальные регулировки , сделайте локальные коррекции . Это включает в себя виньетирование, бочкообразное искажение, окантовку, хроматическую аберрацию и пр. Корректирование этих вещей после выполненных локальных регулировок будет намного сложнее, поэтому исправьте их сейчас.
Шаг 3. Оцените снимок и сделайте план
Хорошо. Глобальные коррекции и регулировки готовы, локальные коррекции сделаны. Теперь вы четко можете видеть свою фотографию. . О чем она? Что в ней особенного? Какие ощущения она вызывает? Напишите заметку об этих вещах в своем рабочем журнале.
Что нужно этой фотографии? Какие элементы вы хотите подчеркнуть? Есть ли специфические участки снимка, которым нужно больше контраста? Может быть, есть зоны, контраст которых нужно сократить! Эти вопросы вы должны задать себе, решая, как должен выглядеть снимок. Запишите ответы на эти вопросы в своем рабочем журнале.
Процесс регулировки может стать интуитивным, когда одно изменение приводит к другому, но он всегда должен отталкиваться от вашей оценки снимка, вашего воображения по поводу него, а также от того, насколько далеко вы хотите зайти.
Шаг 4. Сделайте локальные регулировки
Для каждой крупной зоны, которую нужно улучшить, создавайте новый корректирующий слой. Больше об этом процессе ниже.
Шаг 5. Переоцените и сравните
После нескольких регулировок остановитесь и снова посмотрите на свою фотографию. Получилось ли то изображение, которое вы представляли при создании плана? Возможно, понимание снимка поменялось. Это нормально! Если такое произошло, запишите заметку в рабочем блокноте.
Также сравнивайте изображение с остальными фото в группе. По-прежнему ли они соответствуют? Если нет, попробуйте исправить некоторые коррекции.
Часть 5. Как осуществлять локальные коррекции контраста при помощи Кривых
Как было видно в предыдущих шагах, S-образная кривая дала хороший результат нашему снимку на глобальном уровне. Однако есть несколько частей, которым нужны локальные регулировки.
Небо все еще довольно плоское, я хотел бы сделать его драматичнее. Мне очень нравятся разнообразные и контрастные текстуры изображения - жесткость дерева, пышность облаков, а также то, как они создают атмосферное чувство глубины. Я хочу визуально подчеркнуть все это. Как же нам достигнуть желаемого? Мои цели - сделать небо темнее, облака объемнее, а также выделить более темные тени вокруг лодки и пляжа. Каждый из участков нужно корректировать отдельно.
Шаг 1. Добавляем корректирующий слой Кривые
Создайте Корректирующий слой Кривые (Curves Adjustment Layer), вы найдете его в меню Новый корректирующий слой (New Adjustment Layer) на панели Слоев (Layers Panel). Добавьте контрольную точку на кривой в том тональном диапазоне, который хотите отрегулировать.
Используя выделение "в изображении" (рука с указательным пальцем), я выделил небо:
Этот инструмент показывает мне, где на кривой находится тональный диапазон неба. Кликнув и перетянув точку вниз, я затемнил его. Будьте внимательны - изменения затрагивают другие участки с таким же тональным диапазоном, в моем случае они коснулись некоторых частей каменистого пляжа. Создавая новые коррекции, вы должны будете компенсировать это изменение.
Специфика в том, что при помощи кривых можно сделать намного больше, чем при использовании уровней.
Шаг 2. Используйте маску слоя, чтобы ограничить коррекции в определенных зонах
Как и со всеми корректирующими слоями, мы не работаем напрямую над пикселями. Слой кривых имеет белую Маску (Layer Mask). Ее можно закрасить, чтобы убрать действие слоя на определенных участках фотографии.
Теперь уберите нежелательные коррекции на изображении при помощи Маски слоя (Layer Mask) и Кисти (Brush).
Используя мягкую кисть с низкой непрозрачностью (opacity), как показано ниже, закрасьте участки, которые не нуждаются в регулировках. В случае с нашим примером, можно увидеть, что колесо на переднем плане и тени на лодке стали слишком темными.
Это маска слоя, показанная в красном (клик с зажатой клавишей Alt по миниатюре маски), поэтому вы можете видеть, какие зоны я закрасил. Некоторые участки я обработал сильнее, кистью с около 50% непрозрачности, чтобы получить постепенный эффект без грубых переходов.
На верхнем изображении красным отмечены места, где фильтр заблокирован маской. Все остальное поддается эффекту. Вот результат:
После коррекций
Теперь небо выглядит намного лучше. Следующий шаг - заставить лодку, облака, пляж и блики на воде выделяться. Поэтому мы создадим новый Корректирующий слой Кривые (Curves Adjustment Layer).
Шаг 3. Повторите!
Следуя такому же методу, я использовал выделение "в изображении", чтобы найти точку бликов на лодке (обведена кружком) и перетянул ее вверх, осветлив участок.
Эта коррекция повлияла на тонально похожие участки всего изображения. Облака, а также светлые зоны пляжа и неба теперь ярче. Это не то, чего я хотел, поэтому нам снова понадобятся маски.
Так как на этот раз мы корректируем меньшие участки, проще инвертировать маску слоя (Ctrl + I ), а затем работать, закрашивая нужные участки, чем скрывая ненужные.
На изображении выше красным закрашены места, где изменения не применяются, а в более светлых розовых зонах снимок осветляется; я сфокусировался в основном на лодке, а также немного усилил камни, блики на воде и часть облаков.
После применения коррекции
Потенциальные проблемы
Как и со всеми методами редактирования, здесь должен быть компромисс. При помощи кривых вы растягиваете или сжимаете тона. Если зайти слишком далеко, получатся странные результаты; это часто называют постеризацией. Она случается, если выходные тона растягиваются:
Если вы попытаетесь осветлить и затемнить участки с похожей тональностью, получите постеризацию.
То, что на скриншоте выше - грубое преувеличение (вы никогда не будете использовать подобную кривую), но демонстрирует эффект, который можно получить, если перестараться с определенным участком одного слоя кривых.
Когда сомневаетесь, работайте от большого к малому
Если не можете решить все на одном слое, не переживайте: просто добавьте новый. Намного проще работать с одним слоем для каждой "проблемы", обрабатывая сначала большие участки, а потом меньшие.
Используйте разные слои и фокусируйте каждый на определенной задаче. Это поможет вам оставаться организованным (не забывайте называть слои!), а также позволит вносить правки по ходу построения изображения.
Почти готово
Как и с большинством подобных коррекций, часто лучше зайти немного далеко, зная, что в последствии можно сократить непрозрачность слоя, если нужно ослабить его действие. Попробуйте объединить ваши правки в группу. Просто кликните по иконке папки в нижней части панели Слоев, а затем перетяните в нее нужные слои:
Затем можно сократить непрозрачность (opacity) группы - это повлияет на все слои, которые в ней находятся. В качестве альтернативы, можно отрегулировать каждую отдельную Кривую. Непрозрачность всех своих слоев я сократил до 75% .
Готово
Хорошо, выдохните. Давайте снова взглянем на наш снимок.
Исходная фотография выглядела немного плоской, на гистограмме все было сгруппировано вокруг полутонов. Между светлыми и темными участками не было особой разницы. Добавление небольшого глобального контраста помогло, но это было только начало! Иногда нам не нужны изменения всей фотографии. Если у вас есть много тональности похожего диапазона, как в случае с нашим примером, локальные регулировки понадобятся, чтобы привлечь взгляд зрителя.
Изображение, с которого я начал, имело мало различия между лодкой, шиной, пляжем или небом. У каждого из этих элементов была своя отличительная черта, поэтому разумно было использовать локальные коррекции, чтобы их подчеркнуть. Так как облака уже были достаточно светлыми, затемненное небо помогло им выделиться. Также, сконцентрировавшись на бликах лодки, пляжа и воды при помощи кривых и масок слоя, мы смогли создать более яркие зоны для привлечения внимания, не перебарщивая с местами, которые уже были светлыми. Сейчас мне нравятся контрастные текстуры этих участков.
Теперь вы можете тонко владеть кривыми
Кривые (Curves)! Какой замечательный инструмент. Они становятся лучше с каждой версиейPhotoshop. Я настоятельно рекомендую взяться за эту функцию и ознакомиться с настройками и эффектами, которые проявляются для разных типов фотографий.
Начинать с черно-белых снимков проще, так как вам не нужно волноваться об излишней насыщенности, а также проще увидеть изменения. Также, монохромные изображения отлично подходят для высокого контраста, поэтому на них удобно практиковаться. Конечно, не всем изображениям нужен дополнительный контраст, и кривые можно не менее эффективно использовать для его сокращения!
Сначала попробуйте работать с пресетами и наблюдайте за тем, какой эффект от каждого из них, затем используйте эти знания для более точной коррекции своих снимков. Помните, что нужно сохранять коррекции легкими и реалистичными. В противном случае вы получите аномалии на изображении. Все регулировки можно исправить, воспользовавшись маской слоя и убрав все ошибки.