Логотип Валидатор Валидатор Качество создания сайта

АНИМАЦИЯ

Примеры анимации

Возможность создания движущихся рисунков с помощью программы "Фотошоп", позволяет повысить эффективность Вашего сайта.
Можно придумать бесчисленное множество сюжетов, которые привлекут внимание посетителей. А то, что привлекут - это точно! Следить за движущимися объектами заложено в людях генетически. Ой! Что это?!

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

GIF-анимация

Сначала представлю Вам примеры самой популярной, простой GIF-анимации, для создания которой, достаточно хорошо владеть программой "Фотошоп". Точнее - одной из входящих в его комплект самостоятельных программ - "Adobe ImageReady", которая и позволяет "вдохнуть жизнь" в рисунки, т.е. сделать их анимированными.
Эта самостоятельная программа способна объединять разные слои с изображениями, что были предварительно сделаны в фотошоп, и показывать их с заданными промежутками времени. Это и создаёт эффект движения, а другими словами - анимацию.

Первый её пример, сделанный во время обучения, Вы видите ниже.

Анимация в баннере

Анимированный баннер.
Сделал его для своего сайта, и разместил на главной странице.

Кроме того, что видно здесь, данный анимированный рисунок имеет ещё и собственную страницу "Анимированный баннер" (откроется в новом окне).


* * *


Штамп Баннер с анимацией

Баннер с анимацией.
Выполнен по заказу одного из посетителей сайта.

Цифры телефона я заменил на "ХХ" перед тем, как разместить в своё портфолио.

Сделать любой по сложности баннер - это всегда пожалуйста!
А вот рекламирую со страниц своего сайта только то, что испытал на себе, неоднократно опробовал.

* * *

Всё то же самое. Этот пример также имеет собственную страничку с похожим на предыдущий названием "Баннер с анимацией" (в новом окне).

Откуда у этих примеров появилась своя, отдельная веб-страница, объяснил в первом примере.


* * *


Штамп Реклама-анимация

Реклама-анимация.
Аналогично. Создана по заказу с сайта.

Цвета фона и рамки подбирал (согласно тех-заданию) гармонирующими с общим стилем заказавшего ресурса.

Внимание! Здесь и сейчас Вы видите только часть работы - анимированные картинки, а всю целиком можете посмотреть на её дополнительной странице:
"Интересное подключение анимации" (откроется в новом окне).

Я подключал её особым образом. Программно!


Кроме всего прочего, и этот пример также имеет собственную веб-страничку "Реклама с анимацией" (в новом окне).


* * *


Рисунок с анимацией

Рисунок с анимацией.
Сделан во время обучения работе с программой.

Внимание!Важно!  В данном случае наличие своей, отдельной страницы вполне обоснованно, т.к. я здесь вывел уменьшенный на 50% размер целого рисунка. Сделал такое в HTML-коде страницы, а в полном размере рисунок Вы можете посмотреть здесь: "Рисунок с анимацией" (в новом окне).

Переименовывать анимацию можно, а менять размер оригинала НЕЛЬЗЯ!

Нужные размеры анимированного изображения можно указать только в HTML-коде страницы!

В противном случае, анимация перестанет работать. Впрочем, компьютер умный! Он предупредит Вас об этом.

* * *


Фотография с анимацией

Фотография с анимацией.
Так же. Делал её, обучаясь работе с программой.
Автомобиль замигал фарами, и стал чуть привлекательнее. Кажется, ожил.

Оригинал "живёт" здесь: Фотография с анимацией

Вообще-то баловство, конечно.  Просто тренировка. Она самая!

А вот нижний пример анимации, думаю, уже гораздо практичнее.


* * *


Анимированный текст

Анимированный текст.
Создал такой пример во время своей очередной, ежегодной плановой переподготовки по работе с программой "Фотошоп".

Подобный анимированный текст можно применить в любом баннере или рекламе.

* * *

До сих пор на этой странице я показывал Вам примеры простой, так называемой "классической GIF-анимации", а дальше покажу пример интересной, но очень странной(!), особенной анимации.


Внимание!JPG-анимация

В этом подразделе показываю Вам анимацию, которую я вовсе не случайно(!) назвал "странной".
Дело в том, что расширение этого анимированного рисунка не GIF, как полагается, а JPG, что вообще-то очень странно!Действительно странно!

Ведь, кто изучал фотошоп, знают, что JPG-анимации не существует!

Но ... ... полюбуйтесь. Вот она, ниже.

JPG-анимация

Как видите, всё отлично работает, хотя по правилам фотошоп такого не должно быть. Чудеса, да и только! Не должно, а есть, и работает прекрасно! ... ... ?! Загадка...

Однако, не стану томить загадками. Всё подробно узнаете на смежной странице, которую я специально сделал, чтобы полностью раскрыть эту "тайну". Да! Секрет раскрыт!

Сможете там не только всё узнать, посмотреть другие примеры JPG-анимации, но и сами будете легко делать такие "фокусы".  Если они Вам понадобятся, конечно. Кто знает...

А упомянутая страница находится здесь: JPG-анимация


ВВЕРХ

Фотошоп

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Яндекс.Метрика