Смирнов Н.В.Использование Adobe Photoshop при создание анимаций для уроков химии.

Анимация для урока химии. Реакция соединения.

Автор Смирнов Н.В.

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

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

Реакция соединения Na и Cl.


Шаг 1: Самый важный этап. Планирование раскадровки.

Приступая к созданию такой анимации, сначала надо было понять, а что будет происходить на экране, исходя из химизма этой реакции. Суть в том, что два простых вещества соединяются вместе, образуя новое вещество, или же атом одного вещества соединяется с атомом другого вещества, образуя молекулу нового вещества. Тогда стало понятно, что анимация будет включать в себя следующие кадры:
1. Два разных вещества это два атома, расположенные в разных частях экрана; они разного цвета; кроме того, они будут подписаны соответственными химическими знаками для лучшего узнавания.
2. Атомы начинают двигаться навстречу друг другу, для более плавного движения на это следует отвести несколько кадров.
3. Атомы сталкиваются, выделяется энергия, при ионном типе химической связи наблюдается переход электрона от Na к Cl, в результате каждый атом приобретает соответствующий электрический заряд (превращаясь в ион), что собственно и способствует появлению химической связи между ними, а, значит, образованию нового вещества.
4. Наверное, полезно было бы написать уравнение произошедшей реакции, на что уйдет еще несколько кадров, если мы захотим сделать так, чтобы уравнение явилось ученику постепенно.
5. В конце анимации напишем вверху кадра название типа реакции: "Реакция соединения".
Как видим нам потребуется создать 9-10 кадров для такой анимации. Используем способность Adobe Image Ready создавать кадры из слоёв изображения, а сами слои создадим в Adobe Photoshop.

Шаг 2: Создание первого слоя. Два атома.

1. Создадим рисунок в Adobe Photoshop. Для этого кликнем File > New (Файл > Новый). В открывшемся диалоговом окне выберем размеры (у нас 400 на 300 точек) и цвет фона (white - белый).

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

2. Выберем цвет одного из атомов (голубой) в палитре цветов. Инструментом "Elipse Tool" нарисуем круг; для этого, кликнув инструмент (см. рисунок), перенесем курсор мыши на поле нашего рисунка, нажмём клавишу "Shift" и левую клавишу мышки, прочертим диагональ воображаемого квадрата, в который будет вписан наш круг, изображающий атома вещества (в данном случае Na). Склейте оба слоя (текст и рисунок атома) в один: Layer > Merge Visible (Слои > Склеить с видимым).

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

Инструмент Elipse Tool. Инструмент Rectanglular MarqueeTool. Инструмент Move Tool.


3. Чтобы получить изображение второго атома (Cl), равное по величине первому, удобно выделить наш голубой круг инструментом "Rectanglular Marquee Tool", скопировать его (Edit > Copy) и вставить (Edit > Paste). Передвиньте полученную копию изображения на нужное место, сменив инструмент на стрелку (Move Tool). Склейте оба слоя в один (Layer > Merge Visible).

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

4. В палитре цветов назначьте цвет нового атома (желтый). Возьмите "волшебную палочку" (Magic Wand Tool), кликните ей новый атом, вокруг него появится пунктирная окружность, обозначающая, что выделение состоялось. Выберите инструмент заливки (Paint Bucket Tool) и кликните им внутри второго атома, он станет желтым.
5. Выберите красный цвет для текста. Кликните инструмент создания надписей (Horizontal Type Tool) и напечатайте отдельно на каждом атоме его химический знак. Склейте все слои между собой (Layer > Merge Visible

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

Первый слой анимации с двумя атомами.

Шаг 3: Создание второго и третьего слоёв. Движение атомов навстречу друг другу.

1. Создадим несколько слоёв, позволяющих создать движение наших атомов навстречу друг другу. Для плавной анимации движения можно создать 4-5 слоёв, но в нашем примере мы ограничили себя созданием всего 2-х.
2. Создадим две копии нашего слоя с атомами: Window > Layers, в открывшемся окне слоёв Layers мы увидим пока один слой с нашими атомами. Справа (под крестиком, закрывающим это окно) мы увидим кнопку-птичку, под которой спрятян доступ ко всем важным опциям окна. Кликнем в выпадающем списке опцию Duplicate Layer (Дублировать слой), затем ОК и так два раза, чтобы получить две копии первого слоя.

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

3. По законам мультипликации начнем с создания конечного кадра встречного движения атомов (атомы коснулись друг друга). Слева от иконок слоёв в окне Layers погасим все "глазики" (видимость слоя),оставив видимым только самый верхний слой. Кликнем его для того, чтобы в нём можно было работать.

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

4. Инструментом Rectanglular MarqueeTool (см. выше) выделим некоторую область в этом слое, включающую атом Na и обязательно прилегающую справа вплотную к его изображению. Стрелкой Move Tool передвиньте это изображение к месту столкновения атомов.
5. Подобную процедуру проделайте и с атомом Cl, отличие лишь в том, что при выделении его изображения следить нужно будет за плотным прилеганием левой границы выделения. Вклеенный атом постравьте вплотную к атому Na.
6. Проверьте, чтобы "глазики" стояли только около вновь созданных слоев, а два нижних слоя не были видны. Назначьте белый цвет в палитре цветов и ведёрком Paint Bucket Tool залейте дыры, образовавшиеся в нашем слое от перемещения атомов, подобно тому, как вы перекрасили в жёлтый цвет атом Cl несколькими шагами ранее
7. Сделайте видимым только второй слой. В нём мы создадим промежуточную фазу движения атомов. Повторим пункты 4-7 этого раздела, с той разницей, что каждый из атомов должен оказаться на середине своего пути.

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

При работе внимательно следите за видимостью/невидимостью нужных слоёв, особенно в момент их склеивания. В конечном итоге у вас должно получиться три слоя с различным положением атомов. Напоминаем, что при ошибках как можно раньше делайте отмену (а не исправление другими действиями!).

Шаг 4: Создание анимации.

Мы сделали половину анимации, остальные же кадры соображайте, как создать их самим, а мы спешим дальше. Приведём для вас лишь окно с готовыми слоями.

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

Вкючая и выключая "глазики" уже можно просмотреть работу вашей "анимашки" в ручную (даже, если кадров вы захотели оставить всего три), однако передадим функцию анимации компьютеру. В самой нижней части панели инструментов Adobe Photoshop есть возможность быстрого перехода к программе Adobe Image Ready. Кликнем эту кнопку и через некоторое время окажемся с нашими слоями в Image Ready.
Откроем окно анимации: Window > Animation. В открывшемся окошке мы обнаружим пока только один кадр. Справа вверху этого окна нужно найти ловкую кнопку-птичку с опциями анимации. Кликнем Make Frames from Layers (создать кадры из слоёв).

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

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

*) В последних версиях Adobe Photoshop палитра Анимация встроена уже в сам Photoshop (никуда переходить не надо!) Достаточно кликнуть Window > Animation (Окно > Анимация).

Шаг 5: Сохранение анимации.

В главном меню кликните Window > Optimize. В открывшемся окне настройте необходимые опции: Format=gif, количество оттенков цветов Colors по выбору (у нас 32), Options=Interlaced и др.

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

Затем выполните File > Save Optimized и следуйте обычным путем для сохранения файла. Откройте только что сохранённый файл GIF для проверки.

*) В последних версиях Adobe Photoshop удобно сохранять результат анимации так: File > Save for Web (Файл > Сохранить для Web и устройств).

Шаг 6: Продолжение следует.

"По образу и подобию" создайте анимации, иллюстрирующие остальные типы химических реакций. Для соблюдения единого стиля как можно чаще пользуйтесь копированием.
А что, если попробовать сотворить подобную анимацию в Pover Piont или Flash Macromedia? Что быстрее, удобнее в использовании, а главное, лучше воспринимается учеником!
Присылайте ваши анимации к нам, чтобы ими смогли воспользоваться другие учителя. Почта внизу справа. Напишите, что вы об этом думаете, нам важно ваше мнение. Прикрепите обычным способом к этому сообщению ваши gif-анимации, если захотите ими поделиться со всеми. Авторство полностью гарантируется. Желаем творческих успехов!