Растрова графіка.. Формування растрового зображення Тема 7. Растрова графіка. Растрова графіка (bit-mapped graphics, raster graphics) – графічне зображення, - презентация

1 Растрова графіка.

2 Формування растрового зображення Тема 7. Растрова графіка. Растрова графіка (bit-mapped graphics, raster graphics) – графічне зображення, яке складається з набору різнокольорових точок (пікселів), розташованих у рядках та стовпцях. На кожний піксель надається певна кількість біт, в яких міститься інформація про характеристику кольору, відповідно до обраної схеми кольорів. На принципах растрової графіки побудована основа роботи монітора та лазерних і струминних принтерів. Якість растрового зображення залежить від розміру пікселів. При сильному збільшенні чіткого растрового зображення можна побачити набір квадратиків різного кольору.

3 Глибина кольору Тема 7. Растрова графіка. Глибина кольору – постійна характеристика певного зображення. Вона визначає кількість можливих комбінацій інтенсивностей різних каналів в зображенні як деякий ступінь двійки. Наприклад, для повнокольорового зображення RGB кількість кольорів дорівнює 256*256*256= =2 24 В такому випадку кажуть, що глибина кольору дорівнює 24 біт. Якщо до нього додати ще альфа-канал (256 рівнів прозорості), то вийде 2 32 – 32-бітний колір. При цьому кількість можливих кольорів залишається рівною Для чорно-білого зображення в режимі Grayscale (відтінки сірого) глибина кольору дорівнює 8 біт (2 8 =256). Таким чином, для растрової графіки глибина кольору визначає кількість інформації, необхідної для опису кольору одного пікселя (якщо не використовується стиснення).

4 Формати растрових графічних файлів Тема 7. Растрова графіка. BMP - це формат графічного редактора Paint. В ньому не застосовується стиснення. Він добре підходить для збереження дуже маленьких зображень - таких як іконки на робочому столі. Великі зображення в цьому форматі займають дуже багато місця. GIF - формат, в якому використовується алгоритм стиснення без втрат інформації LZW. Максимальна глибина кольору - 8 біт (256 кольорів). В ньому також є можливість запису анімації. Підтримує прозорість пікселів (дворівнева – повна прозорість, або повна непрозорість). Даний формат широко використовується при створенні Web-сторінок. Його вигідно застосовувати для зображень з малою кількістю кольорів та чіткими границями (наприклад, для текстових зображень).

5 PNG - розроблений з метою замінити формат GIF. Використовує алгоритм стиснення Deflate без втрат інформації (удосконалений LZW). Максимальна глибина кольору – 48 біт. Підтримує канали градієнтних масок прозорості (256 рівнів прозорості). PNG - відносно новий формат, і тому ще не дуже розповсюджений. Найчастіше використовується у Web- дизайні. Нажаль, навіть в деяких сучасних браузерах (таких, як Internet Explorer 6) відсутня підтримка прозорості PNG і тому не рекомендується використовувати прозорі PNG зображення на Web-сторінках. JPEG(JPG) - формат, який використовує алгоритм стиснення з втратами інформації, який дозволяє зменшити розмір файлу в сотні раз. Глибина кольору - 24 біт. Не підтримується прозорість пікселів. При сильному стисненні в області різких границь зявляються дефекти. Формат JPEG добре застосовувати для стиснення повнокольорових фотографій. Враховуючи, що при повторному стисненні відбувається подальше погіршення якості, рекомендується зберігати в JPEG тільки кінцевий результат роботи. JPEG широко використовується при створенні Web- сторінок, а також для збереження великих колекцій фотографій. PNG - розроблений з метою замінити формат GIF. Використовує алгоритм стиснення Deflate без втрат інформації (удосконалений LZW). Максимальна глибина кольору – 48 біт. Підтримує канали градієнтних масок прозорості (256 рівнів прозорості). PNG - відносно новий формат, і тому ще не дуже розповсюджений. Найчастіше використовується у Web- дизайні. Нажаль, навіть в деяких сучасних браузерах (таких, як Internet Explorer 6) відсутня підтримка прозорості PNG і тому не рекомендується використовувати прозорі PNG зображення на Web-сторінках. JPEG(JPG) - формат, який використовує алгоритм стиснення з втратами інформації, який дозволяє зменшити розмір файлу в сотні раз. Глибина кольору - 24 біт. Не підтримується прозорість пікселів. При сильному стисненні в області різких границь зявляються дефекти. Формат JPEG добре застосовувати для стиснення повнокольорових фотографій. Враховуючи, що при повторному стисненні відбувається подальше погіршення якості, рекомендується зберігати в JPEG тільки кінцевий результат роботи. JPEG широко використовується при створенні Web- сторінок, а також для збереження великих колекцій фотографій.

6 Формати растрових графічних файлів Тема 7. Растрова графіка. TIFF - формат, спеціально розроблений для сканованих зображень. Може використовувати алгоритм стиснення без втрат якості інформації LZW. Дозволяє зберігати інформацію про шари та профілі кольорів (ICC-профілі) і каналах звязку. Підтримує всі моделі кольорів. Апаратно незалежний. Використовується в видавничих системах, а також для переносу графічної інформації між різними платформами (з PC на Macintosh, наприклад). PSD - формат графічного редактора Adobe Photoshop. Використовує алгоритм стиснення без втрат інформації RLE. Дозволяє зберегти всю інформацію, яка створюється в цій програмі. Крім того, в звязку з популярністю Photoshop, даний формат підтримується практично всіма сучасними редакторами компютерної графіки. Його зручно використовувати для збереження проміжного результату при роботі в Photoshop і інших растрових редакторах. RIFF - формат графічного редактора Corel Painter. Дозволяє зберігати всю інформацію, яка створюється в цій програмі. Його варто використовувати для збереження проміжного результату при роботі в Painter.

7 Модель кольору RGB Тема 7. Растрова графіка. Спосіб розподілу кольору на складові називається моделлю кольору. В компютерній графіці використовуються три моделі кольорів: RGB, CMYK и HSB. Найбільш розповсюдженим способом кодування кольору вважається модель RGB. В цьому способі кодування будь-який колір представляється у вигляді комбінації трьох кольорів: Червоного (Red), Зеленого (Green) і Синього (Blue), взятих з різною інтенсивністю. Інтенсивність кожного з трьох кольорів - це один байт (число в діапазоні від 0 до 255), який добре представляється двома 16- ричними цифрами (числом від 00 до FF). Таким чином, колір зручно записувати трьома парами 16- ричних цифр, як це прийнято, наприклад, в HTML-документах. Чим більше значення байта складової кольору, тем яскравіший цей колір. При накладання однієї складової на іншу яскравість сумарного кольору також збільшується.

8 Модель кольору CMYK Тема 7. Растрова графіка. Модель кольору CMYK відповідає малюванню фарбами на паперовому листі та використовується при роботі з відображеним кольором, тобто для підготовки документів до друку. Складовими кольору цієї моделі є кольори: блакитний (Cyan), ліловий (Magenta), жовтий (Yellow) і чорний (Black). Ці кольори утворюються в результаті віднімання основних кольорів моделі RGB з білого кольору. Чорний колір задається окремо. Збільшення кількості фарби призводить до зменшенню яскравості кольору.

9 Модель кольору HSB Тема 7. Растрова графіка. Системи кольорів RGB и CMYK повязані з обмеженнями, які накладає апаратне забезпечення (монітор компютера у випадку RGB и типографські фарби у випадку CMYK). Модель кольорів HSB – найзручніша для людини, тобто вона добре співвідноситься з моделлю сприйняття кольору людиною. Компонентами моделі HSB є: тон (Hue); насиченість (Saturation); яскравість кольору (Brightness). Тон - це конкретний відтінок кольору. Насиченість характеризує його інтенсивність або чистоту. Яскравість залежить від долі чорного кольору, доданого до даного кольору. Значення кольору вибирається як вектор, що виходить з центру кола. Точка в центрі відповідає білому кольору, а точки по границі кола - чистим кольорам. Напрямок вектора визначає відтінок кольору і задається в кутових градусах. Довжина вектора визначає насиченість кольору. Яскравість кольору задають на окремій осі.

10 Модель кольору Grayscale Тема 7. Растрова графіка. Режим Grayscale - чорно-білий, в ньому є інформація тільки про рівні чорного кольору. Нуль відповідає білому кольору, чорному, решта – градації сірого: Єдиний канал Grayscale відповідає чорно-білому зображенню. Окрім чорно-білих зображень Grayscale також використовується при створенні різних ефектів, масок прозорості, альфа каналів і при роботі з виділенням. Також, будь-який канал кольору може бути представлений, як чорно- білий.

11 Стиснення растрової графіки Тема 7. Растрова графіка. Іноді характеристики растрового зображення записують в такій формі: 1024x768x24. Це означає, що ширина зображення дорівнює 1024 пікселям, висота пікселям і глибина кольору дорівнює x768 - робоча роздільна здатність (щільність) 17 дюймових моніторів. Таким чином, що розмір нестиснутого зображення з такими параметрами буде рівний 1024*768*24 = байт. Це 18 мегабайт - дуже багато для одного малюнку, особливо якщо потрібно зберігати декілька тисяч таких малюнків - це не так вже багато за комп'ютерними мірками. От чому комп'ютерну графіку використовують майже завжди в стислому вигляді. RLE (Run Length Encoding) - метод стиснення, що полягає в пошуку послідовностей однакових пікселів в растровому зображенні ("червоний, червоний,..., червоний" записується як "N червоних"). LZW (Lempel-Ziv-Welch) - складніший метод, шукає фрази, що повторюються, - однакові послідовності пікселів різного кольору. Кожній фразі ставиться у відповідність деякий код, при розшифровці файлу код заміщається початковою фразою. При стисненні файлів формату JPEG (з втратою якості) зображення розбивається на ділянки 8x8 пікселів, і в кожній ділянці їх значення усереднюється. Усереднене значення розташовується в лівому верхньому кутку блоку, решта місця займається меншими по яскравості пікселями. Потім більшість пікселів обнуляються. При розшифровці нульові пікселі одержують однаковий колір. Потім до зображення застосовується алгоритм Хаффмана. Алгоритм Хаффмана заснований на теорії вірогідності. Спочатку елементи зображення (пікселі) сортуються по частоті, з якою вони зустрічаються. Потім з них будується кодове дерево Хаффмана. Кожному елементу зіставляється кодове слово. При збільшенні розміру зображення до нескінченності досягається максимальність стиснення. Цей алгоритм також використовується в архіваторах. Стиснення застосовується і для векторної графіки, але тут вже немає таких простих закономірностей, оскільки формати векторних файлів достатньо сильно розрізняються за змістом.

12 Графічні редактори для роботи з растровою графікою Тема 7. Растрова графіка. Програми для створення простих растрових графічних зображень: Paint Програми для простого редагування растрових графічних зображень: Microsoft Photo Editor Microsoft Picture Manager Програми для професійного створення та редагування растрових зображень: Adobe PhotoShop Corel PhotoPaint Gimp

13 Інструменти Photoshop Тема 7. Растрова графіка. Marquee Tools (M) Rectangular Marquee Tool - виділяє прямокутну область Elliptical Marquee Tool - виділяє еліптичну область Single Row Marquee Tool - виділяє однопіксельний рядок Single Column Marquee Tool - виділяє однопіксельний стовпець Move Tool (V) - переміщає шар або виділену область. Lasso Tools (L) Lasso Tool - ласо, виділяє область "від руки Polygonal Lasso Tool - полігональне ласо, виділяє відрізками ламаної Magnetic Lasso Tool - магнітне ласо, виділяє по контрастному краю Magic Wand Tool (W) - чарівна паличка, виділяє діапазон кольорів Crop Tool (C) - ділянка, обрізання зображення - викидає частину зображення за межею вибраної ділянки Slice Tools (K) Slice Tool - ножик, розрізає зображення на прямокутні шматочки Slice Select Tool - інструмент для вибору шматочків Healing Tools (J) Spot Healing Brush Tool - ледачий пластир, прибирає дефекти в зображенні - з'явився в Photoshop CS2 Healing Brush Tool - пластир, клонує зображення з урахуванням яскравості Patch Tool - латочка, клонує зображення з урахуванням яскравості; є вибір форми латочки Red Eye Tool - червоне око, усуває ефект червоних очей - з'явився в Photoshop CS2

14 Інструменти Photoshop Тема 7. Растрова графіка. Brush Tools (B) Brush Tool - кисть, потрібна щоб малювати Pencil Tool - олівець, майже як кисть, але менше настройок і край мазка без згладжування Color Replacement Tool - заміна кольору, перефарбовує зображення Stamp Tools (S) Clone Stamp Tool - що клонує штамп, клонує з вказаної частини зображення Pattern Stamp Tool - візерунковий штамп, клонує з вибраного узору History Tools (Y) History Brush Tool - гроно історії, клонує зображення з вибраної стадії Art History Brush Tool - художнє гроно історії, як гроно історії + додає ефект мазків Eraser Tools (E) Eraser Tool - гумка, стирає в прозорість (для шару) або малює кольором заднього плану Background Eraser Tool - фонова гумка, стирає діапазон кольорів (з напівпрозорою) Magic Eraser Tool - магічна гумка, стирає діапазон кольорів (без напівпрозорої) Gradient Tools (G) Gradient Tool - градієнт, створює градієнтні заливки Paint Bucket Tool - відерко з фарбою, створює однорідні і візерункові заливки Blur Tools (R) Blur Tool - розмитість, розмиває зображення Sharpen Tool - чіткість, підсилює контраст меж в зображенні Smudge Tool - зрушення, змащує (зрушує пікселі) зображення у напрямі перетягання.

15 Інструменти Photoshop Тема 7. Растрова графіка. Dodge Tools (O) Dodge Tool - освітлення, робить зображення світліше за Burn Tool - пропалення, робить зображенні темніше Sponge Tool - уменьшает/увеличивает насиченість Path Selection Tools (A) Path Selection Tool - вибір векторних кривих цілком Direct Selection Tool - вибір ключових точок Type Tools (T) Horizontal Type Tool - горизонтальний текст, створює горизонтальні текстові рядки або колонки Vertical Type Tool - вертикальний текст, створює вертикальні текстові рядки або колонки Horizontal Mask Type Tool - горизонтальна текстова маска, створює горизонтальне виділення за формою тексту Vertical Mask Type Tool - вертикальна текстова маска, створює вертикальне виділення за формою тексту Pen Tools (P) Pen Tool - ручка, створює криві Безє Freeform Pen Tool - ледача ручка, малює векторні криві від руки Add Anchor Point Tool - додавання ключових точок Delete Anchor Point Tool - видалення ключових точок Convert Anchor Point Tool - перетворення ключових крапок (у інші типи)

16 Інструменти Photoshop Тема 7. Растрова графіка. Shape Tools (U) Rectangle Tool - малює векторні прямокутники Rounded Rectangle Tool - малює векторні прямокутники з округляючими краями Ellipse Tool - малює векторні еліпси Polygon Tool - малює векторні багатокутники і зірки Line Tool - малює векторні відрізки прямих Custom Shape Tool - малює довільні векторні форми Note Tools (N) Notes Tool - додає коментарі до зображення у вигляді стікеров Audio Annotation Tool - додає звукові коментарі до зображення Eyedropper Tools (I) Eyedropper Tool - піпетка, бере колір із зображення або екрану Color Sampler Tool - колірний зразок, бере до 4 кольорів одночасно, може брати усереднений колір Measure Tool - лінійка, вимірює відстані в зображенні Hand Tool (H) - рука, переміщає зображення. Тимчасове перемикання - клавіша пропуск (Space). Zoom Tool (Z) - лупа, масштабує зображення. Тимчасове перемикання: клавіші Ctrl + пропуск - збільшення, Alt + пропуск - зменшення.

17 Тема 8. Векторна графіка.

18 Векторна графіка Тема 8. Векторна графіка. ВЕКТОРНА ГРАФІКА (vector graphics). Метод створення зображень у вигляді сукупності ліній. Кожна лінія малюнка представляється відрізками прямих (векторами) і відрізками стандартних геометричних кривих, що сполучаються з ними. Для визначення форми і розташування відрізка використовуються математичні описи. У. р. застосовується в програмах малювання, які працюють з малюнком як з сукупністю форм, а не як з групою крапок. Малюнки, виконані методами В. р. компактніші при зберіганні, допускають точне масштабування і не залежать від роздільної здатності графічних пристроїв. Векторна графіка представляється за допомогою математичних кривих. У певних випадках такий спосіб набагато зручніше і компактнєє. Наприклад, для опису прямої лінії потрібно всього лише задати положення її початку і кінця, а також її товщину і колір - всього 4 числа. Будь-які картинки можна представити за допомогою векторної графіки, різниця буде лише в тому, наскільки складними будуть математичні формули, які її складають. Це означає, що при перевищенні деякої межі складності векторна графіка займатиме більше місця в пам'яті комп'ютера або довше розраховуватиметься. Векторна графіка складається з об'єктів, які описуються за допомогою опорних точок, сполучених так званими кривими Безье. Кожен об'єкт знаходиться на окремому шарі, зовнішні шари затуляють внутрішні (як аплікація). Будь-який об'єкт може бути відредагований незалежно від інших. Окрім цього об'єкти можна всіляко деформувати, розтягувати і повертати без втрати якості. От як виглядає збільшена векторна картинка: При перетворенні зображення фотографічної якості у векторну графіку воно звичайно або втрачає детальність і безліч кольорів, або займає значно більше місця, чим в растровому вигляді. Не дивлячись на це цілком можливо створити складне векторне зображення самому, але для цього швидше за все знадобиться потужний комп'ютер. Векторна графіка добре підходить для створення ілюстрацій, логотипів, узорів, текстових ефектів, схем, а також для анімації. Для того, щоб зрозуміти, коли вигідно застосовувати саме векторну графіку бажано спочатку з нею поекспериментувати, щоб представляти її можливості.

19 Векторна графіка Тема 8. Векторна графіка. Основним логічним елементом векторної графіки є геометричний об'єкт. Як об'єкт приймаються прості геометричні фігури (так звані примітиви -- прямокутник, коло, еліпс, лінія), складені фігури або фігури, побудовані з примітивів, колірні заливки, зокрема градієнти. Перевага векторної графіки полягає в тому, що форму, колір і просторове положення складових її об'єктів можна описувати за допомогою математичних формул. Важливим об'єктом векторної графіки є сплайн. Сплайн -- це крива, за допомогою якої описується та або інша геометрична фігура. На сплайнах побудовані сучасні шрифти TryeType і PostScript. У векторної графіки багато достоїнств. Вона економна в плані дискового простору, необхідного для зберігання зображень: це пов'язано з тим, що зберігається не саме зображення, а тільки деякі основні дані, використовуючи які, програма всякий раз відтворює зображення наново. Крім того, опис колірних характеристик майже не збільшує розмір файлу. Об'єкти векторної графіки легко трансформуються і модифікуються, що не робить практично ніякого впливу на якість зображення. Масштабування, поворот, викривлення можуть бути зведені до пари-трійки елементарних перетворень над векторами. У тих областях графіки, де важливе значення має збереження ясних і чітких контурів, наприклад, в шрифтових композиціях, в створенні логотипів і інше, векторні програми незамінні. Векторна графіка може включати і фрагменти растрової графіки: фрагмент стає таким же об'єктом, як і всі інші (правда, із значними обмеженнями в обробці).

20 Векторна графіка Тема 8. Векторна графіка. Важливою перевагою програм векторної графіки є розвинені засоби інтеграції зображень і тексту, єдиний підхід до них. Тому програми векторної графіки незамінні у області дизайну, технічного малювання, для креслярсько-графічних і оформлювальних робіт. Проте, з іншого боку, векторна графіка може показатися надмірно жорсткої, "фанерної". Вона дійсно обмежена в чисто живописних засобах: у програмах векторної графіки практично неможливо створювати фотореалістичні зображення. А крім того, векторний принцип опису зображення не дозволяє автоматизувати введення графічної інформації, як це робить сканер для точкової графіки. Останнім часом все більшого поширення набувають програми 3-мірного моделювання, що також мають векторну природу. Володіючи витонченими методами відмальовки (метод трасування променів, метод випромінюваності), ці програми дозволяють створювати фотореалістичні растрові зображення з довільною роздільною здатністю з векторних об'єктів при помірних витратах сил і часу. У будь-якому випадку, якщо ви працюєте з графікою, то неминуче матимете справу з обома її формами - векторної і растрової. Розуміння їх сильних і слабких сторін дозволить вам виконати свою роботу максимально ефективно.

21 Формати векторних файлів Тема 8. Векторна графіка. AI - це формат векторного редактора Adobe Illustrator. Дозволяє зберігати всю інформацію, що створюється в цій програмі. Його можна імпортувати практично до будь-якого графічного редактора, а також в багато растрових, наприклад Photoshop. При відкритті в растровому редакторі документ растерізуєтся. CDR - формат векторного редактора Corel Draw. Підтримується меншою кількістю програм, чим AI. EPS - змішаний графічний формат, може містити інформацію про растрову і векторну графіку. Підтримує всі колірні моделі. Цей формат розуміє більшість сучасних (PostScript) принтерів, тому він широко застосовується для друку зображень. Його розуміють переважна більшість сучасних графічних редакторів. Він також використовується для обміну даними (через буфер обміну) в програмах фірми Adobe. Файли у форматі EPS мають великий об'єм (в порівнянні з TIFF, наприклад).

22 PDF - змішаний формат, призначений для передачі інформації по мережі. В основному використовується для створення електронних версій книг і статей. Може містити текстову, растрову і векторну графічну і звукову інформацію, відео, а також гіперпосилання. При цьому різні типи інформації по-різному стискаються. Готові документи є видимими за допомогою Adobe Acrobat Reader. SWF - формат векторної анімації. У ньому можна зберігати нескладну векторну графіку, растрову графіку, анімацію, а також звук. Формат SWF недоступний для редагування, тільки для перегляду за допомогою програми Flash Player або Web-браузера. Анімація створюється за допомогою програми Macromedia Flash, також є можливість експорту в цей формат з більшості редакторів векторної графіки. Формат SWF апаратно незалежний. FLA - внутрішній формат програми Macromedia Flash. У ньому можна зберігати проміжні результати, для перегляду потрібне перетворення у формат SWF. Підтримує мову сценаріїв ActionScript, що дає можливість створення складних інтерактивних фільмів і Web-сторінок. PDF - змішаний формат, призначений для передачі інформації по мережі. В основному використовується для створення електронних версій книг і статей. Може містити текстову, растрову і векторну графічну і звукову інформацію, відео, а також гіперпосилання. При цьому різні типи інформації по-різному стискаються. Готові документи є видимими за допомогою Adobe Acrobat Reader. SWF - формат векторної анімації. У ньому можна зберігати нескладну векторну графіку, растрову графіку, анімацію, а також звук. Формат SWF недоступний для редагування, тільки для перегляду за допомогою програми Flash Player або Web-браузера. Анімація створюється за допомогою програми Macromedia Flash, також є можливість експорту в цей формат з більшості редакторів векторної графіки. Формат SWF апаратно незалежний. FLA - внутрішній формат програми Macromedia Flash. У ньому можна зберігати проміжні результати, для перегляду потрібне перетворення у формат SWF. Підтримує мову сценаріїв ActionScript, що дає можливість створення складних інтерактивних фільмів і Web-сторінок.

23 Графічні редактори для роботи з векторною графікою Тема 8. Векторна графіка. Програми для створення простих векторних графічних зображень: Графічні засоби текстового процесора Microsoft Word Програми для професійного створення та редагування векторних зображень: Adobe Illustrator Corel Draw Macromedia Flash