Воскресенье, 03.08.2025, 05:45

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Tappo4ek  
Делаем анимационные картинки
Tappo4ekДата: Вторник, 11.05.2010, 11:24 | Сообщение # 1
Майор
Группа: Модераторы
Сообщений: 99
Репутация: 1
Статус: Offline
Очень многие имеют свой блог, дневник или личную страничку на разных сервисах. Посещая блоги друзей хочется добавить к своим сообщениям не только смайлик, но и забавную анимашку. Можно найти много анимационных картинок для гостевых книг на сайтах, но гораздо интереснее сделать анимацию самому. Урок в фотошопе по анимации не сложный. Процесс создания анимационной картинки займет несколько минут.

Анимация представляет собой набор из нескольких кадров, которые показываются на короткое время. Кадр - это любой рисунок или фото.

Определимся в первую очередь с размерами анимационной картинки-кадра. Она должна быть небольшого размера и иметь разрешение 72 пикселя на дюйм.

Выбираем команду File > New… ( Файл > Новый) и устанавливаем ширину (Width) 450 pixels , высоту (Height) 250 pixels, разрешение (Resolution) 72 pixels/inch, Color Mode должен быть RGB Color и цвет фона белый (Background Contents - White).

На готовый шаблон переносим любой рисунок или фото, которое и будем превращать в красивую анимационную картинку.

Мне понравилась вот такая собачка. Я к ней добавлю надпись и сделаю так, чтобы глазки моргали.

На палитре слоев видим три слоя. Первый - наш шаблон 450х250 пикселей, второй - рисунок собачки, третий - текст.

Анимационная картинка будет состоять из двух кадров. На одном кадре исходное изображение собачки с полузакрытыми глазами, а на втором кадре глаза должны быть открыты.

Если Вы нашли рисунок забавной зверушки с открытыми глазами, то на втором кадре сделайте их, естественно, закрытыми.

Делаем активным слой с собачкой.

Командой Layer > New > Layer via Copy (Слой > Новый > Копия слоя) сделаем копию слоя . Можно просто на палитре слоев перетащить активный слой на кнопочку Create a new Layer (Создать новый слой) и получить копию этого слоя.

На копии слоя нарисуем открытые глазки.

Сделаем большое увеличение и поработаем кисточкой. Цвет - белый. Размер кисточки - 1 пиксель. Особых художественных способностей иметь не надо. Просто наносим несколько белых точек вокруг зрачка.

Результат работы можно посмотреть, если отключить и включить несколько раз копию слоя. Просто щелкаем на палитре слоев по символу в виде открытого глазика на копии слоя. Слой будет включаться и отключаться, а мы увидим эффект анимации в действии.

Чтобы смена кадров происходила автоматически, необходимо перейти в программу ImageReady, которая устанавливается вместе с Adobe Photoshop.

В последних версиях фотошопа окошко анимации открывается через команду меню Окно > Анимация.

Нажимаем кнопку Edit in ImageReady и наш многослойный файл оказывается на рабочем столе программы ImageReady.

Внизу в окошке анимации отражается первый кадр. Если Вы не видите этого, надо поставить галочку в пункте меню Window > Animation.

Анимация будет состоять из двух кадров, поэтому добавляем еще один кадр, нажав на кнопочку Duplicates current frame.

Теперь займемся анимацией. В кадре под номером один должен быть виден первый слой с собачкой и надпись. На палитре слоев отключаем слой-копию (закрываем "глазик").

В кадре под номером два должен быть виден слой-копия и надпись. На палитре слоев отключаем первый слой с собачкой.

Выставляем время показа каждого кадра и жмем кнопочку Plays \ stops animation. Анимационная картинка оживает.


 
  • Страница 1 из 1
  • 1
Поиск:


cs-games.net.ru © Все права защищены! Дизайн данного сайта полностью принадлежит Администратору Сайта cs-games.net.ru Хостинг от uCoz Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
Дизайн данного сайта полностью принадлежит администратору сайта.