Свежие комментарии
Яндекс.Метрика

Цветовая гамма сайта

Цветовая гамма сайтаКак выбрать цветовую гамму сайта?

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

     1. Цветовую гамму сайта выбирал в соответствии с темой сайта.

2. Логика. Тема сайта «Финансовая Свобода», по-моему, она связана с радугой, воздушностью, с воодушевлением финансовой свободы.

3. Основной цвет голубой. Дополнительные цвета, определил данной программой. Выбрал «Воздушный поток» (выбор см. ниже).

4. Количество основных цветов при оформлении, должно не превышать 3-4 цвета. Мне повезло я могу использовать все цвета радуги, понимая что чем меньше цветов тем лучше.

5. Стараюсь для каждой целевой аудитории (ЦА) использовать свои оттенки.

6. Правильно определить цвет шрифта и стиль.

Используемые сокращения в статье:

• ЛКМ – левая кнопка мыши.

• ПКМ – правая кнопка мыши.

• ЦА – целевая аудитория.

 

Таблица 1.

Восемь основных комбинаций цвета

Восемь основных комбинаций цвета

Первичные, вторичные и третичные цвета

Рис. 1. Первичные, вторичные и третичные цвета.

Выбор цветовой гаммы сайта в программе Microsoft PowerPoint

Открываем штатную программу Microsoft PowerPoint. См. скриншот 1.

Скриншот 1. Первая страница программы Microsoft PowerPoint

Скриншот 1. Первая страница программы Microsoft PowerPoint.

Выбираем на панели управления «Макет» (1). Далее «Пустой слайд». См. скриншот 2.

Выбор макета слайда

Скриншот 2. Выбор макета слайда

Рисуем любую фигуру на слайде. Я выбрал «Овал». Для выбора фигуры необходимо проделать следующие операции. См. скриншот 3.

Выбор фигуры - овал.

 

Скриншот 3. Выбор гигуры — овал.

За закладке, «Главная» выбираем любую фигуру (1) и кликаем по ней ЛКМ. Я выбрал «Овал». Переходим на закладку «Дизайн» (1). См. скриншот 4.

Выбор цветовой гаммы в программе  PowerPoint

Скриншот 4. Выбор цветовой гаммы в программе PowerPoint.

Кликаем по кнопке «треугольнику» ► (2), открывается панель на которой выбираем «Цвета» (3), кликаем ЛКМ, на всплывающем окне выбрал «Воздушный поток» (4). Вы выбираете свой стиль цвета. Кликаем по выбранному стилю ЛКМ. Я кликаю «Воздушный поток» (4).  См. скриншот 4.

Переходим на «Главную» (1) страницу. См. скриншот 5.

Определение кодов выбранной цветовой гаммы

 Скриншот 5. Определение кодов выбранной цветовой гаммы.

Выделяю свою фигуру «Овал», кликаю по нему ЛКМ. Далее кликаю «Заливка фигур» или «Контур фигуры». Я кликнул «Заливка фигур» (3). Далее выбираю «Другие цвета». См. скриншот 5.

Что и требовалось нам получить. См. скриншот 6.

Основные, дополнительные и стандартные цвета

Скриншот 6. Основные, дополнительные и стандартные цвета.

Для оперативной работы выписываем коды цветов и составляем таблицу, для программ Microsoft PowerPoint и Photoshop.

Таблица 2.

Коды выбранных основных цветов

Коды выбранных основных цветов     Первая колонка таблицы отображает коды для Photoshop, вторая для Microsoft PowerPoint.

Коды для программы PowerPoint определяем следующим образом. На странице «Главная» (1), кликаем по нужному нам цвету, например, «Синий» (2). Далее выбираем «Заливка фигуры» (3). На всплывающем окне выбираем «Другие цвета заливки» (4). см. скриншот 6а.

Определение кодов цветов для PowerPoint

Скриншот 6а. Определение кодов цветов для PowerPoint.

На всплывающем окне списываем код синего цвета: красный 46 (1), зеленый 128 (2), синий 211 (3). Заносим эти данные в таблицу 2. Нажимаем «ОК» (4). Так мы должны проделать эти операции с каждым цветом, см. скриншот 6б.

Считывание кода для PowerPoint

Чтобы определить коды для Photoshop, открываем программу Photoshop. Нажимаем кнопку «Создать» (1) см. скриншот 7.

Первая страница Photoshop

Скриншот 7. Первая страница Photoshop.

В открывшимся окне выбираем кнопку «Создать» (1) см. скриншот 8.

Вторая страница Photoshop

Скриншот 8. Вторая страница Photoshop.

Далее кликаем дважды ЛКМ по цветовому окошечку (1) см. скриншот 9.

Вызов палитры цветов

Скриншот 9. Вызов палитры цветов.

Открывается следующее окно «Палитра цветов». Из таблицы 1, берем код PowerPoint. 1 – красный, 203 – зеленый, 187 – синий, и вводим в соответствующие окошки R (1), G (2), B (3). См. скриншот 10.

Ввод кода цвета PowerPoint

Скриншот 10. Ввод кода цвета PowerPoint.

В окошке (4) наблюдаем нужный нам цвет. Нажимаем «ОК», см. скриншот 10.

Считывание кода цвета Photoshop

Скриншот 11. Считывание кода цвета Photoshop.

В окошке (1), скриншот 11, копируем код цвета для Photoshop, заносим его в таблицу 2.

Теперь для оформления страницы сайта, презентации, картинки, рекламы (баннеры) и т.д., выбираем три цвета и пользуемся ими при оформлении. В окошке «Последние цвета» (1) они будут отображаться, это очень удобно при работе со слайдами, см. скриншот 12.

Окно последних цветов используемых для слайда

Скриншот 12. Окно последних цветов используемых для слайда.

Цветовая гамма сайта — это ваш залог к успеху! Не торопитесь, и помните для кого Вы делаете сайт!

Желаю успехов, здравомыслия и настойчивости!

С уважением,

Подпись

4 комментария: Цветовая гамма

  • Марина говорит:

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

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

  • Ольга говорит:

    Было бы интереснее выбрать в качестве цвета финансовой свободы- зеленый. Сразу вот ассоциации с «капустой», «зеленью», одним словом баксами:))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Февраль 2019
Пн Вт Ср Чт Пт Сб Вс
« Авг    
 123
45678910
11121314151617
18192021222324
25262728