Урок - музыкальный коллаж (с анимацией без фотошопа).

Этот урок для тех кто научился работать в Эдиторе (или фотошопе), но не владеет анимацией!!!

Для этого нам потребуется готовый коллаж, который загрузим в Эдитор или фотошоп. Нам нужно в коллаже удалить по вашей фантазии некоторые части, детальки, чтобы там у нас появился прозрачный фон.

Удалять можно волшебной палочкой, прямоугольным выделением, ластиком. В ластике есть кисти (звездочки, цветочки...) Применяйте фантазию, будет очень красиво.

Я на коллаже удалила прямоугольным выделением полоски в виде рамочки по сторонам. Они у меня немного широкие, но это для примера. Чем уже вы сделаете полосочку, тем красивее будет по уголкам анимация. Еще я применила Ластик (звезды).

Готовый коллаж сохраняете в формате PNG. Для коллажа нам нужна будет ссылка с Яндекса или с Радикала (ссылка №1), которую вставим в формулу.

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

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

В Радикале или в Яндексе смотрите ширину вашего коллажа и вставляете в двух местах в формулу рамочки.

Расчет такой - если у вас коллаж 700 пик, то в формулу ставите 696 пик. Это для того, чтобы у вас в формуле с правой стороны не вылез повтор коллажа.
 

---

Формула рамки.

---

<div align="center"><tr><td width=ШИРИНА КОЛЛАЖА><font style="display:block;border;background-image:url(1 ФОН АНИМАЦИЯ, обводка рамки, ССЫЛКА НА ФОН);padding:2px"><font style="display:block;border;background-image:url(2 ФОН АНИМАЦИЯ, обводка рамки, ССЫЛКА НА ФОН);padding:2px"><font style="display:block;border;background-image:url(1 ФОН АНИМАЦИЯ, обводка рамки, ССЫЛКА НА ФОН);padding:2px"><font style="display:block;border;background-image:url(2 ФОН АНИМАЦИЯ, обводка рамки, ССЫЛКА НА ФОН);padding:2px"><font style="display:block;border;background-image:url(ФОН ДЛЯ АНИМАЦИИ КОЛЛАЖА, ССЫЛКА НА ФОН);padding:0px"><font style="display:block;border;background-image:url(ССЫЛКА НА КОЛЛАЖ);padding:2px"><div align="center"><font face="Georgia" color="#dec6df" style="font-size:20px"><I><B><left><img src="Картинка, ССЫЛКА НА АНИМАЦИЮ" width="100" height="" title="" alt="" border="0"/> <img src="Картинка, ССЫЛКА НА АНИМАЦИЮ" width="150" height="" title="" alt="" border="0"/><right><img src="Картинка, ССЫЛКА НА АНИМАЦИЮ" width="150" height="" title="" alt="" border="0"/> <img src="//img-fotki.yandex.ru/get/6443..._84e7f72a_M.gif" width="80" height=0" title="" alt="" border="0"/> <right><a href="ССЫЛКА НА ВАШ БЛОГ"><img src="Блинги (сердечки), ССЫЛКА НА АНИМАЦИЮ" width="170" height="170" title="" alt="" border="0"/></a> <img src="//img-fotki.yandex.ru/get/6443..._84e7f72a_M.gif" width="40" height="0" title="" alt="" border="0"/><div align="center">ВАША МУЗЫКА<center><img src="//img-fotki.yandex.ru/get/6443..._84e7f72a_M.gif" width="ШИРИНА ВАШЕГО КОЛЛАЖА" height="0" title="" alt="" border="0"/><br ><br ></font></font></td></tr></table></i>

---

Рабочий материал, жмите и копируйте ссылки, вы будете видеть то, что будете вставлять в формулу. (Можно просто скопировать ссылки).

Фон №1.

//img-fotki.yandex.ru/get/5640...3a771e08_XS.gif

Фон №2.

//img-fotki.yandex.ru/get/6444...6407bb83_XS.gif

Фон анимация.

//img-fotki.yandex.ru/get/4131..._2d59bd43_S.gif

Ссылка на коллаж.

//img-fotki.yandex.ru/get/5638...588fdb70_XL.png

Анимашки для украшения коллажа.

Картинка - птицы.

//img-fotki.yandex.ru/get/6443..._84e7f72a_M.gif

Блинги (сердечки).

//img-fotki.yandex.ru/get/6426..._fe5e747b_M.gif

Размер анимашек можете менять, для этого вам нужно менять только ширину, (а высоту удалите вообще) она у вас встанет автоматически. Это нужно для того, чтобы картинки - анимашки по размеру соответствовали вашему коллажу.

Если у вас коллаж будет больше в высоту чем у меня, вы можете между картинками поставить теги, (<br > ) чтобы коллаж растянулся весь в высоту.

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

И еще, когда вы поймете смысл, вы можете из формулы удалить мои картинки - анимашки и вставить свои.

Принцип размещения картинок таков, все регулируете тегами.

<left> Картинка слева.
<center> Картинка по центру.
<right> Картинка справа.

Если вам нужно немного сместить картинку влево или вправо, но не помогает тег, тогда используйте этот код,
<img src="//img-fotki.yandex.ru/get/6443..._84e7f72a_M.gif" width="80" height=0" title="" alt="" border="0"/>
вам в нем нужно будет менять только цифру, у меня стоит 80, а вы уже будете решать сами. Но высота должно стоять 0. Это код картинки анимашки, но весь секрет в том, что высота у нас стоит 0, мы ее в коллаже не видим. Если вам нужно отодвинуть влево картинку то код ставите перед картинкой или наоборот. Между кодом и картинкой добавляете тег ( &nbsp; ). Этот тег используется для того, чтобы несколько картинок стояли в один ряд.

Но вот вроде и все!!! Желаю успехов в творчестве!!! Не бойтесь фантазировать!!!

Когда поймете смысл работы с формулой у вас работы будут с великолепной анимацией.

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

Можно не вставлять картинки - анимашки, а по всему коллажу разместить музыку. Для этого удалите картинки из формулы и вставьте вашу музыку в ряд.

Для тех, кто еще не знаком с Эдитором, но желает познакомится, уроки Здесь

Анимация онлайн

http://lunapic.com/editor/

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

Желаю удачи!!!

Спасибо за урок Виктории.