58

Курсы фотошопа: учимся делать анимацию

Салют, дорогие читатели!

Тотчас мы начинаем осваивать одну из многочисленных функций Фотошопанимация в фотошопе. Применяют анимацию изрядно широко. Я вдаваться в подробности не буду. Прогуляйтесь по Интернету и найдете много примеров. Чистокровный распространенный прототип использования анимации – “живые” аватары на многочисленных форумах. Для меня самой абсолютный процесс – новинка, поэтому будем обучаться совместно. А первым уроком для нас будет создание анимированного неонового текста.
Для этого понадобится наново одна программа-приложение к ФотошопImage Ready или Фотошоп CS4 и выше (у кого уже есть). Я буду делать в Photoshop CS4 и ImageReady. Итак, начнем.
ШАГ 1: создаем текст.
Для начала нам понадобится создать текст, который мы будем “оживлять” с помощью анимации. Создаем неизвестный документ размером, скажем 500х300рх и заливаем его черным цветом. Ставим серебристый колер в качестве основного , выбираем инструмент Текст (TEXT) (T) курсы фотошоп, с такими настройками: курсы photoshop и пишем любое слово, например так: Теперь растрируем текстовый слой (СЛОЙ/РАСТРИРОВАТЬ/ТЕКСТ; LAYER/RASTERIZE/TYPE), объединяем наши слои в один CTRL. Дальше идем в перечисление ФИЛЬТР/РАЗМЫТИЕ/РАЗМЫТИЕ ПО ГАУССУ (FILTER/BLUR/GAUSSIAN BLUR). Радиус размытия ставим на 2 пикселя. Следующий фильтр — это СТИЛИЗАЦИЯ/СОЛЯРИЗАЦИЯ (STYLIZE/SOLARIZE) из того же реестр ФИЛЬТР(FILTER) анимация в фотошоп Должно получиться так: Сделаем единственный текст чуть поярче с помощью команды АВТОКОНТРАСТ которая находится тут: Зарисовка/КОРРЕКЦИЯ/АВТОКОНТРАСТ (IMADGE/ADJUSTMENTS/AUTOLEVELS) Сегодня стало лучше: Осталось подкрасить характери текст. Для этого жмем клавиши CTRL+U для вызова команды ЦВЕТОВОЙ Тон/НАСЫЩЕННОСТЬ (HUE/SATURATION) и сначала ставим такие настройки: В результате получаем червонный светящийся надпись: Теперь продублируем свой эктодерма еще три раза (CTRL+J) и для каждой копии применим ту же команду, ЦВЕТОВОЙ Треск/НАСЫЩЕННОСТЬ (HUE/SATURATION), только меняем параметры ЦВЕТОВОЙ Соль (HUE), а параметры НАСЫЩЕННОСТЬ (SATURATION) все казус ставим на максимум, т.е. +100. Цветовой тон можете подбирать по своему вкусу. Я сделала так: А чтобы похоже было, как меняется окраска текста, оставляйте видимым едва тот слой, с которым Вы в поданный секунда работаете, зажмите клавишу ALT и щелкните по “глазу” слева от иконки слоя
Походочка 2: создание анимации.
Теперь для создания анимации переходим в приложение Image Ready или, если у Вас Фотошоп CS3, открываем окно Анимация (Animation) (Окно/Анимация; Window/Animation). Зарубежный сорт программы Adobe Image Ready похож на Фотошоп, за исключением некоторых инструментов и палитр, о которых мы поколе изрекать не будем. Нас интересует Палитра Анимация: Тут его тоже нужно открыть через меню Окно (Window). В этой Палитре уже открыт наружный кора (у меня он называется “Лазурный”), в качестве первого кадра нашей “мультяшки”. Остальные кадры мы создадим из трех нижних слоев. Для этого в Палитре Анимация нажимаем на собрание со стрелкой в правом верхнем углу и в контекстном оглавление выбираем команду СОЗДАТЬ КАДРЫ ИЗ СЛОЕВ: В результате Палитра выглядит так: Поколе нужно показать частоту, с которой кадры будут сменять товарищ друга. Под каждым кадром справа внизу написано 0 с. и стоит стрелка. Нажимаете на эту стрелку и выбираете частоту смены кадров. Например, если избрать 0,1с, это следовательно, что кадры будут сменять друг друга с частотой в 0,1 долю секунды Так выставляем частоту для каждого кадра и нажимаем кнопку воспроизведения чтобы посмотреть, что у нас получилось. В результате Ваш текст должен “замигать” (к сожалению в блоге “мигание” текста не работает, по видимому формат gif-анимации не поддерживается. Если который знает истинную причину, подскажите! Я ведь тоже не в всех областях эрудит :))). Сегодня осталось оставить документ так, чтобы он “мигал” и в интернете. Для этого в реестр ФАЙЛ выбираем СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК… (SAVE OPTYMISED AS…), сохраняем в GIF формате. Осталось выложить в Всемирной сети.
А на моментально все. Спасибо за забота!

Фотошопер
 

Click Here to Leave a Comment Below 58 comments
влад - 23.07.2011

огромное спасибо!

Reply
Лина - 06.07.2011

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

Reply
dasdsa - 05.07.2011

Почему не сохраняет?

Reply
Дарья - 05.07.2011

А скажите пожалуйста,вот у меня на определённом сайте аватарка должна весить 40 кб как в фотошопе сделать анимацию под такой размер?

Reply
Иван - 15.06.2011

Извините, Фотошопер.
Я не найду у себя в кс3 АВТОКОНТРАСТ.
Помогите!

Reply
    Фотошопер - 15.06.2011

    Я уже не помню, что там есть в CS3… 🙁
    Советую поставить себе CS5, там и автоконтраст есть и еще уйма новых полезных наворотов.
    Зачем мучатся со старой версией фотошопа? Удачи!

    Reply
Алексей - 29.05.2011

А как сохранить анимацию в фотошопе в cs5

Reply
    Vlad - 11.06.2011

    нажми-CTRL+ALT+LSHIFT+S

    Reply
    Olik - 13.06.2011

    Как замнкнуть анимацию,чтоб проигровались кадры по кругу ?

    Reply
сергей - 27.05.2011

хорошие уроки. спасибо! они более понятные, по крайней мере, для меня.
уважаемый “Фотошопер”, если можно. сделайте, пожалуйста, урок, как в фото вставить гиф-анимацию, что-то не очень получается, а без подсказок плоховато.
с уважением – сергей.

Reply
Елена - 25.05.2011

Спасибо большое за урок. Моя первая анимашка. У меня вопрос который смотрю повторяется у многих здесь. Не получается сохранить, у меня фотошоп 3 там в закладке окно есть анимация, воспользовалась ей и внутри все вроде работает на компе нет. Сохраняла в gif формате. буду признательна если ответите. )))

Reply
Оля - 24.05.2011

Капец((….Я уже все сделала, у меня в фотошопе оно мигало, потом нажала “сохранить как..” и выбрала “GIF” но сохранилось обычной картинкой(((

Reply
Кристи - 16.05.2011

а как сделать эту анимашку без Image Ready?????? у меня просто на компе нету этого.помогите!!!!!!!!!help meeeeee!!!!!!!!

Reply
Анна - 06.05.2011

Можно вопросик?
Я не вижу где АВТОКОНТРАСТ. Что делать? Или я что то не до поняла?

Reply
    Фотошопер - 12.05.2011

    Конечно, можно 🙂
    И чем больше, тем лучше 🙂
    Вот решение для Photoshop CS5:
    В меню -> Изображение\Автоконтраст.
    Надеюсь поможет!
    Удачи!

    Reply
anton - 27.04.2011

Спасибо большое за урок. Очень помогло.
Подскажите пожалуйста, как сохранить анимацию?

Reply
    Фотошопер - 29.04.2011

    В меню: ФАЙЛ -> СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК… (SAVE OPTYMISED AS…), сохраняем в GIF формате.

    Reply
Антон - 27.04.2011

Спасибо большое. Урок понятен)
У меня получилась анимация, но только не знаю как сохранить. помогите плиз!!!
Если что, то у меня cs5.

Reply
Яна - 10.04.2011

скажите пожалуйста, а как сделать анимацию с фото.
Это возможно вообще?

Reply
я - 09.04.2011

спс большое за урок

Reply
Просто Фотошопер))) - 08.04.2011

Супер! Спасибо за помощь!)))

Reply
Аделия - 02.04.2011

Спасибо, очень понятный и доступный каждому урок)) мне очень понравилось)

Reply
ФотоЖоп - 28.03.2011

Че помог урок?

Reply
Пряник - 07.03.2011

Спасибо огромное!!!!!!!!!!!

Reply
Влад - 04.03.2011

Спс огромное

Reply
Няка - 08.02.2011

Изображение\Автоконтраст…..у меня 5-й если что

Reply
Camila2011 - 07.02.2011

я сделала на CS5 без Image Ready!!! все круто!!!

Reply
софа - 01.02.2011

я не могу найти зарисовку/коррекцию/автокотрас.кто по может?

Reply
Олег - 22.01.2011

если я сделал анимашку а она весет 6м как мне ее сохранить ато так немогу пишит что много памяти, у меня cs5 помогите пожалуйста!!!

Reply
MikeLeas - 18.01.2011

а если фотошоп больше КС 4 то имейдж ридер не надо? у меня КС5-ть нужен ридер иль нет? если нужен, то где его взять??

Reply
LexieSanders - 04.01.2011

Научите пожалуйста как сохранить эту анимацию!!!Я сохраняю в gif а она не работает((((

Reply
Tisik - 17.12.2010

Спасиб большое, у меня получилось!!
Чтобы оно сохранилось нужно выбрать СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ…

Reply
    Фотошопер - 21.12.2010

    Рад, что у тебя все получилось! Надеюсь на новые комментарии от тебя. Удачи в изучении фотошопа!

    Reply
напка фотошопа - 14.12.2010

нифига не понятно в пункте 2 создание анимации,где окно Анимация найти блин!?как через меню окно window Открыт!даже фоток нету где его найти ппц

Reply
FEAR - 09.12.2010

а я чёт не понял, как правильно сохранить эту анимацию, сохраняю в gif формате а не работает

Reply
Валерий - 06.12.2010

Спасибо большое всё очень хорошо расписано на нашем русском языке а не как в других объяснениях на какомто не понятном языке!!!)))

Reply
    Фотошопер - 08.12.2010

    Рад, что вам нравится! Подписывайтесь на обновления сайта по RSS, чтобы не пропустить самые новые уроки по фотошопу на русском языке.

    Reply
*princeska* - 31.10.2010

Спасибо большое!! Очень нужна была анимация, вот теперь умею делать))) Везде каким-то заумным языком написано, а тут все просто и понятно)) Большое спасибо))

Reply
    Фотошопер - 08.11.2010

    И вам большое спасибо за комментарий! Всегда очень приятно получать “фидбэк” (модное словечко 🙂 ) Надеюсь, наши новые уроки по фотошопу вас порадуют не меньше, чем этот!

    Reply
@lesya - 13.09.2010

Попробую ответить для
A@net (хотела вставить рисунок, но Snagit не сработал)))) :
Открываете нужное изображение. Заходите в “Выделение” – “Цветовой диапазон” и нажимаете “Да”. (Извините, Фотошоп русифицированный, по англ. не знаю как правильно будет, у всех по-разному ((( ). Область автоматически выделиться.
Далее идёте в Изображение – Коррекция – Цветовой диапазон, и меняете цветность для выделенной области.
Либо тупо берёте волшебную палочку и выделяете область, которой нужно поменять цвет.
И все!!! Не забывайте всё сохранять на новых слоях!!!!))))

Reply
    Фотошопер - 16.09.2010

    Огромное спасибо за полезный совет! Надеюсь теперь у A@net все получиться. Кстати, добро пожаловать в раздел “Стать автором“, может еще чем нибудь полезным сможете поделится 😉

    Reply
A@net - 26.08.2010

Уважаемые господа, знатоки фотошопа! У меня вопрос..(мучает на практике ужо пару часов). Есть фотография..хочу сделать анимашку такого рода…фото-фото+меняем hue-фото+меняем hue-фото+меняем hue…и.т.д.проблема состоит в том, что при каждом +меняем hue/saturation меняется цвет всех кадров…Что надо где что бы кадры получались цветные, в соответствии с положение бегунка hue …?

Буду ооочень благодарна за ответ))))))

Reply
    Фотошопер - 28.08.2010

    Может кто поможет сделать такое? Или мне делать новый урок? Может все таки, хоть кто-то разместит первый гостевой урок по фотошопу? Очень жду…

    Reply
Илья - 02.08.2010

Спасибо, все классно 🙂

Reply
светозар - 16.04.2010

А можно в фотошоп втроить имаге реади?

Reply
Сергей - 30.11.2009

Здравствуйте!
Вы что то меня путаете – ничего подобного даже и близко нет, один туман какой то. Попробуйте ка нарисовать что-нибудь ещё.

Reply
Людмила - 11.11.2009

Спасибо, очень понятно все объяснили. Nelly, меня тоже фотошоп CS4. Через окно-анимация. И внизу появится опция для создания анимации

Reply
Nelly - 04.11.2009

Здравствуйте! Всё очень хорошо написано, но у меня есть фотошоп CS4, а Image Ready в нём нет… Где мне его найти? Или может программу надо обновить? Помогите, пожалуйста!…

Reply
    Фотошопер - 10.11.2009

    Здравствуйте! Спасибо за вопрос!
    Поищите Image Ready здесь.

    Reply
      Zar - 17.06.2011

      Осталось сохранить наш баннер в формате gif, для этого в фотошопе надо пройти в меню файл и выбрать пункт меню “сохранить для Web и устройств” (Save for Web & Devices) или, что удобнее, нажать комбинацию клавиш Ctrl+Shift+Alt+S. В диалоговом окне выбираем формат Gif. Тут можно поиграться с настройками, которые влияют на качество и размер получаемого Gif файла. После сохранения нашей Gif-анимации как файл с расширением Gif, наслаждаемся нашим собственным прелоудером ! И анимация будет работать !!! 🙂

      Reply
Ольга - 30.04.2009

Спасибо большое за хороший урок.Все понятно, уже работаю над фото, еще раз спасибо.

Reply

Leave a Reply: