Теория цвета

1.

ТЕОРИЯ ЦВЕТА

2.

◦ Теория цвета — набор правил и рекомендаций, следуя которым ,
создаются эстетичные, гармоничные, функциональные цветовые
палитры.
◦ Существует 3 категории цветов:
◦ Первичные — красный, желтый, синий.
◦ Вторичные — цвета, которые получаются в результате смешения двух
первичных цветов, — оранжевый, зеленый, фиолетовый.
◦ Третичные — цвета, которые получаются в результате смешения
первичного и вторичного цветов, — желтый + оранжевый, красный +
оранжевый, красный + фиолетовый, синий + фиолетовый, синий +
зеленый, желтый + зеленый.
23.01.2025

3.

Цветовой круг Иттена
◦ представляет собой круговую схему из двенадцати
цветов. В центре круга Иттена находятся три цвета,
которые считаются основными, их еще называют
первичными. Это красный, синий и желтый. Все
оттенки, которые мы видим – результат сочетания
основных цветов.
◦ Иоганнес Иттен - швейцарский художник и теоретик
искусства, автор книги "Искусство цвета"
(рекомендуется к прочтению). Иттен был не первым, кто
работал над систематизацией цвета, его сочетаний и
восприятия. Попытки разобраться в цветовой гармонии и
объединить видимые цвета в универсальную систему
делали еще Ньютон, Гете, Оствальд. Но именно цветовой
круг Иттена является максимально простой и
универсальной схемой образования и сочетания цветов.
23.01.2025

4.

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

5.

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

6.

Цветовые схемы
◦ Все визуальные элементы интерфейса, если это сайт или элементы разрабатываемого макета
для чего бы то ни было (визитка, флаер, буклет, банер, плакат и т.д.) должны сочетаться между
собой и выглядеть гармонично. Для этого при их разработке комбинируют цвета, формируются (в
зависимости от преследуемых целей) разные цветовые схемы.
◦ На основе цветового круга Иттена строятся принципы сочетания и гармонии цветов.
1. Комплементарная цветовая схема
представляет собой комбинацию цветов, расположенных
в круге друг напротив друга.
Используется для создания высококонтрастной цветовой палитры
Такие сочетания не стоит использовать в равных пропорциях,
цвета будут перебивать и заглушать друг друга. Один из цветов
становится основным, а другой берется
в совсем небольшом количестве (здесь
фиолетовый-жёлтый).
23.01.2025

7.

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

8.

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

9.

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

10.

5. Составная (двойная
комплиментарная или тетрада)
◦ цветовая схема, включающая две пары комплементарных цветов. Эта схема использует четыре
цвета, которые образуют прямоугольник или квадрат на цветовом круге.
23.01.2025

11.

6. Монохромная схема
◦ сочетание разных оттенков, тонов и насыщенностей одного цвета. В такой цветовой схеме
используется один основной цвет, который варьируется по яркости (от светлого до темного) и
насыщенности (от насыщенного до менее насыщенного).
23.01.2025

12.

Генераторы цветовых сочетаний
◦ https://color.adobe.com/
◦ https://coolors.co/
23.01.2025

13.

СОЗДАНИЕ
МАКЕТА
СТРАНИЦЫ
САЙТА

14.

◦ Макет сайта — это его реалистичный прототип, созданный в Photoshop. Он выглядит как готовый
сайт: со всеми блоками текста и изображений, кнопками, фоновыми рисунками и так далее.
Единственное отличие в том, что в макете нет функционального наполнения. Дальше верстальщик
и программист превращают графический файл в настоящий сайт.
◦ Макет во всем этом процессе помогает:
1. Заранее увидеть, как будут выглядеть пожелания заказчика на практике, включая мобильную
версию сайта и элементы анимации.
2. Разработать единый дизайн для всех страниц сайта и всех его типовых элементов.
3. Продумать наполнение элементов — текста и изображений.
4. Скоординировать всю команду проекта, задать четкие рамки для работы.
Этапы разработки макета сайта:
1. Составление техзадания (Цели сайта (для чего и для кого он создаётся, какие потребности у этих
людей, как вы планируете доводить их до нужного вам действия (например, купить, подписаться,
количество и примерное содержание страниц сайта, сроки сдачи)
2. Создание прототипа
Прототип - это схематичный рисунок, который показывает расположение основных элементов:
хедер, футер, блоки контента на странице, примерное соотношение их размеров.
23.01.2025

15.

3. Подбор шрифта
Для макета сайта понадобится как минимум пара шрифтов
— один для заголовков, другой для основного текста. (Много
шрифтов на одной странице использовать нежелательно)
4. Подбор цвета
Если есть логотип или брендбук, подбираем цвета в
соответствии с ним. Используем цветовые сочетания в
зависимости от задач сайта.
Создаём документ 1920х1080рх -- для фоновых изображения
Создаём сетку из направляющих, под которую будут
подстраиваться объекты на странице.
◦ Заходим во вкладку «Просмотр» верхнего меню и
выбираем там пункт «Новый макет направляющей». По
умолчанию программа предлагает создать восемь
столбцов с полями и внутренними отступами, (при
необходимости можно сделать 12 — так будет удобнее
делить страницу на 2, 3, 4 или 6 блоков.)
23.01.2025

16.

◦ Также можно изменить значение средника в 15 пикселей (это внутренний промежуток между
колонками), верхнее и нижнее поле поставим по нулям, правое и левое — 200 пикселей, отступы и
поля должны быть кратны одной цифре, например, 5.
Первым делом создаём хедер с логотипом компании и ссылками на контактные данные
и другие разделы сайта.
23.01.2025

17.

◦ Для того, чтобы выровнять блоки используем
стандартное выравнивание и
распределение (при активном инструменте
Перемещение).
◦ Обязательно группируем слои и даем им
названия, чтобы верстальщику потом было
проще разобраться.
23.01.2025

18.

Самостоятельная работа № 15
◦ Создать макет страницы
сайта по образцу
23.01.2025

19.

Домашняя работа № 15
◦ Используя различные цветовые схемы создать макет
страницы сайта интернет-магазина (наполнение, цветовое
решение и название могут быть свои)
23.01.2025