09. web design

Веб Дизайн

Лекция 9

Цветовые схемы, Создание цветовых палитр

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Февраль 2015

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

com

ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ

2

ДЕМО TWITTER BOOTSTRAP

3

Создание цветовых палитр

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

• Сделать это можно разными способами, одним из них является использование специального инструментария;

• Основные приемы построения гармоничных цветовых схем для сайтов иллюстрируются с помощью программы Paletton

4

Palettonhttp://paletton.com/

5

Цветовые схемы:Монохроматические,

Аналоговые и Комплиментарные гармонии

6

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

оттенки и вариации.

• Такие схемы, использующиеся в тонированных фотографиях,

иногда применяются для оформления сайтов.

• При правильном использовании, эта схема может придать Web-

сайту аккуратный, чистый вид. Однако, как правило, такой

вариант выглядит довольно скучно и его разбавляют

дополнительным цветом (цветами).

7

Пример• Сайт "Корпорация

НЕДВИЖИМОСТЬ" использует монохроматическую гармонию из оттенков синего цвета разной насыщенности.

• Дополненный слабый оливковый цвет только подчеркивает выбранную тональность.

8

Пример• Rational Software использует

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

9

Аналоговые гармонии

• Аналоговые гармонии

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

10

Пример

Сайт www.voiceyourself.comиспользует аналоговую гармонию из желтого, оранжевого и зеленого цветов

11

Пример

Сайт officialblue.com использует аналоговую гармонию из синего, бирюзового и фиолетового цветов

12

Комплиментарные гармонии

• Комплиментарные цветовые схемы построены на цветах, располагающихся друг напротив друга на цветовом колесе. Эти цвета являются негативами друг для друга или полными противоположностями;

• По этой причине сочетания этих цветов всегда выглядят гораздо ярче и интенсивнее, чем цвета, расположенные ближе друг к другу;

• В связи с этим пользоваться такими схемами надо чрезвычайно осторожно

13

Пример неудачного

сочетания

комплиментарных

цветов.

14

Другой пример

неудачного

сочетания

комплиментарных

цветов.

15

Пример• На данном сайте противоположные красный и зеленый

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

16

Триадная схема

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

• Этот тип подбора цветов называется триадной схемой, эти цвета, работая вместе образуют гармоничную комбинацию цветов

1

7

Пример

На сайте Puzzle Piratesиспользуется триадная схема, состоящая из красного, синего и желтого цветов.

18

ПримерОкна Роста

В одном из дизайнов сайта “Окна Роста” использовалась триадная схема из красного, голубого и желтого цветов.

19

Пример

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

20

Схема тетрада

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

• Подобная гамма дает очень насыщенные цветовые композиции.

21

Пример www.ecolution.com

На сайте www.ecolution.comможно обнаружить тетрадуиз четырех базовых цветов, с разной яркостью и насыщенностью

22

Примерwww.pbs.org/wnet/nature/goodall

На странице “Jane Goodall” можно обнаружить цвета тетрады.

2

3

Расщепленный комплемент

• Расщепленный комплемент (split complement), это когда берется цвет, его комплиментарныйцвет и два прилегающих к нему цвета;

• В данном случае цвет хорошо выделяется на фоне цветов, гармонирующих с комплементарным

2

4

Пример www.avt-service.ru

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

25

Пример

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

26

Разделенная тетрада (Split Tetrad)

• Две пары комплементарных цветов называют разделенной тетрадой или двойным комплементом.

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

2

7

Пример

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

28

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

2

9

Adobe Kulerhttps://color.adobe.com/create/color-wheel/

30

Color Blenderhttp://www.meyerweb.com/eric/tools/color-blend

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

• Особенно удачными получаются палитры из аналоговых и монохроматичных цветов;

• Может быть полезна для выбора цветов для вспомогательных элементов, например, таблиц и форм

3

1

Пример:Таблицы, оформленные монохроматическими цветами

32

Color Schemer Studiohttp://www.colorschemer.com

Инструмент с большим количеством возможностей33

Color Schemer Studiohttp://www.colorschemer.com

Позволяет выбирать разные цветовые схемы34

Color Schemer Studiohttp://www.colorschemer.com

Имеет некоторые возможности предварительного просмотра

35

ColorImpacthttp://www.tigercolor.com

36

ColorImpacthttp://www.tigercolor.com

37

ColorImpacthttp://www.tigercolor.com

38

Color Wheel Prohttp://www.color-wheel-pro.com

39

Color Wheel Prohttp://www.color-wheel-pro.com

40

Получение палитры из изображения

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

• Этот способ будет отлично работать, если известна иллюстрация, которая будет использоваться на странице

4

1

Получение палитры из изображения с помощью Adobe Photoshop

• Для начала необходимо найти изображение, гамма которого подходит к будущему сайту;

• Применить к нему FILTER—> CRYSTALLIZE, количество цветов уменьшится

42

Получение палитры из изображения с помощью Adobe Photoshop (2)

Щелкая инструментом пипетка в понравившиеся цвета, каждый цвет добавляется в палитру Swatches.

43

Color Schemer Studio сам умеет извлекать палитры из изображения

44

Color Schemer Studio сам умеет извлекать палитры из изображения (2)

45

Задание 21. Создание палитры

• На основании выбранных основных цветов разработать одну-две палитры для сайта;

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

• Процесс задокументировать: Если выбрана цветовая схема — объяснить,

почему;

Если схема строится на основе изображения, обосновать выбор и показать исходник;

• Результат опубликовать.

4

6

Задание на 22. Использование цвета на странице

• С помощью внешнего файла CSS (смотрите пример подключения в образце Bootstrap файла) раскрасьте элементы на вашей странице согласно выбранной палитре;

• Подберите и используйте на странице подходящие фотографии для элементов экрана и фона, если необходимо

47