• Авторизация


Урок - музыкальный коллаж (с анимацией без фотошопа) 19-03-2013 04:34 к комментариям - к полной версии - понравилось!



//img-fotki.yandex.ru/get/5638/160780412.26/0_a5ee9_588fdb70_XL.png
Урок - музыкальный коллаж (с анимацией без фотошопа).

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

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


Я на коллаже удалила прямоугольным выделением полоски в виде рамочки по сторонам. Они у меня немного широкие, но это для примера. Чем уже вы сделаете полосочку, тем красивее будет по уголкам анимация. Еще я применила Ластик (звезды).
Готовый коллаж сохраняете в формате 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/..." 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/..." width="40" height="0" title="" alt="" border="0"/><div align="center">ВАША МУЗЫКА<center><img src="//img-fotki.yandex.ru/..." width="ШИРИНА ВАШЕГО КОЛЛАЖА" height="0" title="" alt="" border="0"/><br ><br ></font></font></td></tr></table></i>

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

Фон №1.
//img-fotki.yandex.ru/...

Фон №2.
//img-fotki.yandex.ru/...

Фон анимация.
//img-fotki.yandex.ru/...

Ссылка на коллаж.
//img-fotki.yandex.ru/...

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

Картинка - птицы.
//img-fotki.yandex.ru/...

Блинги (сердечки).
//img-fotki.yandex.ru/...

Размер анимашек можете менять, для этого вам нужно менять только ширину, (а высоту удалите вообще) она у вас встанет автоматически. Это нужно для того, чтобы картинки - анимашки по размеру соответствовали вашему коллажу.
Если у вас коллаж будет больше в высоту чем у меня, вы можете между картинками поставить теги, (<br > ) чтобы коллаж растянулся весь в высоту.
Вы можете для начала, чтобы понять смысл, вставить мои ссылки в формулу, а затем когда поймете смысл вы будете уже сами фантазировать.
И еще, когда вы поймете смысл, вы можете из формулы удалить мои картинки - анимашки и вставить свои.
Принцип размещения картинок таков, все регулируете тегами.
<left> Картинка слева.
<center> Картинка по центру.
<right> Картинка справа.
Если вам нужно немного сместить картинку влево или вправо, но не помогает тег, тогда используйте этот код,
<img src="//img-fotki.yandex.ru/..." width="80" height=0" title="" alt="" border="0"/>
вам в нем нужно будет менять только цифру, у меня стоит 80, а вы уже будете решать сами. Но высота должно стоять 0. Это код картинки анимашки, но весь секрет в том, что высота у нас стоит 0, мы ее в коллаже не видим. Если вам нужно отодвинуть влево картинку то код ставите перед картинкой или наоборот. Между кодом и картинкой добавляете тег ( &nbsp; ). Этот тег используется для того, чтобы несколько картинок стояли в один ряд.
Но вот вроде и все!!! Желаю успехов в творчестве!!! Не бойтесь фантазировать!!!
Когда поймете смысл работы с формулой у вас работы будут с великолепной анимацией.
Такой коллаж вы не сможете вставит в рамочку, но он будет великолепно смотреться просто отдельным постом.
Можно не вставлять картинки - анимашки, а по всему коллажу разместить музыку. Для этого удалите картинки из формулы и вставьте вашу музыку в ряд.

Желаю удачи!!!
4360286_edf54eafe492 (9x8, 0Kb)

 

вверх^ к полной версии понравилось! в evernote
Комментарии (13):
Как хорошо собрали уроки... Я пока не соображаю как это сделать...
LudmelaRU 24-01-2014-23:10 удалить
Ответ на комментарий Керчаночка # Здравствуйте! Мне тоже пока не всё удаётся..., но пробую. Для удобства всегда открываю урок в пол экрана, а на второй свой черновик, тогда сразу видно пошаговой ход. Успеха!!улыбка!
Спасибо вам большое за ссылочки!!!
LudmelaRU 02-03-2014-04:06 удалить
Ответ на комментарий Галина_Назаренко # Пожалуйста! Заходите, читайте, что Вам интересно забирайте!
Я_ни_Ева 23-04-2016-14:30 удалить
Спасибо !!! Цитирую !!! Всего вам хорошего в вашем творчестве !!!
LudmelaRU 23-04-2016-23:56 удалить
Ответ на комментарий Я_ни_Ева # Я_ни_Ева,
Ответ на комментарий LudmelaRU # Это как в "пол экрана"?А я не умею,как сделать...
LudmelaRU 16-10-2016-02:30 удалить
Ответ на комментарий ПАНИ_ВАЛЕНТИНА # Валюша! Открываешь урок и черновик с новой записью. Дальше с право на компе рядом с значком Х, есть 2 квадратика... Когда нажать, то страничка свёртывается в пол экрана. Затем мышкой с адресной строке перетаскиваешь один и вставишь параллельно. Вот и всё. Написала "бабушкиной методикой"... Пиши, если не понятно.
Ответ на комментарий LudmelaRU # Людочка огромное спасибо!
LudmelaRU 16-10-2016-10:51 удалить
Ответ на комментарий ПАНИ_ВАЛЕНТИНА # Пожалуйста, Валюша! Что не понятно пиши, что знаю подскажу...
Людочка,спасибо за урок!Цитирую!
LudmelaRU 08-02-2017-19:50 удалить
Ответ на комментарий Акинина_Валентина # Наилучших пожеланий тебе, Валюша!


Комментарии (13): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Урок - музыкальный коллаж (с анимацией без фотошопа) | LudmelaRU - Дневник LudmelaRU | Лента друзей LudmelaRU / Полная версия Добавить в друзья Страницы: раньше»