Как создать анимацию и анимационный баннер для сайта
Оценка 4.8

Как создать анимацию и анимационный баннер для сайта

Оценка 4.8
Лабораторные работы +2
doc
информатика +1
11 кл +1
29.03.2018
Как создать анимацию и анимационный баннер для сайта
Как создать анимацию и анимационный баннер для сайта Автор – Владимир Молочков, преподаватель в.к.к. Анимируем изображения Ниже мы рассмотрим создание анимации и баннера в программе Ulead GIF Animator. Это утилита для создания, редактирования, оптимизации анимационных GIF изображений. Для работы используем 4 готовых картинки (можете нарисовать свой вариант картинок в каком-либо графическом редакторе) - рис.1. Рис. 1. Последовательность изображений для создания анимации Сохраним каждый рисунок в виде отдельного файла на диск (рис. 2). Рис. 2. Получаем 4 файла с расширением *.JPG Запускаем программу Ulead GIF Animator и активируем Мастера анимации (рис. 3). Рис. 3. Окно запуска Мастера Анимации Задаем размер кадра анимации (рис. 4). Рис. 4. Задам размер окна анимации Добавляем 4 наших изображения (соблюдая порядок чередования картинок) – рис. 5. Рис. 5. В каком порядке здесь заданы картинки, в таком они и будут демонстрироваться Продолжительность показа кадра оставим неизменной – по умолчанию (рис. 6). Рис. 6. Задаем время показа каждой картинки на экране ПК Нажимаем на кнопку «Далее» - анимация готова (рис. 7). Рис. 7. Панель демонстрации анимации в программе UGA В заключение командой Файл – Сохранить Как сохраняем GIF - файл на диск или флешку (рис. 8). Рис. 8. Сохраняем анимацию на диск Делаем динамичный баннер Динамичный интернет баннер — подвижное графическое изображение с расширением *GIF (часто рекламного характера). 468 x 60 пикселей - стандартный размер баннера для Интернет. Примеры баннеров можно увидеть здесь: http://xn--80abnaaxhnha8af.xn--p1ai/portfolio.html здесь https://1ps.ru/cost/banner/ или здесь http://bannersnice.ru/portfolio/portfolio-bannerov-razlichnoj-tematiki Работу начнем с подготовки кадров анимационного баннера в каком-либо графическом редакторе. Определяемся с примерным сценарием баннера: что и как будет двигаться. Ищем в Сети нужные заготовки, готовим логотип и другую графику, которую вы хотите вставить в свой будущий баннер. Совет Чаше всего в баннерах делают тонкую рамку на границе видимой области, некоторые сайты даже не принимают рекламные баннеры, не ограниченные рамкой. Для создания простейших статичных картинок можно использовать MS Paint. Мы создадим 3 заготовки кадров для баннера размером 468 на 60 пикселей – рис. 9. Назовем картинки 1-3.jpg. Рис. 9. Три картинки для будущей анимации готовы Далее воспользуйтесь аниматором Ulead GIF Animator и в стартовом окне программы выберем Мастера Анимации – рис. 10. Рис. 10. Вид стартового окна программы Другой вариант начала работы – выполнить команду Файл (File)-Мастер Анимации (Animation Wizard) - рис. 11. Рис. 11. В этом меню выберем Мастер Анимации Добавьте картинки (рис. 12). Рис. 12. Кнопкой Добавить изображение (Add Image) загрузите созданные ранее рисунки баннера. На следующем шаге Мастера задайте паузу между показом картинок, например, установите время показа каждой картинки в 100 единиц (это соответствует задержке в 1 сек) – рис. 13. Рис. 13. Окно установки временной задержки между кадрами Когда работа мастера будет завершена - щелкните на закладке Предпросмотр (Preview) и вы увидите результат вашей работы. Но мы продолжим для того, чтобы баннер стал легче, тогда он быстрее будет грузиться. Щелкните на кнопке F11 или выполните команду Файл-Мастер оптимизации – рис. 14. Рис. 14. Перед вами два изображения баннера: слева до оптимизации, справа - после Чем меньше цветов, тем легче баннер, но, уменьшайте количество цветов, лишь до тех пор, пока правая картинка не станет более или менее идентичной левой. Тогда соотношения "качество - вес" будет приемлемо с потерями в качестве картинки. После завершения процесса оптимизации баннер можно сохранить.Как создать анимацию и анимационный баннер для сайта
Как делать GIF анимацию для Интернет.doc
Как создать анимацию и анимационный баннер для сайта Автор – Владимир Молочков, преподаватель в.к.к. Анимируем изображения Ниже мы рассмотрим создание анимации и баннера в программе Ulead GIF Animator.  Это утилита для создания, редактирования, оптимизации анимационных GIF  изображений. Для работы используем 4 готовых картинки (можете нарисовать свой  вариант картинок в каком­либо графическом редакторе) ­ рис.1. Рис. 1. Последовательность изображений для создания анимации Сохраним каждый рисунок в виде отдельного файла на диск (рис. 2). Рис. 2. Получаем 4 файла с расширением *.JPG Запускаем программу Ulead GIF Animator и активируем Мастера анимации (рис. 3). 1 Рис. 3. Окно запуска Мастера Анимации Задаем размер кадра анимации (рис. 4). Рис. 4. Задам размер окна анимации Добавляем 4 наших изображения (соблюдая порядок чередования картинок) – рис. 5. 2 Рис. 5. В каком порядке здесь заданы картинки, в таком они и будут  демонстрироваться Продолжительность показа кадра оставим неизменной – по умолчанию (рис. 6). Рис. 6. Задаем время показа каждой картинки на экране ПК Нажимаем на кнопку «Далее» ­ анимация готова (рис. 7). 3 Рис. 7. Панель демонстрации анимации в программе UGA В заключение командой Файл – Сохранить Как сохраняем GIF ­ файл на диск или  флешку (рис. 8). Рис. 8. Сохраняем анимацию на диск Делаем динамичный баннер  Динамичный интернет баннер — подвижное графическое изображение с расширением  *GIF (часто рекламного характера). 468 x 60 пикселей ­ стандартный размер баннера  для Интернет. Примеры баннеров можно увидеть здесь: http://xn­­80abnaaxhnha8af.xn­­p1ai/portfolio.html  здесь https://1ps.ru/cost/banner/  или здесь http://bannersnice.ru/portfolio/portfolio­bannerov­razlichnoj­tematiki Работу начнем с подготовки кадров анимационного баннера в каком­либо графическом редакторе. Определяемся с примерным сценарием баннера: что и как будет двигаться.  Ищем в Сети нужные заготовки, готовим логотип и другую графику, которую вы  хотите вставить в свой будущий баннер.  Совет Чаше всего в баннерах делают тонкую рамку на границе видимой области, некоторые  сайты даже не принимают рекламные баннеры, не ограниченные рамкой.  4 Для создания простейших статичных картинок можно использовать MS Paint. Мы  создадим 3 заготовки кадров для баннера размером 468 на 60 пикселей – рис. 9.  Назовем картинки 1­3.jpg.  Рис. 9. Три картинки для будущей анимации готовы Далее воспользуйтесь аниматором Ulead GIF Animator и в стартовом окне программы  выберем Мастера Анимации – рис. 10. Рис. 10. Вид стартового окна программы Другой вариант начала работы – выполнить команду Файл (File)­Мастер Анимации  (Animation Wizard) ­ рис. 11. 5 Рис. 11. В этом меню выберем Мастер Анимации Добавьте картинки (рис. 12).   Рис. 12. Кнопкой Добавить изображение (Add Image) загрузите созданные ранее  рисунки баннера.  На следующем шаге Мастера задайте паузу между показом картинок, например,  установите время показа каждой картинки в 100 единиц (это соответствует задержке в  1 сек) – рис. 13. 6 Рис. 13. Окно установки временной задержки между кадрами Когда работа мастера будет завершена ­ щелкните на закладке Предпросмотр  (Preview) и вы увидите результат вашей работы. Но мы продолжим для того, чтобы  баннер стал легче, тогда он быстрее будет грузиться. Щелкните на кнопке F11 или  выполните команду Файл­Мастер оптимизации – рис. 14. Рис. 14. Перед вами два изображения баннера: слева до оптимизации, справа ­ после Чем меньше цветов, тем легче баннер, но, уменьшайте количество цветов, лишь до тех  пор, пока правая картинка не станет более или менее идентичной левой. Тогда  соотношения "качество ­ вес" будет приемлемо с потерями в качестве картинки. После  завершения процесса оптимизации баннер можно сохранить. 7 8

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

Как создать анимацию и анимационный баннер для сайта

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