Совет 1: Как создать gif-анимацию

Кто откажется оживить свою интернет-страницу забавной анимацией? Анимацию можно сделать из чего угодно, даже из кадров фильма. Создание анимированных изображений в формате gif не занимает много времени, зато, если подойти к процессу творчески, результат сможет надолго поднять ваше настроение.
Вам понадобится
  • Программа Photoshop
  • Программа VirtualDub
  • Фрагмент видео, из которого будут создаваться кадры для анимации
Инструкция
1
Откройте видео в программе VirtualDub. Для этого воспользуйтесь командой Open Video file из меню File. В открывшемся окне выберите нужный файл, щелкнув по нему левой кнопкой мыши, и нажмите на кнопку «Открыть».
2
Создайте многослойный документ, из которого будете делать анимацию. Для этого найдите кадр, с которого начинается отрезок видео, пригодный для переделки в анимированный gif. Для перемещения по ключевым кадрам видео пользуйтесь кнопкой с треугольником и ключом в нижней части окна VirtualDub. Скопируйте кадр в буфер обмена, используя сочетание клавиш Ctrl+1. В программе Photoshop создайте новый документ при помощи сочетания клавиш Ctrl+N и вставьте в него скопированный кадр при помощи сочетания клавиш Ctrl+V.Вернитесь в VirtualDub, перейдите к следующему ключевому кадру, скопируйте его в буфер обмена и вставьте следующим слоем в документ Photoshop. Действуйте таким же образом, пока все кадры, нужные для создания анимации, не будут скопированы.
3
В Photoshop откройте палитру «Анимация». Для этого в меню Window выберите пункт Animation.
4
Создайте последовательность кадров для анимации. Для этого в палитре «Слои» отключите видимость всех слоев, кроме того, на который был вставлен самый первый кадр, щелкнув по пиктограмме в виде глаза. Пиктограмма расположена слева от слоя.Создайте второй кадр анимации, щелкнув левой кнопкой мыши по кнопке с треугольником в правом верхнем углу палитры «Анимация» и выбрав в появившемся меню команду New Frame. Включите видимость слоя со вторым скопированным кадром, щелкнув левой кнопкой мыши по пиктограмме в виде глаза.Аналогичным способом создайте все остальные кадры. Пользуйтесь командой New Frame и включайте видимость следующего слоя.
5
Настройте длительность кадра в анимации. Для этого щелкните по первому кадру левой кнопкой мыши, затем щелкните по последнему кадру, зажав клавишу Shift. Щелкните по треугольнику с указанием длительности кадра под любым кадром. В раскрывающемся меню выберите длительность. Для просмотра анимации воспользуйтесь кнопкой Play, которая находится в нижней части палитры «Анимация». Поменяйте длительность кадра, если нужно.
6
Сохраните анимацию в формате gif при помощи команды Save For Web из меню File.

Совет 2: Как сделать gif-фото

Если вас интересует, каким образом создаются анимационные картинки, в обилии имеющиеся на различных интернет-порталах, знайте, что простейшую gif-анимацию можно создать даже при помощи Adobe Photoshop.
Вам понадобится
  • - Adobe Photoshop
Инструкция
1
Откройте Adobe Photoshop и создайте в нем новый документ: нажмите горячие клавиши Ctrl+N, в новом окне в полях «Ширина» и «Высота» задайте по 500 пикселей и нажмите «Создать».
2
Анимация в Adobe Photoshop создается при помощи манипуляции со слоями, которые находятся в одном единственном документе. Поэтому далее вам нужно снабдить этот документ, т.е. тот, который вы создали в первом шаге инструкции, всем необходимым. Загрузите в Photoshop две картинки: чью-либо фотографию (она будет появляться в рамочке) и красивую картинку для фона, к примеру несколько цветов крупным планом, как на заглавной картинке. Чтобы загрузить в Photoshop изображение нажмите Ctrl+O, выберите файл и кликните «Открыть».
3
Сравните размеры загруженных картинок и документа, созданного в первом шаге инструкции (его размер, как вы знаете, 500 на 500). Чтобы узнать габариты картинки, выберите ее и нажмите Alt+Ctrl+I. Значения в полях «Ширина» и «Высота», которые в свою очередь находятся в области «Размерность» открытого окна, - это и есть размеры картинки. Если фото для рамки слишком большое, уменьшите его, принимая во внимание то, что оно должно адекватно отображаться в будущей рамке. То же самое и с картинкой для фона, изменяя ее размер, постарайтесь, чтобы она, с одной стороны, не была слишком размытой, а с другой – помещалась бы в размеры 500 на 500. Для этого введите необходимые параметры в поля «Ширина» и «Высота» и нажмите ОК.
4
При помощи инструмента «Перемещение» перетяните картинки на документ, который вы создали в первом шаге инструкции. Тем самым вы создали на этом документе новые слои. Слой с фотографией сделайте невидимым: найдите его в списке слоев (он находится в окне «Слои», а если это окно отсутствует, нажмите F7), выберите и установите пункт «Непрозрачность» на 0%.
5
Выберите слой с фоновой картинкой и «Перемещением» выровняйте его должным образом. Создайте новый слой: нажмите Ctrl+Shift+N и в новом окне сразу нажмите ОК. Убедитесь, что у вас выбран вновь созданный слой и активируйте инструмент «Овальная область», а в его настройках щелкните на пункте «Вычитание из выделенной области». Создайте два овала, которые по вашей задумке будут внешней и внутренней стороной рамки. Выберите инструмент «Кисть» и красным цветом закрасьте область между овалами.
6
Нажмите Ctrl+D, чтобы отменить выделение. Выберите «Волшебную палочку» и кликните в любом месте в центре рамки. Выделится область внутри рамки. Кликните по этой области правой кнопкой мыши, выберите «Инверсия выделенной области» и нажмите Ctrl+J. Появится еще один слой – дубликат фоновой картинки с отверстием для рамки. В списке слоев поместите фотографию с человеком между этим дубликатом и самой фоновой картинкой. Если вы немного запутались, то напомним порядок слоев сверху вниз: рамка, фон с отверстием, фотография, фон, задний план (до сих пор вы не проводили с ним никаких манипуляций). Сделайте невидимым слой с рамкой: выберите его и задайте «Непрозрачность» на 0%. Приготовления закончены, теперь приступайте, собственно, к созданию gif-анимации.
7
Нажмите пункт меню «Окно» > «Анимация». В появившемся окне находится на данный момент один только кадр. Кликните по нижней части кадра и в открывшемся списке выберите «0,1 сек» - это время появления этого (и последующих) кадра на экране. Нажмите на «Создание копии выделенных кадров» (появится еще один кадр). В списке слоев выберите слой с рамкой и сделайте его «Непрозрачность» на 100%.
8
Кликните на «Создание промежуточных кадров» в окне анимации. В новом окне в поле «Добавить кадров» впишите «5» и нажмите ОК. Появятся дополнительные 5 кадров, отображающие анимацию появления рамочки. Выделите последний кадр, а затем сделайте параметр «Непрозрачность» слоя с фотографией тоже 100%. Снова нажмите на «Создание промежуточных кадров» и добавьте 5 кадров. Теперь у вас появилась анимация появления фотографии. Нажмите на Play, чтобы просмотреть анимацию полностью.
9
Чтобы сохранить результат, нажмите Alt+Ctrl+Shift+S, в новом окне задайте «Постоянно» в поле «Параметры просмотров» и нажмите «Сохранить». В новом окне укажите путь для файла, его имя и тоже нажмите «Сохранить».
Видео по теме

Совет 3: Как рисовать анимешки

Одним из популярных видов компьютерной графики сегодня является GIF-анимация, которая основана на стандарте компьютерной графики, что применяется в интернете. Можно ли самостоятельно научиться рисовать анимешки?
Инструкция
1
GIF-анимация особенно популярна при создании сайтов. Сейчас почти ни один баннер не обходится без анимации. Для создания GIF-анимации применяются специальные программы. Одна из них - Active GIF Creator. Это особая программа для создания анимаций в формате GIF.
2
Сначала ознакомьтесь с окном программы. Оно состоит из различных панелей: панели меню, панели инструментов. А также имеется зона размещения образов. У панели инструментов есть широкие возможности настроек. Подберите удобную для себя конфигурацию. Учтите, что зона размещения образов и панель атрибутов настройкам не поддаются. На панели атрибутов есть три закладки: "глобальные", "образ" и "комментарий". Здесь вы выбираете логический размер экрана, а также число циклов в анимации, настройки для каждого в отдельности образа анимации, а еще делаете ввод комментария к файлу.
3
В зоне размещения на галерее фреймов применяйте через контекстное меню (правой кнопкой мыши) к любому из образов команды: "изменить атрибуты", "добавить комментарий", "удалить", "переместить", "добавить эффекты" и другие.
4
Для начала, при создании несложных образов используйте простой графический редактор. Дальше, с приобретением опыта, для сложных образов воспользуйтесь внешним редактором. Выбор отдельного редактора осуществляйте в настройках программы.
5
Кнопкой F9 вызывайте специальное окно для создания эффектов, которые будете внедрять в образ. Создайте нужное количество копий, примените к ним те или иные эффекты с различными параметрами и все – анимация готова. Поэкспериментируйте с коллекциями образов, приложенными в программе. Добавьте один из них в новый файл, размножьте его и поупражняйтесь с эффектами. Это в будущем позволит вам экономить время с собственными работами, вы научитесь быстро применять тот или иной эффект. Создайте свою коллекцию и используйте ее в будущем.
6
Чтобы ввести текст, задайте его цвет и размер. Используйте символьные шрифты, так можно создавать кнопки с рисунками, при этом смысл ясен и без текста, словно на иллюстрации. Эту кнопку можете экспортировать в HTML-редактор.
Видео по теме
Совет полезен?
Программа Active GIF Creator – полнофункциональная и несложная. Ею могут пользоваться как профессионалы, так и начинающие веб-дизайнеры. Ее сервис и инструменты удобны в работе и просты и понятны.

Совет 4: Как создать gif рисунки

GIF - широко используемый в интернете графический формат. Он позволяет сжимать изображения без потерь. В формате GIF создают как статические рисунки, так и анимацию.
Вам понадобится
  • -компьютер;
  • -графический редактор
Инструкция
1
Фактически формат представляет собой двумерную растровую графику. Анимационный GIF-файл содержит в себе кадры (отдельные сменяющиеся рисунки), информацию о их скорости вывода на экран и т.д. Этот формат хорошо подходит для черно-белых изображений и тех, в которых содержится малое количество цветов. Он поддерживает прозрачный цвет фона в изображениях, что бывает полезно при размещении на веб-странице. Благодаря существованию GIF возможно создание для веб-страниц анимационных картинок, которые мало «весят» и быстро грузятся. Сохранять изображения в этом формате позволяют большинство графических редакторов, от простых до профессиональных. Но создание анимационных GIF-файлов поддерживают только некоторые программы.
2
Работать с GIF-анимацией умеют Adobe Photoshop (с его приложением ImageReady), Ulead PhotoImpact (плюс утилита GIF Animator). Существуют и утилиты, специально созданные для работы с GIF-анимацией, например, программа для создания баннеров Bannershop GIF Animator, CyD GIF Studio Pro, CoffeeCup GIF Animator, Active GIF Creator. Как правило, с их помощью получают уже конечный продукт - анимированную картинку. А вот кадры для нее, исходные изображения, создаются в редакторах с более широкими возможностями для рисования.
3
Пример. Чтобы создать GIF-рисунок в редакторе Adobe Photoshop, убедитесь, что в его состав входит программа ImageReady. Создайте(или импортируйте уже готовые) два-три изображения, кадра. Они должны иметь одинаковое соотношение сторон и находиться каждый на отдельном слое (Layer). Сохраните их в отдельной папке на диске. Перейдите в программу ImageReady: для этого зайдите во вкладку «Файл» - «Редактировать в ImageReady». В приложении ImageReady нажмите «Файл» - «Импорт» - «Папку как кадры». Все кадры отобразятся в одном ряду. Задайте время смены кадров, количество повторов анимации. По желанию примените визуальные эффекты. Сохраните итоговую картинку.
Видео по теме
Обратите внимание
GIF - формат для простой графики, с небольшим количеством кадров. Для сложной анимации используйте графику в формате SWF.
Источники:
  • рисунки gif
Источники:
  • Создание gif анимации в Photoshop
  • как создать анимацию gif
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500