Уроки и секреты Photoshop.

  Все выпуски  

Уроки и секреты Photoshop.


Служба Рассылок Subscribe.Ru
 
Уроки и секреты Photoshop

subscribe to english version | архив рассылки | написать автору

Тип: Анимационные эффекты
Photoshop 5.5/6.0x + ImageReady 2.0/3.0
Уровень сложности: Высокий

06-11-2001
Урок #18. Анимированные GIF'ы

..:: ЭТО ПОСЛЕДНИЙ НОМЕР РАССЫЛКИ, ВЫХОДЯЩИЙ НА СЛУЖБАХ РАССЫЛКИ, ОТЛИЧНЫХ ОТ SUBSCRIBE.RU ..::
Со следующего номера рассылка будет издаваться исключительно на сервере службы Subscribe.ru. Подпишитесь, пожалуйста, с помощью формы внизу страницы.
..:: Приносим свои извинения за доставленные неудобства ::..

По Вашим просьбам настоящий урок расскажет об основах работы по созданию анимированных файлов с помощью Adobe Photoshop и Adobe ImageReady. Напомним, что редактор ImageReady входит в дистрибутив Adobe Photoshop как интегрированное приложение, начиная с версии 5.5.
Предметом урока является создание RollOver Image, или изображения, обычно воспроизводящего анимацию при наведении курсора. Урок состоит из двух частей: в первой части рассматриваются шаги, которые нам необходимо будет пройти непосредственно в Photoshop, во второй - действия по окончательной обработке изображения в ImageReady. Приступим.

Действия в Adobe Photoshop:

 

1

Начнем урок с установки цветов на назначенные программой по умолчанию. Для этого нажмем клавишу D или кнопку на панели инструментов. Поменяем цвета местами: клавиша X или кнопка .

 

2

Создадим новый файл: Файл > Создать (File > New) или Ctrl+N. Нам понадобиться файл небольшого размера, 60х25 пикселей для этого урока будет вполне достаточно. Помните, что мы создаем анимацию, и чем больше буду размеры у исходного файла, тем "тяжелее" будет созданная анимация.
Убедимся, что Режим (Mode) у нас определен как RGB, цвет полотна установим в качестве Цвета фона (Background Color), который, как мы уже определили в предыдущем шаге, будет черным.

 

3

С помощью инструмента Текст (Type) введем текст, который впоследствии нами будет анимирован. Гарнитуру, цвет и размер шрифта определим в соответствии с индивидуальными желаниями.
Убедимся, что включена опция Сглаживания шрифтов (Anti-aliasing). Для Photoshop 6.0x - любое значение Метода сглаживания (Antialiasing method), кроме Нет (None).

4

Придадим тексту синеватый оттенок. Для этого нам понадобиться новый Корректирующий слой (Adjustment Layer): выполним команду Layer > New Adjustment Layer > Hue/Saturation. В диалоговом окне отметим флажком опцию Тонирование (Colorize) и введем следующие значения:
Тон (Hue): 218
Насыщенность (Saturation): 46
Яркость (Lightness): 0.
Нажмем OK.

 

5

Следующим нашим шагом станет добавление эффекта свечения (Glow effect - ) вокруг текста: щелкнем правой кнопкой на слое Anim в палитре Слои (Layers) и выполним команду Effects либо дважды щелкнем на представлении слоя Anim в палитре. В появившемся диалоговом окне отметим флажком Внешнее свечение (Outer Glow) - Ctrl+3. Применим к слою следующие установки:
Режим (Mode): Осветление (Screen)
Цвет (Color): R255,G255,B255 [#FFFFFF]
Непрозрачность (Opacity): 75
Размытие (Blur): 8
Интенсивность (Intensity): 200.
Для Photoshop 6.0x: последние два параметра не имеют значения.

6

Для выполнения следующего шага урока нам понадобится Операция (Action) TV Lines.
1. Загрузим TV Lines здесь (TVLines.atn).
2. По запросу сохраним Action. Его местоположение никакого значения не имеет, если Вы все же решитесь использовать TV Lines в будущем, сохраните ее в директорию: Photoshop 5.5/Goodies/Adobe Photoshop Only/Actions/ (для PS 5.5) или в любую поддиректорию с Adobe Photoshop.
3. Перейдем к палитре Операции (Actions) - F9 или Окно > Отобразить операции (Window > Show Actions). Нажмем и выберем из контекстного меню Загрузить операцию (Load Action).
4. Определим местонахождение только что загруженной нами TV Lines.
Запустим теперь сценарий операции на выполнение: нажмем кнопку в палитре Операции (Actions). После ее выполнения в наше изображение будет добавлен новый слой, а к изображению - эффект, часто называемый пользователями Photoshop "Телевизионной сеткой ".
И, хотя наше изображение почти готово, нам необходимо добавить еще два слоя, которые будут использованы в ImageReady для анимации.

7

Продублируем слой anim. Для этого кликнем по его представлению в палитре Слои (Layers) правой кнопкой и выполним команду Дублировать слой (Duplicate Layer); либо посредством меню: Слой > Дублировать слой (Layer > Duplicate Layer); либо просто перетащим представление слоя anim на кнопку Новый слой (New Layer) в палитре Слои (Layers).
К новому слою применим фильтр Фильтр > Размытие > Размытие в движении (Filter > Blur > Motion Blur) с параметрами:
Угол (Angle): 0°
Расстояние (Distance): 5 пикселей.
Впрочем, в зависимости от выбранной Вами гарнитуры, значения могут быть иными.
При появлении сообщения программы нажмем ОК, тем самым растеризуем слой.
Назовем новый слой "Anim mblur 5".
Если Вам хочется посмотреть, для чего нужен этот слой и какие изменения внесены в изображение с его помощью, просто сделайте слой anim невидимым, щелкнув на пиктограмме .

8

Повторим предыдущий шаг за тем исключением, что в настройках фильтра Размытие в движении параметр Расстояние (Distance) укажем равным 10. Очередной слой назовем Anim mblur 10 или, опять же, на свое усмотрение; лишь бы из названия слоя становилось понятно, для чего он предназначен.
Теперь наше изображение полностью готово для создания анимации в ImageReady. Сохраним наше творение в .psd-файле. На всякий случай, для тех, у кого есть возможность наблюдать иллюстрации слева, - так у нас должно выглядеть расположение слоев в палитре Слои (Layers).
Закроем Photoshop; пока он нам не понадобится. Не все, к сожалению, имеют в своем распоряжении достаточный объем оперативной памяти. Если у Вас с последней все нормально, можете оставить Photoshop работающим.

Анимация в ImageReady:

 

9

Откроем в ImageReady .psd-файл, созданный нами в ходе выполнения первой части урока: Ctrl+O или Файл > Открыть (File > Open).
Если Вы не закрывали Photoshop, нажмем Ctrl+Shift+M или выполним команду Файл > Перейти к > Adobe ImageReady (File > Jump to > Adobe ImageReady). Можно также нажать кнопку на панели инструментов.

10

Убедимся, что палитра Анимация (Animation) активна: Окно > Отобразить анимацию (Window > Show animation).
Перейдем в палитру Слои (Layers) и скроем все слои за исключением tv lines, Hue/Saturation, anim и Background. Эти слои показывают, как будет выглядеть готовое изображение в нормальном состоянии. Другими словами, сейчас мы видим на мониторе статическое изображение, отображающееся таким образом до тех пор, пока мы не разместим куроср над ним.

 

11

Перейдем к палитре Фрагмент (Slice): Окно > Отобразить Фрагмент (Window > Show Slice). Введем Имя фрагмента (Slice Name), URL страницы и Целевой фрейм (Target), если необходимо.
На заметку: если Вы не видите палитру Фрагмент (Slice) в развернутом виде, щеклните по кнопке в правом верхнем углу палитры и выполните команду Показать параметры (Show Options).

12

Перейдем к палитре Ролловер (Rollover): Окно > Отобразить Ролловер (Window > Show Rollover) или щелкнем на вкладке Ролловер (Rollover) в палитре Анимация (Animation).
Добавим новое состояние ролловера путем нажатия кнопки Добавить новое состояние (Add a new rollover state) в палитре Ролловер (Rollover). Второе состояние изображение по умолчанию будет Over (сокращенно от MouseOver). Это как раз то, что нам и необходимо.
На заметку: чтобы сменить состояние изображения по умолчанию, щелкнем по названию текущего состояния (в данном случае Over) и выберем желаемое из списка.

13

Теперь мы создадим анимацию для состояния Over. Перейдем обратно к палитре Анимация (Animation) - F11.
Кадр 1 (Frame 1) выглядит точно так же, как изображение в состоянии Normal. Скроем слой anim в палитре Слои (Layers) и, напротив, сделаем видимым слой anim mblur 10 (пиктограмма ).

14

Сделаем копию текущего кадра посредством нажатия кнопки Дубликат текущего слоя (Duplicate Frame) в палитре Анимация (Animation).
Снова уберем видимость со слоя anim mblur 10 и сделаем видимым слой anim mblur 5.

15

Еще раз сделаем копию текущего кадра (). Не будем в этот раз изменять видимость слоя anim mblur 5, но включим режим видимости у слоя anim.
С помощью бегунка Непрозрачность (Opacity) в палитре Слои (Layers) изменим непрозрачность слоя anim до 50%, предварительно сделав его активным.

16

Добавим последний дубликат в последовательность кадров нашей анимации в палитре Анимация (Animation) - .
Снимем режим видимости со слоя anim mblur 5 и вернем в исходное состояние - 100% - непрозрачность слоя anim.
Для того, чтобы завершить процесс создания анимации, усилим эффект свечения последнего кадра.
Убедимся, что палитра Слои (Layers) видима и активен слой anim.
Откроем слой эффектов, прикрепленных к слою anim, щелкнув на кнопке непосредственно на представлении слоя anim. Выберем эффект Внешнее свечение (Outer Glow). Как мы видим, изменилось состояние палитры Параметры слоя/Эффекты (Layer Options/Effects).
Изменим непрозрачность эффекта в палитре Параметры слоя/Эффекты (Layer Options/Effects) с 75% до 100%.

 

17

Так как нам нежелательно, чтобы анимация при наведении курсора была циклической (то есть проигрывалась без остановки), а имела место отображаться один раз, останавливаясь после прохождения последнего кадра, изменим Режим проигрывания в левом нижнем углу палитры Анимация (Animation) на Однократно (Once).
Протестируем анимацию, нажав кнопку Выполнить (Play) в палитре Анимация (Animation).

18

Перед тем, как сохранить созданный анимационный файл, мы должны определить настройки по его оптимизации.
Если Вы видите иллюстрацию слева, можете использовать указанные настройки. В ином случае, используйте настройки на Ваше усмотрение, учитывая что в итоге мы должны получить .gif-файл.

19

И, наконец, сохраним оптимизированную анимацию: (Ctrl+Alt+Shift+S) либо Сохранить оптимизированное как (File > Save Optimized As). Это действие сохранит, кроме созданных нами изображений отдельно для состояний Normal и Over также HTML-код страницы со вставленным Java-скриптом и изображением.
Для того, чтобы перенести готовую графику на требуемую страницу, нам необходимо будет лишь скопировать фрагменты HTML-кода, сгенерированного ImageReady.
Полученный файл также не помешает сохранить в формате .psd.

Внимание: анимация в выпуске рассылки не работает по причине невозможности использования в теле HTML-кода рассылки Java-скриптов.

На этом все! Надеюсь урок не показался Вам сложным и у Вас не возникало проблем при его выполнении.
Успехов Вам в изучении Photoshop!

 

..:: Опрос ::..

Какой программой Вы пользуетесь для просмотра выпусков рассылки?

MS Outlook Express
TheBat
Eudora
CommuniGate Pro
Netscape Messenger
MS Internet Explorer
Netscape Navigator
Opera
Mozilla
Другая

..:: Вопросы читателей ::..

Алексей:
В Фотошопе шрифт для Type tool'а выбирается не стандартным виндовским диалогом, где можно выбрать набор символов (Западноевропейский,
Кириллица и т.д.), и поэтому я не смог обнаружить, каким образом можно вводить русский текст такими шрифтами, как Garamond и др. (в общем,
всеми, кроме Arial и Times New Roman). Подскажите пожалуйста, как это сделать.

Ответить >>>

..:: Совет ::..

Если вы хотите сделать видимым только определённый слой, щёлкните на пиктограмме глаза при нажатой клавише Alt перед представлением интересующего вас слоя в палитре Слои (Layers); при этом все другие слои будут скрыты. Повторите предыдущее действие ещё раз и остальные слои снова станут видимыми.

..:: Термин ::..

Graphic primitive

Графический примитив - простейший геометрический объект, отображаемый на экране дисплея или на рабочем поле графопостроителя: точка, отрезок прямой, дуга окружности или эллипса, прямоугольник и т.п.

..:: Ссылка ::..

2advanced Studios
Сайт студии дизайна. Отличное оформление.

..:: Юмор ::..

Идёт урок информатики в школе. Дети набивают программу. Прозвенел звонок. Учитель подходит к главному рубильнику и выключает электричество.
Дети возмущённо:
- Мы не сохранились!
Учитель, включая рубильник:
- Сохраняйтесь...


Рассылки Subscribe.Ru

Уроки и секреты Photoshop.

Рейтинг почтовых рассылок SpyLOG

Рассылка 'Уроки и секреты Photoshop.'

Все перечисленные торговые марки принадлежат их владельцам
При перепечатке ссылка на Graphics Universe приветствуется
Copyright 2001 © Graphics Universe
Автор рассылки: Роман Семченко



http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу
Рейтингуется SpyLog

В избранное