Автор-составитель

ПРАВИТЕЛЬСТВО САНКТ-ПЕТЕРБУРГА
КОМИТЕТ ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
средняя общеобразовательная школа № 163
Центрального района
СОГЛАСОВАНО
ДОПУЩЕНО
Директор НМЦ
_____________ Шарова Е.П.
«_____»_____________200_ г.
Председатель президиума РЭС
______________ Алексашина Ю.И.
М.П
М.П
Председатель секции по информатике РЭС
______________ Симонова И.В.
Протокол №____ от «____»_____200_г.
УТВЕРЖДЕНО
на педсовете школы № 163
протокол № 21
от «_29_»_августа_______2008 г.
Директор ___________ Тарабан В.И.
М.П.
Программа
элективного курса (курса по выбору предпрофильной подготовки)
для учащихся 9-11 классов
«ЦИФРОВАЯ ОБРАБОТКА ИЗОБРАЖЕНИЙ
ДЛЯ WEB-САЙТОВ»
(18 часов)
Автор-составитель:
ПОЛЯКОВ Константин Юрьевич,
учитель информатики,
доктор технических наук
_____________________________
г. САНКТ-ПЕТЕГБУРГ
2008
2
АННОТАЦИЯ
Интернет в современном обществе становится неотъемлемой частью жизни.
Рано или поздно у многих пользователей глобальной сети возникает желание
создать собственную Web-страничку, оформив ее графическими изображениями.
Учебный курс «Цифровая обработка изображений для Web-сайтов» поможет
овладеть грамотными приемами подготовки статических и анимированных
изображений для размещения в сети Интернет с помощью графического
редактора Adobe Photoshop и программы Adobe Image Ready.
Материал всех уроков оформлен в виде электронного учебного пособия,
включающего теоретическую часть и практические задания. Основной упор
делается не на механическое выполнение алгоритмов, а на понимание
происходящих при этом процессов. Предполагается, что учащиеся знакомы с
основными методами обработки изображений в редакторе Photoshop и владеют
основами языка HTML с элементами JavaScript.
3
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
Учебный курс «Цифровая обработка изображений для Web-сайтов» входит в
образовательную область «информатика». Он включает 17 часов аудиторных
занятий и (при возможности) самостоятельную работу учащихся. Курс может
быть использован для профильной подготовки учащихся в классах физикоматематического, информационно-технологического, социально-гуманитарного и
др. профилей.
Предполагается, что учащиеся знакомы с принципами и методами цифровой
обработки изображений в редакторе Photoshop в объеме элективного курса
«Цифровая обработка изображений в редакторе Photoshop», а также владеют
основами языка HTML с элементами JavaScript.
Предметом изучения являются принципы и методы подготовки статических
и анимированных растровых цифровых изображений для размещения на Webсайтах с помощью графического редактора Adobe Photoshop CS2 и программы
Adobe Image Ready.
Целесообразность изучения данного курса определяется быстрым
внедрением Интернета в повседневную жизнь и переходом к новым технологиям
обработки графической информации. Учащиеся получают навыки грамотной
цифровой обработки статических и анимированных изображений, которые
позволяют им успешно ориентироваться в современном мире.
Цели курса:
 познакомить учащихся с современными принципами и методами подготовки
цифровых изображений для Web-сайтов
 развить творческие и дизайнерские способности учащихся
Задачи курса: научить учащихся
 вводить графические изображения в компьютер с помощью цифрового
фотоаппарата и сканера
 грамотно выбирать формат для графических изображений, размещаемых в
Интернете
 использовать средства коррекции, реализованные в редакторе Photoshop, для
повышения качества цифровых изображений
 создавать анимированные ролики и баннеры с помощью программы Image
Ready.
В отличие от существующих разработок, курс имеет выраженную
практическую направленность, которая и определяет логику построения
материала учебных занятий. Предлагаемый подход можно сформулировать как
«от задачи – к теории». Инструменты и средства программ Photoshop и Image
Ready изучаются не изолированно, сами по себе, а в контексте практических
задач, возникающих при обработке цифровых изображений для Web-сайтов.
4
Основной формой обучения является практикум. Для нормальной работы
необходим персональный компьютер (один на каждого ученика), графический
редактор Adobe Photoshop и программа Image Ready. Для ввода графической
информации необходимо наличие цифрового фотоаппарата и сканера.
Для поддержки курса автором разработано электронное учебное пособие в
формате CHM, которое содержит теоретический материал и задания для
выполнения практических работ. Оно используется во время уроков для
самостоятельной работы и в качестве справочника. Это позволяет успешно
организовывать занятия в группах, в которых есть ученики с разным темпом
усвоения материала.
Приобретенные навыки учащиеся могут применить для оформления
собственных Web-страниц в сети Интернет, а также при создании учебных сайтов
по различным предметам — физике, химии, биологии и др. Полученные знания и
умения могут быть полезны при последующем изучении трехмерного
моделирования, видеомонтажа, создания систем виртуальной реальности.
Ожидаемые результаты
В рамках данного курса учащиеся получают следующие знания и умения:
 знакомятся с форматами растровых изображений, применяемых в сети
Интернет (GIF, JPG, PNG)
 умеют вводить графические изображения с помощью цифрового
фотоаппарата и сканера
 умеют грамотно выбирать формат, разрешение и степень сжатия в
зависимости от свойств изображения
 умеют применять средства коррекции программы Photoshop
 умеют создавать анимационные ролики и баннеры с помощью программы
Image Ready
Формы подведения итогов
Текущий контроль уровня усвоения материала осуществляется по
результатам выполнения учащимися практических заданий на каждом уроке. В
конце курса каждый учащийся выполняет индивидуальный проект в качестве
зачетной работы. На последнем занятии проводится конференция, на которой
учащиеся представляют свои работы и обсуждают их.
5
СОДЕРЖАНИЕ ИЗУЧАЕМОГО КУРСА
Раздел 1. Цифровые графические форматы
Тема 1. Растровые и векторные изображения
Изучаются методы кодирования графической информации в растровых и
векторных форматах. Занятие проходит в виде лекции с использованием
мультимедийного проектора.
Тема 2. Форматы изображений в Интернете
Изучаются основные форматы, используемые в сети Интернет – GIF, JPG и
PNG. Рассматриваются их особенности, преимущества и недостатки, а
также принципы выбора формата для различных типов изображений.
Занятие проходит в виде лекции с использованием мультимедийного
проектора.
Раздел 2. Статические изображения
Тема 1. Цифровые фотоаппараты
Учащиеся знакомятся с цифровыми фотоаппаратами и принципами
цифровой фотосъемки, учатся выбирать параметры съемки, осваивают
способы загрузки изображений из памяти фотоаппарата на жесткий дик
компьютера через USB-интерфейс.
Тема 2. Сканирование
Изучаются методы сканирования цветных и черно-белых изображений.
Особое внимание уделяется грамотному выбору параметров сканирования
для различных типов изображений.
Тема 3. Коррекция изображения
Изучаются такие приемы общей коррекции изображения как кадрирование,
исправление перспективных искажений, автоматическая коррекция
уровней, контраста и цвета. Учащиеся знакомятся с приемами ручной
коррекции.
Тема 4. Сохранение изображений для Интернета
Изучаются методы сохранения Web-изображений в редакторе Photoshop и
программе Image Ready. Рассматриваются принципы выбора параметров
сохранения в форматах GIF, JPG и PNG.
Тема 5. Изображения с прозрачными областями
Изучаются методы создания, обработки и сохранения изображений с
прозрачными областями.
Раздел 3. Анимированные изображения
Тема 1. Анимация по слоям
6
Изучаются общие принципы анимации и методы построения
анимированных изображений на основе многослойных документов в
программе Image Ready.
Тема 2. Ручная настройка анимации
Изучаются способы ручной настройки
изображения в программе Image Ready.
свойств
анимированного
Тема 3. Реакция на события мыши
Изучаются технологии создания и настройки параметров Web-изображений,
которые изменяются при наведении мыши (программа Image Ready).
Тема 4. Баннеры
Учащиеся знакомятся с баннерами и принципами их разработки, создают
рекламный анимированный баннер на выбранную тему в программе Image
Ready.
Раздел 4. Выполнение проекта
В течение 4-х занятий учащиеся выполняют проект на выбранную тему. В
качестве проекта предлагается разработать стартовую страницу Web-сайта
выбранной тематики с использованием статических и анимированных
изображений. Это может быть, например,
 личная страница
 сайт фирмы
 портал
 информационный сайт
В качестве исходных материалов могут использоваться
 снимки, сделанные цифровым фотоаппаратом
 отсканированные фотографии
 иллюстрации, полученные с помощью сети Интернет
 рисунки, выполненные вручную
Обязательные элементы страницы (должны быть выполнены автором
самостоятельно)
 логотип
 фотография (возможно, с художественной обработкой)
 главное меню, реагирующее на наведение мыши
 рекламный баннер
На последнем занятии учащиеся обсуждают все выполненные проекты на
конференции.
7
УЧЕБНО-ТЕМАТИЧЕСКИЙ ПЛАН
Виды занятий
Кол-во
часов
Теория
1.1 Растровые и векторные изображения
1
1
1.2 Форматы изображений в Интернете
1
1
2.1 Цифровые фотоаппараты
2
1
2.2 Сканирование
1
2.3 Коррекция изображений
2
2.4 Сохранение изображений для Интернета
1
1
2.5 Изображения спрозрачными областями
1
1
№
Раздел (тема)
Практика
1. Цифровые графические форматы
2. Статические изображения
1
1
1
1
3. Анимированные изображения
3.1 Анимация по слоям
2
3.2 Ручная настройка анимации
1
1
3.3 Реакция на события мыши
1
1
3.4 Баннеры
1
1
4
4
4. Выполнение проекта
Всего часов:
18
1
5
1
13
8
ИНФОРМАЦИОННОЕ ОБЕСПЕЧЕНИЕ КУРСА
Интернет-ресурсы
1. http://www.adobe.com
2. http://photoshop.ru
3. http://psd.ru
4. http://graphics.ru
5. http://pslab.ru
6. http://maste.ru/photoshop/
7. http://www.whatis.ru/psd/
8. http://www.cc-studio.ru/lessons.html
9. http://demiart.ru/tutorials/index.shtml
Основная литература
1. Шерри Х. Photoshop для Web-дизайна. – Минск: Кудиц-Образ, 2006.
2. Печников В. Н. Adobe Photoshop для Web. – Минск: Лучшие книги, 2005.
3. Вайнман Л., Стейплз Т. Практикум по Adobe Photoshop CS и ImageReady
CS для Web-дизайна (с CD-ROM). – Вильямс, 2005.
4. Кубарева М.В., Третьяк Т.М. Практикум Web-дизайна (с CD-ROM). – М.:
Солон-пресс, 2006.
5. Смирнова И. Начала Web-дизайна (с CD-ROM). СПб: BHV-Питер, 2003.
6. Ульрих Л. Photoshop 7 для Web-дизайна. – Минск: Кудиц-Образ, 2002.
7. Белобородова Е., Солоницын Ю. Photoshop 7 для подготовки Webграфики. Учебный курс. – СПб: Питер, 2002.
Дополнительная литература
1. Левковец Л. Б. Уроки компьютерной графики. Photoshop CS. – СПб:
Питер, 2004.
2. Пономаренко С.И. Adobe PhotoShop CS. — СПб.: БХВ-Петербург, 2004.
3. Карасева Э. В., Чумаченко И. Н. Photoshop CS. — М.: НТ Пресс, 2004.
4. Леонтьев В. П. Adobe Photoshop - ваша цифровая фотостудия. – СПб:
ОЛМА-Пресс, 2005.
9
5. Бурлаков М. Photoshop CS2 для пользователя. – М.: Бином, 2006.
6. Залогова Л.А. Компьютерная графика. Элективный курс. Учебное пособие.
– М.: "Бином", 2005.
7. Леготина С. Графический редактор Photoshop. Элективный курс по
информатике. 9-11 классы. 1 и 2 части. – Корифей, 2005.
Литература для школьников
1. Поляков К.Ю. Уроки по Adobe Photoshop CS2. Электронное учебное
пособие, 2005.
2. Луций С.A. Изучаем Photoshop. – СПб: Питер, 2003.
3. Луций С.A. Самоучитель Photoshop CS. – СПб: Питер, 2005.