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%
извеняюсь,уже получилось!!!нашла эту функцию!!
объясните пожалуйста подробно,как сделать в CS3 кнопку-анимашку, изменяющуюся при наведении курсора,и где там функция «обрезать»? а то уже голова болит...
спасибочки!!!
ЖекоН, это делается вёрсткой через css, надо прописать отдельные картинки для .a и для .ahover (за точность написания не ручаюсь, давно не верстала).
огромное спасибо за статтю, помог...
Проблемма была в руссификаторе. Теперь сохранить для веб работает нормально
Привет Найкрис)) Скажи пожалуйста, а как будет «Video and Film» В русском варианте фотошопа ? А то я чего-то найти ничего похожего не могу((
У меня почему то нету «Workspase»
Вообще нету
И кстати, как его туда вставить?
Если что — стукни в аську: 594865531
Подскажите люди добрые, у меня с Photoshop CS3 такая проблема: нажимла «Сохранить для Веб (Save for Web)» и фотошоп вылетал – полностью закрывался без сохранения. Скачала файл (как писал Николай 15.05.2009) тут: narod.ru/disk/4476548000/...Web_CS2.rar.html) и заменила файл в фотошопе — C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Import-Export. Вылетать перестал, но для Веб не сохраняет, пишет недостаточно памяти. У меня очень мощная графическая станция, память на всю не задействована, почему он выдаёт такое окно?
Всё получилось,спасибо.
Но...глупая проблема,не могу сохранить...окно:"сохранить как web,не загорается...
А если просто нажать:"сохранить как",то там в основном какие-то не понятные форматы доступны,GIF нет,что делать?
Спасибо за урок нужная вещь, вот что получилось у меня вроде нечё так
ничё нипонимаю хрень какая-то!!!!
Помогите!
У меня цс 2 и когда я хочу анимашку сохранить для веб. Оно ее просто не нает в возможные. Подскажите что делать!!!
буду очень благодарен
Автор,ответьте пожалуйста на вопросы,помогите...
Втор, у меня русская версия и может такое быть что там немного другие функции?
потомучто у меня нету функции Фильмы и Видео
№7
странно я сохраняю для вед но не получается почему ?
Саша,у меня тоже русская версия,эта функция есть,называется:Фото и видео материалы.
Извините, я когда создаю новый слой для анимации и удаляю с него что-нибудь, то и с первого удаляется, как сделать, что бы этого не было?
помогло — все работает просто очень замечательно. БЛАГОДАРСТВО!
Ребята помогите научиться делать анимацию н могу так понять никак напишите в аську 371313368 буду благодарен заранее спасибо
Спасибо за инфу давно искал.
Класс! Статья очень нужная для начинающих!!!
А как вставить второй слой?
да как добавить второй слой,я начинающий
а у меня функция сохранить в web недоступна,как можно сохранить иначе анимацию??
пасиб, оч пригодилось!
У меня тоже фотошоп не сохряняет для веб
Хелп
спасибо за урок, а во флеше вы сильны?
Привет. Всё сделал как написано. Только мне одно не понять(сразу говорю я любитель) где этот банер должен работать как анимация. Я сохраняю всё в формате gif, потом открываю какой либо другой прогой, а он как анимация не работает, просто картинка. Пробовал делать аватар по той же схеме ставил себе на контакт, там тоже как анимация не работает. Что не так?
везде должен работать, как анимация.
Если в фотошопе анимация работает правильно, а после сохранения — нет, спросите у друзей, у них аватарка на компьютере анимацию показывает или нет. Может у Вас в браузере отключена анимация
у меня версия Adobe Photoshop CS3 Portable русская (без установки идёт, просто с флэшки в компьютер папка перекинута). а там, кажется, нету этого... workspace->video and film. там вообще только «рабочая область по умолчанию», «сохранить рабочую область», «удалить рабочую область». можно ли сделать анимацию в этой версии? как? у меня не получается сохранить — выдаёт ошибку(((
ОГРОМНОЕ СПАСИБО автору!!! +100
Статья очень поправила!!! Третий день искал 7ой фотожоп с имажреди
Всем привет! я тоже столкнулся с такой проблемкой файлы не сохранялись для Web,Google перерыл ничего толком ненашёл,на самом деле всё просто у меня стоял 32 битный режим!а фотошоп для Web нивкакую нехочет сохранять файлы в этом режиме,поставил 16 бит и всё заработало!
как зделать в photoshop cs4 при наведение на картинку она менялась где ета функция?
А в каком формате надо сохранить чтобы на телефоне читалось???
спс тебе! все получилось=)!
Когда я нажимаю Сохранить для Веб (Save for Web) у меня вылетает с фотошопа!!! В чем проблема???
Подскажите в CS4 не открываются видео-файлы (для анимации дальнейшей), пишет что Ошибка не может быть выполнена... Что может быть... Сначала писало что QuickTime 7 не установлен, установил — теперь то ... что выше...
Тимофей, без понятия. С ЦС4 не работал никогда.
Подскажите те, кто пользуется CS3 где скачать такой (кто недавно скачивал), что бы "таблетка, «кряк» и т.д. было, надоело всякую ересть качать, и чтобы рабочий был... Заранее спасибо
Спасибо!!! Все получилось)))
Извините, а почему когда я нажимаю сохранить для веб выскакивает ошибка а потом программа закрываеться?
Найкрис! А такой вопрос — у меня Windows 7, ставлю CS3, да и 4, короче все требует (для открытия видео на кадры) QuickTime 7, но Тайм всегда при открытии говорит ошибку 2000 или что то в этом роде. Можно что либо исправить или только Windows XP ставить?
Спасибо, помог, выручил!
Проблема с ошибками и вылетом при нажатии «Сохранить для WEB», связанна с русификатором. Удалите фойл tw12508.dat
из папки Required и все заработает. Русский язык останется)))
у меня вообще нету такого окна видио и фильмы в робочей среде и я вообще не могу слои сделать у меня всё серае вообще всё =_= помогите пожалуста
Спасибо большое за урок
У меня тоже нет «Workspace», что делать?
Спасибо
Спасибо! все вышло четко. Правда за шестым разом но получилось все таки)))