Секрети web-графіки

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


Відомо, що для отримання будь-якого кольору досить змішати у відповідних пропорціях всього три: червоний (Red), зелений (Green) і синій (Blue) – в англійській абревіатурі RGB. Цей принцип широко застосовується в кольорових фотоплівках, де, змінюючи ступінь засвічення червоного, зеленого і синього шарів, отримують той чи інший колір. З кольорового кіно принцип RGB перейшов до кольорового телебачення, де кольори виходять при поєднанні червоного, зеленого і синього променів різної інтенсивності. Природно, що з екранів телевізорів він перекочував на екрани комп'ютерних моніторів. Так як кінцевий колір є результатом підсумовування, то і називається він адитивним (additive color).


Проте при підготовці зображень на комп'ютері використовується і протилежний спосіб змішування – віднімання (subtractive color). При цьому відбувається видалення з білого, відповідно, негативів вищезгаданих кольорів – блакитного (Cyan), пурпурного (Magenta), жовтого (Yellow) і, для отримання кращого контрасту, негативу білого – чорного (blaK). В англійській абревіатурі – CMYK. Даний спосіб використовується, насамперед, для підготовки зображення до друку на папері і в Web практично не застосовується. Нас же він цікавить остільки, оскільки він взагалі існує.


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


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


Глибина кольору визначається кількістю використовуваних бітів на піксель (одиничний елемент, можна сказати, "атом" зображення). У принципі, глибина кольору, а відповідно, і кількість квітів у палітрі, може бути як завгодно великим. Але не варто забувати, що "все добре в міру!". Людське око хоч і унікальний інструмент для роботи з колірною гамою, але має кінцеву роздільну здатність (можливість розрізняти) за кольорами. Крім того, необхідно враховувати і швидкість обрахунку великого обсягу зображення (я не кажу про великі розміри файлів – про це трохи пізніше) комп'ютером, і можливості монітора при великій глибині кольору. Звідси приходимо до максимуму – 24 біта на піксель (8 біт на кожен колір в RGB) або 224 = 16,8 млн. квітів у палітрі. Однак не завжди доцільно використовувати "повну" палітру (True color) при підготовці зображення для Web.


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


Як вже зазначалося, не завжди доцільно, використовувати велику кількість кольорів у зображенні. У режимі індексованих кольорів (index color) кольору формуються не традиційним змішуванням трьох "чистих" – Кожного пікселя зображення присвоюється індекс (звідси й назва) кольору в палітрі. Причому кількість їх може бути різним, але не більше 256. Природно, чим менше квітів у палітрі, тим менше і об'єм файлу зображення.


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


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


Принцип побудови растрових зображень заснований на кінцівки роздільної здатності ока, коли при зближенні двох точок, око перестає їх розрізняти. Згадайте малюнки, створювані на зорі комп'ютерних технологій за допомогою ASCII-символів, які можна було розглянути тільки з деякої відстані. Растрове зображення можна представити як масив пікселів, кожен з яких має свій колір. Відповідно, растр – представлення зображення (комп'ютер передає так будь-яку інформацію), висловлюючись мовою математики, методом диференціювання (поділу безперервності на елементарні відрізки). Саме з принципу подання растрового зображення і виникають його недоліки. Так, для зображення 300? 200 пікселів при трьох байтах на піксель для RGB розмір файлу буде 300? 200? 3 = 180 Кбайт. Погодьтеся, не кожен захоче чекати завантаження такого зображення, тим більше якщо воно не одне. Крім того, будь-яка елементарна одиниця, будь то атом у розумінні стародавніх греків або піксель в нашому розумінні, в принципі, неподільна. Звідси неможливість масштабування растрового зображення. Спробувавши збільшити таку картинку раз отак в 10, єдине, що можна буде побачити, – нагромадження кольорових квадратиків в стилі раннього авангарду, зрозуміти зміст якого можна буде тільки кроків з п'яти (згадайте приклад з ASCII-символами) і те, якщо дозволить екран монітора.


Переваги растра – це пряме продовження його недоліків. Тільки в ньому можна отримати повний доступ до кожного пікселя зображення, змінити його яскравість, тон або насиченість, поміняти біле на чорне. Саме на цьому засновані численні графічні фільтри, що дозволяють зробити зображення розмитим або, навпаки, більш різким, більш-менш контрастним, тонувати. Растрові формати використовуються при скануванні і захопленні зображення з екрану. Растрові графічні редактори набагато частіше використовуються для редагування зображень, ніж для їх створення, тому досить мирно уживаються Corel Draw і PhotoShop. Ще й як важливу особливість треба відзначити, що практично всі графічні броузери розуміють растрові зображення без модулів (plug-in). Крім того, практично будь-який векторний малюнок швидко і без спотворень можна перевести в растр. Зворотною ж сили цей закон не має.


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


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


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


Але при всьому різноманітті графічних форматів для представлення зображень в Web іспользуeтся мале їх кількість. Основним обмежувачем тут виступає розмір файлу. А тому вибір формату при підготовці зображення для Web визначається оптимальним співвідношенням двох взаємовиключних параметрів: розмірів зображення й обсягу файлу. Однак з теорії імовірності відомо, що більшість схем подання інформації мають ту чи іншим ступенем надмірності. Наприклад, складаючи конспект на лекціях, ми користуємося такою собі системою скорочень слів і фраз, не втрачаючи при цьому сенсу змісту. Цей принцип покладений в основу більшості систем стиснення інформації, в тому числі і форматів графічних файлів, що використовуються в Web. Однак при однаковому принципі алгоритми його реалізації розробляються різними людьми, а тому мають досить істотні відмінності між собою. Більш того, не варто забувати, що кожен формат має й інші особливості, тому при його виборі слід враховувати насамперед виконання малюнка.


GIF (Graphics Interchange Format, формат взаємообміну графікою) розроблений CompuServe Incorporated, остання версія GIF-89a. Спочатку, як можна зрозуміти з назви, цей формат розроблявся для передачі графічної інформації в потоці даних, а тому, на відміну від інших, представляє собою послідовну організацію, а не довільну, що дозволяє використовувати мінімум ресурсів процесора при його розпакування. Для компресії файлів GIF використовує LZW-алгоритм стиснення, або, як його ще називають, стиснення без втрат, при цьому він найбільш ефективний при великих однотонних областях з чіткими кордонами. А так як сканування зображення відбувається по горизонталі, то і стиснення буде більш ефективно при великих горизонталях таких областей. Однак GIF не здатний зберігати неіндексовані зображення, то Тобто може відображати не більше 256 кольорів. Ця обмеженість формату не дозволяє домогтися плавного переходу від одного кольору до іншого, що особливо помітно при використанні градієнтів і размивок. Можна, звичайно, використовувати прийом "дифузія", але ефект "зернистості", одержуваний при цьому, виглядає, швидше, як стилізація, а тому не завжди виправданий в загальному контексті сайту. Крім того, при використанні дифузії збільшується неоднорідність зображення, що веде до зниження ефективності компресії. Зворотною стороною обмеженості палітри в GIF може служити її гнучкість. Змінюючи розмір таблиці, а, отже, і кількість квітів в ній, web-дизайнер отримує в свої руки прекрасний інструмент для регулювання співвідношення якість зображення / розмір файлу. Так, зменшуючи в зображенні розміром 100? 100 пікселів кількість кольорів з 256 (8 біт на піксель) до 128 (7 біт на піксель), отримуємо 100? 100? 8 – 100? 100? 7 = 10 000 біт економії. Ще однією особливістю, введеної в останню версію формату, є створення прозорих областей у зображеннях, що відкриває цікаві можливості у web-дизайні. "Потокове" природа GIF, відносно малі розміри його файлів, можливість компресії за рахунок використання прозорих областей в кадрах зробили його прекрасним інструментом для створення анімації в Web. Використання GIF доцільно, перш за все, для так званих плоскоцветних зображень з чітко позначеними кордонами переходів між кольорами, а також малорозмірних зображень типу кнопок, превьюшних картинок і т. п.


JPEG (Joint Photographic Experts Group). Розроблений групою експертів по фотографії (що видно з назви) під егідою ISO (Міжнародна організація по стандартам). Взагалі цей формат досить унікальний тим, що використовує алгоритм стиснення, що відрізняється від застосовуваних у всіх інших графічних форматах, – стиснення з втратами. Цей алгоритм раніше використовувався на телебаченні у схемі телевізійної трансляції США (NTSC). Заснований він на все тій же обмеженості людського зору, нездатності очі не помічати деякі перешкоди у відновленому зображенні. На сьогодні цей алгоритм є одним з найефективніших (коефіцієнт стиснення досягає 1:100), проте він не дуже добре обробляє зображення з малою кількістю квітів і різкими кордонами. Взагалі JPEG можна назвати протилежністю GIF. Він дозволяє відображати 24-бітову палітру, тобто всі 16,8 млн. квітів, що дає можливість відображати градієнти з фотографічною точністю, але при цьому не може мати прозорих областей. Однак цей формат таїть в собі одну особливість, яку не можна не враховувати. При повторному збереженні зображення в JPEG він повторно запускає алгоритм стиснення, природно, з погіршенням якості. Тому зберігати зображення в ньому слід тільки після остаточної обробки.


Обидва растрових формату, і GIF, і JPEG, підтримуються всіма графічними броузерами "за замовчуванням" і можуть бути оброблені в більшості графічних редакторів. Вибір між форматами визначається перш все особливостями конкретної картинки, і зробити його іноді буває можливо тільки шляхом експерименту.


Однак і векторні формати все частіше звертають на себе увагу web-дизайнерів. Останнім часом дуже популярним став формат Shockwave Flash, розроблений фірмою Macromedia. Володіючи такими перевагами векторних форматів, як масштабованість і відносно невеликий об'єм файлу, він все-таки не є суто графічним. Інструментарій для малювання в програмі Macromedia Flash Direct ближче до растрових редакторам, ніж до векторних, а здатність створювати анімації, озвучувати їх, примушувати реагувати на переміщення миші і здатність працювати з гіперпосиланнями роблять Flash схожим на мультимедійний формат. В якості окремих елементів сайту Flash-заставки використовуються в основному як інтерактивні банери в деяких рекламних мережах. Такого виду банерів пророкують велике майбутнє через їх більшої можливості впливати на користувачів Мережі, ніж класичних, виконаних в GIF. Однак набагато частіше цей формат знаходить застосування для створення цілої сторінки або більшої її частини (класичним прикладом, на мій погляд, є "Діснеєвський" сайт {http://www.disney.com/}).


Каменем спотикання для Flash є наявність додаткового модуля для його перегляду, який хоч і поширюється безкоштовно, але при вазі 0,24 М і необхідності завантаження через Мережу може відбити бажання переглядати Flash-заставки. Але поява вбудованого модуля вже в 4.5 версії "Коммунікатора" і обіцянки Microsoft зробити аналогічне і в IE 5.0 + може цілком висунути Flash в лідери серед графічних форматів для Internet і трохи змінити саме уявлення про web-дизайні.


Не залишилися забутими і тривимірні об'єкти. Для їх створення в Інтернеті в листопаді 1994 року відбулася презентація VRML 1.0 (Virtual Reality Modeling Language – мова моделювання віртуальної реальності). Остання версія VRML 2.0 дозволяє створювати складні віртуальні світи зі звуковими ефектами. Для написання файлів цього формату може бути досить простого текстового редактора (подібно HTML, вони не вимагають подальшої компіляції), але існують також спеціальні програми, які допомагають цей процес візуалізувати й автоматизувати. Крім того, деякі 3D-пакети підтримують формат VRML 2.0. Для перегляду віртуальних світів необхідні додаткові модулі, включені до складу останніх версій NC і IE. Але при всій своїй привабливості 3D-світи поки ще не знайшли широкого застосування. Основними недоліками є неможливість вбудовування таких світів в HTML-сторінку і, відповідно, "переплетення" із загальним дизайном сайту, на відміну, наприклад, від Flash. Інший неприємною особливістю є досить велика кількість обчислювальних ресурсів комп'ютера для якісного рендеринга (візуалізації) тривимірної сцени.


Говорячи про графік в Web, як правило не згадують про шрифти як графічних об'єктах. Пов'язано це насамперед з тим, що до недавнього часу в HTML-сторінках передбачалася досить обмежена можливість управління параметрами шрифтів. Але вже в специфікації CSS level2 вводиться поняття вбудовування шрифтів, що відкриває можливість використовувати не тільки стандартні. Існуючі програми дозволяють створювати навіть символьні шрифти, отримуючи замість літер монохромні масштабовані зображення. Але і цю ідею не обійшла "війна браузерів". Різна реалізація "підвантажуваних" шрифтів в NC і IE, на жаль, не дозволяє використовувати ці можливості в повній мірі.


Звичайно, наведені тут міркування не можуть охопити весь океан під назвою "web-графіка". Але починаючи будувати будинок, необхідно знати дещо і про цеглинах. І я думаю, що мій перший цегла не буде зайвим при будівництві вашого сайту.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*