В фейсбуке  В гугле  В твиттере  В контакте  В яндоксе
         

Каталог статей

Главная » Статьи » Мои статьи

Как создается gif анимации


Как создается gif анимации

Создание gif анимации.

Очень много вопросов приходит, чья суть вертится вокруг да около технологии создания анимации в web. Собственно, никакой технологии тут и нет. Под качественной анимацией понимается тяжкая и дотошная работа web-мастера над картинкой, подобно тому, как художник вырисовывает каждое движение в мультфильме. Естественно, с помошью уже навороченных фильтров в наше время можно и из одной картинки сделать анимацию, путем "наворачивания" на нее стандартных фильтров в анимационной программе, но качественной анимацией мы это называть не будем. Анимация, на то она и анимация, чтобы прорисовывать каждое движение и склеивать все воедино. Вот собственно и вся суть и создание gif анимации.

То есть, если разложить все по пунктикам и разжевать: Сначала создается сайт под ключ базовая картинка, возможно с мелкими элементами графики, которые впоследствии планируется "оживить". Картинка сохраняется. Далее, меняется один из ее элементов, причем желательно плавно и в небольшом радиусе. Опять сохраняется. И так получается некоторая последовательность картинок, которую впоследствии надо скрепить специальной програмой-аниматором. Обзор популярных программ-аниматоров тоже есть на Dvk Url Club. Ну теперь, как я понимаю вы потребуете примеров :)

Пример первый.

Довольно простенький пример, тем не менее довольно эффектный, согласитесь. Эффектность заключается просто в изменении прозрачности отдельных надписей. Базой служит картинка со 100% процентными непрозрачностями слоев. Далее, путем изменения прозрачности каждой надписи и сохранения промежуточных картинок получена совокупность картинок, которая была склеена воедино. Такой способ применяется довольно часто и имеет большой успех, несмотря на то, что анимации как таковой тут и нет, по большому счету :) Вес: 9,5 килобайта. Количество кадров: 12.

Второй примерчик.

Как видите, примеры я решил показывать на своих баннерных работах :) Итак. В этом типе баннера использована уже иная задумка. Создано статическое изображение, поверх которого наложено сердце. Сердце трансформируется, а промежуточные положения сохраняются в файлах. Таким образом, получается довольно незамысловатое прыгающее сердечко. В отличие от первого примера сдесь не применялся принцип изменения прозрачности, тут я руководствовался прямой трансформацией элемента картинки. Размер баннера: 9,5 килобайт. Количество кадров: 4

И третий пример.


Третий пример включает в себя и трансформацию и изменение прозрачности одновременно. Чем качественнее и внимательнее вы будете работать над элементами анимируемой картинки, тем эффектней она будет смотреться. Размер файла: 6 кб. Количество кадров: 12.

Вот собственно и все положения, которые надо знать при создании анимации. Я частный вебмастер постарался ограничиться тремя примерами. На самом же деле ограничений тут нет никаких, в смысле на фантазию. Конечно же не стоит "взахлеб" фантазировать, чтобы потом ваше творение из ста кадров загружалось бедным посетителем полчаса. Тут уже вступает в силу отношение эффектность/размер. Важно не только создать нечто оригинальное и динамичное, но и уложиться в килобайтные лимиты. В общем оригинальных вам анимашек :)

Создаем gif анимацию бесплатно. (на примере Ulead Gif Animator) 

В этот раз я постараюсь избавить новичков, которые собираются освоить анимационные "премудрости", от многих вопросов, касающихся самого алгоритма создания анимации на примере программы Ulead Gif Animator. Проще говоря - "куда надо тыркнуть мышкой, чтобы склеить несколько файлов". Обзор этой программы, а так же некоторых других ищите в разделе [Web-мастеру / Оптимизация графики и HTML] на этом же сайте.

Если уж взялись за это дело, то начинать будем с нуля. А именно - для склейки изображений в аниматоре необходимо эти самые изображения (кадры) подготовить. В этот раз я выдумал сделать простейшую истекающую кровью надпись. Ниже предлагаю вам ознакомиться с полным спектром готовых кадров, которые я предполагаю склеить.


Обратите внимание на то, что каждый из шести кадров занимает в среднем по 1,2-1,4 кб. Тогда как итоговый "склееный" результат занял 2,8 кб.

Итак. Кадры готовы. Теперь - пора их склеивать.Открываем наш Ulead Gif Animator. Во время написания статьи мною использовалась версия 2.0. Время бежит - всё стареет и морально и физически, поэтому не стоит закрывать сразу же окно в отчаянии, что вы не научитесь анимировать, если ваша версия выше. Это - единый продукт и "фирменные" черты в большинстве случаев остаются. Тем самым разницу в версиях, не пользуясь дополнительными наворотами, можно и не почуствовать. Тыркаем мышкой по кнопке "Animation Wizard". В ответ программа предложит открыть желаемые кадры. Их можно добавлять как поодиночке, так и все сразу. Во втором случае достаточно просто отмечать нужные кадры мышкой, удерживая Ctrl.

После добавления всех кадров высветится их список и визуальное представление каждого выделенного кадра происходит создание баннеров. Для каждого из них можно устанавливать "время длительности показа", измеряющегоя в сотых долях секунды. Как это делать - разобраться может каждый человек. Если и здесь возникают вопросы - лучше к компьютеру вообще не подходить :) Теперь в меню File выбираем одну из опций: "Optimization Wizard" или "Optimize with presets". В первом случае вам будет предложено урезать цветовую палитру до необходимого числа цветов, а во втором случае автоматика сделает все за вас (благодаря "зашитим" настройкам). Остается сохранить результат и оценивать его.

Как видите, сложного в этом ничего нет. Методика эта универсальна для многих программ - аниматоров, так как набор потребительских функций везде примерно равноценен. По этому случаю не стоит расстраиваться, если вы "заюзали" не продукт от Ulead. Разбирайтесь, творите, склеивайте и гордитесь :)

Категория: Мои статьи | Добавил: wweebb (23.08.2011)
Просмотров: 1786 | Рейтинг: 5.0/1
Восприятие дизайна
Успех во многом зависит от восприятия запоминающегося дизайном сайта, посетителями. Я считаю, что человеческий мозг — это площадка для ведения конкурентной борьбы. “Не нужно забывать, что сознание избирательно относится к поступающей информации: легко воспринимает уже знакомые факты и отбрасывает то, что не соотносится с его предыдущими знаниями и опытом.” Людям сложно запомнить 10 заповедей. Что уж говорить об интернет сайтах, если они занимают в сознании не первое и не второе место. У каждого посетителя существует внутренний рейтинг сайтов каждого дизайна по своему. Я этот рейтинг называю “визуальной лестницей”. Подниматься по такой “лестнице” сайту очень сложно, особенно если не используется стратегия позиционирования. Позиционировать продукт необходимо, отталкиваясь от информации о конкурирующих сайтов, знакомых потребителю.
Стратегия сайта
Человеческое сознание с трудом воспринимает сложные и запутанные идеи. Приведем пример о компании BMW. Переработав идею конкурента — компании Mercedes, которая заявляла о комфортабельности своих машин, BMW сообщила, что ее авто больше подходят для езды, чем для сидения. Тем самым была дискредитирована идея Mercedes. Это один из примеров изменения восприятия потребителей. Частная студия вебмастера «WebMasterSeo» проанализировала работу своих конкурентов и выявила у них определенные слабые места, такие как высокая цена на сайт и Хостинг от uCoz, большие сроки изготовления сайта. Поэтому при разработке своих сайтов Я отказался от всего, что могло бы усложнить разработку сайта. К тому же я смог снизить стоимость сайта и добавил дополнительные модули в базовый пакет. В результате, заказчик получает необходимые услуги и остается довольным, что сделало меня лидером по созданию дешевых сайтов за короткие сроки.
Макросреда компании
Макросреда компании – факторы наиболее общего воздействия, оказывающие влияние на каждую организацию, ведущую маркетинговую деятельность. Данные факторы могут открывать для кампании новые возможности или же стать источником серьезных угроз, на них практически невозможно воздействовать, но их воздействие необходимо учитывать и предугадывать. Макросреда большинства компаний в настоящее время может рассматриваться в составе следующих основных компонентов: экономическая среда, политико-правовая среда, культурная и демографическая среда.


 
доступный сайт 
  Быстро и недорого создам сайт.
  Сайт визитка за один день.
 

доступный сайт
  Доступный сайт для бизнеса.
  Сайт визитка за 10 000 руб.
доступный сайт
  Оптимальное продвижение сайта.
  Вывод в топ Яндекса от трех недель
 



    Торговую марку "WebMasterSeo" представляет ООО "WebMaster Design"

    Студия WebMasterSeo - Частная студия веб мастера (Россия, Москва)
    Создание сайтов. Разработка сайтов. Изготовление веб сайтов.
    Заказать сайт онлайн. Веб-студия web-ms, Москва, Балашиха, Реутов
    Железнодорожный, Кучино, Мытищи, Щелково, Красноармейск.




Адрес: г. Москва, ул. 9-Парковая, д.59. корп.1

Тел.: 8 (926) 222-22-22, Сайт: web-ms.ru
E-Mail: info@web-ms.ru
Служба поддержки: info@web-ms.ru
Онлайн-поддержка: Отвечу сразу


8 (926) 222-22-22