Многие наверное заметили, что мне очень нравиться менять себе аватары.

Как правило, все аватары я стащила из инета, но ни один из них не удовлетворяет моих запросов.

Вот именно поэтому, очень хочется научиться, самой делать себе аватары.

Если у вас будет время и желание мне помочь, пожалуйста научите!

Заранее спасибо!

Аленка

Да запросто
Аватор по своей сути картинка размером 64х64.
Бывают аваторы трех типов:
1. Собственно картинка.
2. Анимированная картинка(GIF).
3. Анимационный и (или) интерактивный фильм flash(SWF).
После выбора одного из типов нужно придумать, так сказать, сценарий аватора. Что должно быть изображено, что должно происходить на сцене, на какие действия должен реагировать аватор(в случае с интерактивным фильмом).
Ну а дальше собственно рисование объектов. Для красивых растровых изображений подойдёт PhotoShop. Для векторных изображений существует масса програм. Я лично пользуюсь Flash MX 6.
Для анимации можно использовать множество программ аниматоров, каму какая нравится. Также можно использовать Flash MX.
Для всех операций я использую две программы PhotoShop 7 и Flash MX 6, вполне хватит для рисования аватара.
Ну ещё можно пользоваться каким нибудь захватчиком видео с экрана, например Camtasia Studio 1.1.1. Это на случай если в аватор надо вставить кусок живого видео.
Интерактивные фильмы можно создовать опятьже в Flash MX. Но тут уже появляются элементы прогромирования, что для людей не знающих хоть немного прогромирование, вызовет затруднения в построении сценария интерактивных элементов.

Вот вобщемто, что нужно для начала. Остальное дело техники.
Рисование растровых изображений, векторных, анимированние в формат GIF или SWF, создание интерактивного сценария для flash(SWF)

Krek

Но, не для меня!


Только это, я понимаю пока!

Да, извини..., всё остальное вышеизложенное... , не для моего ума!

Аленка

Тогда давай начнем всё попорядку, шаг за шагом.
Для начала придумай пожалуйста сюжет твоего аватара, что ты хочеш видеть на нём.
После чего мы вместе выберем один из типов.

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

PS: Кстати, если ктото тоже хочет нарисовать себе аватар, то присоединяйтесь. Вместе будем обсуждать его создание.

Krek

Спасибо за понимание и за желание помочь!


Уже придумала!
Только сначала..., если можно конечно, хотелось бы начать с самых простых уроков.
И использовать программу Фотошопа-5 рус. (у меня, именно она установленна).

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

Вряд ли стоит начинать с этой программы( Flash MX). Она сложновата для новичка. Для начала лучше подойдёт Ulead GIF Animator 5.
А уж потом и Flash-проги осваивать.

Потеряется качество и куча оттенков. То, что получится тебя разочарует. Такие рисунки лучше не брать. Выбери что-нибудь более лаконичное.

EGORR

Вот поэтому и спрашиваю..., т.к. мой результат...(смотреть ниже) меня очень рассмешил.
Но ведь есть наверное, секреты решения этой проблемы?

Аленка, и это ещё в JPG. В GIFе будет ещё хуже.
А ты возьми фрагмент картинки. С минимумом мелких деталей.

EGORR

Это..., ты о чём?
Как определить, минимум мелких деталей?

Деталей изображения. В твоей картинке: туфли, бусы, складки платья и т. д.
Ага?...

EGORR

Понятненько!

Аленка

Вопервых, как уже говорилось выше, при таком сильном сжатии потеряются все мелкие детали.
Вовторых исходный рисунок неквадратных размеров(584Х800), а это означает то, что если сжать как есть потеряются пропоции рисунка, в данном случае девушка на рисунке просто потолстеет!
Втретьих сжимать всё таки лучше в формат GIF, так как при таких маленьких размерах(64Х64) JPEG будет гораздо больше весить.

И так начнём.
Сделаем несколько вариантов обрезок картинки и после сжатия выберем лучший.

Первую обрезку выполним так, чтобы девушка вошла полностью в вырезаемую часть. Выбери инструмент обрезать(точно непомню как он по русски называется), его ты видиш включенным левее обрезаемой картинки. Выдели область, которую ты хочеш оставить, далее двойным щелчком по выделенной области обрезай рисунок. Получилось несовсем удачно, так как полученные новые размеры изображения 564Х668. Ну да ничего, попробуем поработать с тем, что есть!

Теперь попытаемся изменить размер до 64 пикселей.
Только бязательно должны быть включены пропорции иначе мы получим уродца.
В данном случае нам надо изменить высоту на 64, а ширина 56 сама получится.

После такого сжатия на аватаре практически ничего невидно
Чтож, придётся пожертвовать частью изображения ради получения более приемлимого варианта.

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

Ну чтож, с обрезкой я почти угадал квадрат(267Х268).
Теперь изменяем ширину на 64 (высота сама меняется в 64) и получаем следующий аватар.

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

Теперь попытаемся обрезать нашу подопытную под гороло.

После изменения размера получается более менее приличное личико, но вот беда, все остальные (привлекательные ) части тела, мы потеряли, ради смазливой мордашки!

Я тоже попробовал...
И вот что получилось...

EGORR

Как один из вариантов анимации вполне подойдёт, только уж больно качество "хреновое" для токого веса!

А мы перейдём к оптимизации нашего изображения.
В PhotoShope есть функция Сохранить для Web, находится она в меню файл.
Открывается окно оптимизации.

Справа мы видим настройки оптимизации и ниже поле с разноцветными квадратиками(Если используется GIF). Эти квадратики показываю какие цвета используются в рисовании нашей картинки. От колличества цветов зависит размер будущего файла и качество прорисовки изображения. Попробуй в поле "Цвет"(Color) изменить количество цветов, например 2,20,200 и посмотри как будет изменяться твоё изображение.
Под изображением ты можеш видеть размер будущего файла и время загрузки(что тоже очень важно!). Поиграв с различными пораметрами выбери наиболее подходящий вариант. Т.е. наилучшее качество + минимальный размер.
Сверху ты можеш видеть несколько закладок. Попробуй нажать на две правые и PhotoShop сам попытается оптимизировать и предложит тебе 2 или 4 варианта.

Так же ты можеш выбрать любой другой формат для сохранения изображения, например Jpeg. Бывает, что в нём гораздо лучше сжимается изображение чем в Gif, но не всегда.

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

Так я это ж для прикола, мизинцем левой ноги сделал.

Krek

Да, тоже самое я продела и в простом Paint, но качество...

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

EGORR

Талантливая твоя левая нога!
Мне бы так , двумя руками(10 пальцевым методом) научиться.

А вот как мне, на моём аватаре, заставить изображение руками двигать?
Ну..., открылось личико, а тАААААААААААммммммммммммм...
Потом закрылось...и т.д.

Спасибо ВСЕМ, за столь подробный ответ!

Вот какой аватар, сделала наша Violka!
Помещаю сама, т.к. она, к сожалению , не может прикрепить данное изображение.
Violka
Давай обещанные комментарии!

Пжалста!
1. Открыла я в фотожопе картинку, предоставленную Аленкой.
2. Обрезала все ненужное. Т. е. оставила от макушки до кончиков тапок и побокам чуть урезала.
3. Изменила размер изображения так, чтобы вширину он был 64 пк.
Потом началась самая нудная часть работы...
4. Выделила квадратик 64Х64 (для начала с лицом), сделала из него новый слой копированием (ctrl+J)
5. Делее сделала невидимым основной слой и снова выделила оставшийся кусочек с лицом, переместила выделение на один квадратик вниз.
6. Затем снова сделала активным и видимым фон, из выделения создала новый слой копированием...........
И так до тех пор, пока не дошла до кончиков тапок.....
В итоге получилась куча слоев (поболе 20). Но изображение на каждом из них смещалось чуть вниз.
7. Сделала фон и все слои невидимым, а 1-й слой активным - с ним было, вроде все в порядке... Потом второй - там надо было его (кусок изображения) чуть чуть переместить вверх (как раз на тот квадратик, на который смещалась рамка).
8. Потом с каждым последующим слоем проделала подобную операцию. Т.е. что бы все они оказались в верхней части холста.
9. Удалила фон. (для этого его надо сначала переименовать как угодно - тогда с него блокировка снимается)
10. Сделала видимыми все слои, потом обрезала их в размер 64Х64.
11. Перешла к ImageReady,
12. Там в окне "анимация" - "make frames from layers".
13. На каждый кадр изменила время на чуть побольше.
Вот и получилась такая немного дерганая штучка.

Просьба строго не судить - это третья весчь, которуя я сделала с помощию ImageReady...
Первой была мигающая надпись - пошагово сделаная по инструкции, по-моему, Крека...

Интересно интересно, но 100 килобайт для аватара это слишком, хотя как пример вполне реально сделано. Вот ещё один вариант наподобие этого, только весит енто чудо чуток поменьше около 18 кб
[flash=64,64]http://realbablo.by.ru/111.swf[/flash]
тоже немножко дергается, но как выражался EGORR - енто мезинцем левой ноги за пару минут

Krek
Красавец. И скорость меняется там где надо.

Аленка


Вот конкретно с этим аватаром трудно чтото сделать. Дело в том, что нам нужно иметь в наличии чистое лицо(без рук) и чистые руки(без лица). Только при таком раскладе мы сможем создать твою задумку. Да и то движения будут плоские. Чтобы добиться реалистичного раздвигания рук со всеми светотенями нужна трёхмерная модель руки. А это уже трёхмерная графика. Либо готовое движение руки найденное гденибуть в интернете. Лицо тоже должно чтото выражать при убирании рук, а это значит новые прорисовки немеренных объемов. Здесь нужен высококласный художник. Либо опять же найти готовое анимированное лицо, например вырезанное из фильма.

Кароче самое реальное в этом случае слипить готовые элементы.

Krek


... ну я ж не волшебник...
...я так.... самонедоучка....

Violka

Аналагично.

Все с чегото начинали!

Violka
Спасибо за урок!!!

Усё скопировала... , сегодня буду пробовать.

Krek

А пояснить... , как... он меньше стал весить.

seba

Да, да..., где надО.

Krek




Охо-хООО...
Да уж... , спасибо за пояснения, запросы свои убираю..., пока так похожу!

Аленка

Естественно я не волшебник, и сделать GIF с таким колличеством кадров размером всего с 18 кб мне неподсилу. Но если бы ты ткнула в него правой кнопкой мыши ты бы сразу поняла, что это Flash. Вот и весь секрет. Но это был чисто анимированный аватарчик.

А енто творение уже умеет реагировать на мышку.
[flash=64,64]http://realbablo.by.ru/360_degrees.swf[/flash]

Krek
А уроки по Flash будут?

Violka
Ну вобщем то я планирую этим заняться.

Да уж... , самое главное..., в каких местах... 8| ОНО больше реАААгирует!!!

Krek
... а кто-то собирался уроки флэша давать...

Как зделать аватар в качестве вырезки из фильма, мультфильма.
Для начала определимся с сюжетом. Выберем в плеере какой нибудь момент продолжительностью 1-3 секунды, засекаем орентировочно время начала и конца. (я выбрал кусочек и "Ну, погоди")
Теперь открываем в программе VirtualDub (_http://virtualdub.sourceforge.net 839kb) наш мультфильм. Находим сюжет по времени. Отсекаем всё лишнее до сюжета. Для этого ставим метку в самом начале и непосредственно на перый ключевой кадр перед сюжетом(Если видео зжато каким нибудь кодеком, то отсечь непосредственно перед первым кадром скорее всего не получится), жмеме Delete. Тоже самое с кадрами после сюжета. Ставим метку на первый ключевой кадр после сюжета и на самый последний кадр фильма и отсекаем нажатием на Delete.
Теперь отключим в фильме звук. Для этого в меню Audio ставим галочку против No Audio.
В настройках меню Video заходим в диалог Filter. Добавляем фильтр NulTransform(этот фильтр ничего не делает, он нам нужен для подрезки нашего сюжета). Жмем на фильтр, потом на кнопку справа внизу "Cropping". Откроется диалог подрезки краев. Края подрезаем так, чтобы максимально обрамить весь сюжет. Жмем ОК.
Теперь добавляем фильтр Resize. В его параметрах выставляем 64*64 и метод bicubic.
В настройках видео также должна стоять галочка против строки Full Sream.
Сохраняем промежуточный результат. Теперь открываем в VirtualDub то, что мы только что сохранили. Видео у нас теперь не сжато и его можно подрезать точно до кадра. После выделения лишних кадров и их удаления сохраняем второй раз промежуточный вариант.
Ну а дальше действуем уже по своему усматрению. Запускаем любой ГИФ-аниматор импортируем на последний сохраненный ролик и сохраняем в GIF файл.
Также можно из этого ролика сделать интерактивную flash-анимацию.

Такой способ хорош своей простотой и лёгкостью программы VirtualDub. Для непрофессионалов она подходит как нельзя лучше.

Для примера вот что у меня получилось

А как зделать что бы у кота глаза светились и огонь на фоне двигался?

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

Мне в сети попадался учебник по твоему вопросу

Желательно дать ссылку на учебник!