Конспект урока на тему "Создание баннера"; 11 класс

Виды баннеров

Баннер представляет собой графическое изображение или анимацию. В зависимости от способа создания выделяется несколько видов баннеров. Типология во многом связана с задачей — каждый вид эффективен для выполнения определенной задачи в рамках конкретной баннерной сети.

GIF-баннер

Положительные черты этого вида баннеров.

Основной плюс использования стандарта GIF — возможность рисовать анимированные баннеры. До широкого распространения flash-технологий это была единственная возможность создания динамических баннеров без использования программирования.

Достаточно небольшой размер получаемых файлов.

Поддержка прозрачности (весьма полезная возможность при изготовлении баннеров).

Недостатки GIF-стандарта: в таком виде баннеров трудно реализовать «навороченный» экземпляр, возможны лишь несложные смены слоганов и анимации.

В формате GIF невозможно создать интерактивный баннер.

JPEG-баннер

JPEG-стандарт был создан для сохранения изображений фотографического качества в файлах небольшого размера. Он оптимально подходит для создания статичных графических баннеров с использованием фотографий. Главные достоинства такого вида баннеров — малый «вес» и возможность размещения практически в любой сети. Недостатки — статичность и, опять же, невозможность создания интерактивного баннера. В данный момент весьма распространен (прежде всего потому, что прост в изготовлении, однако все активнее вытесняется более эффективными анимированными конкурентами).

Java-баннер

Представляет собой обычный Java-апплет, встроенный в HTML-документ. Ввиду технической сложности и большого «веса» использовать баннеры такого вида стоит лишь для достижения интерактивности. Замечено, что если при наведении указателя мыши на баннер происходят динамичные изменения или проигрывается звук, то его эффективность окажется гораздо выше неинтерактивного аналога. Основными препятствиями к распространению такого вида баннеров стала сложность их изготовления и несовместимость с большинством баннерных сетей. Кроме того, с появлением flash-баннеров все интерактивные эффекты стало гораздо проще воплощать с помощью ActionScript.

Flash-баннер

Наиболее молодой и перспективный  вид. Основные преимущества flash-технологии следующие.

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

Размер flash-анимации во много раз меньше аналогичных по внешнему виду, но реализованных с использованием, например, GIF. Чем сложнее и правдоподобнее мультипликация, тем больше проявляется это различие.

Flash позволяет создавать интерактивные баннеры, причем куда проще, чем с использованием Java.

Flash-баннер по сумме своих достоинств (динамичность, красочность, интерактивность, небольшой размер, информативность) оставляет далеко позади любой другой вид баннеров. Поэтому flash-баннеры намного популярнее у рекламодателей, чем все остальные.

У баннеров такого вида есть еще одно преимущество — они загружаются даже тогда, когда пользователь отключает отображение графических элементов. В этом случае их эффективность резко возрастает: на фоне полного отсутствия на странице графики яркий flash-баннер обязательно привлечет внимание.

Выбор вида баннера определяется постановкой задачи.

Если нужно создать статичный рекламный призыв, то оптимальным будет JPEG.

Простенький динамичный баннер лучше сделать, применив GIF.

Для создания анимированного или интерактивного баннера — Вашей флэш-визитки — идеален SWF-формат (flash). Однако может оказаться так, что сеть, в которой у Вас есть определенное количество показов, не поддерживает flash или, наоборот, может работать только с баннерами в формате SWF. Тогда придется, согласовывая собственный полет фантазии с печальной реальностью, искать промежуточные варианты. Благо, различные виды баннеров в некоторой степени взаимозаменяемы.

Самоанализ урока информатики в 11 А классе средней школы №4

города Асино Томской области

Учитель Кривенцов Л.А.

Тема урока: «Создание анимации (баннера) в Adobe Photoshop»

«Плохой учитель преподносит истину,

хороший - учит ее находить»

А. Дистервег

К. Д. Ушинский говорил, необходимо чтобы на уроке «дети, по возможности, трудились самостоятельно, а учитель руководил этим самостоятельным трудом и давал для него материал». Именно данной цитаты я придерживался, подбирая материал для данной темы. И одним из таких уроков является урок на тему «Создание анимации (баннера) в Adobe Photoshop», потому что он является предпосылкой для дальнейшего самостоятельного изучения данного раздела, и программы Adobe Photoshop непосредственно.

11А класс – класс гуманитарной направленности, поэтому к нему я применяю творческий подход к объяснению нового материала и решению поставленных задач. Присутствующих на уроке я разделил по способностям следующим образом: 5 сильных учащихся и 5 со средними способностями. В общем, класс работоспособный, дисциплинированный. Интерес у данного класса, как и у остальных старших классов вызывает материал, актуально преподнесённый и не вызывающий очень много вопросов. Повышает заинтересованность четко поставленная цель и демонстрация реальных примеров и разработок. Информатика не является профилирующим предметом и изучается 1 час в неделю. Согласно тематическому планированию на изучение темы «Графический редактор Adobe Photoshop» отведено 10 часов. По данной теме это 6-й урок. До этого урока в программе Adobe Photoshop учащиеся уже работали, поэтому им было проще ориентироваться в интерфейсе программы.

Создавать анимации необходимо учиться на простых примерах, когда у учащихся еще не сформированы умения полноценной обработки изображений, потому что в противном случае времени урока будет не достаточно. Именно поэтому данную тему я внёс непосредственно перед такими темами как: «Создание визуальных спецэффектов», «Ретуширование и восстановление фотографий» и «Сложный фотомонтаж». Центральное место я отвел именно творческой составляющей, потому что в настоящее время эта тема весьма актуальна.

Задачи, которые я поставил перед собой перед проведением урока:

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

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

Воспитательные задачи: осуществлять нравственное воспитание, обеспечить изучение следующих вопросов: товарищество, этические нормы поведения, уделение внимания эстетическому воспитанию.

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

Рассмотрев подробно этапы урока, я выделил следующее:

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

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

При объяснении правильности выполнения практической работы, в результате синхронной работы учащихся удалось добиться понимания нового материала, о чем свидетельствовали индивидуальные решения отдельных частей работы. Время, отведённое на урок, потрачено максимально рационально.

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

Домашнее задание было задано и прокомментировано. Итоги урока подведены.

Время, необходимое для вопросов учащихся, по окончании урока осталось, как и было запланировано. Однако вопросы учащихся были связаны не с данной темой, а с её продолжением, что свидетельствует о том, что были выполнены главные, на мой взгляд, поставленные две задачи: усвоение знаний в области создания анимационных объектов и появление интереса к выполнению более сложных проектов в рамках этой темы и всего раздела в общем.

Муниципальное общеобразовательное учреждение –

средняя общеобразовательная школа №4 г. Асино Томской области

Конспект урока по информатике

на тему:

«Создание анимации (баннера)

в Adobe Photoshop»

учитель информатики

Кривенцов Л.А.,

вторая квалификационная категория

2010

Создание анимации (баннера) в Adobe Photoshop.

Цели урока:

Обучающие:

• обучить работе с Adobe Photoshop;

• освоить основные приемы создания анимации;

• повторить и систематизировать навыки работы с программой Adobe Photoshop.

Развивающие:

• воспитывать художественный интерес.

Воспитательные:

• воспитывать добросовестное отношение к труду, инициативность;

• уверенность в своих силах.

Тип урока:

• урок совершенствования знаний, умений и навыков;

• целевого применения усвоенного.

Вид урока: практическая работа.

Структура урока:

• организационный момент;

• закрепление и совершенствование приобретенных умений и навыков путём выполнения практической работы;

Оборудование: Графический редактор Adobe Photoshop 7.0, приложение Adobe ImageReady, программа презентаций Microsoft Office PowerPoint 2003, мультимедиа проектор.

План урока:

1. Организационный момент (2 мин)

2. Представление практического задания (3 мин)

3. Закрепление изученного материала. Практическая работа на компьютере (30 мин)

4. Задание на дом (1 мин)

5. Вопросы учеников, подведение итогов урока (4 мин)

Ход урока:

1. Организационный момент.

Приветствие учащихся. Проверка присутствующих. Настрой на урок.

2. Представление практического задания.

Наиболее интересной способностью Adobe Photoshop является создание анимированных рисунков, например, баннеров для сети Internet.

Итак, что такое Баннер (Вanner)?

В простейшем случае это графическая гиперссылка, представляющая собой графический файл формата .GIF или .JPG, помещаемая на web-страницу. Как правило, имеет прямоугольную форму. Для обеспечения быстрой загрузки баннера на него обычно накладывают ограничения по информационному размеру (например, не более 15 Кбайт). Самый распространенный размер баннеров 468 на 60 пикселей, хотя помимо этого существует изрядное количество баннеров других размеров. Также получили распространение НТМL-баннеры, CGI-баннеры, Java-баннеры, Flesh-баннеры - все это дает возможность более эффектно воздействовать на посетителей сайтов.

Сегодня на уроке мы создадим баннер для web-страницы.

III. Закрепление изученного материала. Практическая работа на компьютере.

Начнём. Для начала откроем файл banner.jpg (Файл → Открыть), который находится в папке Banner на вашем компьютере в Общих Документах.

Затем выбираем инструмент Прямоугольник (значок ), и рисуем прямоугольник по границам рисунка. В результате получается чёрный прямоугольник, который располагается на новом слое. Оставляем этот слой активным и находим панель со страничкой «Стили»:

В этом окне выбираем стиль для фона нашего будущего баннера. После этого полученные два слоя сливаем в один с помощью команды (Слой → Выполнить сведение).

Мы получили основу для нашего баннера.

Теперь нам надо выбрать изображения, которые будут на нашем баннере. Варианты можно найти в папке Banner. Открываем выбранные файлы (не более двух). Сначала на полученный фон помещаем первое изображение, например:

Новому слою задаём имя «Картинка 1». Теперь помещаем на полученное изображение вторую картинку и полученному слою задаём имя «Картинка 2»:

Выбираем инструмент для печати текста на баннер. Каждую строку печатаем на новом слое, настройки текста выбираем произвольно. Для каждого слоя выбираем свой стиль:

Панель со вкладкой «Слои» теперь выглядит следующим образом:

Делаем активным нижний слой с именем «Фон» в Палитре слоев (щелчком мыши).

Затем отключаем видимость всех остальных слоёв щелчком по «глазу»:

Основа готова. Приступаем к созданию анимации. Щелкаем кнопку (Редактировать в ImageReady). В открывшемся окне Adobe ImageReady выполняем команду (Window → Animation), если оно отключено.

В окне «Animation» щелкаем кнопку , которая находится в правом верхнем углу, и выполняем команду «Make Frames From Layers».

Кнопки внизу предназначены для управления анимацией. В этом окне анимация разбита на кадры (фреймы), которые и будут меняться в зависимости от того, как мы их настроим. В окне Layers для каждого кадра мы делаем видимыми слои, которые должны отображаться:

Настраиваем время смены кадров на 0,5 секунды и щёлкаем мышкой на кнопку для запуска анимации.

Создадим эффект мигания текста. Для этого создадим копии 5-го кадра с помощью значка и поочерёдно в кадрах скрываем текст. Чем больше копий создаём, тем дольше будет мигать текст. Однако, начиная с 5-го кадра, время необходимо изменить на 0,1 секунды.

Сохраняем анимированную картинку командой (File → Save Optimized) или (File → Save Optimized As ...) . Сохранять рисунок можно в форматах .gif или .html.

Чаще всего анимацию мы встречаем в сети Internet в виде баннеров – подвижных рекламных картинок.

IV. Задание на дом.

Если у вас дома есть компьютер, попробуйте выполнить предложенные задания:

1. Создайте идущего человека.

2. Создайте движущуюся машину.

3. Создайте анимированную картинку на свободную тему.

V. Вопросы учеников, подведение итогов урока.

Ответы на вопросы учащихся.

Подведение итога урока. Выставление оценок.

На уроке мы познакомились с интересной способностью Adobe Photoshop - созданием анимированных рисунков (баннеров для web-сайтов). Научились самостоятельно создавать анимации.