Всякая похвала, если она не заслужена, становится жестокой насмешкой и даже больше того — оскорблением. © Филип Честерфилд
Автор: Dalila Добавлено: 13-10-2011, 02:21 Раздел: Уроки » Артмейкерам
Создание гифки (анимированной аватарки)

Этот урок я написала еще в прошлом году. Но он актуален до сих пор. Если вы хотите научиться делать анимированные аватарки - вам сюда.

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

Для работы вам понадобятся: видеопроигрыватель GOM-player, фотошоп не ниже второй версии (CS2), программа Image Ready и… фантазия))

Этап 1 – нарезка кадров

По сути, гифка – это проигрывание в определенной последовательности определенных кадров. Для этого можно использовать любой видео-проигрыватель, который позволяет делать покадровые скрины. Я пользуюсь GOM-player’ом. В настройках необходимо указать путь сохранения скринов, а затем, выбрав начало необходимого момента, нажать на паузу и с помощью кнопочки Screen Capture (фото 1) «проиграть» момент, т.е. нажимать эту кнопку до тех пор, пока необходимый отрезок видео не закончится. Иногда кадров очень много (40-50), иногда меньше – это зависит от длительности момента, выбранного для гифки.

Создание гифки (анимированной аватарки)

Этап 2 – обработка кадров и открытие их с помощью Image Ready

Заходим в папку, куда были сохранены скрины. Если вы случайно захватили ненужные – просто удаляем их. Затем открываем Image Ready, выбираем File -> Import -> Folder as Frames, а затем в появившемся окне обзора указываем ту папку, куда сохранены скрины. Лучше всего, чтобы в папке не было лишних скринов – только те, что необходимы для текущей гифки. Когда Image Ready загрузит все изображения, необходимо выбрать File -> Edit in Photoshop.

Почему вот так, спросите? Дело в том, что в Фотошопе (по крайней мере, моем) нет такой возможности, как преобразование всей папки сразу в слои. Да, вы можете открывать каждый скрин отдельно, а затем вручную переносить его в свой рабочий документ, но вы представляете, что это такое? Между прочим, по незнанию я делала именно так поначалу …

В общем, мы перенесли все скрины в Фотошоп. Про Image Ready можно забыть, теперь она нам не нужна. Впрочем, можно делать авки сразу в ней, но мне привычнее работать именно в ФШ.

Этап 3 – работа с изображением и слоями

У нас с вами есть документ, который содержит все скрины. В данном примере их 34 штуки. Дальше я создаю новый документ, размером 100х100 (или любой другой, в зависимости от размера авки) и переношу в него все скрины с первого документа. Для этого в первом документе выделяю все слои с помощью Shift (то есть удерживаю эту кнопку и параллельно с этим выделяю все слои), а затем просто перетаскиваю их во второй документ (фото 2).

Создание гифки (анимированной аватарки)

Дальше работаю уже только со вторым документом. Наши скрины получились куда большего размера, чем необходимо. Также они все еще выделены. Поэтому мне будет очень просто их трансформировать. Нажимаю Ctrl+t и начинаю вертеть/уменьшать скрины как мне угодно. Очень важно при этом, чтобы все до одного скрыны были выли выделены и чтобы пропорции изображения сохранились (для этого уменьшаю только при нажатой Shift и только с помощью угловых бегунков). В итоге я выбираю такое вот положение скринов (фото 3).

Создание гифки (анимированной аватарки)

Background я заливаю черным. Мне кажется, что сами скрины чуть темноваты, мне хочется их осветлить. Но как же быть, их 34? Самый оптимальный способ – создание макроса, хотя, конечно же, можете работать и в ручную с каждым кадром)))

В панели Actions я выбираю создание новой последовательности (на фото 4 выделено красным), задаю вызов последовательности через F9 (фото 5), а дальше выполняю с одним из слоев четко те действия, которые мне нужны. Их может быть много, но для данной гифки я всего лишь увеличиваю контрастность на 30%. Затем завершаю запись действия и повторяю его с помощью горячей клавиши F9 для всех слоев.

Создание гифки (анимированной аватарки)
Создание гифки (анимированной аватарки)

В итоге, у меня получается хорошо отконтрастированное изображение. Дальше мне нужно придумать, как украсить гифку. Тут уже в работу идут кисти, фильтры и пр. Причем, конечно же, мы не будем делать это с каждым слоем. Достаточно создать один слой поверх всех и поработать с ним. Таким же способом добавляется текст (фото 6). Кроме того, мне захотелось сделать текст мигающим, поэтому я создала дубликат слоя с текстом и изменила его прозрачность.

Создание гифки (анимированной аватарки)

Этап 4 – создание анимационной картинки

Открываю окно анимации. Затем с помощью стрелочки в верхнем правом углу выбираю «Создать фреймы из слоев» - Make Frames from Layers (фото 7).

Создание гифки (анимированной аватарки)

В панели появились все слои. Некоторые из них (например, бэкграунд, текст, кисти) нам не нужны в отдельном виде. Их мы удаляем из панели анимации.

Создание гифки (анимированной аватарки)

Далее с помощью Shift выделяем все фреймы в этой панели и – внимание – в окне слоев (основном окне, том, что справа) указываем видимость бэкграунда, текста, кистей. Кроме того, щелкаем по «0 sec» на любом из фреймов и задаем длительность проигрывания (фото 8). Я выбрала 0,2 секунды. Правда, длительность части первых фреймов я потом заменила на 0,1.

Создание гифки (анимированной аватарки)

Теперь нам необходимо сделать текст мигающим. Для этого я выделяю фреймы по три штуки и меняю видимость не первого слоя с текстом, а второго, то есть чередую (фото 9).

Создание гифки (анимированной аватарки)

В целом, это все. Осталось только правильно сохранить гифку.

Этап 5 – сохранение гифки в нужном размере

Выбираем File -> Save for Web. Открывается окно (фото 10), основные параметры, на которые вам следует обратить внимание, я выделила.

Создание гифки (анимированной аватарки)

В данный момент гифка весит многовато 199 Кб, с помощью уменьшения количества цветов до 64, мне удается уменьшить размер до 137 Кб, что вполне приемлемо.

Вот и все!) Поверьте, ничего сложного в этом нет, нужно лишь попробовать и основательно разобраться. Удачи вам!

Вернуться назад? Просмотров: 6135 Комментариев: 25

Уважаемый гость, перед тем, как оставлять комментарий, рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

25) Автор: Legenda (9 июля 2012 07:31)


Блинопекарь
На сайте с 26.02.2012
Комментариев 3
Публикаций 1
Для тех кто не в курсе:

Программа Адоб Имидж Реди (Adobe ImageReady) устанавливается автоматом при установке ФШ.

Если вы откроете свой ФШ не ниже версии CS2, то в левом нижнем углу таблицы с инструментами - найдете такой значок:



Нажимаете и открывается Имедж Реди. Имейте ввиду, что при открытии имедж реди, все ваши открытые проекты, автоматически переносятся в рабочую зону данной проги, поэтому, советую открывать его пока не начали проект в ФШ.

P.S Для создания скринов (нарезки кадров), лично я пользуюсь
прогой "VirtualDub". Удобней намного.
24) Автор: Vasilina (20 апреля 2012 17:42)


Блинопекарь
На сайте с 23.11.2011
Комментариев 148
Публикаций 4
Лера, очень полезный урок! Попытаюсь сейчас сделать, посмотрим вдруг выйдет что-нибудь стоящее.
Программки действительно полезные: GOM-player легко нашла, скачала через торрент; а вот с Image Ready пришлось помучиться - почти везде нужно ввести номер, чтоб точно узнать, что ты - реальный человек (ужасЪ просто!), но на одном сайте нашла-таки я эту прогу (могу дать ссыль, если надо), но по сравнению с ней черепаха участвует в "Формуле 1", то есть не Image Ready работает медленно, а скачивается - больше чем за 30 мин у меня скачалось менее 20%!
--------------------
23) Автор: Anilis (8 марта 2012 22:07)


Советчик
На сайте с 12.11.2011
Комментариев 173
Публикаций 25
Цитата: Dalila
открывайте скрины вручную в Шопе. Я сразу так и делала...

я так и делала, жаль, что эту программу найти сложно 6
--------------------
«Для того, чтобы избежать критики, надо ничего не делать, ничего не говорить и никем не быть.»
Хаббард А.

22) Автор: Dalila (8 марта 2012 03:33)


Админ
На сайте с 10.10.2011
Комментариев 239
Публикаций 15
Anilis, LAMIA, ищите Имедж отдельно значит, ну или открывайте скрины вручную в Шопе. Я сразу так и делала...
--------------------
Не можешь — научим, не хочешь — заставим!
21) Автор: LAMIA (7 марта 2012 23:39)


Блинопекарь
На сайте с 29.01.2012
Комментариев 34
Публикаций 6
Может это я уже немного того не соображаю , но программа Image Ready её у меня нет , или это я так смотрела .
20) Автор: Anilis (9 января 2012 23:23)


Советчик
На сайте с 12.11.2011
Комментариев 173
Публикаций 25
Отличный урок. Очень понятный. Я сделала всё почти так как здесь написано и довольна результатом. У меня лишь один вопрос. А где взять Image Ready?
--------------------
«Для того, чтобы избежать критики, надо ничего не делать, ничего не говорить и никем не быть.»
Хаббард А.

19) Автор: Dalila (25 декабря 2011 15:49)


Админ
На сайте с 10.10.2011
Комментариев 239
Публикаций 15
ЯсНоСтЬ, отлично получилось!


Цитата: The_Vampire_Bride
Dalila, спасибо за уроки. Я хоть и не новичок в фотошопе, но что-то новое узнала для себя.

Приятно слышать))))
--------------------
Не можешь — научим, не хочешь — заставим!
18) Автор: ЯсНоСтЬ (30 ноября 2011 14:58)


Блинопекарь
На сайте с 27.10.2011
Комментариев 16
Публикаций 6
Вот что у меня получилось :)
Внимание! У вас нет прав для просмотра скрытого текста.
17) Автор: The_Vampire_Bride (3 ноября 2011 22:47)


Советчик
На сайте с 1.11.2011
Комментариев 57
Публикаций 5
Dalila, спасибо за уроки. Я хоть и не новичок в фотошопе, но что-то новое узнала для себя.
--------------------
Пропорционально растянуть изображение помогает Shift
16) Автор: Dalila (1 ноября 2011 17:42)


Админ
На сайте с 10.10.2011
Комментариев 239
Публикаций 15
Цитата: ЯсНоСтЬ
а у меня такой вопрос...как делать скрины в vlc или media player classic? чтобы не один скрин, а несколько...в гугле искала, ниче не выдает он мне :(

Далеко не каждая программа делает покадровую расскадровку. Я потому и советую GOM-player, он вообще любой формат видео читает, поэтому прога удобная во всех планах.
--------------------
Не можешь — научим, не хочешь — заставим!
15) Автор: ЯсНоСтЬ (1 ноября 2011 17:16)


Блинопекарь
На сайте с 27.10.2011
Комментариев 16
Публикаций 6
а у меня такой вопрос...как делать скрины в vlc или media player classic? чтобы не один скрин, а несколько...в гугле искала, ниче не выдает он мне :(
14) Автор: Elen_Salvatore (17 октября 2011 11:34)


Критик
На сайте с 13.10.2011
Комментариев 242
Публикаций 24
Цитата: Dalila
Молодчинка, хорошо получилось для первой попытки!)

Большое спасибо 9 Я тешу себя надеждой, что в будущем (если постараться), возможно, получится немного лучше... 2
--------------------
Нет предела совершенству!
13) Автор: Dalila (16 октября 2011 21:21)


Админ
На сайте с 10.10.2011
Комментариев 239
Публикаций 15
Цитата: Elen_Salvatore
Да, это теперь мой аватар))

Молодчинка, хорошо получилось для первой попытки!)
--------------------
Не можешь — научим, не хочешь — заставим!
12) Автор: Elen_Salvatore (15 октября 2011 20:59)


Критик
На сайте с 13.10.2011
Комментариев 242
Публикаций 24
Цитата: Dalila
В профиле стоит? Я тоже хочу полюбоваться))

Да, это теперь мой аватар))
--------------------
Нет предела совершенству!
11) Автор: Dalila (15 октября 2011 20:44)


Админ
На сайте с 10.10.2011
Комментариев 239
Публикаций 15
Цитата: Elen_Salvatore
Вот теперь любуюсь делом рук своих

В профиле стоит? Я тоже хочу полюбоваться))
--------------------
Не можешь — научим, не хочешь — заставим!
10) Автор: Elen_Salvatore (15 октября 2011 20:42)


Критик
На сайте с 13.10.2011
Комментариев 242
Публикаций 24
Dalila, большое спасибо за этот урок! 29
Попробовала. Сделала, конечно, по-своему (у меня вечно так... я долго удивляюсь потом, почему же не получается, но в итоге методом тыка дохожу до какого-то результата), но именно прочтение этого поста вдохновило меня на создание анимации (раньше я этого никогда не пыталась делать). Вот теперь любуюсь делом рук своих 1
--------------------
Нет предела совершенству!
9) Автор: NeAlisa (14 октября 2011 21:54)


Советчик
На сайте с 13.10.2011
Комментариев 57
Публикаций 2
Помню этот урок. Еще бы сесть и попробовать наконец))
8) Автор: Соблазн_Бессмертия (14 октября 2011 16:45)


Советчик
На сайте с 14.10.2011
Комментариев 128
Публикаций 18
Спасибо вам, за такую нужную информацию!
Давно хотелось научиться делать гифки. Буду учиться.
--------------------

"В раю, конечно, климат получше, но в аду - компания поинтереснее"
7) Автор: Dyomina Mariya (13 октября 2011 21:40)


Советчик
На сайте с 13.10.2011
Комментариев 128
Публикаций 3
Спасибо за полезный урок 10, всегда хотела научиться делать гифки 1!
--------------------
By Dyomina Mariya
6) Автор: merivamp (13 октября 2011 20:57)


Блинопекарь
На сайте с 13.10.2011
Комментариев 88
Публикаций 23
ого 43 а я и не думала, что это так сложно 42
Лил, преклоняюсь твоему таланту 38 ))) буду тренироваться)) 34
--------------------
http://delenadiaries.com/
5) Автор: lady boom (13 октября 2011 20:44)


Блинопекарь
На сайте с 13.10.2011
Комментариев 10
Публикаций 2
Очень полезный урок, ибо всегда было интересно узнать как делать гифки. Спасибо)
4) Автор: Schcuryk (13 октября 2011 20:19)


Блинопекарь
На сайте с 13.10.2011
Комментариев 5
Публикаций 0
Мне это урок очень помог, когда я делала гиф баннер, свой первый 10
3) Автор: Var_Vara_ (13 октября 2011 14:22)


Модератор
На сайте с 13.10.2011
Комментариев 79
Публикаций 2
Цитата: Dalila
И, Варь, я тебя заставлю попробовать!

ну маааааам, ну не наааааадо... *прячется под кровать на глазах у крайне удивленного таким поведением кота*
--------------------
- Что получает зарегистрированный пользователь?
- Возможность стать забаненным. ©
2) Автор: Dalila (13 октября 2011 14:19)


Админ
На сайте с 10.10.2011
Комментариев 239
Публикаций 15
Цитата: Var_Vara_
отличная, по-моему, очень сложная работа!

На самом деле, сложного ничего нет. И, Варь, я тебя заставлю попробовать! 18
--------------------
Не можешь — научим, не хочешь — заставим!
1) Автор: Var_Vara_ (13 октября 2011 14:16)


Модератор
На сайте с 13.10.2011
Комментариев 79
Публикаций 2
я честно ничего не поняла, вообще, еще раз восхитилась твоим талантам и, скромно потаптавшись поблизости, уползла от греха подальше...
отличная, по-моему, очень сложная работа! 2a
--------------------
- Что получает зарегистрированный пользователь?
- Возможность стать забаненным. ©
Компьютерный ремонт в новодарьино компьютерная помощь крылатское в новодрожжино.
Здесь и только здесь любой начинающий автор сможет выложить свои первые «блины», приготовленные на кухне фан-творчества, получить советы более опытных мастеров, узнать мнение «коллег по цеху», и постепенно, шлифуя свои навыки и умения, превратиться из новичка в настоящего гуру.
Помните: от вас требуется не только желание обучаться, но и умение прислушиваться к советам. Критиковать не менее сложно, чем правильно воспринимать критику, поэтому давайте относиться друг к другу с должным уважением.
Сейчас вы на главной странице » Уроки » Артмейкерам » Создание гифки (анимированной аватарки)
Последние вопросы
Музыка для клипа
Как сделать размытым всё, кроме нескольких деталей?
Удаление.
Аватарка
Тени
Постепенное обесцвечивание видео
Модерация фанфиков
Профиль
КОНКУРС
Колоры
задать вопрос
Последние комментарии пользователей
От Tea_time в посте:
Var_Vara_
От Tea_time в посте:
Katherine Vine
От Anya в посте:
Арт "Kaboom" G
От Little D. в посте:
Арт "Kaboom" G
смотреть все
Популярные в этом месяце посты
Фанфик "Солнце в наших ладонях" PG-13
Видео "Multifandom girls | Sweet serial killer" 15+
Видео "Elijah | He's your worst nightmare" 13+
Видео "Say Something" 15+
Стихотворение "Признание" G
Список критиков
kostyaeva (см. все требования критика)
Модератор сайта "Дневники Делены" и Хогса. Я пишу фанфики и стихотворения, создаю работы в ФШ, занимаюсь редактурой произведений. Все обо мне, моем творчестве и все мои работы вы сможете найти на этом сайте. На данный ресурс меня привело желание помочь советом новичкам и самой научиться чему-то новому. Меня долго здесь не было, но я постараюсь максимально много проводить времени здесь, как будет позволять ситуация. Так что любой может обратиться ко мне в посте с требованиями или ПС.
Var_Vara_ (см. все требования критика)
Некоторое время залипала в свою «критиканскую» страницу, написанную около трех лет назад. Много воды утекло с тех пор, и еще недавно я даже подумать не могла, что вернусь в это место, да еще и в качестве модератора. Ну, что же... Я стала лучше, как автор (и скромнее, определенно, скромнее), менее многословной и более требовательной, как читатель. Простите заранее.
Anastasiya (см. все требования критика)
Модератор сайта "Фикбук". Также являюсь автором на "Фан-Вее", старостой на "Хогсе" Пишу фанфики, оригинальные рассказы, стихи. Также делаю аватарки и видео. В моей голове всегда множество идей для новых работ.
Я лояльный человек, но требовательный читатель и суровый критик, который хочет помочь людям в их творческих начинаниях.
Викусик™ (см. все требования критика)
Как критик и модератор, настоятельно прошу вас внимательно читать правила публикации и оформления постов
Ламия (см. все требования критика)
Постоянный автор и модератор каталога на сайте "Дневники Делены".
Фан-творчеством увлекаюсь уже больше двух лет, а именно - написанием фанфиков.
В авторах всегда ценила терпение, желание развиваться и умение принимать критику.
Каталина (см. все требования критика)
Модератор сайта "Трублад", автор/переводчик/бета/гамма на "Поттер-фанфикшн". Увлекаюсь фикрайтерством, когда-то виддерством, несмотря на то, что с фотошопом не работала, могу помочь исправить элементарные ошибки и посоветовать, как в дальнейшем их избежать. Всегда готова прийти на помощь тем, кто обратится за советом по тому или иному направлению.
Tanyshik (см. все требования критика)
Автор и по возможности активный пользователь сайта "Дневники Делены", ньюзмейкер ТруБлада.
Люблю творческих людей, имеющих свое видение канона, если это фан-работы, и не боящихся экспериментов в оригинальных историях. Всегда готова прийти на помощь и помочь не только советом, но и делом.
смотреть список всех критиков
подать заявку на перевод в критики
подать заявку на перевод в советчики
Статистика за сегодня
Сегодня было пользователей: 8 и гостей: 159
Сейчас on-line 0, из них гостей: 3

Сейчас на сайте: Никого

Сегодня были: Anastasiya, FoxAlica , Tea_time, Nosferatu1927, Anilis, Bravo angel, Newi, Ledi Pirs
Команда сайта
Dalila (админ)
Викусик™ (модератор)
kostyaeva (модератор)
Var_Vara_ (модератор)
Anastasiya (модератор)
Katherine Vine (модератор)

 
Dalila © 2011 При копировании материалов ссылка на сайт обязательна.
Для корректной работы сайта используйте браузеры Mozilla Firefox или Opera.