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

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

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

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

Каждый цвет имеет множество значений, смыслов, ассоциаций. Вот краткая справка по распространённым в веб-дизайне цветам.

  • Белый — совершенство, абсолютность, простор, свобода, равенство.
  • Чёрный — загадка, непознанность, поглощение, любопытство, стремление.
  • При совмещении чёрного и белого цветов происходит взаимопоглощение их характеристик, воздействие цветов на психику пропадает.
  • Серый — стабильность, строгость, здравомыслие, одиночество, суровость.
  • Красный — решительность, лидерство, борьба, сила, страсть, непреклонность, бескомпромиссность.
  • Розовый — романтичность, нежность, чувствительность, женственность.
  • Жёлтый — радость, уверенность, оригинальность, интеллектуальность, уверенность, доминация.
  • Оранжевый — сила, энергия, хорошее настроение, тепло, доброта.
  • Зелёный — живость, стабильность, новизна, процветание, прогресс, спокойствие.
  • Синий — непреклонность, величие, сконцентрированность, серьёзность, строгость, постоянство.
  • Коричневый — надёжность, стабильность, трудолюбие.
  • Фиолетовый — скрытность, внутреннее возбуждение, скрытое внешней холодностью, чувственность, слабость. Тяжёлый цвет.

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

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

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

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

Теперь использую значительно более простой способ определения номера цвета — программа FsCapture (родственник FastStone Image Viewer). Смотрим картинку и хлопаем в ладоши. На панельке с инструментами программы выбираем пипетку — красная стрелка (изначально её на панели нет, можно выбрать в дополнительном меню или включить эту кнопку в настройках). Открывается окошко — зелёная стрелка. В этом окошке отображается увеличенное содержимое области экрана под курсором, это позволяет точно выбрать нужную точку. После выбора точки шестнадцатеричный номер цвета можно скопировать из специального поля — жёлтая стрелка.

Кроме того, FsCapture позволяет более удобно делать снимки экрана и его области, сразу открывая снятое изображение в редакторе, где можно внести необходимые изменения, добавить подписи и т.п. В общем, по проге можно сочинение написать, но лучше скачать её и побаловаться.

Запись опубликована 11 апреля 2010 года. Не так давно в рубрике «Создание сайтов» были опубликованы следующие посты:

Подписка на RSS канал блога RSS подписка (как это?) поможет вам не пропустить ничего интересного на этом блоге.