анимация

понедельник, 25 ноября 2013 г.

МК - Как создать слайд-шоу в шапке блога?

На днях я полностью обновила дизайн блога. Так как я не программист, то много информации "как это сделать" искала в интернете. 

Вот полезные ссылочки:
- "Blogger уроки" от Лены Гришиной;
Девочки, спасибо, что делитесь такой нужной информацией на доступном уровне!!!

Сегодня я расскажу как сделать красивое слайд-шоу в шапке блога. Возможно кому-то станет полезным мой опыт ))) 



Внимание! При копировании информации ССЫЛКА обязательна!!!

Мне давно хотелось слайд-анимацию в блоге, чтобы каждый кто приходит ко мне в первых раз понимал, что это блог не только про меня, но и про украшения)))
Эталоном были слайд-шоу в блогах на платформе WordPress. Как это воплотить в Blogger я не совсем понимала. Поиск Google настойчиво предлагал сделать презентацию на основе альбомов Picasa. Но меня это не устраивало по нескольким причинам:
- во-первых, внешний вид этих презентаций совсем не то, что мне хотелось... кнопочки пуск, слайд1, слайд2... как-то примитивно смотрятся. Тем более в шапке блога!
- во-вторых, мне нужен был нестандартный размер как для видео-файла - большой по ширине, но небольшой по высоте;
- в-третьих, в Picasa невозможно загружать белые изображения (она их автоматически делает "серыми");
- в-четвертых, "вес" презентаций как правило большой, а мне не хотелось, чтобы анимация притормаживала на Ваших компьютерах и других гаджетах ;)

По этим же причинам отпал вариант создания слайд-шоу в специальных программах для создания видео из фото...

Выход я нашла. Теперь обо всем по порядку:

Шаг 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 В меню Дизайн перетаскиваем наш гаджет на необходимую позицию в блоге. Нажимаем Сохранить расположение.

ВУАЛЯ!!!


Внимание! При копировании информации ССЫЛКА обязательна!!!


7 комментариев:

  1. Аня, спасибо за такой мастер класс!!! Вчера еще любовалась фотографиями, единственное они для меня слишком быстро менялось, не успевала насмотреться :))))

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, думаю он многим будем полезен )))

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

      Удалить
  2. прикольно!:))! я первый раз вижу анимацию в шапке блога...

    ОтветитьУдалить
  3. Анна, спасибо за интересный вариант для ознакомления.
    Раньше не доводилось работать с "гифками", надо попробовать =) "повеселиться"
    Правда есть сомнения относительно установки на блог.
    У меня ваша страничка грузилась очень долго, поскольку являюсь "счастливым" обладателем мобильного 3G интернета ;) Не для каждого сообщения стала бы столько ждать.

    ОтветитьУдалить
  4. Этот комментарий был удален автором.

    ОтветитьУдалить
  5. «- в-третьих, в Picasa невозможно загружать белые изображения (она их автоматически делает "серыми");»

    А это, кстати, легко исправить. Стоит всего лишь раз настроить правильно.
    Посмотреть варианты можно здесь:
    Изменения в настройках Picasa: автокоррекция "портит" фото в блоге, как исправить
    Рекомендую ;) Поскольку это влияет на все загружаемые в блог фото

    ОтветитьУдалить
  6. Спасибо, Аня! Даже не знала, что такое можно сделать для блога:)

    ОтветитьУдалить