Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
|
УРОК |
|
|
ТЕМА. |
Створення і обробка графічного зображення для сайту. |
|
Мета: |
ознайомити учнів із поняттям растрової та векторної графіки; орієнтуватись в програмних продуктах по обробці графіки, вміти створювати зображення для web-сторінок. |
Тип уроку: комбінований
Структура уроку
|
І. |
Організаційний момент |
2 хв |
|
II. |
Актуалізація опорних знань і вмінь учнів |
5 хв |
|
III. |
Вивчення нового матеріалу |
10 хв |
|
IV. |
Закріплення нових знань і вмінь учнів |
25 хв |
|
V. |
Підсумки уроку |
2 хв |
|
VI. |
Домашнє завдання |
1 хв |
Хід уроку
I. ОРГАНІЗАЦІЙНИЙ МОМЕНТ
II. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ І ВМІНЬ УЧНІВ
III. ВИВЧЕННЯ НОВОГО МАТЕРІАЛУ
Графічні редактори
Створення та оптимізація графіки - складна й примхлива завдання. Безумовно, можливе створення Web-сторінки і без використання графіки - За допомогою шрифтів, скриптів і таблиць стилів (CSS) - і це буде гарно та стильно. Але ж остаточний вид документа залежить від великої кількості різних факторів, таких як: ширина вікна браузера, попередні настройки браузера, прийняті за замовчуванням розмір шрифту, його ім'я і колір. До того ж не всі скрипти і стилі підтримуються всіма браузерами. Якщо ж буде використана графіка, то відвідувач вашої сторінки побачить її точно такий, який зробили і бачите її ви.
Основна складність роботи з Web-графікою полягає в тому, що пропускна спроможність каналів Інтернету, в більшості випадків, дуже низька і перед вами відразу постануть проблеми - як зробити графічний файл невеликий за обсягом, але гарної якості, які програми та прийоми використані при його оптимізації.
Саме цьому присвячений розділ про векторні і растрові графічних редакторів, які є потужним інструментом обробки зображення в умілих руках.
Перш ніж розглянути векторні і растрові графічні редактори, варто усвідомити собі, в чому полягає відмінність між векторних і растрових поданням зображення.
Растрова графіка представляє собою сітку (растр), осередки якої називаються пікселами. Кожен піксель растровому зображення має строго певний місце розташування і колір, отже будь-який об'єкт представляється програмою як набір пофарбованих пікселів. Це означає, що користувач, працюючи з растровими зображеннями, працює не над конкретними об'єктами, а над складовими їх групами пікселів.
Растрові зображення забезпечують високу точність передачі градацій кольорів і напівтонів, а також високу деталізацію зображення, тому вони є оптимальним засобом представлення тонових зображень, таких як скановані фотографії.
Для зображення растрової графіки завжди використовується фіксована кількість пікселів, тобто якість растрового зображення безпосередньо залежить від роздільної здатності обладнання. Це означає, що будь-яка зміна зображення (поворот, збільшення тощо) призводить до незмінному спотворення картинки і межі об'єктів виходять нерівними.
Векторні зображення формуються на основі математично описаних фігур, які називаються векторами, а вигляд зображення визначається параметрами векторів. Іншими словами, векторна графіка складається з кривих, що мають координати, колір та інші параметри, а також замкнутих областей, заповнених певним кольором. Межі цих областей також описуються кривими. Файл з векторної картинкою містить координати і параметри кривих.
Результати обробки векторних зображень не залежать від роздільної здатності обладнання, тому ви можете довільно змінювати їх параметри (розмір, колір, форму і т.д.) - якість не погіршиться. Векторна графіка застосовується при створенні цифрових об'єктів з використанням дрібних кеглів (розмірів шрифту), як логотипи, для яких важливо зберігати чіткі контури, при необмеженій масштабуваннях.
Графічні пакети (редактори) теж діляться на два типи: растрові і векторні. Давайте тепер розглянемо найбільш популярні з них. А) Редактори растрової графіки
Microsoft Paint - простий (або краще сказати - найпростіший) редактор, що входить в стандартну поставку операційних систем Microsoft. Він має набір простих функцій (пензлик, олівець, гумка і т.д.), які дозволяють створювати нехитрі малюнки. До жаль, для обробки графіки він практично не придатний. Зображення, яку ви бачите справа - це більше, на що здатний цей редактор.
Adobe Photoshop - на сьогоднішній день це самий потужний пакет для професійної обробки растрової графіки. Це цілий комплекс, що володіє численними можливостями модифікації растрового малюнка, що має величезний набір різних фільтрів і ефектів, причому є можливість підключати інструменти незалежних виробників.
Пакет пропонує, наприклад, кошти для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки може дозволити собі нашу уяву. Загалом, потенціал цього пакету поістене величезний. Починаючи з версії 5.5 в пакет включена програма Adobe ImageReady , що надають величезні можливості з обробки графіки під WEB (оптимізація зображень, створення анімованих gif, "розрізання" картинок на більш дрібні і т.д.). Девіз розробників Adobe Photoshop - "Camera of your mind" -- передбачає не тільки технічну досконалість, але і повну свободу творчості, на яку людина, що працює з цією програмою, просто приречений.
PhotoPaint - ще один не менш відомий графічний редактор (з пакету Corel Draw) для обробки растрової графіки, що конкурує з Adobe Photoshop. Тут також є всі необхідні інструменти для обробки графіки, різноманітні фільтри, текстури. Різниця лише в зручності роботи, інтерфейсі і швидкості накладання фільтрів - накладення відбувається трохи повільніше.
Painter - редактор надає чудові можливості для емуляції реальних інструментів малювання: графіт, крейда, масло і т.д. Також дозволяє імітувати фактуру поверхні матеріалів, живопис, створювати анімацію. Дуже зручний для розробки фонових малюнків або Web-сторінок в стилі живопису. Користуючись це програмою чуствуешь себе справжнім художником.
Існує ще ряд редакторів ( Microsoft Photo Editor, Microsoft Photo DRAW ), також дозволяють реалізувати найпростіші завдання, але не задовольняють запитам професіоналів. B) Редактори векторної графіки
Adobe Illustrator - пакет дозволяє створювати, обробляти та редагувати векторну графіку. За своєю потужністю він еквівалентний
растровому редактору Adobe Photoshop: має аналогічний інтерфейс, дозволяє підключати різні фільтри і ефекти, розуміє багато графічні формати, навіть такі як. cdr (Corel Draw) і. swf (Flash).
CorelDraw - безумовно, такий відомий графічний пакет не міг обійтися без засобів для обробки векторної графіки. Пакет за своєю потужністю практично не поступається графічним редакторам Adobe Photoshop і Adobe Illustrator. Крім обробки векторної графіки, в цьому пакеті існує обробник растрової графіки (Photo Paint), трассировщик зображень, редактор шрифтів, підготовки текстур і створення штрих-кодів, а також величезні колекції із зображеннями (CorelGallery).
Adobe Streamline - ще один продукт фірми Adobe, призначений для трасування (переказу) растрової графіки в векторну. Це невеликий, але дуже корисний і потужний продукт. Особливо корисний, якщо ви створюєте Web-сторінки з використанням векторної графіки, наприклад, технології Flash. 4. Створення WEB-сторінок в WORD'97 4.1 Способи створення WEB-сторінок в WORD'97
Баннер (англ. banner — флаг, транспарант) — графічне зображення рекламного характеру.
IV. ЗАКРІПЛЕННЯ НОВИХ ЗНАНЬ І ВМІНЬ УЧНІВ
ДОДАТОК 1.
За допомогою програми MS Paint створити банер для переходу на сайт Житомирської гуманітарної гімназії №23. В банері використати зображення мікроскопа, яке знаходиться в колекції кліпів (картинок) MS Office. Розмір банера 468х60 пікселів. Зберегти створений банер у файл baner.gif. Загальний вигляд банера такий:
5. Створення тексту:
|
За допомогою інструмента «Надпись» створити надпис «Житомирська гуманітарна гімназія №23 (колір темносиній, шрифт – Arial Black, розмір – 12 пт, нарис – напівжирний)» |
6. Створення рамки.
7. Створення зафарбування:
|
Вибрати інструмент «Заливка» – вибрати жовтий колір – вибрати клацання миші на областях, які зафарбовані в білий колір. |
8. Збереження банера у файл baner.gif.
9. Завершення роботи з програмою Paint.
ДОДАТОК 2
V. ПІДСУМКИ УРОКУ
VI. ДОМАШНЄ ЗАВДАННЯ