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

как сделать gif  в фотошопеПриветствую вас друзья! Иногда я встречаю вопрос, можно ли сделать анимацию в фотошопе? Так вот, в этом уроке я покажу что это возможно, и что это совсем не сложно. После этого вы поймете, что совсем не обязательно скачивать и ставить себе программки, если вам вдруг понадобиться сделать анимированный банер или другую какую-нибудь анимацию. И поверьте, это совсем просто. В качестве примера, давайте сделаем свой простенький прелоадер или как правильно указади в комментариях – троббер (throbber). И так, за дело!

Откройте фотошоп, и создайте файл размер 9х9 пикселей.

Анимация в Фотошоп

Зумом увеличим наш маленький квадрат по максимуму (клавиша Z). Увеличить можно несколькими способами. Первое – правым кликом на рисунке из выпадающего меню, выбираем Fit on screen. Второе, просто щелкаем несколько раз до тех пор пока изобращение не увеличится до максимального значения, и третье, самое простое на мой взгляд, нажав в левом верхнем углу полотна и удерживая левую кнопку мыши, проводим ее вниз и вправо пока не пересечем наш квадратик.

Теперь самое главное что нам понадобится для создания GIF-анимации, это рабочее пространство с нужными инструментами. Идем в меню Window -> Workspace -> Video. Должно получится что-то вроде как на скриншоте, но могут быть и отличия. Нас будет интересовать панель анимации внизу.

Создание Gif-анимации

Внизу мы как раз и можем увидеть выделенный наш первый кадр анимации.

Теперь нарисуем карандашом (B) влевом нижнем углу допустим оранжевым цветом квадратик 3х3 пикселя.

3

создание Гиф-анимации

Дублируем наш слой (хватаем и перетаскиваем наш слой на иконку создания нового слоя.

создание Гиф-анимации

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

Создание анимации в Photoshop

Снова дублируем верхний слой и передвигаем квадратик вверх вправо. Затем еще один дубль с переивжением квадратика влево вверх. Должно получится так:

Photoshop анимация

Далее переходим к работе с нашей панелью анимации. Щелкаем на значке Duplicates selected frames (значок выглядит как значок создания нового слоя) 3 раза, чтобы всего у нас получилось 4 кадра. Щелчком по первому кадру выделяем его и в списке наших слоев оставляем видимым только нижний слой. После этого щелкаем на втором кадре и оставляем видимым второй снизу слой. И так далее. Получится следующее:

Gif в фотошопе

Gif в фотошопе

В принципе наша анимация почти готова. Нажав на значок Plays animation можно увидеть что у нас получается. Теперь добавим немножко плавности за счет промежуточных кадров. Для этого выделяем первый и второй кадр (зажав клавижу Ctrl) и щелкаем по значку на котором нарисованы шарики -Tweens. Жмем Ок.

Photoshop Gif

Photoshop Gif

Проделвыем тоже самое с кадрами 2-3, 3-4, 4-1.

Photoshop Gif

Photoshop Gif

Теперь выделяем все наши кадры и на любом кадре выбираем понравившееся вам время перехода между кадрами. Допустим 0.1 сек.

Настройка анимации в фотошоп

Настройка анимации в фотошоп

Проверьте что ваша анимации зациклена:

Gif банер Photoshop

Gif банер Photoshop

Вот и все. Осталось сохранить наш баннер в формате gif, для этого в фотошопе надо пройти в меню файл и выбрать пункт меню “сохранить для Web и устройств” (Save for Web & Devices) или, что удобнее, нажать комбинацию клавиш Ctrl+Shift+Alt+S. В диалоговом окне выбираем формат Gif. Тут можно поиграться с настройками, которые влияют на качество и размер получаемого Gif файла.  После сохранения нашей Gif-анимации как файл с расширением Gif, наслаждаемся нашим собственным прелоудером! Можно например в итоге получить такие вот красивые Loading Preloader ы:

как создать gif анимацию

гиф в фотошопе

как сделать гиф в фотошопе

animation gif в photoshop

ajax-throbber2
load-ajax
loading-throbber
throbber1
throbber-ajax-icon
throbber-ajax-load
throbber-progress

Просмотреть Gif банер, который мы сделали в фотошопе в наше время можно наверное любой программой для  просмотра графики, самые распространенные из которых это IrfanView, XNView, FastStone Image Viewer и многие другие.

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

Если же вам нужны именно тробберы/снипперы, то для их генерации существуют специальные java script библиотеки. Подборка для создания анимации загрузкии можно почитать в моей статье CSS3 и JQuery варианты создания анимации загрузки (спиннер – spinner)

Есть 21 коммент.

  1. Фермерские теплицы под заказ пишет:

    Спасибо, полезный материал. Добавил ваш блог в закладки.

  2. JamnLymnarm пишет:

    спасибо было интересно читать

  3. Вася пишет:

    Но после соранения ни хрена не работает, про то как сохранить и чем воспроизвести ни написали

  4. Sakurik пишет:

    есть способ по легче

  5. Марина пишет:

    Вау-вау! спасибо больше! Все получилось! Надо попробовать что-то посложнее… Всем удачи!

  6. Anna пишет:

    Спасибо, очень помогли!

  7. Валентина пишет:

    Класс! Спасибо огромное! Все получилось!

  8. boo пишет:

    Эти штуки называются тробберами

  9. Алексей пишет:

    Большое спасибо!!!!

  10. Виктор пишет:

    Отлично, спасибо!

  11. nema пишет:

    что-то из готовой раскадровки не получается. Лан, буду дальше думать(

  12. lymir пишет:

    Кажется все просто. но надо стремится научится. Спасибо за информацию.

  13. Дмитрий пишет:

    А я не нашёл в своём фотошопе пункт меню WorkSpace->Video.
    Сама “Рабочая среда” есть, а пм “видео” нет. Какая используется версия фотошопа? У меня CS3

  14. admin пишет:

    Можно еще проще, поищите: Windows -> Animation

  15. Pasagir пишет:

    Прям спасибо! Особенно за горячие клавиши!

  16. Йцукен пишет:

    Отличный урок. Спасибо. Просто и понятно объяснено:) Теперь пойду создавать гифки.

  17. vika пишет:

    блин чтобы разобраться в вашем описании мне нужно русский язык снести в фотошоп!
    зачем писать команды на английском, что за изврат?!
    БЕСПОЛЕЗНОЕ ОПИСОНИЕ!

  18. Isya пишет:

    Оу, супер, спасибо большое! Все получилось! )))))

  19. ultra пишет:

    cупер! все просто и доступно!

  20. Bitvisitor пишет:

    Вот это тут замарочек скажите как баннер саму сделать

  21. Александр пишет:

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

Написать комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*

*