Как сделать баннер с анимацией в Photoshop

Объявления:

Мои услуги:

Сайт дня (как попасть): 30% денежные возвраты с каждой покупкой на eBay.com

Дорогие друзья, как я и обещал в комментариях к посту Как увеличить эффективность партнерских баннеров + бонус, предлагаю вам свой видеоурок о том, как сделать баннер с анимацией в Photoshop.

Рекомендую смотреть видеоурок в полноэкранном режиме (чтобы выйти из него, просто нажмите Escape.). Это можно сделать нажатием на иконку Fullscreen Toggle:

Fullscreen Toggle

В этом видеоуроке я покажу, как быстро сделать самый простой анимированный баннер. Работать буду в программе Photoshop CS3. Такой баннер можно создать в любой версии Фотошопа (просто в более ранних версиях нужно будет переходить в программу Image Ready, ее кнопка будет в самом низу панели инструментов).

Баннер получится самый простой, я решил не делать разные стили и эффекты, чтобы легче было понять суть создания анимации.

Любой эффект в Photoshop можно проделать разными способами, в видеоуроке я приведу свои.

Все нужные сочетания клавиш я сделал в виде всплывающих подсказок.

Так что желаю Вам приятного просмотра. Если захотите дальше развиваться в Фотошопе, то добро пожаловать на мой сайт Уроки Photoshop, на котором я пишу уроки с 2006 года.

Глобатор

Постовой: Приближаются выборы 2010, что нас ждет?

Luxury Swiss replica - free shipping worldwide.

Best replica watches of all the best Swiss, Italian an French watchmaking companies.

Десерт на сегодня - увлекательная flash игра, в которой нужно стрелять зомби дождливой ночью. Чтобы использовать щит, жмите пробел:

Похожие материалы:

Буду благодарен, если поделитесь этой статьей:

Приглашаю присоединиться ко мне в следующих сервисах:

Мои группы:

↑ Как поставить такие же кнопки на свой сайт ↑

Вы можете заказать у меня индивидуальные консультации по продвижению Вашего сайта, регистрацию сайта в каталогах, а также разместить рекламу на блоге shakin.ru.

Дата публикации: 19 ноября 2009 года в категории Интересное. Теги: видеоуроки, интересное, советы . Вы можете следить за комментариями к этому материалу с помощью RSS 2.0 фида. Комментирование и пинги запрещены.

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии Wordpress:

Комментариев: 35

1. AngelOfFate 19 ноября 2009 в 2:10 pm

хороший урок, новичкам будет полезен 100%

2. Ян 19 ноября 2009 в 2:33 pm

Спасибо, полезный урок. Только в конце, когда сохраняли gif картинку, можно было сказать, что если поэкспериментировать и выбрать минимальное количество цветов, при котором не ухудшится качество изображения - то можно прилично уменьшить размер файла. В вашем случае думаю можно было бы поставить 32 или даже 16.

3. Sosnovskij 19 ноября 2009 в 3:20 pm

Просто, понятно и практично. Спасибо, Михаил, за доходчивый урок

4. Глобатор 19 ноября 2009 в 3:42 pm

Ян, в уроке можно добавить много настроек и эффектов, я поставил цель показать, как сделать самый простой анимированный баннер. Остальное - лишнее.

5. Андрей Морковин 19 ноября 2009 в 5:02 pm

Хоть я уже и не раз делал анимированные баннеры, все равно было интересно и я увидел чуть другой подход к этому делу.

Спасибо.

6. Hugo 19 ноября 2009 в 6:08 pm

Спасибо большое! Этот урок оказался мне очень полезен, я как раз осваиваю фотошоп.

7. Дмитрий 19 ноября 2009 в 7:08 pm

Михаил, а почему не рисовать банеры сразу в разных слоях,
что-бы лишний раз на сохранять и открывать их. Это даже проще нарисовал скопировал изменил.

8. mind_user 19 ноября 2009 в 8:03 pm

спасибо, очень полезный урок)

9. Starche 19 ноября 2009 в 9:20 pm

Все просто и понятно, сам пользуюсь точно таким же методом создания анимированных баннеров. Михаил, вы через какую программу видео делали, Wink?

10. Глобатор 20 ноября 2009 в 12:55 am

Дмитрий, конечно, можно и на слоях, и даже быстрее, но я уверен, что показанная схема более понятна новичкам.

Starche, делаю в Camstasia.

11. Bogdkad 20 ноября 2009 в 2:19 am

Спасибо, как раз нужно сделать несколько анимированных баннеров

12. stilusmen 20 ноября 2009 в 4:10 pm

Интересный урок, я раньше делал немного не по такому принципу .
немного по флеш игре: обычно когда зомби стреляешь в голову он должен погибнуть быстрее здесь же все наоборот

13. seokiev 20 ноября 2009 в 4:55 pm

Спасибо Михаил за видео урок буду учиться рисовать, про что обозначил в Интересно почитать.

14. Мария 20 ноября 2009 в 5:12 pm

Как все просто и доступно… а я все боялась :)))) Пойду фотошоп скачивать.. Спасибо.
А есть фотошоп на русском?

15. Артем 21 ноября 2009 в 12:34 am

Здравствуйте, Михаил!
Читаю ваш блог постоянно, спасибо за интересные и полезные публикации.
У меня вопрос:
Видео плеер, который вы использовали для просмотра этого видео, можно о нем по подробнее рассказать? Или направьте куда-то почитать о нем)
Спасибо

16. Глобатор 21 ноября 2009 в 1:36 am

Артем, просто ролик залит на blip.tv, там можно сделать свой плеер, вернее, задать его вид.

17. ua-blogger 22 ноября 2009 в 2:45 am

Михаил, спасибо за урок - просто и понятно. А фотоматериалы к статьям также в фотошопе готовишь? Понравилось, что весят 30-40 килобайт в норм. качестве

18. Сергей 23 ноября 2009 в 2:35 am

Очень полезный урок. Как раз делаю первые шаги в фотошопе.
P.S. Уже пару дней хотел посмотреть данный урок, да все времени не было. Сегодня вот выделил время, и как оказалось, не зря. Спасибо!

19. snov 24 ноября 2009 в 1:16 am

Михаил, спасибо. Интересно и доходчиво.

Хотел задать вопрос: почему нельзя было в слоях такое реализовать но уже получил ответ в комментах))

А можно как-то в фотошопе усложнить изменение картинок? т.е. какой-нибудь морф или может еще что-то. а то получается конечно интересная гифка, но с морфом было бы интереснее))

20. Глобатор 24 ноября 2009 в 11:44 am

ua-blogger, да, все картинки обязательно оптимизирую в Фотошопе. У меня правило - картинка должна весить менее 40 Kb.

snov, задача урока - показать самую простую анимацию. По разным эффектам и так море уроков.

21. maloy75 24 ноября 2009 в 2:15 pm

для меня как новичка в фотошопе, видеоурок оказался очень полезным и интересным, да восприятие информации с видео намного эффективнее недели читать урок. спасибо

22. Чеснок 25 ноября 2009 в 3:22 am

Года 3 уже леплю флэш банеры в визуальных редакторах, и с фотошопом вроде знаком, а всё руки не доходили изучить анимацию, хоть так начну. Спасибо за пинок в нужную сторону ))

23. Саша 04 декабря 2009 в 5:10 pm

У меня проблема у меня кнопка make frem from player не высвечивается я на неё не магу нажать что мне делать??

24. Irina 04 декабря 2009 в 9:50 pm

Спасибо за отичный урок и сайт!

25. Костаника 16 февраля 2010 в 10:04 pm

А можно ли скачать данный урок? Очень надо.
Заранее спасибо:)

26. Ольга 02 марта 2010 в 5:36 pm

У меня вопрос - Когда я в самом конце сохраняю, у меня нет "Сохранить для Веба". Я просто сохраняю в формате gif и он не движется

27. Денис 03 марта 2010 в 7:40 pm

Здраствуйте!!!
Мне очень помог ваш урок,я сделал себе баннер на сайт сама анимация на компе пашет а когда поставил баннер на сайт то картинку не показывает а когда пытаешься прейти по банеру пишет что страницы не существует или сайт удалён!!!Что вы мне можете подсказать

28. Глобатор 03 марта 2010 в 9:42 pm

Денис, если картинка не показывается, проверьте ее наличие на хостинге или путь к ней, а также расширение gif. Ссылка перехода - укажите нужный адрес.

29. Vasiliy 01 апреля 2010 в 12:47 pm

Добрый день.
Урок хороший, а можно такой же урок только для 4 версии фотошопа, у меня 4 версия а вней не такое меню.
Спасибо

30. Денис 19 апреля 2010 в 11:27 am

СПАСИБО БОЛЬШОЕ ВЫ МНЕ ОЧЕНЬ ПОМОГЛИ

31. Denzer 13 июля 2010 в 11:36 pm

Спасибо огромное за видео!!! =)

32. Timonovsky 07 октября 2010 в 2:38 am

А как сделать что бы по концовке кадров баннер остнанавливался ?

33. Дмитрий 08 октября 2010 в 7:09 pm

У меня возникла проблема в начале урока, - выдает ошибки при нажатии "Файл>Сохранить для web"
Версия фотошопа: 10.0 CS3
Переустановка не помогла, браузер был выключен..подскажите пожалуйста как исправить..?
Заранее спасибо.