Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Урок анимации


alt

Отличный урок - анимация по фотошопу. В этом Фотошоп уроке вы узнаете, как сделать анимацию для фона.

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

Шаг 1.

Создайте новый документ 350х350 px с белым фоном.
Откройте картинку, которую вы будете разрезать, в Фотошоп. Разместите ее в центре вашего документа.

Картинка должна быть меньше, чем сам документ.

 

 

alt

Установите Линейки следующим образом (разделите на четыре равные части).
Чтобы сделать этот инструмент активным нажмите CTRL+R или View > Rulers (Просмотр - Линейки)

alt

Шаг 2.

Возьмите инструмент alt и создайте выделение вокруг левой верхней части картинки.

alt

Затем нажмите Ctrl+J, чтобы скопировать выделение на новый слой.
То же самое можно сделать Layer > New > Layer via Copy (Слой - Новый - скопировать на новый слой)

Теперь вернитесь к основному изображению и проделайте то же самое с каждым квадратом. В конце просто удалите слой с картинкой.

Шаг 3.

Каждому кусочку картинки примените такие стили:

Layer > Layer Style > Blending Options (Слой - Стиль слоя - Параметры наложения)

Тень:

 

 

alt

Обводка:

alt

Затем нажмите Ctrl+T или Edit > Free Transform (Редактирование - свободная трансформация) и примените данный инструмент к каждому кусочку. Разверните их каким-нибудь уникальным образом.

alt

Шаг 4.

Теперь оставьте видимым только один слой на фоне (здесь это layer 3)

alt

Нажмите Shift+Ctrl+M чтобы переслать данные в ImageReady.

Там также как в Фотошоп будет рабочее окно, но кроме этого вы увидите еще полоску для кадров.

В рабочем окне перетащите картинку в верхний правый угол таким образом, чтобы остался видимым только маленький уголок.

Затем нажмите на кнопку alt Duplicates current frame (Создать дубликат текущего кадра), которая находится в окне с кадрами.

После чего перетащите картинку в рабочем окне снова на положенное место.

Выделите эти два кадра и нажмите на кнопку alt Tween (Добавить промежуточные кадры).

 

 

alt

В окне Tween установите такие настройки:

Начать с: Выделенный кадр
Добавить кадров: 8
Слои: Все слои

alt

После ОК кадры ваши станут быстро размножаться. Если нажать на кнопку Play (Воспроизвести), то получится вот так:

alt

Шаг 5.

Далее на последнем кадре делаем видимым еще один слой в палитре и проделываем те же действия. Так с каждым кусочком.

Когда у вас все будет готово, зайдите в меню File > Save Optimized As... (Файл - Сохранить оптимизированный как...)

Вот и результат:

 

 

alt

 

 

 

 



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (6)

#1 написал: Лёля | 3 февраля 2009 09:12
     

спс, что в скобках написан перевод действий) smile
#2 написал: INFERNAL | 3 февраля 2009 16:46
     

Незачто, только то не я писал, а урок просто такой попался))
#3 написал: www | 4 февраля 2009 12:21
     

INFERNAL чота я непонял как ленейку ставить точо я могу поставить ток одну
#4 написал: naikon | 4 февраля 2009 17:51
     

www,
Спрашиваем нормально - получаем ответ, спрашиваем плохо - идем к черту!
#5 написал: Stepfather | 26 апреля 2009 20:49
     

Ребят подскажите в каком формате сохранять,чтобы потом можно было ее помотреть?
#6 написал: naikon | 26 апреля 2009 21:17
     

File:Safe for web ... и там выбираешь GIF формат.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.