Открываем изображение которое мы будем использовать в качестве фона!
Кадрируем до размера 180*180 (или до какого хочешь), но не больше 200*200!

Итак, сохраняем нашу гифку на комп!
Идем в фотошоп, открываем Файл-Импортировать-Кадры в видеослои!
И вот тут самое интересное...в открывшемся окошке выбираем папку куда ты сохранила гифку! Но картинок ты не увидишь - не пугайся!
Идешь на свой компьютер, копируешь название гифки (полностью) и вставляешь в нижнюю строчку в открывшееся окошко в фотошопе!
У тебя выпадет окно в котором ты и выберешь адрес гифки, окончание строчки должно заканчиваться на .gif!
Жмешь ОК! В фотошопе откроется окно - в нем выберешь открыть все кадры!  (я бы тебе скрины скинула, но у меня CS5 64бит, в нем это нельзя сделать)
Выделяешь все кадры и стрелочкой перетаскиваешь на папочку внизу панели слои , теперь они у нас все в папке и не занимают место!

---

Возвращаемся к нашему исходнику (тобишь фону)!
Думаем куда бы нам поместить анимацию!
Так как у меня справа много место (при кадрировании я это просчитала), я буду вставлять анимацию туда!
Берем рамку в виде кадров, переносим ее на нашу картинку, устанавливаем так - как мы хотели бы ее видеть и ластиком стираем все лишнее

Берем инструмент перо (или что тебе удобней для выделения) с такими настройками

и выделяем ту область где у нас будет анимация, переходим во вкладку Контур и жмем на пунктирный кружочек внизу (создаем выделение)

Жмем на клавиатуре Delete (в этот момент у нас активен слой с картинкой!, а не с рамкой), снимаем выделение (Ctrl+D).
Вот мы подготовили базу

Переходим в окошко с нашей гифкой и стрелочкой перетаскиваем нашу папочку (которую мы создали до этого) на слой с картинкой!
Этот слой у нас должен стоять в самом низу палитры!

Жмем Ctrl+T (трансформация) и с зажатой клавишей Ctrl+alt трансформируем наши слои в папке до нужного размера, одновременно развернув (если нужно)

Открываем окно анимации Window-Анимация, в правом верхнем углу открывшегося окошка жмем на стрелочку, открываем меню и выбираем "Создать кадры из слоев" (у нас откроются все кадры по порядку), поэтому удаляем два последних (перетащив их на корзину) и включаем глаззики!
С зажатой клавишей Shift жмем на первый и последний кадр (выделяем их) , выставляем время раскадровки 0,1 сек и смотрим что получилось

Теперь можно добавить текстурку, надпись и авик готов!
Сохраняем для  Web

Шаг 1. Как обычно открываем изображения, кадрируем, не забываем про качество и перетаскиваем одно на другое.
Чтобы наш аватар не был пустым подберем к нему текстурку и наложим самым верхним слоем.
Режим наложения подбираем под свою картинку.
Теперь создадим рамочку:
создаем новый слой, заливаем его черным цветом, удерживая Ctrl кликаем на иконку слоя (создаем выделение).
Идем Выделение-Модификация-Бордюр, устанавливаем толщину 1 пикс, жмем Выделение-Инверсия и на клавиатуре Delete.
Переходим к вкладке Стили и выбираем там Пунктирные штрихи, подбираем подходящий.

Открываем окошко Window-Анимация.
Первый кадр у нас уже стоит, жмем "Создать новый кадр" и выключаем видимость первого кадра

C зажатой клавишей Shift выделяем наши кадры и жмем "Создать промежуточные кадры" ,
ставим где-то 5 кадров.
Опять выделяем все кадры (с зажатой клавишей Shift жмем на первый и последний кадр) и жмем создать новый кадр.
Заходим в меню окна анимации ( в правом верхнем углу стрелочка) и выбираем создать кадры в обратном порядке (я пишу приблизительный перевод, так как у меня англ. PS)
Удаляем последний кадр (перетаскиваем его на корзину).
Опять выделяем все кадры и выставляем время раскадровки 0,1 сек

Поменяем время раскадровки у 1 и 7 кадра на 0,5 сек.
Готово!
(чем больше цветов в гиф - тем хуже качество!!!! я думаю сама видишь) Но главное понять урок!