Цели урока
- Обучающая:
Тип урока: урок изучения нового материала.
Вид урока: практическая работа.
Методы: объяснительно-иллюстративный, репродуктивный.
Формы организации учебно-познавательной деятельности учащихся:
- индивидуальная – каждый ученик создает индивидуальный анимационный баннер
- групповая – работа на перспективу – создание баннеров (рекламных, информационных, внутренних, брендовых) для школьного сайта.
Используемые материалы:
- класс, оборудованный ПК;
- PhotoShop не ниже версии 5.5 с программой ImageReady;
- проектор;
- интерактивная доска;
- файлы изображений.
План
- Выяснение темы урока.
- Работа в группах над определением слова "баннер".
- Разновидности и технологии создания баннеров.
- Форматы баннеров.
- Практическая работа.
- Просмотр и обсуждение результатов.
- Рефлексия.
Ход урока.
1. Выяснение темы урока
На экране изображен ребус, при расшифровке которого мы узнаем о теме урока "Создание баннеров в программе ImageReady". (Приложение1.pps – слайд 2)
2. Работа в группах над определением слова "баннер"
Ребятам предлагается разбиться на группы и выяснить, что такое баннер разными способами Результат представить на слайде презентации. (Одной группе – найти информацию в Интернете; другой группе – опросить учеников; третьей группе – найти определение из энциклопедий).
Выступление детей. (Приложение1.pps – слайды 3-5)
Слова учителя: слово “баннер”, как и многие другие рекламные и технологические слова, пришло к нам из английского языка, где оно служило для обозначения флагов и транспарантов. Сегодня “баннер” — это любое прямоугольное (как правило) изображение рекламного характера.
Сегодня мы их можем наблюдать в виде растяжек на улицах города, а также в газетах и журналах (в прессе баннеры сегодня принято называть “рекламными блоками”). В современной рекламной культуре слово “баннер” все больше ассоциируется с Интернетом, так как в Интернете баннеры получили наиболее широкое распространение. (Приложение1.pps – слайд 6)
Баннер - это статическая картинка или несложная мультипликация (анимированная картинка), размещаемая на веб-страницах в рекламных целях. Обычно эта картинка является ссылкой, по которой можно перейти на рекламируемый сайт или на страницу, содержащую более развернутую информацию о рекламируемом товаре.
Баннер – маленький, но очень эффективный инструмент рекламной индустрии. Использование баннеров может вызывать как симпатию, так и отвращение. На нашем уроке мы рассмотрим некоторые особенности восприятия разных видов баннеров и дадим советы по повышению эффективности их использования.
Когда же появился самый первый баннер в сети?
Первый баннер был в 1994 году.
3. Разновидности и технологии создания баннеров
За свою недолгую историю у баннеров появилось множество разновидностей и технологий на которых они основывались. (Приложение1.pps – слайды 7-12)
1). Самыми “древними” в истории баннеров и в то же время самыми распространенными считаются графические баннеры с использованием изображений в формате JPG или GIF. Они могут быть двух разновидностей: статические (используется одно изображение) и анимированные (несколько рисунков сменяют друг друга через определенные интервалы времени) (Приложение1.pps – слайд 8).
2). Практически одновременно с графическими баннерами появились так называемые текстовые баннеры. Они представляют собой рекламный текстовый блок без использования каких-либо фотографий, рисунков или анимированных текстовых объектов. Этот вид баннеров широко используется компанией Google. Одной из разновидностей текстовых баннеров можно считать комбинированные текстово-графические баннеры (Приложение1.pps – слайд 9).
3). FLASH-баннеры c использованием специальной FLASH-технологии — очень популярный сегодня вид баннеров. Как правило, эти баннеры очень красочные, анимированные и занимают мало места, благодаря использованию векторной (а не растровой, как в случае с графическими баннерами) графики (Приложение1.pps – слайд 10)
Виды баннеров изготовленные по технологии FLASH, либо обычные текстовые баннеры будут отображаться на сайте независимо от того, включен ли у пользователя режим отображения рисунков. Таким образом, аудитория охвата указанных видов баннеров значительно возрастает по сравнению с графическими баннерами.
4). Java баннеры представляют собой Java-апплеты, встраиваемые в HTML-документы. Частично используют функции Интернет-браузера (программные надстройки – plug-ins) (Приложение1.pps – слайд 11).
5). “Выпрыгивающие” баннеры, использующие технологию Rich Media. Не совсем удачным по эффективности оказался эксперимент разработчиков баннеров с использованием технологии Rich Media. Буквально “выпрыгивающее” на посетителей сайта огромное красочное рекламное нечто с замаскированной кнопочкой “Закрыть” — довольно раздражающее явление. Мало того, что подобные рекламные окна, как правило, закрывают собой добрую половину странички сайта, они еще и настойчиво перемещаются при попытке перейти на незанятую часть страницы. Пока пользователь возится с таким баннером, его желание повторно зайти на сайт медленно, но верно исчезает. Так что эффект получается скорее не привлекающий, а отталкивающий. Некоторые специалисты в области баннерных разработок называют Rich Media “выстрелом из пушки по репутации сайта” (Приложение1.pps – слайд 12).
Как рекламная площадь, баннеры используются для передачи самой различной информации. На них можно разместить: (спросить учеников?)
- Адрес и телефон Вашей фирмы
- Адрес электронной почты и Вашего сайта
- Поместить изображение Вашей продукции с кратким описанием
- Объявить о скидках, распродаже, сезонных акциях
4. Форматы баннеров
В техническом плане ограничений в размере (формате) баннера не существует. (Приложение1.pps – слайды 13). Существуют лишь общепринятые стандарты, на которые опирается большинство владельцев web-сайтов, при проектировании рекламных мест на своем ресурсе.
Формат баннера – это площадь, занимаемая баннером на web-странице. Форматы баннеров указываются при помощи двух чисел, разделенных “x” (например: 468х60). Первое число в записи представляет собой параметр ширины баннера, второе число – параметр высоты баннера. Таким образом, запись вида 468х60 говорит о том, что длинна баннера – 468 пикселей, а высота 60 пикселей.
В сети существуют общепринятые форматы баннеров, призванные упростить жизнь, как владельцам рекламных площадок, так и рекламодателям.
Основные общепринятые форматы баннеров:
728x90 – самый большой, из общепринятых форматов. Занимает большую часть ширины web-страницы. Баннеры такого формата вмещают в себя максимум необходимой информации о рекламируемом web-сайте и способны привлечь максимальное число посетителей. Не имеет большой популярности ввиду высокой стоимости размещения.
468х60 – один из самых популярных форматов баннера. Баннер такого формата представляет собой достаточно большой графический элемент, способный привлечь внимание большинства посетителей. По популярности с этим форматом может сравниться только 88х31.
125x125, 100х100 – так называемые “квадратные” баннеры. Эти форматы баннеров достаточно популярны в сети, хотя и передают пользователю гораздо меньший объем информации, нежели баннеры 728 x 90 и 468х60.
88x31 – часто такие баннеры называют “кнопкой”. По причине своего размера, содержат минимум информации и малозаметны пользователю. Такие баннеры привлекают минимальное количество посетителей. Высокая популярность “кнопок” обусловлена низкой ценой за размещение.
При выборе формата, необходимо помнить о том, что все форматы баннеров имеют свои стандарты по “весу”. Чем больше “вес” баннера, тем больше время его загрузки в браузере. Таким образом, баннеры со значительными отклонениями от стандартов в “весе” имеют шанс остаться незамеченными пользователем – они просто не успеют загрузиться.
По этой причине, крайне не желательно пытаться уместить большое количество текста и графической информации в крохотную баннер-кнопку.
При создании баннера необходимо понять какую цель вы перед собой ставите (Приложение1.pps – слайд 14)
- Целевые баннеры — используются для привлечения на сайт четко обозначенной целевой аудитории.
- Информационные — информируют посетителей о новых товарах, услугах, разработках. Также к этому виду баннеров можно отнести новостные информеры.
- Внутренние — ведут на конкретную страницу сайта, частично содержат в себе информацию с данной страницы.
- Брендовые — вызывают ассоциацию между товаром и торговой маркой. Часто используют логотип или товарный знак.
Давайте определим для чего нужен баннер. Выделяют четыре основных задачи, которые должен решить баннер:
- Привлечь внимание. Если он не обратил на себя внимание, то контакта с клиентом не произойдет. Это самый начальный результат показа баннера, поскольку это не идет ни на пользу имиджу компании и никак не влияет на посещаемость сайта.
- Заинтересовать. Клиент должен захотеть рассмотреть баннер повнимательнее и почувствовать интерес к рекламируемому сайту или товару.
- Подтолкнуть к переходу на сайт. Некий элемент недосказанности, недостаток информации в баннере должен побудить к переходу на сайт для получения более полных сведений.
БАННЕРЫ нужны всегда, везде и буквально всем, кто хочет, чтобы о его товарах или услуге узнали и заинтересовались. Баннеры — это привлекательный и оригинальный способ заявить о себе, показать лучшие свои стороны в яркой запоминающейся форме. Ну и, конечно же, баннеры — это неотъемлемая составляющая фирменного стиля компании, ее имиджа.
Мы с вами сегодня создадим баннеры из заранее подготовленных файлов.
Проще всего в программе ImageReady, реализуется анимация из заранее подготовленных файлов с фазами движения.
Примечание. Баннер с шаблонами Приветствие и баннер – морфинг создаются вместе с учителем. (С демонстрацией на интерактивной доске). Кто из учеников работает в своем режиме, может воспользоваться лабораторной работой (Приложение2.doc) на рабочих местах. В оставшееся время ученики сами выбирают заготовку, из которой создают баннер.
5. Практическая работа учащихся за компьютером (Приложение2.doc)
Создание GIF анимации для Web в программе Adobe ImageReady
Упражнение 1. Оживим баннер незатейливыми картинками.
- Загрузите программу Image Ready (Пуск\Все программы\ Adobe ImageReady).
- Откройте рисунки (Файл\Открыть…).
- Скопируйте все рисунки в один файл:
- Откройте окно Анимация (Окно-Анимация).
- В палитре анимации выберите пункт “Создать кадры из слоев”.
- Расположить кадры в нужном порядке.
- Задайте время анимации.
- Выберите параметр цикла в окне Анимация.
- Просмотрите результат
- Сохраните это как проект в формате psd (Файл – Сохранить как…) и результат - в формате gif (Файл - Сохранить оптимизированный как…).
Упражнение 2. Морфинг
Морфинг - это процесс, при котором один объект плавно меняется в другой.
- Загрузите ImageReady.
- Откройте рисунки (Файл\Открыть…).
- Скопируйте все рисунки в один файл (каждое изображение появилось на отдельном слое).
- Откройте окно Анимация (Окно-Анимация).
- Создайте кадры из слоев (теперь у нас есть два кадра).
- На панели анимации выберите пункт меню Создать промежуточные кадры
- Задайте время анимации.
- Выберите параметр цикла.
- Нажмите кнопку воспроизведения анимации.
- Сохраните изображение в папку как проект в формате psd (Файл – Сохранить как…) и результат - в формате gif (Файл - Сохранить оптимизированный как…).
6. Просмотр и обсуждение результатов
По цели создания баннеры размещают на определенные слайды презентации (Приложение1.pps – слайд14, 16-19)
7. Рефлексия (цветовые жетоны)
Оценить работу на занятии с позиции:
„Я“ – 1) работал отлично. 2) допускал ошибки
„Мы“ – 1) мне помогли одноклассники или учитель 2) я одноклассникам
„Дело“ – 1) у нас получились отличные баннеры 2) надо еще поработать над созданием анимации.