Photoshop (Web-design) Урок 13 (лекция)

ПЛАН УРОКУ №10

Назва предмету: Комп’ютерна графіка Adobe Photoshop Тема уроку: Технології розробки дизайну веб-сторінок. Принципи побудови веб-сторінок. Кольорові схеми.

Мета уроку: навчальна – вивчити класифікацію сайтів, кольорові моделі та принципи побудови кольорових схем web-сайтів; виховна - виховувати зосередженість, вміння активно сприймати новий матеріал; розвиваюча — прививати інтерес до вивчення предмету.

Вид уроку: практика

ХІД УРОКУ

1. Організаційна частина: перевірка присутніх на уроці, перевірка готовності учнів до уроку. Повідомлення теми та мети уроку.

1. Мотивація до вивчання нового матеріалу.

2. Актуалізація знань:

Перевірка знань попереднього матеріалу.

1. Викладання нового матеріалу.

• Класифікація web-сайтів;

• Використання кольорових схем у дизайні;

• Принципи побудови кольорової схеми web-сайту.

1. Закріплення нового матеріалу.

Виконання самостійних завдань.

1. Підведення підсумків.

Повторення основних понять, які було вивчено на занятті.

Підведення підсумків виконання практичних завдання.

Обґрунтування оцінок учнів.

1. Домашнє завдання №12.

22.03.2016. Викладач: К. І. МонаховаКОНСПЕКТ УРОКА 10 – 2 часа

Тема урока: Технологии разработки дизайна веб-страниц. Принципы построения веб-страниц. Цветовые схемы.

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

Основная классификация сайтов по типам

По цели создания выделяют следующие типы сайтов:

• Некоммерческие

• Коммерческие

По доступности пользователям их условно можно разделить на:

• Закрытые (недоступны для людей, не входящих в определенный круг)

• Полузакрытые (для доступа потребуется пройти процедуру регистрации)

• Открытые (доступны каждому пользователю)

По стилю оформления и функциональности выделяют следующие типы сайтов:

• Флэш-сайты

• Динамические

• Статические

В зависимости от размера аудитории выделяют следующие типы сайтов:

• Узконаправленные и тематические

• Интернет-порталы

• Простые (визитки, домашние страницы и т. д.)

Также делят сайты на типы по их физическому расположению:

• Локальные

• Общедоступные

Основные виды сайтов и их категории

1 группа. Информационный сайты.

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

1. Одно тематические или разно тематические информационные сайты.

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

2. Новостные сайты

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

3. Блоги.

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

Условно блоги, делятся на две категории, каждая из которых выполняет свою определенную задачу:

• Корпоративные

• Личные

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

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

Условно блоги делятся на две категории в зависимости от того, как много тем на них рассматривается:

• Узко тематические (пару тем, имеющих тесную связь друг с другом);

• Обще тематические (совершенно различные темы).

2 группа. Сайты корпоративной направленности.

1. Корпоративные сайты.

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

• Имиджевый;

• Информационный.

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

Они отличаются оригинальным эксклюзивным дизайном, сочетанием нестандартных элементов оформления и решений.

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

2. Сайты-визитки.

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

У сайта-визитки нестандартная структура, которая делит его на несколько разделов, в которых содержатся данные о компании, продаваемых ею товарах, предоставляемых услугах, контактные данные. Выделяет несколько преимуществ таких «компактных» Интернет-ресурсов:

• Высокая скорость создания

• Содержательное и краткое изложение всей информации

• Привлечение партнеров и клиентов

• Невысокая стоимость

• Удобен и прост в управлении

3. Сайты-портфолио.

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

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

3 группа. Коммерческие сайты.

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

• Сайт-витрина;

• Промо-сайты;

• Интернет-магазины;

• Сайты-визитки.

1. Сайт-витрина.

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

2. Промо-сайты.

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

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

3. Интернет-магазины.

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

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

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

4 группа. Социальные проекты.

К социальным проектам относятся специализированные социальные сети или сети общей тематики, сайты-сообщества, форумы и т. д.

1. Форумы.

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

• Узконаправленные (обсуждаются одна или несколько проблем, тесно переплетенных между собой);

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

2. Социальные сети.

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

Социальные сети делятся на две группы:

• Узконаправленные;

• Обще направленные.

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

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

5. группа. Различные веб-сервисы.

Широкое распространение в наше время получили веб-сервисы:

1. Каталоги – сайты, на которых содержатся структурированные ссылки, ведущие на другие веб-ресурсы, и их краткое описание.

2. Почтовые сервисы – предоставляют возможность просматривать и отправлять письма электронной почты.

3. Поисковые системы – предоставляют возможность отыскивать тот или иной сайт, различную информацию по определенному поисковому запросу

4. Доски объявлений – веб-ресурсы, на которых пользователи сети интернет размещают объявления различных тематик

5. Сайты хостинги – предназначены для временного хранения файлов, ( некоторые из них предоставляют возможности перед загрузкой просмотреть содержимое файла в окне браузера ), изображений и т. д.

Схема деления цветов на холодные и теплые представлена на рис. 1. 

Это деление условно: чем ближе цвет к границам верхнего и нижнего полукругов, тем менее точно он относится к теплым или холодным.

Рис. 1. Цветовой круг, показывающий разделение цветов на холодные и теплые

Сочетаемость цветов

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

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

Посмотрите на рис. 2.

Рис. 2. Отношение цветов в цветовом круге

Использовать данный цветовой круг можно при помощи следующих правил:

• смежные цвета неплохо совмещаются, выбор такого варианта обычно считается скучным и банальным;

• цвета, которые находятся друг напротив друга, считаются малосовместимыми. Единственное исключение — синий неплохо смотрится в паре с желтым;

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

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

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

Теперь, нам необходимо собрать эти цвета вместе и мы получим уже 12-частный цветовой круг, который лёг в основу всей науки Цветоведение и гармонии цветов.

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

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

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

Основные правила построения цветовой схемы для сайта

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

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

Шаг первый: выбираем основной цвет

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

• основной цвет должен характеризовать сам проект, идею, цель;

• он должен подходить по смыслу;

• от того, насколько грамотно подобран цвет, сильно зависит первое впечатление пользователей ресурса;

• цвет может влиять на ощущение пространства: если светлые тона дают ощущение легкости и просторности, то темные, наоборот, зрительно уменьшают пространство;

• разные оттенки цветов могут создавать теплую, уютную либо холодную атмосферу.

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

ЧЕРНЫЙ

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

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

БЕЛЫЙ

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

КРАСНЫЙ

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

ОРАНЖЕВЫЙ

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

ЖЕЛТЫЙ

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

ЗЕЛЕНЫЙ

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

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

СИНИЙ

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

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

Шаг второй: правильно сочетаем цвета

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

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

МОНОХРОМНАЯ СХЕМА

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

СХОДСТВЕННАЯ (АНАЛОГОВАЯ) СХЕМА

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

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

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

ДОПОЛНЯЮЩАЯ СХЕМА

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

ТРИАДНАЯ СХЕМА

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

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

ТЕТРАИДНАЯ СХЕМА

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

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

Шаг третий: завершающие штрихи

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

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

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

• 1. Цветовая схема — это холст, а не картина

Одно из основных принципов создания сайта состоит в том, что цветовая схема не должна делать дизайн «громче» контента. Дизайн должен быть фоном, который выводит на первый план содержание сайта.

Нежная цветовая схема позволяет изображениям выделиться и привлечь внимание

Яркая цветовая схема отвлекает от изображения.

• 2. Начните с оттенков серого

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

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

Избегайте угольно черного цвета для текста, так как темно-серый читается немного лучше. Старайтесь варьировать между #333333 и #666666.

Для фона чистый белый цвет #FFFFFF является самым безопасным решением с точки зрения читабельности текста. Для других фоновых элементов используйте оттенки от #FFFFFF до #CCCCCC.

• 3. Выберите только один цвет для выделений

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

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

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

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

Вы только что выучили как выбирать оттенок («hue»). Когда вы перемещаете бегунок цвета, вы можете заметить, как меняется параметр«H» в окне выбора цвета.

«H» — это стандартное обозначение оттенка. Когда вы выбрали цвет, число в графе «H» обозначает его оттенок.

• 4. Если сомневаетесь, используйте синий

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

С синим же цветом вы можете делать почти что угодно, при этом не рискуя слишком отдалиться от правильного пути. Если вы не знаете с чего начать обучение или какой цвет использовать в проекте, просто остановите выбор на синем. Вы можете варьировать от сапфирного (оттенок/hue 235) до цвета морской волны». 

• 5. Добавьте вариацию цвета

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

Чтобы выбрать цветовую вариацию, перемещайте по карте цвета круглый курсор.

Используйте эту вариацию для таких элементов как:

Состояние кнопки при наведении курсора

Рамки

Светлый текст на фоне цвета выделения

Градиенты

Эффекты света и тени

• 6. Держитесь подальше от правого верхнего угла

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

Насыщенностью и яркостью

Когда вы перемещаете курсор по карте цветов, меняются параметры "S" и «B», которые означают Saturation/Насыщенностьи Brightness/Яркость соответственно. Также обратите внимание что параметр оттенка (hue — «H») остается неизменным.

Насыщенность и бледность

Насыщенность определяет то как ярко выражается цвет. Например, представьте: «Моя рубашка была пропитана/насыщена пролитым красным вином». В обычных селекторах цвета насыщенность определяется тем, как много белого цвета смешивается с вашим базовым оттенком. Чем меньше белого, тем более насыщен цвет.

Когда вы перемещаете курсор на цветовой карте вправо, количество белого в цвете уменьшается, это значит что увеличивается насыщенность и растет значение параметра «S» (Saturation — Насыщенность). Когда курсор перемещается влево, белого становится больше, цвет теряет насыщенность и значение параметра «S» падает.

Насыщенность в стандартном цветовом селекторе

Яркость и приглушенность

Яркость определяет как много черного цвета в вашем оттенке. Чем меньше черного — тем выше яркость.

Когда вы перемещаете курсор на карте цветов вверх, вы снижаете количество черного в цвете, тем самым повышая яркость, и увеличивая значение параметра «B» (Brightness — Яркость). Когда вы перемещаете курсор вниз, количество черного увеличивается, цвет становится более приглушенным, и параметр «B» снижается.

Тона

Когда вы добавляете серый цвет к вашему оттенку, это называется созданием тона. Когда вы уводите курсор на карте цветов вниз и влево, вы увеличиваете присутствие в цвете и белого и черного (что в совокупности дает серый цвет). Так вы создаете новый тон. Так что технически, когда значения насыщенности и яркости меньше 100%, это всегда тон.

Монохромные цветовые схемы

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

22.03.2016 Конспект составлен преподавателем Е. И. Монаховой