понедельник, 10 февраля 2014 г.

Динамическая шапка блога

Шаг 1. Подготовка изображений.

1.1 Продумайте какую анимацию Вы хотите создать, подберите подходящие фото. Обработайте их а той программе, к которой Вы привыкли.
Например, в моей анимации слайды это коллажи из трёх изображений украшений. Изображения в виде квадратов, поэтому я заранее сделала коллажи в программе Пикасса с соотношеним сторон 3:1, чтобы не искажать картинки.


2.1 Измените размер Ваших слайдов до необходимого.
Например, у меня ширина блога 1100 пикселей, соответсвенно слайды мне нужны были 1050 пикселей, с высотой в три раза меньше - 350 пикселей.




Шаг 2. Создание GIFF анимации в программе Photoshop.

2.1 Откройте Фотошоп. Файл - создать - ширина 1050, высота 350, фон прозрачный.


2.2 Создайте столько копий фона, сколько слайдов будет в Вашем слайд-шоу. Для этого в меню слои, зажав левой кнопкой слой Фон перетащите его на значок чистого листа (создать новый фон).
У меня 3 слоя.


2.4 Делаем активным первый слой, нажав на нем в меню слои (слева)
Файл - Поместить - Выбираем первый подготовленный файл - Ввод.
Благодаря тому, что мы файлы уже подготовили по размеру, изображение идеально помещается на слой.
Делаем активным второй слой, помещаем туда второе изображение и т.д.




2.5 Переходим в режим Движение.
Окно - Рабочая среда - Движение


2.6 Нажимаем Create Video Timeline.
Видим такое окно:


2.7 Далее путем перетаскивания слайдов по шкале времени создаем нашу анимацию. Для просмотра промежуточных результатов можно нажать Воспроизведение.
У меня получилось так:


2.8 Сохраняем???
Файл - Сохранить для Web и устройств.
Проверяем параметры анимации. Формат файла - GIFF. Параметры повторов - я выбрала постоянно.


2.9 Проверяем полученный файл на диске компьютера. Нравится? :)
Обратите внимание, что файл очень маленького размера. У меня около 600 КБ, и это анимация!!!


Шаг 3. Размещение слайд-шоу в Blogger.

3.1 Откройте ваш блог - Настроить - Дизайн - Добавить гаджет - Изображение


3.2 Пишем название, загружаем изображение, указываем ссылку (если хотите). Сохраняем :)


3.3 В меню Дизайн перетаскиваем наш гаджет на необходимую позицию в блоге. Нажимаем Сохранить расположение.
http://www.anna-miracle.com/2013/11/blog-post_25.html