Главная / Веб-дизайн / Веб-дизайн Учимся создавать анимированные GIF-картинки

Веб-дизайн Учимся создавать анимированные GIF-картинки

Сегодня я хочу рассказать вам о том, как создавать движущиеся картинки в интернете. Кроме того познакомлю вас с Photobie – великолепным бесплатным редактором изображений, который позволяет создавать GIF-анимацию.

Что важно знать

Перед тем, как сделать движущуюся картинку, узнаем, что следует учитывать при этом:

  • Готовая анимация всегда должна сохраняться в формате GIF. Форматы JPEG или JPG не поддерживают анимацию;
  • Анимированное изображение состоит из нескольких картинок. Каждая из них должна иметь одинаковый размер (ширину и высоту);
  • В изображение должно быть не более 256 цветов;
  • Некоторые пользователи отключают поддержку анимации в браузерах. Если анимация будет отключена, посетители будут видеть лишь первый кадр вашей анимации.
  • Создаем анимированную картинку онлайн

    Перед тем, как делать движущиеся картинки, сначала нужно подготовить изображения для анимации. Если у вас нет установленного графического редактора, можно воспользоваться инструментом Photobie.

    Как только все картинки будут подготовлены, откройте сайт http://www.makeagif.com/, кликните по иконке «Pictures to GIF» (изображения в GIF), расположенной в центре страницы, а затем загрузите все картинки. Далее следуйте инструкциям.

    Создаем движущиеся картинки при помощи Photobie

  • Скачайте Photobie и установите данное программное обеспечение на компьютер;
  • Как только программа будет установлена, запустите ее, а затем откройте каждый подготовленный кадр;
  • Выберите картинку для первого кадра анимации, а затем повторите процедуру с последующими кадрами. Кликните по «Region» (Область), а затем «Select whole image region» (Все изображения), либо воспользуйтесь сочетанием клавиш CTRL+A, чтобы выделить изображение целиком;
  • Нажмите «Edit» (Редактировать), а затем «Copy» (Копировать), либо нажмите CTRL+C, чтобы скопировать изображение;
  • Выделите изображение, которое вы указали в качестве первого кадра. Кликните «Edit» (Редактировать), а затем «Paste as new layer» (Вставить как новый слой), или используйте сочетание клавиш CTRL+V;
  • После этого в начальном кадре появится новый слой. Повторите ту же процедуру со всеми последующими картинками (кадрами);
  • Как только все последующие картинки будут добавлены как слои первого кадра, нажмите «GIF_Animation», а затем выберите «Animation Control Panel» (панель управления анимацией);
  • В «Animation Control Panel» отобразятся все слои по отдельности. Если нет, то кликните по зеленой стрелке, чтобы обновить окно просмотра. Нажатие по зеленой кнопке с треугольником позволит воспроизвести анимацию. Если анимация покажется вам слишком быстрой, выберите один из кадров, и увеличьте время задержки в миллисекундах;
  • Как только добьетесь нужного эффекта, кликните по иконке с синей дискетой, чтобы сохранить изображения как движущуюся картинку.
  • Перевод статьи “How to make an animated GIF image” был подготовлен дружной командой проекта Сайтостроение от А до Я.

    О нас seoexpert

    продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

    Смотрите также

    16 лучших примеров дизайна главной страницы сайта

    Для любой компании главная страница сайта – виртуальная парадная дверь. Если посетителю не нравится то, ...