Преподавателю
Информатика
Подготовка цифровых изображений для Web-сайтов

Подготовка цифровых изображений для Web-сайтов

Раздел	Информатика
Класс	10 класс
Тип	Рабочие программы
Автор	Юркова Т.Я.
Дата	03.02.2016
Формат	doc
Изображения	Есть

Поделитесь с коллегами:

Курс «Подготовка цифровых изображений для Web-сайтов»

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

Цели курса:

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

Место и роль учебного курса

Курс имеет выраженную практическую направленность, которая и определяет логику построения материала учебных занятий. Предлагаемый подход можно сформулировать как «от задачи - к теории». Инструменты и средства программ Photoshop и Image Ready изучаются не изолированно, сами по себе, а в контексте практических задач, возникающих при обработке цифровых изображений для Web-сайтов.

Основной формой обучения является практикум. Для нормальной работы необходим персональный компьютер (один на каждого ученика), графический редактор Adobe Photoshop и: Corel Draw .

Приобретенные навыки учащиеся могут применить для оформления собственных Web-страниц в сети Интернет, а также при создании учебных сайтов по различным предметам - физике, химии, биологии и др. Полученные знания и умения могут быть полезны при последующем изучении трехмерного моделирования, видеомонтажа, создания систем виртуальной реальности.

Планируемые результаты

В рамках данного курса обучающихся получают следующие знания и умения:

знакомятся с форматами растровых изображений, применяемых в сети Интернет (GIF, JPG, PNG)
умеют вводить графические изображения с помощью цифрового фотоаппарата и сканера
умеют грамотно выбирать формат, разрешение и степень сжатия в зависимости от свойств изображения
умеют применять средства коррекции программы Photoshop
умеют создавать анимационные ролики и баннеры с помощью программы Image Ready

СОДЕРЖАНИЕ ИЗУЧАЕМОГО КУРСА

Растровые и векторные изображения (1 ч )

Изучаются методы кодирования графической информации в растровых и векторных форматах. Занятие проходит в виде лекции с использованием мультимедийного проектора.

Форматы изображений в Интернете (1 ч )

Изучаются основные форматы, используемые в сети Интернет - GIF, JPG и PNG. Рассматриваются их особенности, преимущества и недостатки, а также принципы выбора формата для различных типов изображений. Занятие проходит в виде лекции с использованием мультимедийного проектора.

Графический редактор COREL DRAW ( 14 ч )

Программный комплекс CorelDRAW. Рабочее окно программы CorelDRAW. Рабочие инструменты CorelDRAW. Панель графики. Палитра цветов. Строка состояния. Рабочее окно программы CorelDRAW. Разнообразные методы закраски. Использование заливок из нескольких цветовых переходов, а также узоров и текстур. Операции над объектами: перемещение, масштабирование (изменение размеров), вращение, копирование, зеркальное отражение, удаление и др. Создание и редактировании кривой. Типы узлов: симметрические узлы, сглаженные узлы, острые узлы. Преобразование прямых в кривые и наоборот, добавление узлов, удаление узлов, масштабирование траектории, вращение траектории, разрыв кривой, объединение двух открытых траектории в одну. Окружность, дуга, сектор. Операции над объектами: перемещение, искажение, поворот, закрашивание. Сохранение рисунков. Создание логотипа по образцу. Средства работы с текстом. Надписи и заголовки. Изменение формы отдельных букв текста, масштабирование и перемещение.

Графический редактор Photoshop (11 ч)

Статические изображения. Цифровые фотоаппараты. Сканирование. Коррекция изображения. Сохранение изображений для Интернета. Изображения с прозрачными областями. Назначение редактора. Информация о документе. Панели инструментов. Изменение разрешения изображения. Просмотр изображения. Масштаб. 100%-ный размер изображения. Использование инструментов рисования прямых линий и линий произвольной формы. Использование градиентной заливки. Палитра слоев. Фильтры. Дизайн надписи. Эффект линзы. Свет , тень, цвета и перспектива. Освещение, прозрачность, перспектива и глубина. Анимированные изображения. Анимация по слоям. Ручная настройка анимации. Реакция на события мыши. Баннеры.

Выполнение проекта (7 ч )

В течение 4-х занятий учащиеся выполняют проект на выбранную тему. В качестве проекта предлагается разработать стартовую страницу Web-сайта выбранной тематики с использованием статических и анимированных изображений. Это может быть, например,

личная страница
сайт фирмы
портал
информационный сайт

В качестве исходных материалов могут использоваться

снимки, сделанные цифровым фотоаппаратом
отсканированные фотографии
иллюстрации, полученные с помощью сети Интернет
рисунки, выполненные вручную

Обязательные элементы страницы (должны быть выполнены автором самостоятельно)

логотип
фотография (возможно, с художественной обработкой)
главное меню, реагирующее на наведение мыши
рекламный баннер

На последнем занятии учащиеся обсуждают все выполненные проекты на конференции.

2.Содержание учебного предмета

№

Наименование разделов и тем

Количество часов

Растровые и векторные изображения

Форматы изображений в ИНТЕРНЕТЕ

Графический редактор COREL DRAW

Что такое COREL DRAW

Понятия окна и страницы

Масштаб.

Прямая, кривая и ломанная линия

Рисуем домик

Кривая Безье. Рисуем каплю.

Окружность, дуга, сектор. Мультяшная гусеница. Виноград.

Перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

Создание логотипа по образцу.

Размещение надписи по кругу. Текст. Искривление надписи. Стильная и готическая надпись.

Ночное свечение. Создание макетов.

Макет в макете.

Зачетная работа.

Графический редактор Photoshop

Назначение редактора Adobe Photoshop. Панели инструментов.

Перемещение или движение объекта или изображения.

Распылитель краски. Рисование кистью. Рисование линий. Градиент.

Смазывание границ изображения. Увеличение яркости.

Работа со слоями. Задание: Монограмма

Фотомонтаж.

Работа с текстом. Фильтры.

Эффект линзы.

Создание сложных изображений.

Создание анимации в программе Image Ready.

Баннеры.

Выполнение проекта

Сдача проектов.

ИТОГО

3.КАЛЕНДАРНО − ТЕМАТИЧЕСКОЕ ПЛАНИРОВАНИЕ

№

Календарные сроки

Наименование тем и разделов

Количество

часов

Содержание по темам

Виды деятельности обучающихся

02.09

Растровые и векторные изображения

Изучаются методы кодирования графической информации в растровых и векторных форматах.

Занятие проходит в виде лекции с использованием мультимедийного проектора.

9.09

Форматы изображений в ИНТЕРНЕТЕ

Занятие проходит в виде лекции с использованием мультимедийного проектора.

16.09

Что такое COREL DRAW

Программный комплекс CorelDRAW. Рабочее окно программы CorelDRAW. Рабочие инструменты CorelDRAW. Панель графики. Палитра цветов.

Знакомство с рабочими инструментами CorelDRAW: геометрические фигуры - прямоугольники, эллипсы, многоугольники и прямые. Использование залипвок. Знакомство с панелью графики.

23.09

Понятия окна и страницы

Строка состояния. Рабочее окно программы CorelDRAW. Разнообразные методы закраски. Использование заливок из нескольких цветовых переходов, а также узоров и текстур.

Создание рисунка мышью «от руки». Построение и окрашивание объектов, с использованием заливок из нескольких цветовых переходов, а также узоров и текстур позволяющих получать красочные иллюстрации.

30.09

Масштаб.

Операции над объектами: перемещение, масштабирование (изменение размеров), вращение, копирование, зеркальное отражение, удаление и др.

Создание рисунков в векторной программе. Реализация операций - масштабирования (изменение размеров), вращения, копирования, зеркального отражения, удаления и др.

7.10

Прямая, кривая и ломанная линия

Создание и редактировании кривой. Типы узлов: симметрические узлы, сглаженные узлы, острые узлы. Преобразование прямых в кривые и наоборот, добавление узлов, удаление узлов, масштабирование траектории, вращение траектории, разрыв кривой, объединение двух открытых траектории в одну.

Создание рисунка с помощью кривых. Использование разнообразных возможностей редактирования кривых. Создание эффекта объема.

14.10

Рисуем домик

Создание и редактировании ломанной. Типы узлов: симметрические узлы, сглаженные узлы, острые узлы. Преобразование прямых в кривые и наоборот, добавление узлов, удаление узлов, масштабирование траектории, вращение траектории, разрыв кривой, объединение двух открытых траектории в одну.

Создание рисунка с помощью кривых. Использование разнообразных возможностей редактирования кривых.

21.10

Кривая Безье. Рисуем каплю.

Создание рисунка с помощью кривых. Использование разнообразных возможностей редактирования кривых.

28.10

Окружность, дуга, сектор. Мультяшная гусеница.

Виноград.

Окружность, дуга, сектор. Мультяшная гусеница. Виноград. Яблоко

Создание рисунка с помощью инструментов: окружность, дуго и др. Использование разнообразных возможностей редактирования кривых. Создание эффекта объема.

11.11

Перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

Операции над объектами: перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

С Подготовка цифровых изображений для Web-сайтов оздание рисунка пустыни.

18.11

Создание логотипа по образцу.

Рисование знака радиации в Corel Draw. Рисование простого объекта в Corel Draw на примере логотипа Тойоты.

25.11

Размещение надписи по кругу. Текст. Искривление надписи. Стильная и готическая надпись.

Средства работы с текстом. Надписи и заголовки. Изменение формы отдельных букв текста, масштабирование и перемещение.

Обработка текста. Надписи и заголовки можно наклонять, переворачивать и также размещать по произвольной кривой. Изменение формы отдельных букв текста, масштабирование и перемещение.

02.12

Ночное свечение. Создание макетов.

Операции над объектами: перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

Подготовка цифровых изображений для Web-сайтов Ночное свечение. Создание макетов.

9.12

Макет в макете.

Операции над объектами: перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

Сохранение рисунков.

16.12

Зачетная работа:

Новогодняя открытка

Операции над объектами: перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

Сохранение рисунков.

23.12

Зачетная работа:

Стенгазета

Операции над объектами: перемещение, искажение, поворот, закрашивание. Сохранение рисунков.

Сохранение рисунков.

30.12

Назначение редактора Adobe Photoshop. Панели инструментов.

Назначение редактора. Информация о документе. Панели инструментов. Изменение разрешения изображения.

Запустить программу Adobe Photoshop. Выбор инструментов. Работа с панелями-вспомогательными окнами.

13.01

Перемещение или движение объекта или изображения.

Просмотр изображения. Масштаб. 100%-ный размер изображения.

Увеличить масштаб просмотра изображения. Увеличить масштаб просмотра фрагмента изображения. Уменьшить масштаб просмотра изображения. Переместить изображение в пределах окна.

20.01

Распылитель краски. Рисование кистью. Рисование линий. Градиент.

Использование инструментов рисования прямых линий и линий произвольной формы. Использование градиентной заливки.

Инструменты рисования в Photoshop - «кисти» различного вида, «карандаш», «ластик», заливки.

27.01

Смазывание границ изображения. Увеличение яркости.

Увеличение резкости и размытие изображений. Смазывание границ изображения.

Использование инструмента выделения "от руки", выделения многоугольником, "магнитом", "волшебная палочка".

03.02

Работа со слоями. Задание: Монограмма

Палитра слоев.

Разделение изображения на слои. Создание нового слоя. Порядок слоев. Связь и копирование слоев.

.22

10.02

Фотомонтаж.

Улучшение четкости фотографий, чтобы они не выглядели размытыми и неконтрастными. Средства ретуширования. удаление с изображений царапины, загрязнения и повреждения.

Цветовая коррекция, изменение цветовых оттенков фотографий.

Создание коллажей, в которых фрагменты различных изображений сливаются вместе для получения интересных и необычных эффектов

17.02

Работа с текстом. Фильтры.

Фильтры. Дизайн надписи.

Создание эффекта текста из снега, каменно-огненный текст, каменный текст, карандашный эскиз надписи и др

24.02

Эффект линзы.

Имитация эффекта широкоугольной линзы средствами Photoshop

03.03

Создание сложных изображений.

Свет , тень, цвета и перспектива.

Создание пейзажа с рассветом. С использованием различной техники: свет, тень, цвета и перспектива.

10.03

Создание анимации в программе Image Ready.

Освещение, прозрачность, перспектива и глубина.

Работа с эффектами освещения и прозрачности, неразрушающими методами обработки и создавать перспективу и глубину.

17.03

Создание анимации в программе Image Ready.

Освещение, прозрачность, перспектива и глубина.

31.03

Создание анимации в программе Image Ready.

Освещение, прозрачность, перспектива и глубина.

7.04

Создание анимации в программе Image Ready.

Освещение, прозрачность, перспектива и глубина.

14.04

Баннеры.

Наложение градиента, смешивание, умножение. Временная шкала.

Создаём анимированный баннер в Фотошоп.

21.04

Выполнение проекта

Фильтры. Дизайн надписи.

Свет , тень, цвета и перспектива.

Освещение, прозрачность, перспектива и глубина.

Наложение градиента, смешивание, умножение. Временная шкала. Палитра слоев. Увеличение резкости и размытие изображений. Смазывание границ изображения.

Создание рисунка с использованием различных средств Adobe Photoshop. Разработка стартовой страницы Web-сайта выбранной тематики с использованием статических и анимированных изображений.

28.04

Выполнение проекта

5.05

Выполнение проекта

12.05

Выполнение проекта

19.0

Выполнение проекта

26.05

Сдача проекта

Обсуждение всех выполненных проектов на конференции.

4. Материально-техническое обеспечение образовательного процесса

Печатные пособия

Шерри Х. Photoshop для Web-дизайна. - Минск: Кудиц-Образ, 2006.
Печников В. Н. Adobe Photoshop для Web. - Минск: Лучшие книги, 2005.
Вайнман Л., Стейплз Т. Практикум по Adobe Photoshop CS и ImageReady CS для Web-дизайна (с CD-ROM). - Вильямс, 2005.
Кубарева М.В., Третьяк Т.М. Практикум Web-дизайна (с CD-ROM). - М.: Солон-пресс, 2006.
Смирнова И. Начала Web-дизайна (с CD-ROM). СПб: BHV-Питер, 2003.
Ульрих Л. Photoshop 7 для Web-дизайна. - Минск: Кудиц-Образ, 2002.
Белобородова Е., Солоницын Ю. Photoshop 7 для подготовки Web-графики. Учебный курс. - СПб: Питер, 2002.

Дополнительная литература

Левковец Л. Б. Уроки компьютерной графики. Photoshop CS. - СПб: Питер, 2004.
Пономаренко С.И. Adobe PhotoShop CS. - СПб.: БХВ-Петербург, 2004.
Карасева Э. В., Чумаченко И. Н. Photoshop CS. - М.: НТ Пресс, 2004.
Леонтьев В. П. Adobe Photoshop - ваша цифровая фотостудия. - СПб: ОЛМА-Пресс, 2005.
Бурлаков М. Photoshop CS2 для пользователя. - М.: Бином, 2006.
Залогова Л.А. Компьютерная графика. Элективный курс. Учебное пособие. - М.: "Бином", 2005.
Леготина С. Графический редактор Photoshop. Элективный курс по информатике. 9-11 классы. 1 и 2 части. - Корифей, 2005.

Литература для школьников

Поляков К.Ю. Уроки по Adobe Photoshop CS2. Электронное учебное пособие, 2005.
Луций С.A. Изучаем Photoshop. - СПб: Питер, 2003.
Луций С.A. Самоучитель Photoshop CS. - СПб: Питер, 2005.

Технические средства обучения:

Цифровые образовательные ресурсы

adobe.com
photoshop.ru
psd.ru
graphics.ru
pslab.ru
maste.ru/photoshop/
whatis.ru/psd/
cc-studio.ru/lessons.html
demiart.ru/tutorials/index.shtml

5. КИМ и критерии оценки.

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

загрузить