Как сделать баннер с анимацией в 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 игра, в которой нужно стрелять зомби дождливой ночью. Чтобы использовать щит, жмите пробел:

flash игра зомби

Спасибо Вам за добавление этой статьи в:
Если Вам понравилась статья, то Вы можете получать новые материалы Shakin.ru по RSS (как читать RSS), присоединиться ко мне на твиттере или friendfeed'e (где я делюсь полезными ссылками), к моему сообществу о SEO или можете просто получать обновления блога на e-mail:
Эффективное продвижение в блогах

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

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. Ссылка перехода - укажите нужный адрес.

Комментировать

Комментарии появляются не сразу - сначала они попадают на модерацию и публикуются в соответствии с правилами комментирования на shakin.ru.
Спамерам: html теги в комментариях отключены (любые ссылки будут просто текстом) плюс при малейшем подозрении на спам удаляю любой комментарий.

Поставьте галочку, если Вы не робот

Подписаться на обновления shakin.ru по RSS

Количество RSS подписчиков

Новый сервис ссылок навсегда




Заработок на рекламе в блогосфере



www.advert-control.ru  - реклама в качественных блогах




Биржа ссылок навсегда

Выгодная биржа статей

Эффективная биржа ссылок

Обновления сайта

Читать Shakin.ru в твиттере
Читать Shakin.ru в Google Reader
Читать Shakin.ru в Яндекс.Ленте


Моя новая цель


Достигнутая цель


Статистика

Rambler's Top100 Рассылка Глобатора

Мои бесплатные рекомендации

В случае перепечатки материалов активная ссылка на Shakin.ru обязательна
Продвижение сайтов, веб-дизайн и креатив © 2007-2010

MAXCACHE: 0.17MB/0.00114 sec