Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||Уроки ImageReady Анимация «Пазл».
INB русский язык Форум
Добро пожаловать! inbforum.COM Интернет без границ Форум Здесь вы можете обсудить с друзьями по всему миру прений, приходите и присоединяйтесь к нам! Постоянный имя: Ruinbforum.forumotion.com
INB русский язык Форум

Добро пожаловать! inbforum.COM Интернет без границ Форум Здесь вы можете обсудить с друзьями по всему миру прений, приходите и присоединяйтесь к нам! Постоянный имя: Ruinbforum.forumotion.com


Вы не подключены. Войдите или зарегистрируйтесь

《《《《《《《上一页INBforum   Перейти вниз

上一页INBforum》》》》》》》Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

1 Уроки ImageReady Анимация «Пазл». в Пт Окт 01, 2010 6:32 am

Admin

avatar
Admin
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]


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

Инструментарий.
1. Adobe Photoshop CS2;
2. Adobe ImageReady CS2.
Выглядит этот эффект примерно так:
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]


Начнем пожалуй.
Создаем в Photoshop новый документ (пусть 400×400). Заливаем нужным нам цветом (или текстурой). Я взял цвет со страницы этого сайта. Берем нужную картинку и загружаем ее в Photoshop, форматируем до нужного размера. Картинка примерно в два раза меньше документа. У меня — 200×200, Рис.1.
Если у Вас на документе нет линеек — откройте их Рис.2 через меню Просмотр. Проверьте единицы измерения линеек, нужно, чтобы они были в пикселях (проще будет). Зайдите в меню Редактирование --> Установки --> Единицы измерения и линейки и выставьте нужное (Рис.3).
Выбираем инструмент Перемещение (Рис.4) и, нажимая и удерживая курсор на шкале линейки перемещаем возникшую при перемещении в рабочую область направляющую, горизонтальную и вертикальную, условно разделив документ на равные части (Рис.4).

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.1Рис.2Рис.3Рис.4


Делаем активным слой с картинкой-картой (нажав на него) и выбираем инструмент Прямоугольное выделение (Рис.5). Выделяем на картинке нужный кусок, четверть нашей карты (или Вашего рисунка). Заходим в меню Редактирование --> Скопировать (Рис.6). Если Вы помните горячие клавиши, то прекрасно, будет быстрее. Еще раз заходим в то же меню и жмем Вклеить (Рис.7).
У нас появился новый слой с четвертинкой карты (Рис.Cool.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.5Рис.6Рис.7Рис.8


Если картинка разбивается на равные части можно зайти в меню Выделение --> Выделить снова (Рис.9), появится та же выделенная область, которую мы перемещаем тем же инструментом (Прямоугольное выделение) на следующую часть картинки (Рис.10), нажав по выделению, удерживая нажатой левую кнопку мыши и «волоча» контур выделения за курсором.
Повторяем процесс Выделение-Копировать-Вклеить с оставшимися частями картинки, получив по слою на каждый кусочек (Рис.11). Теперь удалим исходную картинку. У нас получилось пять слоев, фон и четыре составляющих изображения, которое мы «порезали».
Делаем активным Слой 1 и делаем по нему двойной клик, открыв меню Стиль слоя (Рис. 12).

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.9Рис.10Рис.11Рис.12


В открывшемся меню (Рис.13) выставляем, что нам надо. Мне нужна только тень под картинками. Что я и сделал. Теперь копирую этот стиль, нажав правой кнопкой мыши и выбрав в выпавшем меню Скопировать стиль слоя (Рис. 14). Поочередно Вклеить стиль слоя с другими слоями документа (Рис. 15).

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение],
Рис.13Рис.14Рис.15Рис.16


Входим в меню Редактирование --> Свободное трансформирование (Рис. 16) (или Поворот, к примеру) и немного поворачиваем куски изображения, как захочется или надо (Рис. 17).
«Разгоняем» части картинки по углам документа (Рис.18) и переходим в ImageReady, нажав соответствующую кнопку-иконку.
Здесь делаем активным нужный нам слой (та часть изображения, что начнет анимацию) (Рис.19), делаем невидимыми три других слоя картинки (но не фона, он по-прежнему видим, но неактивен) и жмем Дублировать кадр. Появился кадр-дубликат (Рис. 20). Делаем этот кадр активным (нажимаем на него), переходим в окно рабочей области и перетаскиваем кусочек карты на место, где ему надлежит быть.


[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.17Рис.18Рис.19Рис.20


Выделяем оба кадра (удерживая кнопку ctrl клавиатуры) и создаем промежуточные кадры (Рис.21), нажав на соответствующую иконку Окна анимации.
В открывшемся окне Создание промежуточных кадров выставьте параметры, как на Рис. 22 (количество кадров может быть любым, но чем больше их, тем больше «вес» готовой анимации). Промежуточные кадры созданы. Проверим:
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Сойдет.
Делаем активным последний кадр (Рис. 23). Активируем и делаем активным Слой 2, оставляя видимость Слоя 1 и Фона и невидимость Слоев 3 и 4. Создаем дубликат последнего кадра, делаем его активным. Перемещаем следующий кусок карты на задуманное нужное место в рабочей области (Рис. 24).

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.21Рис.22Рис.23Рис.24


Активируем последние два кадра и создаем промежуточные кадры (Рис. 25).
Процесс повторился. Понятно, что с оставшимися двумя кусочками картинки поступаем абсолютно аналогично (Рис. 26, третий фрагмент карты). Оптимизируем сохраняем результат, выставив длительность кадров по-вкусу.


[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.25Рис.26


Собственно, добавить более и нечего. смотрим окончание процесса. В окончательном варианте (вверху страницы) я подрезал холст немного.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Удачи Вам в освоении анимации и надеюсь, что мои записки Вам хоть немного помогут в этом. Вопросы можно задать на Форуме аватар.]

Посмотреть профиль http://ru.inbforum.com

上一页INBforum   Перейти вниз

上一页INBforumПредыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Создать форум | © PunBB | Бесплатный форум поддержки | Контакты | Сообщить о нарушении | Создать он-лайн дневник