Анимация в Adobe Photoshop CS3
Опубликовано 12 августа, 2008 годаРубрики: Веб-мастерам, Дизайнерские Штучки, Уроки Photoshop
В этом уроке я расскажу, как создается анимация в программе Adobe Photoshop CS3. На самом деле процесс создания не изменился, он такой же, как в прошлых версиях и отличается лишь тем, что нам больше не понадобятся сопутствующие программы. Теперь все можно сделать, используя исключительно Adobe Photoshop.
Я покажу принцип создания анимации на примере простейшего баннера. Сразу хочу отметить, что в Photoshop’e анимацию можно создать только в формате gif, а его качество оставляет желать лучшего. Но не всегда, разумеется. В качестве примера приведу вот эти две картинки:
Они обе в формате gif, обе сделаны в одной и той же версии Photoshop. Кнопочка выглядит достаточно хорошо, а вот баннер не очень. Проблема в том, что я попытался нарисовать баннер, используя большое количество полутонов, которые gif попросту не поддерживает. Для того, чтобы сделать красивый анимированный баннер применяются уже flash-технологии. Но это уже другая история. Да и вообще, тема создания баннеров весьма обширна и требует отдельной публикации.
Я же не буду отвлекаться и вернусь к изначально поставленной задаче – расскажу, как делать анимацию в Adobe Photoshop CS3.
1. Я придумал изначальный «сюжет» анимации. Не знаю, почему я вдруг вспомнил фильм «Карты, деньги и два ствола», но коль это произошло, то, используя это название, и создадим анимацию. Она будет достаточно простой и состоять из трех кадров. А суть заключается в том, что будет меняться надпись и «подсвечиваться» одна из картинок. Когда надпись «карты», то и картинка с картами станет четче и т.д.
2. Теперь приступим к рисованию самого баннера. Откроем Photoshop и создадим новый файл размерами 468х60 – это стандартные размеры большого баннера.
3. Что и как рисовалось, я расписывать не буду по двум причинам.
Во-первых: я не придумывал тут ничего нового, а использовал старые, давно раскрытые приемы.
Во-вторых: у Вас все равно будут свои задумки, которые будут реализовываться совершенно по-другому (но, если вдруг кому-то что-то понадобится, то спрашивайте, расскажу, как и что делал).
4. Итак, у меня есть заготовка, элементы которой можно соединить в один слой, дабы потом не путаться. Они нас не интересуют, так как, по сути, являются фоном.
Считайте, что это сцена, по которой будут перемещаться наши актеры.
5. Теперь добавим три картинки, которые будут «подсвечиваться» в нужный момент. Я изменил Непрозрачность (Opacity) до 60% и добавил тень в стиле слоя (layer stile – drop shadow).
Обратите внимание, что три картинки – это разные актеры, у каждого своя независимая роль, а это значит, что каждая из них должна находиться на отдельном слое.
6. Следующее, что нужно сделать – это написать три слова: «карты», «деньги», «2 ствола». Каждое на отдельном слое. И разместить их аккуратно друг под другом, дабы, когда они будут меняться, не происходило скачков. Выглядеть это должно следующим образом
7. Все актеры на своих местах. Теперь нам нужно заставить их «поплясать». Для этого переключим Photoshop в режим «Video and Film». Осуществляется это при помощи кнопки «Workspace», которая находится в правом верхнем углу программы.
После этой операции внизу экрана появилась новая менюшка, которая имеет такой вид
Стрелочкой показана кнопочка, с помощью которой создается новый кадр анимации. Рядом, в виде урны, кнопка, которой эти кадры удаляются.
8. Теперь я дублировал слой с картинкой карт и, используя настройки стилей слоя, придал продублированной картинке такой вид, в какой она должна преобразиться, когда появится соответствующая ей надпись. То есть, во время анимации это должно выглядеть так
Для того, чтобы скрыть ненужные пока надписи-слои, необходимо «выколоть глазик», который находится напротив слоя.
Делается это просто – одним кликом правой клавишей мыши.
9. Все актеры расположены так, что у нас создался первый кадр анимации. Теперь создаем новый кадр. Отключаем надпись-слой «карты» и включаем «деньги». Ищем дубликат слоя с картинкой карт. Нам нужно скопировать ее стиль слоя и передать его картинке с деньгами. Для этого кликаем левой клавишей мыши по слою с картами. В выпавшем меню находим Копировать Стиль Слоя (Copy Layer Style) и передаем его слою с деньгами – такая же операция, только в выпавшем меню находим Вставить Стиль Слоя (Paste Layer Style). Отключаем слой с копией карт. Получаем следующий результат
10. Создаем новый (он же у нас и последний) кадр. Проделываем операцию, описанную в пункте 9, но на этот раз с актерами из труппы «2 ствола».
11. Чтобы посмотреть, что у нас получилось, нажмем на воспроизведение.
А кликнув, как указано на рисунке ниже, можно задать интервал показа кадра.
12. Вот наша анимация и готова. Осталось ее Сохранить для Веб (Save for Web), в формате gif и с гордостью заявить – Работа Выполнена!
Похожие материалы:
80 Комментариев к теме
“Анимация в Adobe Photoshop CS3”
Leave a Reply
19 августа, 2008 в 21:30
Да, да, да.
Именно про это я вам тогда и говорил. Очень не хватало такого урока. А то я парился с сторонними прогами и все пытался сделать себе анимированный баннер. Обычно все кончалось походом на фрилансер.ру и заказом баннера у дизайнеров. Теперь делаю сам (ну пытаюсь). Спасибо.
(где то в соседнем посте видел)
P.S. Не хочу показатся навязчивым, но вроде как я первый тут коммент оставил. Не скините инфу, как получить ту ссылку с сайта с ТИЦ 2600 ?
19 августа, 2008 в 22:59
Андроид, рад, что помог
инфу - обязательно! сейчас скину на почту
4 сентября, 2008 в 15:39
Найкрис, поделитесь - как сделать в CS3 кнопку-анимашку, изменяющуюся при наведении курсора? Куда там имейдж мап засунули?
4 сентября, 2008 в 17:14
Это делается не через имейдж-мап, насколько я знаю, а через ролл-овер эффект. Но там громоздкий код и весьма неудобно делается. Проще сделать через ЦСС, как у меня на сайте меню. Если такой вариант подходит, расспишу процес создания
26 сентября, 2008 в 8:43
наконец то нашел как делать эти gif анимашки. спасибки большое
26 сентября, 2008 в 10:58
Всегда пожалуйста! Обращайтесь, если снова не сможете найти чего-то, по интересующей Вас теме
3 октября, 2008 в 4:51
Вот вроде коммент в тему и не спам, а человек в качестве ника ставит выгодный анкор…т
Даже и не знаю что делать
Кто что подскажет?
Таки удалил предыдущий комментарий…
Shoko_Bender, отличное выражение, я запомню
3 октября, 2008 в 18:37
Но все таки конкуренция_!!
Как говорится, “Демократия там, за дверями, а тут частный сайт_!!” (c) Shoko Bender
Так что, никто Вас не осудит если вы удалите не устраивающий Вас коммент_!!
Право выбора за Вами_!!
5 октября, 2008 в 19:12
Найкрис, можете статейку написать о процессе создания анимации “эффект рисования слова аэрографом” как-будто графити рисуют с последующим исчезанием.
Спасибо.
7 октября, 2008 в 0:32
Хорошо, я попробую сделать что-то на эту тему
9 октября, 2008 в 1:57
Подскажите, пожалуйста, почему если раньше image ready открывало анимированный гиф, то после отказа от него в cs3 и интеграции функции в photoshop последний перестал открывать анимацию, а только предупреждает о том что файл содержит анимацию и при сохранении анимация будет потеряна, хотя анимацию в нем создавать можно?
9 октября, 2008 в 4:13
Mike, это бред разработчиков. Не знаю, почему так. Они официально заявили, что Photoshop CS3 не будет поддерживать гиф-анимацию, как это делал image ready. Говорят, что если кому-то нужно работать с анимированной графикой, пользуйтесь Fireworks CS3.
Вот такие пироги
9 октября, 2008 в 13:41
Жаль. Спасибо за ответ.
9 октября, 2008 в 14:05
Не за что и всегда пожалуйста
20 октября, 2008 в 21:26
я вас умоляю скажи плизззз! что делать если ты создал анимацию и хочешь ее сохранить тебе пишут ошибку и фотошоп закрывается? плизз скажите не где не могу найти ответ!
20 октября, 2008 в 21:40
Nira, смотря что за ошибка. Может фотошоп глюченый и ничего сделать нельзя. Переустонавливать пробовала?
21 октября, 2008 в 16:56
нет я пыталась ,но больше не мог7у найти ту версию что у меня сейчас….
21 октября, 2008 в 17:18
какую хоть ошибку то выдает?
22 октября, 2008 в 17:19
ну это как понять?
ну ващето у мя не лицензированный фотошоп у его тут скачала …..
или хотябы скажите мне коды доступа для лицензиии…. плиззз
22 октября, 2008 в 17:22
Ой, с такими вопросами явно не ко мне
Думаю, что в Гугле можно найти аптечку для нужной версии…
8 ноября, 2008 в 20:25
Большое спасибо! Теперь я все наконец-то понял!
8 ноября, 2008 в 20:58
Не за что!
Рад, что смог помочь
10 ноября, 2008 в 22:35
Еще одно спасибо )
Замутил банер для своего сайта за 15 минут
10 ноября, 2008 в 22:37
Молотчага, поздравляю!
10 ноября, 2008 в 22:54
Полезный урок для новичков в анимации. Я хочу поделиться тем, что знаю - как открыть анимированный гиф в фотошопе СS3. Вообщем так- Меню File-Import- Video Frames to layers
В открывшемся окошке в графе тип файла - не будет расширения .gif Вообщем-то эта команда предназначена для импортирования не гиф-анимации, а видео, но! в окошке имени файла нужно написать полное имя анимационного файла. например banner.gif . И фотошоп откроет вашу ubare и разложит ее по кадрам! Одно замечание: все произойдет гладко, если в системе уже установлен QuickTime player, иначе система сообщит об ошибке.
Вот и все премудрости! Надеюсь, это сообщение многим поможет решить мучавшую их проблему
10 ноября, 2008 в 22:58
Вот спасибо, действительно очень полезная информация!
Обязательно сейчас испробую.
И, если ты не против, дабы об этом узнало больше народу, я эту информацию опубликую отдельным постом?
Безусловно, ссылаясь на тебя
13 ноября, 2008 в 20:19
а у меня нет Workspace что за бред (((
Подскажите чё делать как исправит плз
13 ноября, 2008 в 20:24
Даже не знаю, может невнимательно посмотрели?
Другой путь - это: в верхнем меню жмем Window - Workspace - Video and Film
13 ноября, 2008 в 20:25
нету рядом с поиском там должно быть а там токо чё то рабочая область
13 ноября, 2008 в 20:27
Что, и во вкладке “Window” тоже нет?
13 ноября, 2008 в 20:28
неа там нету
13 ноября, 2008 в 20:31
Может Фотошоп урезаный, не знаю даже
13 ноября, 2008 в 20:31
а можешь дать сылку на скачивание Adobe Photoshop CS3 с ключом я переустоновлю его
13 ноября, 2008 в 20:39
У меня нет, погугли, может найдешь чего
4 декабря, 2008 в 19:48
4 декабря, 2008 в 20:48
Куда же еще подробнее описать то?
И каких картинок не хватает?
7 декабря, 2008 в 7:20
Полезный урок, спасибо пригодился, удачи.
15 декабря, 2008 в 5:44
Спасибо за данный материал, очень помогло, у себя на сайте наконец то поставлю анимационный лого ))) Прям незнаю как благодарить ))) Кстати может раньше это всё и описывали но у вас получилось ещё информативнее!
21 декабря, 2008 в 22:31
Вопрос к знающим: как побороть глюк Photoshop, который при сохранении анимированного gif все при указанных 0 сек для кадра все равно вставляет какое-то значение задержки, в общем результирующий gif почему-то медленнее желаемого
22 декабря, 2008 в 17:40
Здравствуйте, подскажите пожалуйста, как мне, если у меня есть готовый gif, поменять в нем текст на одном из слоев(кадров)?
23 декабря, 2008 в 10:45
Что, переделываем чужой банер? Не-хо-ро-шоо!
А ваще надо просто открыть в том же Photoshop, выделить соответствующий кадр и слой и, стерев ненужный текст, вставить свой, использовав соответствующий инструмент (клавиша латинская T)
24 декабря, 2008 в 11:57
Дмитрий, а что делать после того как сделаешь что что Вы написали, текст добавляется на все слои-кадры?
24 декабря, 2008 в 12:00
а потом выбираете кадр, с которого нужно убрать надпись и в слоях отключаете видимость слоя с текстом
24 декабря, 2008 в 12:29
Все получилось, спасибо!!
27 декабря, 2008 в 18:43
Алексей, зайдите: Окно- поставьте птичку на Анимации, появится нужное окошко с кадрами анимации.
2 января, 2009 в 12:23
а где получить код баннера, на radikal не получается, файл повреждён пишут, пожалуйста кто знает напишите в п/я
2 января, 2009 в 19:09
Огромное тебе спасибо! Этот урок помог мне сделать классную тему для телефона, раньше не мог сделать, так как совершенно не знал, как создавать анимации с помощью фотошопа. Еще раз спасибо!
3 января, 2009 в 18:25
народдд!!! сделал анимацию на компе робит а загружаю на ссайте в аваторку там обычная картинка не анимированая((( че мне делатиь?!
4 января, 2009 в 23:04
а у меня функция сохранить в web недоступна,что делать?????????? Помогите!
Ответе на почту
5 января, 2009 в 10:56
моя почта Yuliagoloshapova@rambler.ru
ответте пжл. незнаю,что делать(((
5 января, 2009 в 22:35
Юля, так сразу и не скажешь. Либо фотошоп глюкнутый, либо еще ряд причин может быть
Один из вариантов - это если у Вас активный инструмент текста
Лучше уж Вы мне на почту черкните, попытаемся решить в индивидуальном порядке
7 января, 2009 в 1:46
Здравствуйте, у мну в фотошопе ничего нету!!!!!!
Сделайте плиз мне баннер,а то я не могу(Скок я раз переустанавливал его всё равно не идёт). На сайт клана |Key’s| TeAm.
если что, стучите в квип: 448-956-765
С уважением :)K®iS
10 января, 2009 в 16:22
эмм) а где вашу почту найти?)) если можно напишите сюда адрес)
10 января, 2009 в 16:24
В разделе “О Себе”
17 января, 2009 в 23:26
Чё то у меня нет (7) !!!! Где эту фигню можно найти???«Video and Film» ???? о_О
18 января, 2009 в 0:02
а скрин я зачем делал?
там и есть, как на картинке
23 января, 2009 в 12:49
Наконец и я разобрался +)
Еше раз спасиба
23 января, 2009 в 14:42
и Вам тоже
24 января, 2009 в 17:44
Спасибо большое за статью, но у меня проблема, делаю все как написано, сохраняю, а анимации нет, есть только первый слой (как обычная картинка.
Что делать, вроде сохранял для WEB.
27 января, 2009 в 21:56
Привет Найкрис.Подскажи пожайлуста как сделать анимированного морячка машущего 2-я флагами.
27 января, 2009 в 22:54
Привет!
по тому же принципу, как рассказано в уроке, только на каждом новом слое рисуем морячку ручки и флажки в новом положении 
Ну, а как?
28 января, 2009 в 18:42
у меня такая проблема я не могу понять как в ставлять туда картинки вставил я 1 картинку хочу как вставить 2 а она вставится зато старая уберается как так чё делать ??!
29 января, 2009 в 17:59
У меня CS3 не сохраняет анимацию, с любимым CSом работала год, 100% делаю все правильно. Что это могло бы быть?!
1 февраля, 2009 в 15:05
а я нажимаю сохранить для web оно выдает ошибку и фотошоп закрывается если знаете напишишет вот е-маил nagato_egorius@mail.ru
20 марта, 2009 в 11:38
правда, что за глюк((( у мну тож анимацию цс 3 не сохраняет(( выдает ашипку и закрывается(( что делать??
23 марта, 2009 в 21:35
Здравствуйте! У меня проблема, моя анимация не сохраняется после нажатия на >Сохранить для Веб.. окошко фотошопа просто закрывается и все исчезает .. фотошоп у меня CS3 Extended.
Помогите разобраться..
26 марта, 2009 в 23:16
Спасибо тебе!
Ребенок давно просил найчить его гифки делать. Теперь покажу
Удачи!
27 марта, 2009 в 1:42
подскажите, как уменьшить размер гифа? очень нужно, если можно на sharkkk@mail.ru
27 марта, 2009 в 15:33
короче пишите мне nagato_egorius@mail.ru я вам кину cs4 русскую версию которую не надо устонавливать просто внетсти в список установленных програм а кс 3 га*но !
29 марта, 2009 в 7:17
Только учитывайте что в CS4 нету окошка Workspace! Там в самом правом верхнем углу вкладка
BASIC так вот там нужно изменить на видео и будет вам счастье!
7 апреля, 2009 в 15:29
Всем ПРИВЕТ!
Подскажите, как исправить ошибку при сохранение в web: выходит окошко с ошибкой и фотошоп закрывается. Пишет, Adobe Photoshop CS3 - обнаружена ошибка. Приложение будет закрыто. Приносим извинения за неудобства.
Плиз, поскажите, что ему не хватает)))
Спасибо!
9 апреля, 2009 в 13:37
Спасибо за статью! Вы очень помогли справится с задачкой создать баннер!
С уважением,
Ольга.
11 апреля, 2009 в 1:20
Как сохранить для веб без потери качества?
Пытаюсь сохранить анимированный гиф с прозрачным фоном, но вокруг рисунка при сохранении образуются белые пятна. Что делать???!!!
Если кто-нибудь может помочь напишите на darkred@list.ru
20 апреля, 2009 в 13:04
Приветики всем!!! Есть у кого нибудь ключи к Фотошопу cs3 везде одниссылки дают качаю ничего не получается а он все не работает и неработает((( помогите пожалуста.. заренее огромное спасибо!!
24 апреля, 2009 в 21:11
Спасибо большое за информацию вот замутил крутой банер для своего портала))),спасибо ещё раз=)
29 апреля, 2009 в 16:12
Найкрис,у меня не получается сохранить анимацию!
12 мая, 2009 в 18:37
Ни хрена не понимаю, нажимаю на “Сохранить для Веб (Save for Web)” и фотошоп выленает - закрывается полность, понятно без сохранения, что версия Adobe Photoshop CS3 плохо взломана или что может быть?
15 мая, 2009 в 19:55
Тимофей, попробуй скачать и заменить один файл в фотошопе. Качаешь его тут http://narod.ru/disk/4476548000/Save_for_Web_CS2.rar.html
и заменяешь на файл: C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Import-Export.
Удачи.
1 июня, 2009 в 13:22
Николай спасибо Вам большое, поменяла файлы и теперь могу сохранять анимацию
21 июня, 2009 в 15:08
У меня тоже ошибка и фотошоп закрывается….