ЗДРАВСТВУЙТЕ, УВАЖАЕМЫЕ ЧИТАТЕЛИ!
Сегодня мы начинаем осваивать одну из многочисленных функций
Фотошоп -- создание анимации. Применяют анимацию достаточно широко. Я вдаваться в подробности не буду. Прогуляйтесь по Интернету и найдете много примеров. Самый распространенный пример использования анимации -- "живые"
аватары на многочисленных форумах. Для меня самой этот процесс -- новинка, поэтому будем учиться вместе.
А первым уроком для нас будет создание
анимированного неонового текста.
Для этого понадобится еще одна программа-приложение к
Фотошоп --
Image Ready или
Photoshop CS3 и выше (у кого уже есть). Я буду делать в
Photoshop CS2 и
Image Ready. Итак, начнем.
ШАГ 1: создаем текст.
Для начала нам понадобится создать текст, который мы будем "оживлять" с помощью анимации. Создаем новый документ размером, скажем
500х300рх и заливаем его черным цветом. Ставим белый цвет в качестве основного
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztAemBjZZTQITxvLFwNeuEqTlBYjngXj88Ftgjqi_p6qA2WB6jpiwXn0U6TF5-XX-sOTGK16IkyboehSxFafPX0aG5RWt4lo7pcdXyOxr-a7rdq8CrTf_H5dQXHbS-3lDVt4OfZJMeic/s400/1.gif)
, выбираем инструмент
ТЕКСТ (TEXT) (T) ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5npUiPSVqLrMvRknk7Nj1ZRbhyphenhyphenmLl7hXHykS1GyynvNeVtQN2pmn04RJy70HZultJa1waDDJ8I8V8fOeT-jqjBrf1ql2vIcDAYWvc1eheyPsd5VPoEN5PiGTFqgvz8lHRDzGQiLTrIfg/s400/2.gif)
, с такими настройками:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrHvDXwiKmasyWfACMLeIj5coA3sd5vY4yst5KygYc0IL09GKRgvGdIcP2fiSTz2CDxGNS419N7H5Sc3gKUEpNzjr_rq-kiGOwcbFO0-8rVe98S5W5xEc-KNghWQsGXlNKSLRu4tPCZTc/s400/3.gif)
и пишем любое слово, например так:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAIRBKfjOvf__K8uGoqsisvxhyZc9Vv3r2xIq1Pwq2IyBJpTWt3-jeEYfQT9RJUBouaBGUalWKuAHOwQz2kE-5itgThK89OU9RgMOwC3GhwIb9LJlsqbftSswJpidwRJX2oMVdAOfw86Y/s400/4.jpg)
Теперь
растрируем текстовый слой
(СЛОЙ/РАСТРИРОВАТЬ/ТЕКСТ; LAYER/RASTERIZE/TYPE), объединяем наши слои в один
CTRL+Е. Дальше идем в меню
ФИЛЬТР/РАЗМЫТИЕ/РАЗМЫТИЕ ПО ГАУССУ (FILTER/BLUR/GAUSSIAN BLUR). Радиус
размытия ставим на
2 пикселя. Следующий фильтр -- это
СТИЛИЗАЦИЯ/СОЛЯРИЗАЦИЯ (STYLIZE/SOLARIZE) из того же меню
ФИЛЬТР(FILTER) ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvLr6J13Dfb9-EQXRHIauzM2FBbAkryj06d5TqboBViLk7v0yl_vUVqV0-aKiHXqE_3bl0rnjL0c1-OwZqrIuRHKEnaD97QhytJglIR0MbUFg572UWyfpu79HR0_Lb-kxLy8U0DIUbiA/s400/5.gif)
Должно получиться так:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzTmyFgcIoOpp-976j9oJsPZjZXoTKEc2dgnuxhM2Jp89tboNIXPTK1eI_ZrJA80WQW1Q1SyB2SL0-iGFVfGETH2j-cxD_XKXH8boI0W68m4SGc1SVfia12ujVECmEsYTeNeo2TLeMdw/s400/6.jpg)
Сделаем наш текст чуть поярче с помощью команды
АВТОКОНТРАСТ которая находится здесь:
ИЗОБРАЖЕНИЕ/КОРРЕКЦИЯ/АВТОКОНТРАСТ (IMADGE/ADJUSTMENTS/AUTOLEVELS) Теперь стало лучше:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGQSukYNrtg1pEJVktrao2o5SLHSTR0O8HU1jxCAu8RP51OnIdSsbAEvBofQ_FbFdfZFuAykBAZ9Vlo7uE7E6xw_gtMDp57xhGakKFZavFGETt3e4UGdEie7EBQVC1kcL6VhZn7muMvY/s400/7.jpg)
Осталось подкрасить наш текст. Для этого жмем клавиши
CTRL+U для вызова команды
ЦВЕТОВОЙ ТОН/НАСЫЩЕННОСТЬ (HUE/SATURATION) и сначала ставим такие настройки:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyYdgUxYKZ533frS4Wz_WLRFsQbf1wOAyuJyhbSuO42rXHusVBLftrEKcyTIFW_3yP2w2EOE2UC2ZQtrUKhi7EyAFhiBHapbAbb5jh88qk8Y05Kp1mrzKKuTac34xMJd9wuNN3xcFqKI/s400/8.gif)
В результате получаем красный светящийся текст:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdeIorWEigbO2v3cdVCSHNwJt8SenXaGTbCDmeOIBqGj5cPgztH7Ft36p-PCrJXGAB7wripuVfPngtBaqYBaJ0XrZhwq5R2PvBeLlk6ner_qKFGWKGz98BLxVF0ed9Iu7vv6O-N6hVeZA/s400/9.jpg)
Теперь продублируем наш слой еще три раза (
CTRL+J) и для каждой копии применим ту же команду,
ЦВЕТОВОЙ ТОН/НАСЫЩЕННОСТЬ (HUE/SATURATION), только меняем параметры
ЦВЕТОВОЙ ТОН (HUE), а параметры
НАСЫЩЕННОСТЬ (SATURATION) все время ставим на максимум, т.е.
+100. Цветовой тон можете подбирать по своему вкусу. Я сделала так:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMk4oWv0nngSxM9AeRJB53IT5WARfl3rDtusPhNfCJhl4WChgLHZ0vmjFP0A3dc6IsWN6HYWQV006sUqbZLIz51iMty4qyw6Yck0apiVvtkUONnKWA2zmcWxMOTJGPJimg8iCoNOtU0_w/s400/11.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7oA5UEsTh1ajxSOycV3ySMB9iABZtS-4OsZcuTT1QYNV9JcUJ3X9Xa0E3pQukkyxWq0oTL170TAiSDwQlzAgzIUCFO7bvpVnHAYOhMxyEAEZRmgXjWID_NFoSw7S3JHWvLVwFllM_JDM/s400/12.jpg)
А чтобы видно было, как меняется цвет текста, оставляйте видимым только тот слой, с которым Вы в данный момент работаете, зажмите клавишу
ALT и щелкните по "глазу" слева от иконки слоя
ШАГ 2: создание анимации.
Теперь для создания анимации переходим в приложение
Image Ready ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHEGLH2BzIK921X3PsdxAruuPvIZ5TyefBw8JdPnR3YRTNI-Ba3JTvQAmGX2UshIJiNDU4wzYTsyGFAGnqEwe47aH232YFsPiLpK2rUF3-L3Qi8Lq7uTgPWHKeodjz0HkxUHrzn7dUPs/s400/14.gif)
или, если у Вас
Photoshop CS3, открываем окно
Анимация (Animation) (Окно/Анимация; Window/Animation). Внешний вид программы
Adobe Image Ready похож на
Фотошоп, за исключением некоторых инструментов и палитр, о которых мы пока говорить не будем. Нас интересует
Палитра Анимация:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyFKHffuwaNx36K4l0WTF-Gp0fggHfQkPbK94gaCzxl-kD_Sber_CqZwDvT6tG0A6E12Q2qCBGMIUlZXn6ezFvIuN6BVXrLckJN4z5c8wdjj9VKbSIEqB0cfVjCdz38CjaCOvhZ8ZymDY/s400/15.gif)
Здесь его тоже нужно открыть через меню
Окно (Window). В этой Палитре уже открыт верхний слой (у меня он называется "Синий"), в качестве первого кадра нашей "мультяшки". Остальные кадры мы создадим из трех нижних слоев. Для этого в
Палитре Анимация нажимаем на кружок со стрелкой в правом верхнем углу и в контекстном меню выбираем команду
СОЗДАТЬ КАДРЫ ИЗ СЛОЕВ:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-NioN4P-3hWWmCrlcqLDtx-UMsc2G3kEcSt7PtU82MjIIDgvCS8mmBE4udK1kfvBP_CXqhVc8l1LDrqTJMWFAPXd_PFyyL3hd2nfq6LVupQoWsUi3Q821mvq_C5dY9vCL9Zf2LnRY18/s400/16.gif)
В результате Палитра выглядит так:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFAgo7kDZP_CtaLN0I6sDwibYciBwbvpi8OFE1Td2jEQAG_YuMfjKsvnqjrZmoo5_TOHuIL0JHcaE3N_h3C3OMhLAV8yeySKhJsfcUoCSpoSTTGzgLen4CsK2R3BJQPFK4A3CqN6iUpq0/s400/17.gif)
Теперь нужно указать частоту, с которой кадры будут сменять друг друга. Под каждым кадром справа внизу написано 0 с. и стоит стрелка. Нажимаете на эту стрелку и выбираете частоту смены кадров. Например, если выбрать 0,1с, это значит, что кадры будут сменять друг друга с частотой в 0,1 долю секунды
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWHQHFy3VGjofEk3D7tvN6c_K_au_3QjF6ks3m0DIcnd3zeP4pPBf5n3TUtsM6foVK4Z63Cl27w9x368jpGR-5gvYZoLc3431eYIgpwSszzwyq3I0HeKGAocfnX-q9D_L958NUDJgbZ0/s400/19.gif)
Так выставляем частоту для каждого кадра и нажимаем кнопку воспроизведения
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXD_OTEiGgnEIJDzQDcp9OtbaVf9QiDZzH-NC7UaH8qbOqAulno3pUUGWbpMmpn4_5Pm_IBbYsmwRAqOlzxNoPZEto2ID8ZCgph6mzkRpj19XqMiqjxupqvRKzodTZQdCLS9sV4Y7fd1Y/s400/20.gif)
чтобы посмотреть, что у нас получилось. В результате Ваш текст должен "замигать" (к сожалению в
блоге "мигание" текста не работает, по видимому формат
gif-анимации не поддерживается. Если кто знает истинную причину, подскажите! Я ведь тоже не во всех областях специалист :))). Теперь осталось сохранить документ так, чтобы он "мигал" и в интернете. Для этого в меню
ФАЙЛ выбираем
СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК... (SAVE OPTYMISED AS...), сохраняем в
GIF формате. Осталось выложить во Всемирной сети.
А на сегодня все. Спасибо за внимание!
Комментариев нет:
Отправить комментарий