. Навчитися створювати банер зі зміною фонових картинок. Навчитися створювати текстовий банер. Опанувати засоби анімації у програмі Adobe Photoshop CS5.

Тема:  Створення анімованого банера для веб-сторінок.

Мета:

         Навчальна. Навчитися створювати банер зі зміною фонових картинок. Навчитися створювати текстовий банер. Опанувати засоби анімації у програмі Adobe Photoshop CS5.

         Розвиваюча. Сприяти розвитку пам'яті, уваги. Сприяти розвитку творчого підходу для освоєння програмного продукту, самостійності при роботі з програмним продуктом.

Виховна. Виховувати уважність та дисциплінованість під час роботи на ПК.

Урок – портіоліо

Методи. Усне декламування, пошукові, інтерактивні, практична робота, спостереження

Прийоми: «Діалог», «Цифрові історії «до» і «після»», створення проблемної ситуації, «Вставити пропушене слово», «Інтелект-картки», робота за зразком, «Робота на онлайн дошці»,

Форми роботи . Парна, індивідуальна, фронтальна

Основні терміни і поняття. Палітра, шар, стиль шару, активний шар. Палітра анімації.

 

Міжпредметні зв′язки. Загальноосвітні та спеціальні предмети, в яких необхідно використовувати комп′ютери для створення графічних зображень та обробки візуальної інформації, отриманої з реального світу.

Наочність.  картки з текстами практичних робіт, інструкцції з БЖД., файли для робіт на уроці,

 Технічні засоби навчання. Комп’ютери, мультимедійний проектор, презентація вчителя, локальна мережа, інтернет. Програмний засіб  Adobe Photoshop CS5., сервіс  LearningApps, сервіс JuxtaposeJS,  сервіс H5P,  програмний засіб MS PowerPoint, сервіс Padlet,  програмний засіб Netop School

 

План:

1. Вступ /Діалог / 2 хвилини
2. Домашнє завдання / Цифрові історії / 3 хвилини
3. Мотивація навчальної діяльності./ Обговорення відео та прикладів/ 3 хвилини
4. Здоров’єзберигаюча пауза / Додаток 1 0,5 хвилин
5. Актуалізація вивченного матеріалу /  інтерактивні вправи у LearningApps  та флеш – картки у GoConqr / 6 хвилин
6. Інструктаж з БЖД / Відеоролік з ТБ, створений за допомогою сучасної програми створення мальованих презентацій Videoscribe Sparcol  / 1.5 хвилин
7. Практична робота /  Робота за комп’ютером  / 23 хвилин
8. Підбиття підсумків уроку. Рефлексія/     Коментарі на онлайн дошці Padlet  /5 хвилин
9. Інформація – інструктаж домашнього завдання/   PDF на сайт   / 2 хвилини

Хід уроку:ПОРТРЕТ ОБ’ЄКТУ

1. Оргмомент / «Портрет об’єкта - рекламного продукту»/ Slide 1, 2

Вступ / 2 хвилини Привітаємося

Вчитель починає: «Реклама повинна говорити за нас! - Це має бути маніфест! »

Учень 1 - додає: : «Нам потрібен ролик, який буде кричати з екрану про величезну роботу, яку ми проробили»

   Учень 2 - додає: „Ми зробили значки на екрані такими красивими, що вам захочеться їх лизнути“ (Про Mac OS X, Fortune, 2000 рік)

Вчитель підсумовує: Да це Стив Джобс, який прославився не стільки своїми винахідами, скільки вмінням їх продавати та продвигати на ринку.

Учень 3 Якби у мене було 4 долари, 3 з них я б віддав на рекламу. Вважав засновник світового автопрому американець Генрі Форд.

 

2. Домашнє завдання / Цифрові історії / 3 хвилини

8 прикладів (1 від кожної пари) , яка реклама була і яка стала, сервіс JuxtaposeJS,  «Портрет об’єкта - рекламного продукту»/ Slide 3

 

3. Мотивація навчальної діяльності. 3 хвилини / «Портрет об’єкта - рекламного продукту»/ Slide 4 ,5
   • Перегляд рекламного  відеороліка - «Вольво» з Жаном-Клодам Ван Дамом

Це не може не захватити, приголомшити, вразити, зацікавити, ….і ще тисячі коментарів та бажання повертатися до перегляду багато разів. Бо це мабуть вже мистецтво!

 

Банер – це як вже було сказано на першому уроці теми різновид реклами.

 

• Перегляд шаблону банера вартістю 15-20$

 

 

 

 

 

ПОРТФЕЛЬ ДОКУМЕНТІВ

4. Здоров’єзберигаюча пауза / Додаток 1 0,5 хвилин
5. Актуалізація вивченного матеріалу /  інтерактивні вправи у LearningApps  та інтелект картки/ 6 хвилин

Інтерактивна вправа «Таблиця відповідностей»

 

 

Інтерактивна вправа «Флеш - картки»

 

 

 

 

 

 

 

6. Інструктаж з БЖД / Відеоролік з ТБ, створений за допомогою сучасної програми створення мальованих презентацій Videoscribe Sparcol  / 1.5 хвилин

 

ПОРТФЕЛЬ РОБІТ

 

7. Практична робота /  Робота за комп’ютером  / 23 хвилин

 

ПОРТФЕЛЬ ВІДГУКІВ

 

8. Підбиття підсумків уроку. Рефлексія/     Коментарі на онлайн дошці Padlet  /5 хвилин

Нижня сходинка, у «людинки» руки вниз – у мене нічого не вийшло; середня сходинка, у «людинки» руки в боки – у мене були складнощі; верхня сходинка, у «людинки» руки вверх – мені все вдалося.

Натиснути на «ПЛЮС» та вставте відповідну картинку

9. Інформація – інструктаж домашнього завдання/   PDF на сайт  / 2 хвилини / Додаток 3

 

 

 

 

 

 

 

 

 

 

Додаток 1

 

Вправи для зняття м'язового напруження

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

Прямі руки розвести в боки долонями догори, зробити вдих.

Схрестити руки перед грудьми, міцно обхопити себе за плеч. Повторити 5 разів.

Кругові рухи ліктями вперед протягом 5 с.

Те саме назад. Дихати рівномірно.

Вправи для зняття зорової втоми

Вправи виконуються сидячи в зручній позі, хребет прямий, очі відкриті, погляд — прямо, відвернувшись від комп'ютера.

Погляд спрямовувати вліво-вправо, вправо-прямо, вгору-прямо, додолу-прямо без затримки в кожному положенні. Повторити 5 разів в одному і 5 разів у зворотному напрямі.

Заплющити очі на рахунок «раз два», розплющити й подивити­ся на кінчик носа на рахунок «три-чотири».

Колові рухи очей: до 5 кіл уліво і вправо

 

 

 

 

 

 

 

 

 

 

 

 

Додаток 2

Лабораторна робота

Тема. Створення банеру. Анімація у програмі Adobe Photoshop CS5.

Мета.

1. Навчитися створювати банер зі зміною фонових картинок
2. Навчитися створювати текстовий банер.
3. Опанувати засоби анімації у програмі Adobe Photoshop CS5.

 

Хід роботи

Завдання. Створити банер,у якому змінюються три різні картинки з рекламою.

1. Створити перший кадр та зберегти його

1. В папке  ГРУПА  №….   створити папку    БАНЕР
2. В папку  БАНЕР  по локальной сети перетянуть из папки PHOTOSHOP 3  картинки  k11, k22, k33
3. Відкрити програму  Adobe Photoshop CS5 
4. ФАЙЛ  /  СОЗДАТЬ
5. Заповнити вікно  НОВИЙ       
6. ОК 

 

 

 

7. ФАЙЛ / ОТКРЫТЬ КАК /  обрати   k11 / JPEG  / открыть

 

 

 

 

 

 

8. ФАЙЛ / ОТКРЫТЬ КАК /  обрати   k11 / JPEG  / открыть
9. Якщо не з’явиться вікно  СЛОИ  (червона границя), натиснути   ОКНО /  СЛОИ

 

10. Натиснути на інструмент ВЫДЕЛЕНИЕ / CTRL+A (виділити все) / CTRL+C (копіювати ) / X (закрити картинку k11) / CTRL+V (вставити)
11. Ви повинні у вікні СЛОИ мати наступну картину

 

 

 

12. Натиснути на інструмент текст, обрати шрифт  ARIAL  60  синий,  написати     ТОКАР , применить (закрепить действие) CTRL+ENTER
13. Натиснути інструмент

Перемістити текст на середину кадру, слідкуйте за вікном  СЛОИ

 

 

 

 

 

 

 

 

 

 

 

14. ФАЙЛ / СОХРАНИТЬ ДЛЯ   WEB   И УСТРОЙСТВ / JPEG / СОХРАНИТЬ

 

 

 

 

 

 

 

 

 

 

 

15. Слідкуйте, щоб картинка була збережена у папці  БАНЕР, а назва картинки була   k111.jpeg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

16. Після збереження картинки закрийте робоче вікно з картинкою, і ви знову готові до роботи.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Створити другий  кадр та зберегти його, для цього повторити кроки 4  -  11

Зміни:

7 пункт  ФАЙЛ / ОТКРЫТЬ КАК /  обрати   k22 / JPEG  / открыть

12 пункт  ARIAL  60  червоний,  написати     РИХТУВАЛЬНИК

15 пункт  Слідкуйте, щоб картинка була збережена у папці  БАНЕР, а назва картинки була   k222.jpeg

 

5 балів

3. Створити третій  кадр та зберегти його, для цього повторити кроки    4  -  11

Зміни:

7 пункт  ФАЙЛ / ОТКРЫТЬ КАК /  обрати   k33 / JPEG  / открыть

12 пункт  ARIAL  60  зелений,  написати     ПРОДАВЕЦЬ

15 пункт  Слідкуйте, щоб картинка була збережена у папці  БАНЕР, а назва картинки була   k333.jpeg

 

 

 

 

4. Створити анімацію з трьох кадрів

1. ФАЙЛ / ОТКРЫТЬ КАК/ папка  БАНЕР  /  файл  k111.jpeg
2. ФАЙЛ / ОТКРЫТЬ КАК/ папка  БАНЕР  /  файл  k222.jpeg
3. ФАЙЛ / ОТКРЫТЬ КАК/ папка  БАНЕР  /  файл  k333.jpeg 

 

 

 

 

 

 

 

 

 

 

 

4. Активувати файл  k222.jpeg  Натиснути на інструмент ВЫДЕЛЕНИЕ / CTRL+A (виділити все) / CTRL+C (копіювати ) / X (закрити картинку k222.jpeg  ) /  активувати файл  k111.jpeg  CTRL+V (вставити)
5. Активувати файл  k333.jpeg  Натиснути на інструмент ВЫДЕЛЕНИЕ / CTRL+A (виділити все) / CTRL+C (копіювати ) / X (закрити картинку k333.jpeg  ) /  активувати файл  k111.jpeg  CTRL+V (вставити)

 

 

 

 

 

 

6. ОКНО  /  АНИМАЦИЯ , зверніть увагу на області з червоною границею

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. Натиснить на кнопку, з’явиться вікно , СОЗДАТЬ КАДРЫ ИЗ СЛОЕВ             

 

 

 

 

 

8. Натисніть на CHIFT та виділить усі три кадри, дивись малюнок
9. Натисніть на обрати час, оберіть 1сек 

 

 

 

 

 

 

 

 

10. Натисніть , ПОСТОЯННО, щоб зациклити  анімацію

 

 

 

 

 

11. Натисніть  ФАЙЛ / СОХРАНИТЬ ДЛЯ   WEB   И УСТРОЙСТВ / GIF / СОХРАНИТЬ
12. Слідкуйте, щоб картинка була збережена у папці  БАНЕР, а назва картинки була   baner.gif
13. Після збереження картинки закрийте робоче вікно з картинкою, і ви знову готові до роботи.

 

 

 

 

 

5. Перевірити, чи маєте ви діючий банер.

1. Відкрити вікно програми MS PowerPoint  ПУСК / MS POWERPOINT
2. ВСТАВКА / РИСУНОК/ ……БАНЕР
3. F5

 

Завдання2 .

Створити банер,у якому змінюються текст

1. Фон, текст, формат тексту

 

1. ФАЙЛ / ОТКРЫТЬ КАК /  обрати   k44 / JPEG  / открыть

 

 

2. Натиснути на інструмент текст
3.  Натиснути   ОКНО /  СИМВОЛ  обрати шрифт  ARIAL  60  желтый,  написати     ВІТАЮ , применить (закрепить действие) CTRL+ENTER

 

 

 

 

 

 

 

 

4. Натиснути інструмент

Перемістити текст див малюнок

 

 

5. Натиснути   ОКНО /  СТИЛЬ

 

 

 

 

 

6. Натиснути на око (глаз) біля шару (слоя) Текст, слово ВІТАЮ зникне             

 

 

 

 

 

 

 

 

 

 

 

 

 

7. Повторити пункти 2, 3, 4 5, 6 Написати НА САЙТІ, стиль обрати на свій смак

 

 

 

8. Натиснути на око (глаз) біля шару (слоя) Текст, слово НА САЙТІ зникне

 

 

 

 

 

 

 

 

 

 

 

 

9. Повторити пункти 2, 3, 4 5, 6 Написати BESTPROFIN, стиль обрати на свій смак

 

 

 

2. Створити анімацію тексту

1. ОКНО  /  АНИМАЦИЯ
2. Натиснути на кнопку створення палітри анімації у вигляді кадрів

 

 

 

 

 

Маємо перший кадр, який містить ФОН та слово ВІТАЮ

3. Створимо другий кадр, для цього натиснемо кнопку  

 

 

 

4. Слідкуйте за слоями: фон вкл., вітаю выкл, на сайті вкл., bestprofi  выкл.

 

 

 

 

 

 

 

 

 

 

 

5. Створимо третій  кадр, для цього натиснемо кнопку  

 

 

 

 

6. Слідкуйте за слоями: фон вкл., вітаю выкл, на сайті выкл., bestprofi  вкл.

 

 

 

 

 

 

 

 

 

 

3. Формат анімації

1. Виділити кадр1 CHIFT виділити всі три кадри , та поставити час  1сек
2. Програти що отримали,

 

 

 

 

 

 

3. Створити / Активувати на панелі анімації ПЕРШИЙ КАДР / натиснути значок ПРОМІЖНІ КАДРИ/
4. ПРОМЕЖУТОЧНЫЕ КАДРЫ, 4, ОК

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Активувати  кадр 6. Створити  ПРОМЕЖУТОЧНЫЕ КАДРЫ, 4, ОК                                                       

 

6. Активувати  кадр 11. Створити  ПРОМЕЖУТОЧНЫЕ КАДРЫ, 4, ПЕРВЫЙ КАДР, ОК

 

 

 

 

 

 

 

 

7. Програти що отримали,

 

 

8. КАДРИ  2,3,4,5   7,8,9,10   12, 13, 14, 15  поставити 0,1 сек. ПРОГРАТИ!

 

14. Натисніть  ФАЙЛ / СОХРАНИТЬ ДЛЯ   WEB   И УСТРОЙСТВ / GIF / СОХРАНИТЬ
15. Слідкуйте, щоб картинка була збережена у папці  БАНЕР, а назва картинки була   baner2.gif

6. Перевірити, чи маєте ви діючий банер.

16. Відкрити вікно програми MS PowerPoint  ПУСК / MS POWERPOINT
17. ВСТАВКА / РИСУНОК/ ……БАНЕР
18. F5
19. Покажіть слайд викладачу.

 

 

 

 

 

Додаток 3