Бери кисть, крась!

п ройдя все трудности составления технического задания и разработки лейаута сайта, вы, наконец-то, добираетесь до пункта "Покрасить эти блоки': Впрочем, о раскраске можно подумать еще на стадии лейаута, но это уже как вам удобнее. Если идея дизайна пришла к вам с уже четко обозначенными цветами, не теряйтесь и красьте! Но иногда бывает мучительно трудно придумать, в какой цветовой гамме сделать дизайн. Особенно это касается строгих корпоративных сайтов, где от цвета зависит, будет ли сайт выглядеть достаточно солидно. С сайтами, которые хотят выглядеть "серьезно, но при этом достаточно свежо и легко': работать, наверное, труднее всего: заказчик не представляет себе других цветовых вариантов, кроме "оттенки серого, синего, металлического", а таких сайтов уже миллионы. Приходится выкручиваться: к синему подбирать дополнительные цвета, оживляющие общий вид, и играть на иллюстрациях. 1 22 Часть II. Ловкость рук Цвет и эмоции Цвет - это такая вещь, которая превращает скучную расчерченную решетку во что-то гораздо более осмысленное, заставляет глаз задерживаться на ярких объектах и особым образом влияет на человека. Поэтому я думаю, что сайты непременно должны иметь какой-то цвет, желательно не просто белый, серый или черный. Как красить? Начнем с того, что цвет в каждой человеческой культуре является символом, обозначающим то или иное состояние. В разных культурах значения цвета могут быть совершенно противоположными. Следующий пункт: для каждого человека цвет ассоциируется с событиями, происходившими в его жизни. Что же делать? На самом деле выход из этой сложной ситуации прост: не думайте о символизме, когда дело касается обычных сайтов. Вы будете искать в цветах особый смысл, возможно, даже аргументируете свой выбор заказчику, но какое дело до символизма посетителю сайта? Чаще всего ваши искания останутся незамеченными. Хотя из каждого правила, как обычно, есть исключения. В некоторых случаях цвет действительно имеет свое, особенное значение. rосударственньlе фпаrи Красный, синий и белый - это Россия. Зеленый, белый и красный - это Италия. Голубой и желтый - Украина. Располагая цвета рядом, так же, как они используются в государственных флагах, вы создаете дополнительные значения. Обратите внимание: на сайтах, которые хотят подчеркнуть свою принадлежиость к той или иной стране, в первую очередь используются цвета государственного флага, разноцветные ленты. Никто не запрещает вам использовать комбинации цветов, которые могут иметься в разных флагах (флагов-то много, а цветов мало), но если вам не нужны дополнительные значения, постарайтесь не ставить цветовые блоки так, чтобы они могли образовать подобие флага, известного основной целевой аудитории сайта. Цвета соqиапьных rpynn Некоторые сочетания цветов, подобно флагам, маркируют определенные социальные группы. Например, сочетание красного, ярко-желтого и зеленого у многих людей совершенно четко ассоциируется с раста-культурой. Повторюсь, одних цветов мало, нужно еще особое их расположение один относительно другого (буквально вплотную), чтобы этот цветовой знак стал опознаваемым. Следующий знак: лента, составленная из полосок всех цветов радуги, кроме голубого. Таким сочетанием могут обозначить себя представители нетрадиционной сексуальной ориентации. И наконец эмо-культура: черный с вкраплениями розового. Это сочетание цветов сравнительно недавно обрело новый смысл, но, возможно, станет таким же Глава 9. Бери кисть, крась! 1 23 каноническим, как и цвета раста-культуры. Если вы рисуете эмо-сайт, вполне можно воспользоваться этой цветовой подсказкой, и сайт будет достаточно четко, буквально с первого взгляда, рассказывать, о чем он. В общем, не считая исключений, о которых я упомянула, старайтесь не загружать себе голову символизмом отдельных цветов наподобие "желтый цвет - это к разлуке': "зеленый - символ жизни и роста" (плесень тоже зеленая, но когда ею покрывается хлеб, ничего хорошего это не означает). Вот если вы художник и пишете картину, тогда есть смысл задуматься о том, что будет символизировать каждый цвет, чтобы через много лет искусствоведам было о чем рассказать, а в веб-дизайне все немного проще. Цветовые штамnы В веб-дизайне, как, впрочем, и в полиграфическом дизайне, уже давно образовались свои цветовые шаблоны: цвета и сочетания, которые (чаще лишь по представлениям самих дизайнеров) должны применяться на сайтах разной направленности. Например, если это женский сайт, то он непременно должен быть раскрашен в мягкие пастельные цвета либо, наоборот, в яркие "карамельные': скажем, розовый и апельсиновый или розовый и салатовый. Сайты, ориентированные на детей и родителей, часто раскрашивают очень пестро, на грани с безвкусицей. Считается, что детский сайт просто обязан быть нарисован с применением всех доступных цветов без учета их сочетаемости. На мой взгляд, здесь нужно знать меру, а достигается это только с опытом. Или еще один любимый ход дизайнеров в той же области: сочетание голубого и розового. Это, кстати, "сигнальные" цвета: помните, раньше младенцам мужского пола покупали все голубенькое, а женского - все розовенькое. Традиция постепенно сходит на нет, так как в магазинах появилась детская одежда и других цветов, но символы остались и продолжают активно использоваться в дизайне. Штамп для спортивных сайтов: динамичные, контрастные цвета, например красный с синим, красный с черным, оранжевый с серым, даже красный с зеленым. А интернет-магазины бытовой техники часто красят в серо-металлические цвета. Тоже своеобразная традиция. Каждый раз, выбирая цвет для сайта, думайте, чем вы руководствуетесь: собственным вкусом и дизайнерским чутьем, осознанием, что именно так будет лучше для выражения идеи, или же расхожими штампами, "потому что все так делают': ЛIOбiiTeJIRM цвета Есть замечательное интернет-сообщество любителей цвета: colourlovers.com. Для дизайнера оно может быть как источником вдохновения, дайджестом новых модных оттенков, так и личной лабораторией цвета. Вы можете поэкспериментировать с 1 24 Часть II. Ловкость рук цветами, их оттенками и пропорциями, поделиться полученной палитрой с участниками сообщества. Это мой любимый сайт о цветовых палитрах, на который просто приятно прийти и посмотреть, как из разных оттенков формируется вполне отчетливое ощущение температуры, вкуса, времени года и эпохи. Цвет - достаточно сложная наука для того, кто раньше никогда о нем не задумывался. Но, как и каждая наука, она вполне постижима, а вкус развивается при просмотре хороших образцов и постоянной практике. Цветовые модепи Цвет - явление волновое, как учили нас в школе на уроках физики. И если я сейчас начну рассказывать вам цветовую теорию так, как ее понимают физики, вам станет скучно. Лучше скажу пару слов о цветовых моделях, для общего развития. Согласно энциклопедии цветовая модель - это совокупность методов и средств, необходимых для представления определенных цветовых пространств на определенных плоскостях. Откройте программу Adobe Photoshop и зайдите в палитру. Слева в ней вы увидите многообразие оттенков, а справа - комбинации букв и цифр. Это модели, с помощью которых может быть выражен цвет. Наиболее популярны сейчас модели RGB (Red, Green, Blue), HSB (Hue, Saturation, Brightness) и СМУК (Cyan, Magenta, Yellow, Кеу). Модепь RGB RGB - главная цветовая модель, используемая при работе на компьютере. Почему именно она? Потому что в телевизорах и компьютерных мониторах для образования одной точки изображения применяются три светящихся цветовых пятна: красное, зеленое и синее. Яркость каждого из них независимо контролируется собственным каналом управления. Эти три цвета стали основой для цветовой модели RGB. RGB - аддитивная цветовая модель. Аддитивной эта модель называется потому, что цвета в ней образуются путем добавления (addition) к черному. Черный в данном случае понимается как отсутствие всякого цвета (R:O, G:O, В:О). Сложение трех основных цветов полной яркости дает белый. Вы можете убедиться в этом сами: откройте палитру Adobe Photoshop, впишите 255 (это максимальное значение яркости) в поля R, G, В - и получится белый цвет. Изображение в модели RGB состоит из трех каналов. При смешении основных цветов, например, синего и красного в равных пропорциях, образуется пурпурный. Смешайте зеленый и красный каналы в своих максимальных значениях - и получите желтый. Цветовая модель RGB имеет более широкий цветовой охват. Это значит, что в ней количество и насыщенность опенков значительно больше, нежели в модели СМУК, поэтому иногда изображения, отлично выглядящие в RGB, значительно тускнеют при переводе в модель СМУК. Глава 9. Бери кисть, крась! 1 25 В веб-дизайне при рисовании макетов пользуются цветовой моделью RGB, причем для указания нужных оттенков в тегах языка HTML или в таблицах стилей CSS код RGВ-цвета переводят в шестнадцатеричную систему счисления. Модепь СМУК Модель СМУК используется в полиграфии. По принципу формирования цвета она прямо противоположна RGB. СМУК - модель субстрактивная, основанная не на сложении цветов, а на их вычитании. Накладывая краску различных цветов на бумагу, мы вычитаем первичные цвета модели из белого. Первичные цвета в СМУК такие: голубой, пурпурный, желтый. Буква "К" в аббревиатуре "СМУК" обозначает, по разным сведениям, 'ЪlасК" ("черный) или "Кеу color" ("ключевой"). Второй вариант кажется более верным: в англоязычных странах именно термином "Кеу Plate" обозначается печатная форма для черной краски. Если в RGB при смешении всех цветов в их максимальном значении яркости вы получите белый, то в СМУК это будет черный. Но есть небольшая оговорка: голубой, пурпурный и желтый цвета сами по себе не дадут угольно-черного цвета, это будет грязно-серый. И вы можете убедиться в этом сами, задав в палитре Adobe Photoshop значения для каналов С, М и У равными 100%. Для получения чистого черного и нужен четвертый канал - К, Кеу или Black. Для удобства печатников черный цвет получают не смешением всех четырех красок, что приводит к удорожанию и усложнению печати, а с помощью только стопроцентной черной краски. Теория qвета Что меня радует больше всего, так это то, что теория цвета - очень тщательно разработанная наука, и сейчас веб-дизайнеру достаточно прочесть какое-нибудь краткое руководство по сочетаемости цветов, чтобы быть в курсе, как следует подбирать цвета для сайта, чтобы их сочетание было приятным глазу. Более того, самые ленивые могут просто скачать программку, которая сама подберет все цвета, основываясь только на одном заданном цвете. Но мы не ищем слишком легких путей, поэтому все, что написано ниже, - жизненно важная информация для уважающего себя дизайнера. rapMOHI1R QBITI Самое главное, чего нужно добиваться при подборе цветов, - это гармония. Понятие это философское, но в пределах одной общности представления о гармонии примерно одинаковы. 1 2& Часть II. Ловкость рук Гармоничное цветовое сочетание может быть одним из двух: мягким либо динамичным. Третьего не дано, ведь все, что за гранью этих определений, либо хаотично, либо монотонно. Динамичная гармония чаще всего наблюдается в произведениях с использованием ярких, чистых цветов без примесей и сильных контрастов. Мягкая гармония предполагает использование приглушеиных оттенков, мягких переходов цветов и разбавление цветов белым или черным. Какие факторы обеспечивают гармонию? Во-первых, тщательно подобранные комбинации цветов (об этом - чуть ниже); во-вторых, контраст по яркости, насыщенности и оттенку. Когда вы говорите "контрастные цвета': чаще всего подразумеваете, что это два абсолютно разных цвета, например синий и красный, черный и белый. Это контраст по оттенку. Но цвета вступают между собой и в другие отношения. Яркость цвета (Brightness) зависит от степени присутствия в цвете черного или белого. Возьмите какой-нибудь цвет. Разбавьте его белым - и его яркость увеличится, добавьте черного - и цвет станет менее ярким, более темным, приглушенным. Это можно сравнить с помещением какого-либо цветного объекта поочередно то под очень яркий свет (например, под мощную фотовспышку), то в тень. Насыщенность цвета (Saturation) - показатель, определяющий, насколько цвет "чистый': т.е. содержит ли он примеси серого. Стопроцентная насыщенность означает исключительно чистый цвет (как в радуге на небе), абсолютно неиасыщенный цвет ахроматический, серый. Между двумя этими величинами - все градации от более насыщенных к менее насыщенным, приглушеиным оттенкам. В гармоничной композиции обязательно должен быть контраст, причем не только по оттенку, но и по яркости и насыщенности. На ил. 2 цветной вклейки показаны шкала оттенков, шкала яркости и шкала насыщенности, а также пример динамичной и мягкой гармонии. Чернь1i 1 6enь1i Начнем с простого. Черный и белый - самые простые цвета. Черный - это ночь, белый - это день. Ребенок, только что пришедший в этот мир, лучше всего реагирует на сочетание очень светлого и очень темного, тогда как остальные оттенки он начинает воспринимать чуть позже. А в некоторых языках вообще нет слов для обозначения других цветов, кроме черного и белого. Таким образом, можно предположить, что освоение человеком цветов началось именно с этих двух. Это ахроматические цвета, т.е. цвета, не содержащие в себе цветовых оттенков. Несмотря на тавтологию это так. В каком-то смысле белый - это просто "свет