Четверг, 19 апреля 2012 00:00

Глобус для сайта. И снова GIMP и GAP

Оцените материал
(2 голосов)

Сделаем сегодня красивый вращающийся глобус для сайта и разместим его на подобающем случаю эффектном фоне.. ок? Сказано - сделано.  Нам понадобятся только GIMP и GAP; ничего больше. Качаем и скорее устанавливаем (если у вас на компе их пока еще нет), и поехали!

Dev banner 1

1. Создаем рабочую папку.

2. Открываем в джимпе изображение, которое будет служить фоном для нашей gif-анимации, и сохраняем его в этот самый рабочий каталог под таким именем: _0001.xcf

3. Не закрывая полученное изображение, в джимпе же открываем нашу уже созданную gif-анимацию.

Как сделать gif-анимацию? Способов тысяча; вы можете взглянуть, скажем, вот здесь. Предположим, это будет у вас для начала некий анимированный глобус, который буквально за минуту вы изготовите в Gimp; Фильтры -> Анимация -> Вращающийся шар:

Глобус 1

 

Глобус 2

Сделали? ок, не забудьте только выставить Изображение -> Режим -> RGB для нашего анимированного глобуса; вполне вероятно, что изначально там у вас "Индексированное". А вот теперь займемся нашей фоновой картинкой; переходим к GAP: Видео -> Дублировать кадры. Из скольких там слоев состоит ваш анимированный gif-рисунок, из 10? - стало быть, добавляем еще 9 (один у нас уже есть):

 GAP. Видео - Дублировать кадры

4. Отлично; опять GAP: Видео -> Переместить вдоль пути. Опции: исходное изображение - самое верхнее, Обработка изображения - Центр, пошаговый режим - Пинг-понг. Не забудьте отметить галкой чек-бокс "Немедленное применение"; после этого увидите на фоне вашей картинки глобус, который вы без проблем сможете перетащить мышкой в нужную часть рисунка:

GAP. Видео - Переместить вдоль пути

Нажав "Просмотр анимации" и выбрав "Объект на кадры" - любуемся предполагаемым результатом, при необходимости что-либо подправляем и жмем Ок.

5. Но это еще не все, снова GAP: Видео -> Кадры в изображение. В "Базовом названии слоя" редактируем по-умолчанию выставленное frame_[######] (41ms) - попробуйте для глобуса 150ms, скажем, чтобы вращался не слишком уж стремительно... или еще больше. Можно поэкспериментировать, не спешите после первой пробы закрывать джимп.

6. И последнее. В качестве непосредственного результата последней манипуляции получаем безымянное изображение, которое совсем неплохо бы еще оптимизировать: Фильтры -> Анимация -> Оптимизация (для GIF). Конечный результат уже сохраняем с расширением .gif, не забыв отметить галкой чек-бокс "Сохранить как анимацию".
Жмем "Экспорт", открываем полученный файл в графическом редакторе и любуемся:

Полученный результат 1


Ничто не мешает вам, к слову, подредактировать ширину/высоту глобуса или чуть прибавить ему прозрачности (вкладка "Масштаб и изменение"). Здесь уже, как говорится, "сахар кладем по вкусу"... Колдуйте! Вот вам, кстати, неплохой psd для приготовления глобуса; впрочем, это никогда не проблема. Enjoy!

Полученный результат 2

Полученный результат 3

 

Примечание. В статье использованы рисунки Джанкарло Капони, любезно предоставленные художником для, правда, несколько иного web-проекта...  вся надежда лишь на то, что маэстро никогда не увидит этой статьи. )

 

 

Последнее изменениеЧетверг, 18 декабря 2014 20:36

Оставить комментарий

Добавьте ваш комментарий

SEO-оптимизация. SEO-услуги

How to create a Joomla Contact Form

Web Development Masterpro

Read more

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.