Кольорове коло. Системи представлення кольорів. Підбір

контрастних, сумісних, нюансових кольорів.Іїснхологічні аспекти

сприйняття кольору. Текст і фон

Колір. Поруч з формою, шрифтом, текстурою, колір належить до базового будівельного матеріалу у мультимедійному web-дизайні. Незвичайний, ретельно продуманий й збалансований набір кольорів може стати основою чудової композиції - при тому, що інші її аспекти можуть бути звичайними. При виборі кольорів необхідно враховувати візуальні, психологічні аспекти сприйняття інформації та кольорової гами, при цьому дотримуючись універсальних правил дизайну, які нададуть роботам дизайнера професіоналізму. Одним з правил оформлення є наступне: колір не є основним носієм Інформації - Web-сторінка повинна залишатися читабельною і на чорно-білому маніторі (монохромний варіант), і на папері.

Сумісність кольорів. Кольори вибираються за принципами єдності й контрасту. Принцип єдності вимагає, щоб кольори, які використовуються, були якомога ближче один до одного. Спектр кожної окремої композиції зазвичай обмежують невеликою кількістю кольорів (не більше чотирьох), використовуючи кожен» колір для декількох різних елементів (іноді близьких за функціями й оформленням, а іноді й зовсім різних).

Використовуйте мінімум кольорів, але самі кольори при цьому

вибирайте по можливості контрастні (наприклад, світлий відтінок

основного кольору для фону, більш темні — для тексту й більш насичені -.

'f$k декоративних елементів з достатньою мірою контрасту). і ~.Л

Кольорове коло. Якщо спектр згорнути у вигляді трубки, то

отримана фігура буде носити назву кольорового кола (додаток 5). За

допомогою кольорового кола зручно підбирати кольори та маніпулювати

ними. Коло має два основних параметра - відтінок і насиченість. Відтінок

вимірюється у градусах. Нуль і триста шістьдесят градусів відповідає

червоному кольору, від нього й іде відлік. Насиченість означає видиму

яскравість або інтенсивність кольору. І-Ж

Розглянемо особливості кольорового кола за допомогою кола, поділеного на шість рівних сегментів (додаток 7).

Кольори червоний, зелений та синій називаються основними. Жовтий, блакитний та пурпуровий - додатковими або комплиментарними (колір, який більш нагадує фіолетовий, прийнято називати пурпуровим). З кольоровим колом, пов'язані такі особливості:

- кольори, розташовані один проти одного є контрастними. При їх змішуванні виходить білий колір;

- будь-який колір можна отримати змішуючі близькорозташовані до нього кольори. Так, жовтий колір отримується при додаванні червоного та зеленого.

Контрасні кольори. Контрасні кольори знаходяться на протилежних сторонах кольорового кола або розташовуються один від одного на 180° і утворюють білий колір при їх змішуванні. Необхідний додатковий колір можна побудувати у кольоровій моделі RGB або HSB.

Кольорова модель - це формальна або фізична система, призначена для пояснення і передбачення спектральних властивостей світла. В моделі RGB похідні кольори отримуються в результаті додавання або зміщення базових, основних кольорів, що називаються кольоровими координатами. Координатами слугують червоний (Red), зелений (Green) і синій (Blue) кольори. Розглянемо використання моделі RGB для підбору контрастного кольору.

1. Вибираємо будь-який необхідний колір, до якого підберемо

контрастний, наприклад, помаранчевий #FFCC33 (255,204, 51 у RGB).

2. Контрастні кольори при змішуванні утворюють білий колір. Тому, якщо від кожного компонента білого кольору (числа 255) відняти відповідний компонент вибраного кольору, отримаємо його контрастну пару.

3. В результаті математичних операцій маємо такі параметри: 0 (255-255), 51 (255-204) и 204 (255-51). У шістнадцятковій системі маємо колір #0033СС (додаток 7).

Більш простий спосіб підбору контрастних кольорів у моделі HSB. Використовуючи представлення кольору людиною, кожен колір можна -охарактеризувати трьома складовими: тон-насиченість-яскравість (від англ. Hue-Saturation-Brightness тон-насиченість-яскравість).

Розглянемо прийоми визначення кольорів, які поєднуються один з одним за допомогою програми Adobe Photoshop і кольорової моделі HSB.

Зручний опис моделі HSB дають інтерфейсні засоби редактора Photoshop. У додатку 8 показано діалогове вікно Color Picker, що є стандартним засобом синтезу кольору в редакторі. Вертикальна смуга, розташована у середині вікна, представляє чисті варіанти кольору, в термінології системи HSB - хроматичні відтінки. Ліве прямокутне поле показує всі варіанти вибраного кольору. Горизонтальною віссю в ньому є Saturation (Насиченість), а вертикальною - Brightness (Яскравість).

Розглянемо використання моделі HSB для підбору контрастного кольору.

1. Вибираємо необхідний колір (додаток 9), наприклад, #FFCC33 (45, 80, 100 в HSB).

2. Перший параметр, означений буквою Н, є відтінком кольору або кутом на кольоровому колі. Так як контрасні кольори розташовані на колі

"ч»£\

в 180 градусах один від одного, легко отримати необхідний колір додавши (або віднявши) до значення відтінку число 180.

3. Вводимо значення 225 в полі відтінка (45+180) та отримуємо новий колір (225, 80, 100 в HSB). Змінюється лише один параметр.

Нюансові сполучення. Нюансовими кольорами називаються кольори близькі за відтінком, але з різною насиченістю та яскравістю. Перший спосіб підбору кольорів полягає у використанні моделі HSB.

1. Вибираємо будь-який колір, наприклад, темно-синій #000080 (240,

100,50вН8В).

2. Пересуваючи бігунки насиченості та яскравості робимо колір світлшим або темнішим. Відтінок зазвичай залишають незмінним.

3. Отримуємо новий нюансовий колір 240, 20, 100. Приклад використання отриманих кольорів наведений у додатку 10.

Підбір трьох кольорів. Підбір трьох і більше кольорів проводиться аналогічно двом, при цьому відтінки на кольоровому колі розмішуються на однаковій відстані один від одного. Тобто коло необхідно розбити на три рівних сегмента (додаток 11).

Приклад:

1. Перший колір вибираємо самостійно, наприклад, темно-синій #000080 (240, 100, 50 у HSB).

2. Відтінок наступного кольору повинен знаходитись від першого на 120° (36073).

3. Віднімаємо від значення Blue синього кольору число 120. Інші

параметри залишаємо без змін. Отримаємо новий колір зі значеннями 120,

100, 50.

4. Ще раз віднімаємо 120 від значення Blue нового кольору. Отримуємо. 0, й 100,50..■']*>

5. В результаті маємо три кольори.

Якщо необхідно вибрати чотири кольори, то кольорове коло розбивається на чотири частини.

Загальне правило вибору тонів: не можна використовувати кольори, розташовані:

а) близько один до одного на кольоровому колі;

б) на протилежних полюсах кольорового кола (виключенням є пари

кольорів чорний-білий і жовтий-синій).

Найкраще сполучаються один з одним два кольори, розташовані приблизно на відстані чверті кола один від одного. Крім того, два теплих або два холодних кольори краще поєднуються один з одним, ніж кольори з протилежних напівкуль (границя між теплою і холодною областями кольорового кола проходить по горизонталі, відокремлюючи червоний від фіолетового зліва та зелений від блакитного справа).

Правило вибору насиченості-яскравості. Для підсилення взаємодії між кольорами використовують два параметра для об'єднання та один (краще яскравість) для протиставлення.

Сприйняття кольору. Прийнято вважати, що тепле забарвлення наближає об'єкт, робить його візуально більшим й активнішим, привертає до нього увагу, тоді як холодне - віддаляє, заспокоює, переводить об'єкт на задній план композиції.» *;

Чистими, насиченими тонами кола рекомендується користуватись для другорядних потреб. Цікаву композицію на основі одного з таких кольорів створити неможливо.

Колір сприймається по-різному в залежності від того, яку площу й форму він займає й які кольори його оточують. Для невеликих за розміром елементів доцільно вибирати більш яскраві кольори, для того, щоб показати красу будь-якого темного, слабконасиченого кольору, необхідна достатня площа (наприклад, фон всієї сторінки).

Текст і фэн. Кольорові рішення Web-сторінки можна розділити на дві групи: з темним текстом на світлому фоні та зі світлим текстом на темному фоні. Вимогою для фону й тексту є достатній контраст між ними для забезпечення довготривалого, комфортного читання. Контраст повинен виражатись у різній яскравості кольорів, так як різниця тільки у тоні або насиченості не дозволить свідомості розрізняти текст й фон з достатнім автоматизмом. Фоновий колір повинен' бути насиченим. Насиченість кольору тексту може при цьому підтримувати насиченість фону, а може контрастувати з нею.

Контрольні питання

1. Охарактеризуйте об'єкти векторної та растрової графіки.

2. Назвіть загальні етапи створення Web-графіки.

3. Назвіть графічні редактори для створення векторної, растрової графіки.

4. Який формат є оптимальним для збереження повнокольорових зображень, наприклад, фотокарток, для розміщення їх на web-сторінці?

5. Який формат є оптимальним для збереження зображень з прозорим фоном?

6. У якому форматі при стисканні зображення можна визначити кількість кольорів?

7. Який формат дозволяє зберігати і зображення з фіксованою палітрою, і повнокольорові зображення?

8. Визначте максимальний об'єм зображень на web-сторінці, чим він обмежується?

9. Типи фонів web-сторінки?

10. Визначення, призначення та особливості дизайну логотипу.

11. Характеристика та призначення кольорового кола у web-дизайні. Основні та комплиментарні кольори.

12. Характеристика кольорових моделей RGB та HSB.

13. Отримання контрасних кольорів у кольорових моделях RGB та HSB.

14. Отримання нюансових сполучень у кольоровій моделі HSB

15. Отримання трьох (чотирьох) гармонійних кольорів у кольорових моделях RGB та HSB.

ТЕМА 6. Кольорове оформлення сторінок засобами HTML. WEB-графіка План лекції

1. Атрибути BODY для кольорового оформлення Web-сторінок.

2. Оформлення таблиць.

3. Використання графіки в HTML.

Ключові слова: дизайн сторінки, атрибути тега <body>, атрибути тегу <table>, атрибути тегу <tr>, атрибути тегу <td>.

Список рекомендованої літератури

Вин Д. Искусство web-дизайна: Самоучитель.- СПб.: Питер, 2002.-

224с: ил.»

Гультяев А.К. WEB-дизайн от MACROMEDIA: Практическое

пособие.-СПб.: КОРОНА принт, 2001.-480с: ил.

Каллажан I. Ваша Web-страница. Проблемы и решения: Практ.

пособие.- Пер. с англ.- М: ЭКОМ, 2002.- 432с: ил.

Федэрчук А. Как создаются Web-сайты: краткий курс- СПб: Питер,'.

2000.-224с: ил. '

http://www.citforum.ru/internet/thml/colors.shtml/.

http://www.webmasterpro.com.ua/.

Не нашли, что искали? Воспользуйтесь поиском: