Смотрим онлайн как сделать анимацию в фотошопе на примере gif-баннера. Подробный видеоурок

Смотрим онлайн как сделать анимацию в фотошопе на примере gif-баннера.

Дорогие друзья, спешу поделиться с вами своим новым видеоуроком - Как сделать анимацию в фотошопе на примере gif-баннера. В уроке пошагово рассказываю как используя программу Adobe Photoshop можно создать анимационый баннер для сайта.

Кстати, если вам интересно, я уже делал пошаговый фотоурок Создание анимированного gif баннера в фотошопе, только тогда я рассказывал как создать маленькую кнопку баннер для сайта.

Вернемся к видеоуроку. Урок делал в последней английской версии программы Adobe Photoshop CS5.

Видеоурок получился длиною в 25 минут, пришлось его разбить на 3 части, что бы загрузить на youtube.com. Данный видео урок по фотошопу можно посмотреть онлайн прямо на блоге.

Как всегда урок записан в HD-качестве, что бы его включить, вам нужно во время просмотра ролика выбрать в настройках плеера - 720 p (HD).

А вот и сам видеоурок. Приятного вам просмотра!  

Как сделать анимацию в фотошопе часть 1

Как сделать анимацию в фотошопе часть 2

Как сделать анимацию в фотошопе часть 3

Вы также можете скачать готовый psd исходник это баннера.

Предыдущие мои фото и видео уроки, вы можете посмотреть в этом разделе.

Если вы не знаете как загрузить баннер и поставить на него ссылку, читайте инструкцию:

  1. Сохраняете баннер в формате gif (не забудьте в фотошопе перед сохранением поставить настройку, что бы баннер постоянно двигался).
  2. Далее через фтп/панель управления загружаете баннер себе на хостинг, к примеру в корень сайта, получается ссылка вида - http//sitename.ru/banner.gif
  3. Эту ссылку потом вставляете в код блога, получается так: <a href="vasha_ssylka"><img src="http//sitename.ru/banner.gif"></a>
  4. Полученный код вставляете в HTML код вашей страницы, в то место где хотите разместить баннер.

Вы также можете подписать на обновления моего видеоканала на Youtube.com (что бы не пропустить новых видеоуроков)

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

p.s. а какие еще, вы бы хотели увидеть уроки/видеоуроки по фотошопу?

С уважением Сергей Иванов.

Отзывов к посту "Смотрим онлайн как сделать анимацию в фотошопе на примере gif-баннера. Подробный видеоурок" уже 18:

Аватар пользователя Гость

Добрый день. Создаю анимацию в фотошопе, сохраняю в gif. При просмотре на фотках очень много зерна. Как это убрать? Или нужно в другой программе сохранять? Спасибо.

Аватар пользователя Гость Ирина

Очень понравилось, как Вы сделали видеоурок (столько приходилось видеть разных) - всё по делу! Спасибо! Умничка! Сергей, пару вопросов: у меня есть пару баннеров для друга. Ему нужно уменьшить баннер до 50кб - в каких настройках лучше с весом экспериментировать? Совмещался баннер с кореловскими картинками (ранее созданный логотип с надписями), до предела уменьшены (150кб). Цвета не уберёшь, дизеринг - тоже...сразу качество страдает. Также, друг попросил дать ему такой банер весом 50 и со ссылкой встроенной на его сайт. А как это сделать в самом начале: не знаю. Открываешь баннер, что дальше? Правая кнопка мыши на нём? Код элемента? Или что? Где и куда этот путь (ссылку) вставлять-прописывать? Спасибо. Буду очень признательна за ответ... В восторге от вашей подачи!

Аватар пользователя Сергей Иванов

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

по поводу того как вставить баннер на сайт, в инете много инструкций, вот одна из них - yanevrufoto.ru/uroki-po-slozhnosti/kak-vstavit-banner-na-sayt

Аватар пользователя VadimG

Довольно симпатично получается. Жаль только что gif-ки получаются тяжелыми, особенно если используешь полноцветные картинки.

В остальном все понятно.

Аватар пользователя Сергей Иванов

Очень рад, что вам все понятно, значит не зря старался)

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

Аватар пользователя Ирина

Добрый вечер,Сергей! Вопрос: как привязать к баннеру, сделанному в фотошопе ссылку?

Аватар пользователя Сергей Иванов

Здравствуйте, добавил в статью инструкцию, посмотрите, что не понятно пишите.

Аватар пользователя Дмитрий Вербин

Хорошо Сергей попробую!

Аватар пользователя Дмитрий Вербин

Сергей, делал я его в фотошопе по вашему уроку. Сохранил на рабочий стол как banner.gif при активации его в браузере все хорошо двигается, мигает в общем живой баннер. Хотел открыть его в программе notepad++ там неизвестный шрифт. Если сохранить этот банер как просто html, то код в notepad++ отображается, и в браузере все показывается, а вот на сайте нет. Cайт на движке wordpress.
Может надо через ftp закидывать вместе с фото.

Аватар пользователя Сергей Иванов

Сохраняете баннер в формате gif (не забудьте в фотошопе перед сохранением поставить настройку, что бы баннер постоянно двигался).

Далее по фтп заливаете баннер себе не хостинг, к примеру в корень сайта, получается ссылка вида - http//sitename.ru/banner.gif

вот эту ссылку потом вставляете в код блога, так:

<a href="vasha_ssylka"><img src="http//sitename.ru/banner.gif"></a>

Аватар пользователя Дмитрий Вербин

Сергей, у меня проблема такого плана. Не могу перекинуть баннер на сайт. Беру html код баннера, но на сайте он не функционирует!

Аватар пользователя Сергей Иванов

Дмитрий, можно подробнее о вашей проблеме, вы баннер делали в фотошопе? он у вас там работает? какой html код вы брали? баннер gif или flash? что именно за баннер и где у вас на сайте он стоит?

Аватар пользователя Ирина

Обычно такую информацию продают за деньги. А здесь в свободном доступе. Спасибо.

Аватар пользователя Юрий

Спасибо за полезную информацию, буду пробовать- хочу научиться делать анимированные банера.

Аватар пользователя nikolas_sharp

Красавчик! Четко объяснил. Правда, я пользуюсь представлением не кадровым, а слоеным, где на таймлайне задаешь, в какую секунду какой слой появится и сколько пробудет на экране. Одна малина в принципе. В любом случае спасибо за такую общественно полезную и качественно выполненную работу!

Аватар пользователя Nelly

Добрый день, Сергей!
nikolas_sharp пишет про другой вид анимации. Можете рассказать и про него?
Создала анимированный баннер : картинка и текст должны постепенно увеличиваться в размере, как бы выплывая перед зрителем, пользуясь приёмами из Вашего урока.
Получилась анимация прерывистая, а у меня задача - сделать плавную анимацию. Помогите советами.

Аватар пользователя Сергей Иванов

другой вид анимации - это анимация на временной шкале, посути тоже самое что и покадравая анимация)

напишите подробнее, что вы делаете и что у вас не получается)

Аватар пользователя Сергей Иванов

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

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.
  • Строки и параграфы переносятся автоматически.
  • Используйте специальные теги [adsense:format:slot] или [adsense:format:[group]:[channel][:slot]] или [adsense:block:location] для показа Google AdSense ads.
  • Вы можете использовать метки BBCode в тексте.
  • Вы можете разместить код, используя теги <code>...</code>(общий) или <?php ... ?> (выделенный PHP).

Подробнее о форматировании