12.08.08
Метки: 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 и с гордостью заявить — Работа Выполнена!
Popularity: 1%
Юля, так сразу и не скажешь. Либо фотошоп глюкнутый, либо еще ряд причин может быть
Один из вариантов — это если у Вас активный инструмент текста
Лучше уж Вы мне на почту черкните, попытаемся решить в индивидуальном порядке
Здравствуйте, у мну в фотошопе ничего нету!!!!!!
Сделайте плиз мне баннер,а то я не могу(Скок я раз переустанавливал его всё равно не идёт). На сайт клана |Key's| TeAm.
если что, стучите в квип: 448-956-765
С уважением
K®iS 
эмм) а где вашу почту найти?)) если можно напишите сюда адрес)
В разделе «О Себе»
Чё то у меня нет (7) !!!! Где эту фигню можно найти???«Video and Film» ???? о_О
а скрин я зачем делал?
там и есть, как на картинке
Наконец и я разобрался +)
Еше раз спасиба
и Вам тоже
Спасибо большое за статью, но у меня проблема, делаю все как написано, сохраняю, а анимации нет, есть только первый слой (как обычная картинка.
Что делать, вроде сохранял для WEB.
Привет Найкрис.Подскажи пожайлуста как сделать анимированного морячка машущего 2-я флагами.
Привет!
Ну, а как?
по тому же принципу, как рассказано в уроке, только на каждом новом слое рисуем морячку ручки и флажки в новом положении 
у меня такая проблема я не могу понять как в ставлять туда картинки вставил я 1 картинку хочу как вставить 2 а она вставится зато старая уберается как так чё делать ??!
У меня CS3 не сохраняет анимацию, с любимым CSом работала год, 100% делаю все правильно. Что это могло бы быть?!
а я нажимаю сохранить для web оно выдает ошибку и фотошоп закрывается если знаете напишишет вот е-маил nagato_egorius@mail.ru
правда, что за глюк((( у мну тож анимацию цс 3 не сохраняет(( выдает ашипку и закрывается(( что делать??
Здравствуйте! У меня проблема, моя анимация не сохраняется после нажатия на >Сохранить для Веб... окошко фотошопа просто закрывается и все исчезает ... фотошоп у меня CS3 Extended.
Помогите разобраться...
Спасибо тебе!
Ребенок давно просил найчить его гифки делать. Теперь покажу
Удачи!
подскажите, как уменьшить размер гифа? очень нужно, если можно на sharkkk@mail.ru
короче пишите мне nagato_egorius@mail.ru я вам кину cs4 русскую версию которую не надо устонавливать просто внетсти в список установленных програм а кс 3 га*но !
Только учитывайте что в CS4 нету окошка Workspace! Там в самом правом верхнем углу вкладка
BASIC так вот там нужно изменить на видео и будет вам счастье!
Всем ПРИВЕТ!
Подскажите, как исправить ошибку при сохранение в web: выходит окошко с ошибкой и фотошоп закрывается. Пишет, Adobe Photoshop CS3 — обнаружена ошибка. Приложение будет закрыто. Приносим извинения за неудобства.
Плиз, поскажите, что ему не хватает)))
Спасибо!
Спасибо за статью! Вы очень помогли справится с задачкой создать баннер!
С уважением,
Ольга.
Как сохранить для веб без потери качества?
Пытаюсь сохранить анимированный гиф с прозрачным фоном, но вокруг рисунка при сохранении образуются белые пятна. Что делать???!!!
Если кто-нибудь может помочь напишите на darkred@list.ru
Приветики всем!!! Есть у кого нибудь ключи к Фотошопу cs3 везде одниссылки дают качаю ничего не получается а он все не работает и неработает((( помогите пожалуста... заренее огромное спасибо!!
Спасибо большое за информацию вот замутил крутой банер для своего портала))),спасибо ещё раз=)
Найкрис,у меня не получается сохранить анимацию!
Ни хрена не понимаю, нажимаю на «Сохранить для Веб (Save for Web)» и фотошоп выленает — закрывается полность, понятно без сохранения, что версия Adobe Photoshop CS3 плохо взломана или что может быть?
Тимофей, попробуй скачать и заменить один файл в фотошопе. Качаешь его тут narod.ru/disk/4476548000/...Web_CS2.rar.html
и заменяешь на файл: C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Import-Export.
Удачи.
Николай спасибо Вам большое, поменяла файлы и теперь могу сохранять анимацию
У меня тоже ошибка и фотошоп закрывается...
И я наконец-то сделал свой первый баннер.
у меня тоже программа закрывается, стоит тока сохранить в web. Попробовала заменит на файл:narod.ru/disk/4476548000/...Web_CS2.rar.html вместо
C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Import-Export.так теперь программка не закрывается но и ничего больше не делает
что теперь делать, сожет нужно еще кого то или какой то файл заменить?
Николай, после замены вашим файлом, когда пытаюсь созранить для веб, выскакивает ошибка «Команда „Экспортировать“ не может быть выполненна: произошел программный сбой.»
Что делать? До замены файла функчия «сохранить для веб» была не доступна вообще.
Спасибо, тож была ошибка, после замены — прошла...
Ох, огромное вам спасибо за то, что рассказали как сохранять!
а можно видео-урок! так будет более понятней!
а чо если у меня в фотошопе нельзя поставить видио и фильм, у меня только рабочая среда... по другому можно эту менюшку открыть??
привет помогите пожалуйста не могу сохранить анимашку для веб... пишет слишком большая она. (для веб не достаточно памяти)... мой e mail putiashka@mail.ru
очень жду
срочно помогите, у мя не получаеться сохранить для веб,пишит ошибка и выбрасывпает меня...
что мне делать,помогите
аська 573832880
жду, срочно... пишите и не стисняйтись
мне срооочно нужно
Чтото я сохраняюа показывает толькок первый слой и нету анимации !что делать ? помогите!!!
У меня команда сохранить для веб вообще не работает!
у меня проблема, когда я сохраняю баннер, он мне его сохраняет в виде одно кадра а не анимации ет 1
2) у меня в рабочей области не ту такого режима « видео энд филм»
помогите, у меня не получаеться сохранить для веб,пишит ошибка и выбрасывпает меня….
что мне делать?
спасибо!
Димитрий — Посмотри диалог за май 2009 года, мне помогло
Извините, по вашему уроку первый раз в жизни делаю анимацию. в 7 пункте я скопировала слой. «глазики» найти не могу. А когда изменяю последний слой, то изменяются и все предыдущие (первый, второй и т.п.) =((((( помогите бедному глупому ребёнку!
ох.
урок просто супер)
мне друзья пытались объяснить, какие то просто немыслимые уроки, в которых около 20 этапов.
но это оказалось гораздо легче!
спасибО)
Николай пишет
15 мая, 2009 в 19:55
благодарочка тебе!!!!)))))
спас!
почему у меня дублируется один и тот же кадр!уточните пожалуйста как вставлять кадры в дорожку!!
и у вас очень прелестные роботы!!