Інформація про колір. Колір



Скачати 123.73 Kb.
Дата конвертації30.12.2016
Розмір123.73 Kb.

5.2. Графічні аспекти веб-дизайну. Графіка для Веб

5.2. Графіка для Веб

Колір


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

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

Для розуміння утворення комп’ютерних колірних зображень варто розглянути наступні поняття:



  • Роздільність.

  • Глибина кольору.

  • Колірна модель.

Роздільність


Оскільки поняття роздільності вживають стосовно різних об’єктів варто розрізняти:

  • Роздільність зображення.

  • Роздільність екрану.

  • Роздільність друкуючого пристрою (друкованого зображення).

Роздільність зображення


Піксел (pixel скорочення від picture element) — це найменший логічний елемент двовимірного цифрового зображення в комп’ютерній графіці.

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

Чим більше пікселів на одиницю площі містить зображення, тим більш детальним воно є. Максимальна деталізація растрового зображення задається при його створенні і в подальшому не може бути збільшена. Якщо збільшується розмір зображення, то піксели перетворюються на крупні зерна. Ступінь деталізації при цьому не зростає, оскільки для забезпечення плавного переходу між початковими пікселами просто додаються нові, значення кольорів яких обчислюється на підставі кольорів сусідніх пікселів початкового зображення.

Роздільність зображення вимірюється у кількості пікселів на дюйм рpi (pixel per inch) і задається при створенні зображення в графічному редакторі або при отриманні оцифрованого зображення внаслідок сканування.

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

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

Роздільність зображення та його розмір є зворотно пов’язаними між собою. При зменшенні роздільності розмір зображення збільшується і навпаки.

Роздільність екрану


На екрані комп’ютерного монітора зображення утворюється з екранних пікселів. Екранний піксел є мінімальним елементом монітору, якому притаманні всі властивості відтворення кольорів, які доступні для даного монітору.

Кількість пікселів в одному дюймі екрану називається роздільністю монітору. Вона залежить від розміру екрану та розміру зерна і, зазвичай, складає 72 ppi.

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

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

Наприклад, розмір фотографії з роздільністю 144 ppi на екрані монітора з роздільністю 72 ppi буде вдвічі перевищувати реальний розмір, оскільки в кожному дюймі екрану може бути відображено лише 72 з 144 пікселів. При виводі на монітор з роздільністю 120 ppi те ж саме зображення буде дещо більшим за оригінал, оскільки в цьому випадку в кожному дюймі екрану міститися вже 120 з 144 пікселів.

Наступною характеристикою є роздільна здатність екрану і вона залежить від показників відеокарти та поточних налаштувань операційної системи. Вимірюється в кількості пікселів по ширині та висоті екрану. Наприклад, 800х600, 1024х768, 1600х1200. Роздільну здатність можна легко змінювати під особисті потреби користувача. При низькій роздільній здатності екранні піксели стають збільшеними, при високій роздільній здатності навпаки, екранні піксели стають дрібнішими, зображення зменшуються і відповідно збільшується робочий простір екрану.

Якщо зображення готується для перегляду на екрані комп'ютера, то максимальний розмір такого зображення слід вибирати виходячи з мінімально можливої роздільної здатності екрану (в пікселах). Наприклад, якщо відомо, що зображення буде переглядатися на екрані монітора з роздільною здатністю 800x600, то слід обмежитися розміром 800x600 пікселів. При більшому розмірі зображення для його перегляду доведеться користуватися смугами прокрутки або програмно масштабувати зображення перед виводом на екран.

Роздільність принтеру


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

Роздільність принтерів вимірюється в точках на дюйм dpi (dots per inch), визначає якість зображення в заданому розмірі і може бути змінена користувачем. В середньому сучасні струменеві принтери мають роздільність 300-600 dpi, лазерні 600-1200 dpi.


Піксели і глибина кольору


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

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

Тобто, для опису зображення потрібно його розкласти на множину елементів — пікселів і визначити спосіб опису одного піксела, щоб потім описати все зображення як сукупність описів окремих пікселів.

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



  • 1 біт (21 = 2 кольори). Бінарний колір, найчастіше чорний та білий.

  • 1 байт (8-біт) (28 = 256 кольорів). Індексована палітра кольорів, відтінки сірого.

  • 2 байти (16-біт) (216 = 65 536 кольорів). Режим High Color.

  • 3 байти (24-біт) (224 = 16,5 мільйонів кольорів). Режим True Color.

Опис кольору піксела є кодом кольору відповідно до певної колірної моделі. Наприклад, в моделі RGB кожен піксел описується трьома числами, відповідними до яскравості базових кольорів. В моделі CMYK піксел описується чотирма числами. В моделях Lab і HSB піксел описується трьома числами, що відповідають значенням параметрів цих моделей.

Очевидно, чим більшою є глибина кольору, тим більшим буде об'єм вихідного файлу.


Моделі математичного опису кольору


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

Незалежно від того, що є в основі створення моделі, будь-яка колірна модель повинні задовольняти трьом вимогам:



  • Колір в моделі повинен визначатися в спосіб, що не залежить від спроможностей певних конкретних пристроїв.

  • Модель повинна точно і однозначно визначати гамму (діапазон, колірний обхват) заданих кольорів.

  • Модель повинна враховувати особливості сприйняття, поглинання або відбивання гамми заданих кольорів.

  • Існує багато різних моделей опису кольору, але всі вони належать до одного з трьох типів:

  • Адитивні. Засновані на складанні випромінювань окремих зон спектру світла і застосовуються для середовищ, де світло випромінюється (зображення на екрані, сканування).

  • Субтрактивні. Засновані на поглинанні окремих зон спектру світла при відбиванні або пропусканні світла і застосовуються у середовищах, що поглинають світло (забарвлені поверхні, фарбники).

  • Психологічні. Засновані на сприйняття кольорів людиною і пов'язані з особливостями його зорової системи.

Самими поширеними моделями є:


  • RGB — адитивна колірна модель.

  • CMYK — субтрактивна колірна модель.

  • HSB та Lab — психологічні колірні моделі.

Слід пам'ятати, що будь-яке перетворення кольору з однієї моделі в іншу спричиняє втрату або спотворення даних про колір в зображенні.

Модель RGB


Модель RGB є найбільш простою для розуміння і застосовується в пристроях, де світло випромінюється або колір утворюється електронним шляхом: у моніторах, телевізорах, слайд проекторах, сканерах тощо.

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

Для опису кольору в моделі RGB застосовують 3 байти (24 біти=3х8 біт), по одному байту на кожну колірну складову.

Яскравість (інтенсивність) кожного базового кольору може приймати 256 (28) дискретних значень від 0 до 255. Змішування кольорів в різних пропорціях, варіюючи яскравість кожної складової надає 256 x 256 х 256 = 16 777 216 кольорів.

Кожний колір можна представити в закодованому вигляді, що містить значення яскравості трьох колірних складових.

Десяткове і шістнадцяткове представлення кольору


Десяткове представлення — це трійка десяткових чисел, що розділені комами. Перше число відповідає яскравості червоної складової, друге — зеленої, а третє — синьої.

Наприклад, червоний колір: (255,0,0); зелений колір: (0,255,0), синій колір: (0,0,255)

Код кольору в шістнадцятковому представленні має вид 0хХХХХХХ. Префікс 0х вказує на те, що в коді використано власне шістнадцяткове число. Після префіксу зазначено шість шістнадцяткових цифр (0, 1, 2 ..., 9, А, В, З, D, Е, F).

Перші дві цифри — шістнадцяткове число, що представляє яскравість червоної складової, друга і третя пари відповідають яскравості зеленої та синьої складових.

Наприклад, червоний колір: 0xFF0000; зелений: 0x00FF00; синій: 0x0000FF.

Якщо всі складові мають максимальну яскравість (255,255,255 — в десятковому представленні; 0xFFFFFF — в шістнадцятковому представленні), виходить білий колір. Мінімальна яскравість (0, 0, 0 або 0х000000) відповідає чорному кольору.


Змішування базових кольорів


  • Червоний і зелений — за максимальної яскравості утворюють жовтий колір. Зменшення яскравості червоного змінює результуючий колір у бік зеленкуватого, а зменшення яскравості зеленого робить колір оранжевим.

Жовтий колір: 255,255,0 або 0xFFFF00

  • Зелений і синій — за максимальної яскравості надають блакитний колір. Змінюючи пропорції яскравості, можна отримати 65 000 відтінків блакитного, від небесного до темно-синього.

Блакитний колір: 0,255,255 або 0x00FFFF

  • Червоний і синій — за максимальної яскравості надають фіолетовий колір. Зменшення яскравості синього зсуває колір у бік рожевого, а зменшення червоного — у бік фіолетового.

Фіолетовий колір: 255,0,255 або 0xFF00FF

Модель CMYK


Модель RGB добре підходить для моделювання кольорів, що утворюються електронним шляхом, але не є доречною у разі моделювання кольорів для друкованих зображень.

Модель CMYK описує змішування фарб, які використовують для друкованих зображень. В цій моделі теж використовуються три базові кольори: блакитний (Cyan), фіолетовий (Magenta) і жовтий (Yellow). Крім того, застосовується чорний колір (blасК), але про нього буде розказано пізніше. (Зазвичай, абревіатуру CMYK вимовляють, як «цмік» або «смік». В певних джерелах радять вимовляти як «сі-мак»).

Кожен з трьох базових кольорів моделі CMYK утворюється в результаті вилучення з білого кольору одного з базових кольорів моделі RGB. Так, наприклад, блакитний (Cyan) утворюється внаслідок вилучення червоного з білого, а жовтий (Yellow) — вилученням синього.

Cyan = RGB - R = GB = (0, 255, 255);

Yellow = RGB - В = RG = (255, 255, 0);

Magenta = RGB - G = RB = (255, 0, 255).

Оскільки базові кольори CMYK утворюються внаслідок вилучення з білого кольору базових кольорів RGB, їх називають додатковими, бо вони доповнюють основні кольори до білого, а модель CMYK субтрактивною (що віднімає).

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

Змішування кольорів


Змішування кольорів в моделі CMYK є протилежним до змішування складових в моделі RGB. Проте, фарби субтрактивной моделі не є такими чистими, як кольори адитивної моделі. Цим і пояснюються наступні особливості:

  • Блакитний і пурпурний — за максимальної яскравості надають глибокий синій колір з невеликим фіолетовим відтінком. Зменшення яскравості блакитного робить колір пурпурним, а зменшення яскравості пурпурного — середньо-синім (жовта складова відсутня).

  • Пурпурний і жовтий — за максимальної яскравості утворюється суміш яскраво-червоного кольору. Зменшення яскравості пурпурної складової надає оранжевий, а зменшення яскравості жовто-рожевий колір (блакитна складова відсутня).

  • Жовтий і блакитний — яскраво-зелений колір з невеликим відтінком синього. Зменшення яскравості жовтого дає смарагдовий колір, а зменшення яскравості блакитного — салатовий колір (пурпурна складова відсутня).

Модель CMYK використовують для підготовки друкарських зображень. Тут, світло не випромінюється, а поглинається. Чим більше фарби покладено на папір, тим більше світла вона поглинає і менше відбиває. Поєднання трьох основних фарб поглинає майже все падаюче світло, і з боку зображення виглядає майже чорним. На відміну від моделі RGB збільшення кількості фарби приводить не до збільшення візуальної яскравості, а навпаки, до її зменшення.

Представлення кольору


Колір в CMYK описується четвіркою десяткових чисел, кожна з яких визначає відсоток фарби даного кольору.

Наприклад, для отримання кольору «хакі» слід змішати 30% блакитної фарби, 45% пурпурної фарби, 80% жовтої фарби і 5% чорної.

Це позначають або (30,45,80,5) або C30M45Y80K5.

В друкарнях колірні зображення друкують в кілька прийомів. Накладаючи на папір почергово блакитний, пурпурний, жовтий і чорний відбитки, отримують повноколірну ілюстрацію. Тому, готове зображення, що створено на комп'ютері, перед друком розділяють на чотири складові одноколірні зображення. Цей процес називається кольороподілом. Сучасні графічні редактори мають засоби для виконання цієї операції.


Взаємозалежність моделей RGB і CMYK


Основні кольори моделей RGB і CMYK знаходяться в залежності, яку представлено на рисунку.

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

Наприклад, щоб підсилити жовтий (Yellow), слід ослабити синій (Blue). На колі кольорів жовтий розташовано між зеленим (Green) і червоним (Red). Складання цих кольорів надає жовтий (Yellow).

Не всі кольори моделі CMYK можна представити в моделі RGB, і навпаки. У кількісному відношенні колірний діапазон CMYK є меншим за колірний діапазон RGB. Ця обставина є важливою, і має принципове значення, а не обумовлена лише фізичними особливостями монітора, друкуючого пристрою чи фарбників.


Моделі HSB і HLS


Модель HSB засновано на трьох параметрах:

Н — відтінок або тон (Hue).

S — насиченість (Saturation).

В — яскравість (Brightness).

Модель HSB краще за моделі RGB і CMYK, відповідає поняттю кольору, яке використовують професійні художники. Дійсно, в них, зазвичай, є кілька основних фарб, а решта утворюються внаслідок додавання до них білої або чорної фарб. Таким чином, потрібні кольори — це певна модифікація основних кольорів: висвітлення або затемнення. Хоча, художники і змішують фарби, але це вже виходить за рамки моделі HSB.

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

Яскравість розуміється як ступінь освітленості. При нульовій яскравості колір стає чорним. Максимальна яскравість при максимальній насиченості надають найбільш виразний варіант даного кольору. Можна вважати, що яскравість змінюється шляхом додавання чорної фарби. Чим більше чорної фарби додано, тим менше яскравість.

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

В певних графічних редакторах, наприклад, в Adobe FreeHand, використовується модель HLS (Hue, Lightness, Saturation), яка є схожою до HSB. У моделі HLS, на відміну від HSB, замість яскравості застосовано параметр L — освітленість (Lightness). Зменшення освітленості наближає колір до чорного, а збільшення — до білого. Чистий спектральний колір утворюється при освітленості 50 %.

Моделі HSB і HLS є апаратно незалежними і не орієнтовані на жоден технічний пристрій.


Модель Lab


Модель RGB орієнтована в основному на особливості випромінюваного світла (монітор), а CMYK — на особливості світла, що поглинається (принтер).

Колірні діапазони цих моделей не збігаються: RGB добре відтворює кольори в діапазоні від синього до зеленого і дещо гірше — жовті і оранжеві відтінки, а в моделі CMYK бракує багатьох відтінків.

Модель Lab позбавлена таких недоліків. В рамках цієї моделі працюють багато професіоналів комп'ютерної графіки.

Модель Lab засновано на трьох параметрах:



  • L — яскравість (Luminosity)

  • Два колірні параметри — а і b. Параметр а містить кольори від темно-зеленого через сірий до яскраво-рожевого. Параметр b містить кольори від світло-синього через сірий до яскраво-жовтого.

Параметр L ще називають освітленістю, легкістю і навіть світлістю. Поняття яскравості в моделях Lab і HSB не є тотожними. Як і в RGB, змішування кольорів зі шкал а і b дозволяє отримати яскравіші кольори. Зменшити яскравість кольору можна за рахунок параметра яскравості L.

Модель Lab є апаратно незалежною, її колірний діапазон покриває діапазони RGB і CMYK. Графічний редактор Adobe Photoshop при переході від режиму RGB до CMYK використовує Lab як проміжний етап.


Колірний обхват


Величезна кількість різних кольорів, які ми сприймаємо, може бути представлена на екрані монітора і на папері. Проте, монітор не може відтворити в точності всі кольори, які присутні в природі. Наприклад, він погано відтворює чисті блакитний і жовтий кольори. Частину кольорів, що відображаються монітором, можна надрукувати, проте, при друкуванні погано передаються кольори, що мають дуже низьку щільність. Тому, для моделей існує важлива характеристика - колірній обхват або діапазон (Gamut) колірних моделей.

Найбільшим колірний обхват має модель Lab, в ній можна представити практично всі природні кольори, які здатна сприйняти людина. Власне, з цією метою вона і створювалася.


Запис у файл


Файл містить вказівку на колірну модель та кількість пікселів по ширині і висоті, що містить зображення. Відомості про колірну модель, габарити зображення та певні інші відомості містяться в спеціальному розділі файлу, який називається заголовком.

Після заголовку у файлі записуються один за одним коди кольорів (або параметрів колірної моделі) окремих пікселів, зліва направо і зверху вниз. Така структура файлу є досить узагальненою і реалізована у форматі BMP.









База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка