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

Введение в теорию цвета

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

 

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

 

Основные цвета

 

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

 

 

Введение в теорию цвета

 

 

Составные цвета

 

Зеленый, оранжевый, фиолетовый. Эти цвета образуются путем смешивания основных цветов.

 


 

Введение в теорию цвета

 

 

Третичные цвета

 

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

 

 

Введение в теорию цвета

 

 

Аналогичные цвета

 

Любые три цвета, которые расположены бок о бок на 12-ти цветовом колесе, такие как желто-зеленый, желтый и желто-оранжевый. Обычно один цвет из трех цветов доминирует.

 

 

Введение в теорию цвета

 

 

Дополнительные цвета

 


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

 

 

Введение в теорию цвета

 

 

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

 

Аддитивные цвета

 

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

 

По шкале от 0 до 255, каждое числовое приращение меняет цвет в его тонкий оттенок.

 

 

Введение в теорию цвета

 

 

Значение RGB 255, 255, 255 (полная насыщенность) это то же самое, что и белый цвет, который также показывает шестнадцатеричное значение # FFFFFF.

 

 

 

Введение в теорию цвета

 

 

 

Наоборот, если все RGB значения установлены в ноль, то получится чёрный цвет. Это показывает, соответствующее шестнадцатеричное значение # 000000.

 

Зная эти основы, вы должны быть в состоянии предсказать, какой цвет будет генерироваться, когда Красная составляющая установлена в значение 255, а Зеленая и Синяя установлены в 0.

 

 

Введение в теорию цвета

 

 

При значении 255 в Красном секторе, и 0 в Зеленом и Синем, мы получаем полностью насыщенный красный цвет. Соответственно Зеленый и Синий получаются установкой того же значения в их сектор.

 

 

Введение в теорию цвета

 

 

Если мы смешаем два сектора со значением 255, например  Красный и Зеленый, то мы получим полностью насыщенный желтый цвет с шестнадцатеричным значением # ffff00.

 

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

 

Психология цвета

 

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

 

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

 

 

Введение в теорию цвета

 

 

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

 

На сайте http://colorapi.com  вы можете подобрать цветовые ассоциации для конкретных слов. Возьмём слово, скажем, хлеб, и  сервис выдаст вам тонны вариантов цвета для этого слова. Наслаждайтесь!

 

Доступность и цвет

 

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

 

Чтобы увидеть, как ваш сайт или веб-приложение выглядит для людей с ослабленным зрением, можно проверить на сайте http://colorfilter.wickline.org/.

 

Цвет на примере

 

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

 

 

Введение в теорию цвета

 

 

 

Введение в теорию цвета

 

 

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

 

 

Введение в теорию цвета

 

 

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

 

 

Введение в теорию цвета

 

 

Как и приложение термометр, мобильная версия сайта arctic.ru дает хороший холодный эффект с использованием белого, голубого и серого. 

 

 


Автор урока: Kyle Herges

 

Переводчик урока: Ирина Шипилова 

Ссылка на источник

 



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 22.11.2012
  •   Просмотров: 3582
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки