Чего мы будем добиваться
Открываем изображение которое мы будем использовать в качестве фона!
Кадрируем до размера 180*180 (или до какого хочешь), но не больше 200*200!
Итак, сохраняем нашу гифку на комп!
Идем в фотошоп, открываем Файл-Импортировать-Кадры в видеослои!
И вот тут самое интересное...в открывшемся окошке выбираем папку куда ты сохранила гифку! Но картинок ты не увидишь - не пугайся!
Идешь на свой компьютер, копируешь название гифки (полностью) и вставляешь в нижнюю строчку в открывшееся окошко в фотошопе!
У тебя выпадет окно в котором ты и выберешь адрес гифки, окончание строчки должно заканчиваться на .gif!
Жмешь ОК! В фотошопе откроется окно - в нем выберешь открыть все кадры!
Выделяешь все кадры и стрелочкой перетаскиваешь на папочку внизу панели слои , теперь они у нас все в папке и не занимают место!
Возвращаемся к нашему исходнику (тобишь фону)!
Думаем куда бы нам поместить анимацию!
Так как у меня справа много место (при кадрировании я это просчитала), я буду вставлять анимацию туда!
Берем рамку в виде кадров, переносим ее на нашу картинку, устанавливаем так - как мы хотели бы ее видеть и ластиком стираем все лишнее
Берем инструмент перо (или что тебе удобней для выделения) с такими настройками
и выделяем ту область где у нас будет анимация, переходим во вкладку Контур и жмем на пунктирный кружочек внизу (создаем выделение)
Жмем на клавиатуре Delete (в этот момент у нас активен слой с картинкой!, а не с рамкой), снимаем выделение (Ctrl+D).
Вот мы подготовили базу
Переходим в окошко с нашей гифкой и стрелочкой перетаскиваем нашу папочку (которую мы создали до этого) на слой с картинкой!
Этот слой у нас должен стоять в самом низу палитры!
Жмем Ctrl+T (трансформация) и с зажатой клавишей Ctrl+alt трансформируем наши слои в папке до нужного размера, одновременно развернув (если нужно)
Открываем окно анимации Window-Анимация, в правом верхнем углу открывшегося окошка жмем на стрелочку, открываем меню и выбираем "Создать кадры из слоев" (у нас откроются все кадры по порядку), поэтому удаляем два последних (перетащив их на корзину) и включаем глаззики!
С зажатой клавишей Shift жмем на первый и последний кадр (выделяем их) , выставляем время раскадровки 0,1 сек и смотрим что получилось
Теперь можно добавить текстурку, надпись и авик готов!
Сохраняем для Web