Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||Уроки ImageReady Делаем подмигивающую аватару.
INB русский язык Форум
Добро пожаловать! inbforum.COM Интернет без границ Форум Здесь вы можете обсудить с друзьями по всему миру прений, приходите и присоединяйтесь к нам! Постоянный имя: Ruinbforum.forumotion.com
INB русский язык Форум

Добро пожаловать! inbforum.COM Интернет без границ Форум Здесь вы можете обсудить с друзьями по всему миру прений, приходите и присоединяйтесь к нам! Постоянный имя: Ruinbforum.forumotion.com


Вы не подключены. Войдите или зарегистрируйтесь

《《《《《《《上一页INBforum   Перейти вниз

上一页INBforum》》》》》》》Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

1Уроки ImageReady Делаем подмигивающую аватару. Empty Уроки ImageReady Делаем подмигивающую аватару. в Пт Окт 01, 2010 6:23 am

Admin

Admin
Admin
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Вопросы по созданию «подмигивающих» аватарок задаются регулярно. Эффект пользуется популярностью. Во избежание дальнейших ответов написан этот урок.
Инструментарий
1. Любой графический редактор (я использовал Adobe Photoshop CS),
2. Любой гиф-аниматор (в данном случае Adobe ImageReady).

Попробую все пояснить подробно, но надеюсь, что Photoshop у Вас под рукой и Вы им иногда пользуетесь. Итак. Выбираем изображение для аватары и «вгоняем» ее в нужный размер. Пусть будет 100×100. Мой любимый размер. (Вообще, анимировать глаза стоит только на достаточно крупных изображениях. На среднем и дальнем планах эффект практически не виден.) Берем картинку (рис.1) и открываем ее в Photoshop CS. Сразу же создаем новый документ рис.2 — прообраз будущей аватары нужного размера. У меня — 100×100 пикселей. Перетаскиваем исходную картинку в документ-аватару и удаляем в нем слой заднего плана активировав слой (просто нажать на нем) и нажав на мусорку (рис.3).
Примечание-пояснение. Пишу может и слишком подробно (наверняка Вы все это знаете, а опытные пользователи Photoshop уже держатся за животы от смеха) и скриншоты очень крупные. Но этот мануал предназначен для пользователей разного уровня подготовки, так что… Продолжаю.
Теперь масштабируем изображение как нам нужно. Для этого — смотрим рис.4 и 5. Цифрами отмечена очередность операций и менюшки — где-чего жать и в каком порядке.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.1Рис.2Рис.3Рис.4

Не забываем поставить галку (рис.5) на сохранении пропорций, а то картинка исказится. Масштабируем. Создаем дубликат отмасштабированной нами картинки (рис. 6). Создаем новый чистый слой (рис.7), обзываем его ГЛАЗА_100. На нем мы и будем рисовать закрытые глаза. Я (как человек в рисовании педантичный) вообще люблю ясность в названии слоев. Когда их (слоев) штук 30-40 - становится ясно, что это просто необходимо. Иначе — легко запутаться и пустить псу под хвост готовую работу. Первый слой я называю «исходник», второй (дубликат первого) — так же как и третий — ГЛАЗА_100. В конце работы я их сведу вместе командой «объединить с предыдущим». Приступаем непосредственно к рисованию. Сильно увеличиваем изображение лупой. Выбираем инструмент «пипетка» и берем образец цвета для «закраски» глаза (рис.Cool.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.5Рис.6Рис.7Рис.8

Берем кисточку с размытым краем — мягкую круглую 5 пикс (рис.9), устанавливаем для нее нужный размер (2-5 пкс в зависимости от размера глаза, сейчас -конкретно 3 пикселя) и прозрачность (я обычно ставлю — 5-12%). Закрашиваем глаз цветом взятого образца. Постепенно меняем цвета для получения реалистичного (более-менее) изображения (рис.10). Меняем размер до минимального 1пкc при прорисовки ресниц. При необходимости — подтираем почти прозрачным ластиком. В общем-то процесс творческий. Это сугубо — рисование с примитивным знанием анатомии. Научить этому я не могу. Поэтому — только посоветую. Смотрим рис.11. Сначала цветом образца со лба (светлым, короче) закрашивается весь глаз, до полной непрозрачности — помечено синим цветом — цифра 2. Но глаз имеет сферическую форму, а не плоский как доска. Поэтому — в центре области — цвета более светлые, к краям — потемнее. Дело тонкое. Неспешное. Красная область с цифрой 1. Область нахождения ресниц. Понятно, самая темная часть закрытого глаза. Для мужских аватар — более светлая, для женских — понятно — темнее — тушь и все дела. Зеленая область, цифра 3. Когда глаз открыт — в этой области находятся ресницы. Закрывая глаз — ресницы идут вниз. Красим, осветляя эту область, делая границу почти или совсем незаметной. Полезно (для общего развития) посмотреть на образец в зеркало или на картинку с закрытым или полузакрытым глазом и сделать как там — рис.12-13. Макияж лишь меняет цвет, но не принцип.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.9Рис.10Рис.11Рис.12

Надо добиться максимально реалистичного изображения. Хотя можно и примерно. Учитываем, что картинка все же — всего 100 пикс и время она будет занимать — 0.1 сек. в анимации. Но — лучше постараться. Я вот пока не очень доволен результатом. Зеленая область у меня темнее (так мне кажется), чем следует. Я ее немного осветляю. Меняю масштаб на более мелкий — смотрю. Сойдет. Мне нравится, но вопрос конечно спорный. Пропускаем споры и продолжим. С грехом пополам будем считать, что глаз мы закрыли. Но это не все. Для анимации — процесс закрывания лучше разбить на два (а еще лучше — на три) кадра. Дублируем слой ГЛАЗ_100 и обзываем его ГЛАЗ_50. Берем ластик (в форме кисти 3 -4 пикселя и прозрачностью 3-8%. Убираем половину нарисованного (см. рис.15), выключив пока видимость слоя ГЛАЗА_100 (помечено красным). Надо только дорисовать ресницы. Дорисовываем — рис.16. Работа тонкая, переходим на кисть и ластик размера 1 пиксель и на минимальную (3-6%) прозрачность. Можете покритиковать, но я результатом почти доволен. Неплохо. Итак. С рисованием глаз покончено. Я обычно сохраняю этот вариант — как контрольный и делаю еще одну копию. При ошибках в дальнейшем — ведь еще нужно будет делать на аватарке спецэффекты, писать ник-нейм и т.п. — всегда можно вернуться на шаг назад (мне удобней так, хотя есть масса других способов вернуться). Что дальше. Сводим слои.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.13Рис.14Рис.15Рис.16

Делаю еще один слой из «Исходника» и располагаю все получившиеся слои — так — рис.17. Делаю активным нужный мне слой и объединяю его с предыдущим (рис.18). С Глаз_50 — поступаю аналогично. В результате — у меня 3 слоя — рис.19. Можно анимировать. Если у Вас нет Adobe ImageReady — придется сохранить три слоя по отдельным файлам gif и потом уже подгружать их по очереди в аниматор. В моем случае — я просто перехожу в аниматор ImageReady . Смотрим рис.20. Надо открыть окно анимации через меню «Окна». Если оно у Вас открыто (по умолчанию) — сразу выбираем в меню анимации — создать кадры из слоев. Копируем кадр 2 (через то же меню анимации) и вставляем его после кадра 3. Через тоже меню анимации — «вклеить кадр…»

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.17Рис.18Рис.19Рис.20

Получилось четыре кадра, что мы и анимируем — назначая им время отображения кадра — рис.21. Первый кадр я ставлю — 1 сек, три следующих — 0,1 сек. Жму play и наслаждаюсь. Можно ограничится этим. Хотя, конечно, возможности приема много больше. Итог — сохраняю как gif — рис.22. Вкратце — про настройки публикации — рис 23. Откройте (если не открыто) окно «Оптимизация». Выставьте параметры - как на рисунке. Почему именно такие — тема совсем другого урока. Пока — просто выставьте их так, поверьте на-слово. И как на рис.22 — сохраняйте готовый гиф — рис.24. Понятно, что можно делать так же — полуопущенные ресницы, подмигивание и т.п. Хоть целый спектакль. Ну а я на этом — закругляюсь.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение][Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Рис.21Рис.22Рис.23Рис.24

Надеюсь, что это было нудно, но понятно. С пожеланиями творческих успехов — san_san.
Вопросы (если возникнут) можно задать на нашем Форуме аватар.]

http://ru.inbforum.com

上一页INBforum   Перейти вниз

上一页INBforumПредыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Создать форум | © PunBB | Бесплатный форум поддержки | Контакты | Сообщить о нарушении | Последние обсуждения