Пятница, 05.06.2026, 06:08
Derrr3D
Приветствую Вас Гость | RSS
Главная Каталог статей Регистрация Вход
Меню сайта

Категории каталога
Уроки 2 - 3D графики и анимации
Уроки HTML
Первые шаги - Основы сайтостроительства, дизайна, графики, html (хтмл) для чайников.

Реклама от Tak.ru

Наш опрос
Оцените мой сайт
Всего ответов: 65

Главная » Статьи » Уроки » Уроки 2 - 3D графики и анимации

Урок анимации в Adobe Photoshop
Сегодня я расскажу Вам как создать анимированное изображение
в формата GIF, в программе Adobe Photoshop.
Но ля начала небольшое видение в мультипликацию!

В наше время даже ребенок знает, примерно, как делают мультфильмы:)
Наверняка вы также знаете простейший способ создания рисованного мульта:)

Для этого вам достаточно взять в руки блокнотик, и в правом верхнем уголке каждой странички нарисовать… к примеру такого человечка!



Но для того чтобы он ожил, необходимо каждый рисунок сделать немного другим!
На второй мы немного изменим:


На каждой страничке должно быть изменение! Но рисунок может и повторяться:) Это называется циклом!
Для этого рисуем эти 2 кадра на каждой следующей паре страниц.

А чтобы движение было более ощутимо, добавим намного окружения в виде дорожки с разметкой (не забываем добавить циклическое изменение и в окружение).

Нарисовали?
Отлично!

Теперь возьмите блокнотик в левую руку за нижний левый угол, а правой рукой отогните уголок с человечком, и отпустите по очереди каждую страничку!
И о чудо! Вы создали движение! Браво!

Теперь немного технической стороны:)
Каждая страничка которую мы нарисовали называется кадр!
Скорость, с которой мы отпускали странички, называется скорость смены кадров.

И, наконец, пора перейти к простейшей компьютерной анимации!

На ПК есть много способов создания мультфильмов либо простейшей анимации.

Я не буду здесь говорить о трехмерной графике и анимации flash, этому нужно посвящать отдельную статью!
Сегодня мы будем делать простейшую анимацию в распространенном в сети интернет формате GIF.
Для этого существует также не мало специализированных программ.
Таких как GIF Construction Set и Easy Gif Animator.
Но мы воспользуемся всем известной программой, которая есть практически у всех владельцев ПК на территории России и стран СНГ:)
Это конечно же Adobe Photoshop!

Итак начнем. Так какую же анимацию нам с вами нарисовать?
Давайте вспомним о нашем недавнем опыте! И используем уже готовые кадры из нашего блокнотика! (Обращаю ваше внимание, что пользуясь описанную ниже технику можно использовать и с текстом. На основе этого упражнения вы сможете своими силами создать полноценный баннер!)

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

Вот что у нас получилось!


Следите чтоб размеры изображения, во избежание путаницы, были выставлены в пикселях (PX), и соответствовали друг другу (то есть все файлы должны быть одинакового размера, у нас это 100*100). Для управления размерами нужно зайти в меню (ИЗОБРАЖЕНИЯ – РАЗМЕР ИЗОБРАЖЕНИЯ).

Теперь перейдем в изображение с нашим 2м кадром. И с помощью инструмента Прямоугольная область (M) выделим нужную область (это может быть только интересующий нас фрагмент рисунка или, при условии совпадения размеров, вся область полностью)

И инструментом Перемещение (V) переносим выделенное на изображение с 1м кадром. И выравниваем человечка на нужное нам место.

Если ваша анимация состоит из нескольких кадров, то таким же способом перенесем каждый следующий кадр на 1й основной.

А теперь самое важное! Заходим в меню Окна – Анимация. И нам откроется то сокровенное окно где мы сотворим нашу анимацию:)

Выделенная область в окошке, это наш с вами кадр, который включает в себя все включенные слои изображения.
А сейчас отключите все слои кроме тех которые составляю 1й кадр анимации.


Да! И не забудьте про фон:)
Значок обведенный красным, добавляет новый кадр

После того как вы добавите кадр, необходимо включить отображение тех слоев которые составляют 2й кадр, и выключить те что уже не нужны.


Область обведенная красным отвечает за скорость смены кадров.


Здесь можно включить постоянное, непрерывное повторение всей очереди кадров.


Вот вы и настроили вашу анимацию! Можете ее просмотреть нажав “Запуск воспроизведения”.

Отлично! Все готово! Пора сохранять!

Но не спешите!
Если вы сохраните файл обычным образом в формат GIF, то слои просто склеятся, и никакой анимации вы не получите!

Для этого нужно воспользоваться меню Файл – Сохранить для Web и устройств (Alt+Shift+Ctrl+S).

Там вы можете настроить количество цветов, ставить ли прозрачность и д.р.
А в левом нижнем углу появившегося окошка можно узнать размер будущего файла и сколько сек. потребуется и на какой скорости соединения.

Когда все будет готово, смело жмите сохранить!
Только в настройках сохранения я советую поставить
“HTML и изображения(*html)”
Тогда вы сможете сразу просмотреть изображение в вашем браузере. А сам файл будет лежать во вложенной папке “image”.

Вот что получилось у меня:)


Вот и все!
Желаю вам удачи!

Автор Дерр Дмитрий Владимирович
Копировать можно только с разрешения администрации проекта Derrr.ucoz.ru

Категория: Уроки 2 - 3D графики и анимации | Добавил: derrr (15.01.2009)
Просмотров: 871
Форма входа

Поиск

Друзья сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Copyright MyCorp © 2026