Урок 8. Анимация титров (текста) и символов в Xara 3D6. 3-D текст и символы по-быстрому.

Простые 3-D титры и символы.

Инструментарий.
1. Adobe Photoshop CS2;
2. Xara&nbsp3D6;
3. Adobe ImageReady CS2.

Рис.1

Открываем программу Xara&nbsp3D6 и первым делом жмем «A-a» (Ввод текста). Пишем что нужно, я напишу — ReaLKoT. Конечно — не слишком стандартным шрифтом. В опции фактуры — «загрузить текстуру» — можно выставить для теста, фона и т.д. любую текстуру (в том числе свою).

Мне она не нужна, поэтому идем дальше.

Идем — в «параметры проекта». Выбор проекта это очень важно, но можно не брать совсем, сделать все самостоятельно (по сути это шаблоны анимации). Я взяла рамку. Затем цвет (палитра). Все зависит от того, что Вы хотите видеть в итоге, посоветовать трудно. Варианты: текст, фасад текста. Все подбираете по палитре. Я взяла желтый текст, темно-желтый фасад текста (лицевая поверхность), «бока» светло-желтый (торец текста), рамка ярко-красная. Фон — зависит для какого тона форума делается подпись/аватара. У всех свой дизайн, светлый, темный, разный. Поэтому я делаю фон белый или прозрачный, чтобы в дальнейшем удалить его в фотошопе.

Освещение подбираем сами, я беру все светлое, тень мне не нужна. Делаю ее белой или не включаю (снять флажок). Опции тиснения — «глубина 43», «шир. контура 100». Блеск у меня матовый, а Вы смотрите сами. Опции фаски я — взяла «бугристая». Вы — какая подходит. У меня глубина фаски 15. «Опции анимации»… Ну тут полет Вашей фантазии, это в 4-й версии программы почти выбора не было, а в 6-й — даже сложно что-то советовать. Я выбрала — «Сборник анимации, вращение «RotateLights».

Сохраняем — Экспорт анимации в *.gif. И открываем его в ImageReady и «волшебным ластиком» удаляем тень. На первом кадре ставим о,5. И, в зависимости от надписи, удаляем лишнюю часть холста. Уменьшаем размер изображения. Исходя из задач проекта. При необъходимости можно добавить эффекты фильтрами фотошопа и т.д. Получается во многих случаях красиво.

Программа простая, настройки — интуитивные, простые (хотя — их много).

Урок 7. Анимация дождя (снега, тумана) в Corel PHOTO-PAINT.

Форматируя предыдущий урок (про анимацию дождя в Фотошоп) подумалось, зачем все так усложнять, если под рукой есть Corel PHOTO-PAINT, что и послужило причиной написания этого мануала.

Инструментарий.

1. Adobe Photoshop CS2;

2. Corel PHOTO-PAINT X3;

3. Adobe ImageReady CS2.

Открываем Photoshop, создаем новый файл (пусть 120х150 пикселей), выбираем картинку (Рис. 1).

Рис.1

Создаем еще пять (или сколько угодно) слоев-дубликатов (Рис. 2). Сохраняем файл как *.psd (стандартный файл Photoshop) и открываем его в Corel PHOTO-PAINT (Рис. 3).

Смотрим Рис. 4. Делаем активным первый слой (кадр 1), идём в Эффекты -->Творческие -->Погода.

Настраиваем как нам надо, методом подбора См. Рис. 5, в зависимости от того, что хочется получить. Все интуитивно-понятно. Жмем кнопку случайных значений. Повторяем процедуру с каждым слоем, изменяя случайное значение. Отработав все слои, сохраняемся. И опять открываем файл в Фотошопе, подправляя-добавляя эффекты. И анимируем привычно в ImageReady.

Рис.2	Рис.3	Рис.4	Рис.5

Результаты пяти минут смотрим на Рис. 6 и 7. Понятно, что это просто пример. Удачной всем анимации.

Рис.6	Рис.7

Урок 6. Анимация дождя в Photoshop.

Урок 6

На этом уроке мы создадим анимацию дождя в Фотошопе. Урок очень простой, рассчитан на новичков.

Способов «дождевой анимации» существует бесконечное множество, предлагаем Вашему вниманию наиболее простой и быстрый.

Инструментарий.

1. Adobe Photoshop CS2,

2. Adobe ImageReady CS2.

Открываем Фотошоп, создаем новый файл (120×120 пикселей, например), загружаем в редактор нужную нам картинку (я выбрал в стиле фэнтези, Рисунок 1).

Рис.1

Создаём три новых слоя и заливаем их чёрным цветом (Рисунок 2).

Смотрим Рисунок 3. Делаем активным второй слой (Кадр 2) и открываем вкладку Фильтры (Фильтр ->Шум ->Добавить шум).

Устанавливаем обозначенные на Рисунке 4 значения параметров фильтра.

Смотрим Рисунок 5. Делаем активным третий слой (Кадр 3), повторяем процесс установки шума, увеличив немного его значение (опытным путём, вам поможет собственная фантазия).

Рис.2	Рис.3	Рис.4	Рис.5

Повторяем предыдущую операцию, но уже с четвёртым кадром будущей анимации (Рисунок 6).

Создаем сам дождь, в соответствии с очередностью, указанной на Рисунке 7. А именно: активизируем второй слой, заходим в Фильтр, выбираем Размытие ->Размытие в движении.

Выставляем значение угла и смещения штрихо, как на Рисунке 8 (например). Повторяем процесс с двумя оставшимися слоями, Кадрами 3 и 4.

Рисунок 9. Делаем слои с шумом (Кадры 2, 3, 4) полупрозрачными. Стоит пробовать разную прозрачность для разных картинок.

Рис.6	Рис.7	Рис.8	Рис.9

Рисунок 10. Выключаем видимость шумовых слоев, включаем видимость художественного, основного слоя. Делаем именно его активным и переходим в ImageReady.

Рисунок 11. Активизируем первый слой и делаем видимым последний. Через меню анимации Создаем кадры из слоев (Make frames from layers). Должно получиться как на Рисунке 12.

Смотрим Рисунок 13. Выключаем видимость всех слоёв и делаем активным первый, художественный слой. В окне анимации выделяем первый кадр и удаляем его.

Рис.10	Рис.11	Рис.12	Рис.13

Переходим к Рисунку 14. Делаем активным первый слой и включаем видимость первого и второго слоя. Внизу, в окне анимации проявились (наконец) три кадра дождя. Осталось только выставить их длительность (Рисунок 15), сохранить оптимизированный «как анимация gif» и насладиться готовой работой (Рисунок 16, готовая анимированная аватара). Дождь в Фотошопе — это простая и эффектная анимация.

Рис.14	Рис.15	Рис.16

Надеюсь, было всё понятно, удачи! LexA

Урок 5. «Оживление» (анимация) волос, губ и т.д.

Здравствуйте. Я хочу показать не очень сложный урок. Но он потребует от Вас терпения. Урок заключается в «оживлении» волос, губ и т.д. и т.п.

Инструментарий.

1. Adobe Photoshop CS2,

2. Adobe ImageReady CS2.

Итак берем картинку я взяла эту… Стандартная аватара — это примерно от 100 до 170 пикселей. Больше 170 я Вам делать не рекомендую. В основном используют размер 150. Я вырезала картинку на 170×142 пикс. (Рис.1).

Рис.1

Оптимальная анимация (как говорит человек которого я считаю своим учителям) начинается с 5-и кадров. Поэтому делаем 5 слоев. Теперь идем в Photoshop (у меня на английском) и нажимаем filter---> Ligufy (на русском: Фильтры ---> Пластика). У Вас открывается такое окно — Рис.2.

Рис.2

Нажимаем то, что выделено красным. Установите все цифры как на картинке (потом сами будите менять эти параметры). И АККУРАТНО водите кистью по тем местам, которые Вы хотите анимировать. В данном случае — это волосы.

Дальше есть 2-а пути:

Либо Вы делаете второй, третий и т.д. кадр с картинки, которую только что анимировали. Либо, как я предложила в самом начале, с исходника — каждый кадр. В каждом способе есть свои преимущества:

 — В первом случае анимация получается более плавной (это хорошо для анимации лица).

 — Во втором более разбросанно, что не плохо для анимации волос.

Мы идем по 2-му пути. Поэтому делаете так каждый кадр. Вот результат (Рис.3). Добавьте еще эффектов и будет отличная аватара.

Этот метод лучше FantaMorph тем, что волосы выглядят более живыми.

На Рис.4 - 7 примеры работ, выполненные этим же способом.

Рис.3	Рис.4	Рис.5	Рис.6	Рис.7

Урок 4. Делаем анимацию «солнечных лучей».

По просьбам трудящихся аниматоров попробуем создать эффект «солнечных лучей». Сделать такую анимацию можно разными способами. Наиболее простой — использовать для работы программу Corel PHOTO-PAINT X3, точнее — эффекты (фильтры) этой замечательной программы.

Инструментарий.

1. Adobe Photoshop CS2;

2. Corel PHOTO-PAINT X3;

3. Adobe ImageReady CS2.

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

Выбираем изображение для аватары и устанавливаем ее размер. В данном случае это 120×150. Опускаю подробности — как, надеясь, что читающие эти строки уже научились делать простейшие операции в Photoshop. Создаем три одинаковых слоя — см. рис.1 (можно больше, если нужно). Сохраняем файл в формате *.psd — стандартный файл Photoshop и закрываем его.

Открываем только что сохраненный файл в программе Corel PHOTO-PAINT X3. Смотрим рис.2. Делаем видимым первый слой, два других — невидимыми. Интерфейс программы аналогичен Photoshop, проблем быть не должно. Находим меню «Эффекты» и открываем окошко «Блик объектива». Смотрим рис.3.

В меню «Заготовки» выбираем нужный эффект. Пусть в данном случае будут «Яркие синие лучи слева». Хотя — это непринципиально (попробуйте на досуге другие эффекты самостоятельно). Далее — переходим к меню — «Блики». Выбираем «Ореол» — рис.4.

Рис.1	Рис.2	Рис.3	Рис.4

Я обнулил значения — рис.5. Это необязательно, посмотрите что такое ореол — сами. Иногда он нужен, иногда — нет. Здесь — мне он кажется лишним. Так же, как и «Хвост отражения» — рис.6.

Теперь выставим центр «солнца» — точки «испускания» лучей. Как — понятно из рис.7. Нажав выделенную кнопку — курсором назначаем нужную точку. Она может быть на изображении, может быть — вне его, как у меня в этом случае — центр помечен банальным крестиком.

Переходим на вкладку «Лучи» — рис.8. Тут много всего. Собственно, подвигайте ползунки. Что и за что отвечает — понятно и без описания. Я выставил их так, как мне показалось нужным. Собственно — далее будем менять только «Поворот». На первом кадре — 0°, на следующих +30° и +60°.

Рис.5	Рис.6	Рис.7	Рис.8

Это все наглядно видно на рис.9 и рис.10. На втором кадре (слое) анимации — выставим угол 30°, на третьем кадре (слое) — 60°. Сохраняем результат в том же формате *.psd и закрываем Corel, его работа закончена.

Рис.9	Рис.10	Рис.11

И это почти все. Опять открываем Photoshop, дополняем кадры чем-то нужным, я добавил рамку. А можно и еще чего-то анимировать, подписать и т.п. Сделали — переходим в ImageReady и анимируем.

Все предельно просто, но — красиво. Несколько примеров применения эффекта.

С пожеланиями творческих успехов — san_san. Удачной и красивой анимации.

Урок 3. Рисуем стандартный userbar 350×19.



 Рисуем стандартный userbar 350×19  

Автор: Arcanum

— Это моя первая статья такого типа, но я постараюсь сделать её на 100% понятной. Ну что? Поехали!

1. Открываем Photoshop и создаём новый документ размером 350×19 — это стандартный размер для Userbar-а. Я не знаю почему, и никто из моих знакомых тоже не знает. Просто так принято. Как баннер 88×31. Для большего представления скриншот — рис.1.

2. Берём инструмент Gradient tool и выбираем такие настройки как на рис. 2.

3. Нажмите на панель, обозначенную красным прямоугольником. У Вас откроется такое окошко — рис.3.

Рис.1	Рис.2	Рис.3

4. Здесь Вы выбираете фоновую заливку для своего Userbar-a. Вы можете выбрать любой цвет, какой Вам больше понравиться. Выбираем цвет и нажимаем «ОК» и протягиваем градиент — в зависимости от того, как хочется залить документ (сверху-вниз или справа-налево). Должно получиться что-то вроде такого — рис. 4.

5. Теперь давайте добавим «фирменные» полоски. Создаём новый файл, разрешением 3×3 пикселя и стандартными настройками. Увеличиваем масштаб изображения до 1600%. Выбираем инструмент «карандаш» (Pencil tool), делаем его размер 1 пиксель и — рисуем три точки, образующие диагональ, как на рис.5.

6. Цвет полосок ставите свой, который больше подойдет Вашему Userbar-y. Потом идем в «Edit >> Define Pattern…» и даем любое имя новому шаблону. Возвращаемся к нашему Юзербару, создаем новый слой, идем в «Edit>>Fill…» и делаем как на рис.6. Жмем «ОК».

Рис.4	Рис.5	Рис.6

7. Уменьшаем прозрачность слоя по желанию и получаем примерно, как на рис. 7.

8. Теперь — выбираем изображение, которое мы поместим на юзербар. В данном случае это камера с места крушения «Зефира» (Арканум и тут рулит — прим. ред.). Подгоняем под желаемые размеры и добавляем эффекты. Получаем примерно вот это — рис. 8.

9. Теперь добавим текст! Я использую шрифт Арканума. Делаем текст белого цвета и добавляем ему эффект «Stroke» (Layer >> Layer style >> Stroke). Настройки эффекта — как на изображении рис. 9.

Рис.7
Рис.8	Рис.9

10. Получается вот так — рис. 10.

11. Теперь добавим объёма. Создадим новый слой. Поставьте его после слоя с заливкой. Выбираем инструмент elliptical marquee tool и делаем выделение в виде овала, из левого верхнего угла в правый верхний и заливаем белым цветом. Уменьшите прозрачность где-то до 25 процентов. Взгляните на рис. 11 и Вам сразу станет понятно какой формы должно быть выделение.

рис. 10

рис. 11

Вот и всё. Можно добавить анимации, но это уже совсем другая история… С Вами был Arcanum.

Уроки анимации в;Фотошоп (и других графических редакторах) для начинающих. Анимация
в Фотошоп, как?..

Уроки анимации, как сделать анимированный аватар. Анимация в Фотошоп и не только.

В разное время, для разных форумов пишутся разные заметки. Вот и решено их несколько
собрать и обобщить. Дополнить.

На этих странице собраны
материалы по работе с разными программами для
создания gif-анимации, что используются
при создании анимированных аватар, юзербаров
и других веб-поделок.

Авторы уроков будут указываться
в описании урока. Работы исключительно посетителей
сайта ArcanumClub.ru.

Программы для анимации.

В уроках/мануалах мы будем использовать
следующие программы:





— Adobe Photoshop CS2

— Adobe ImageReady CS2

— Abrosoft FantaMorph 3

— Corel PHOTO-PAINT X3

— Xara 3D6

— Nature Illusion Studio

— Animation Shop

— Video Avatar

Урок 1. Делаем подмигивающую аватару.

Вопросы по созданию «подмигивающих» аватарок задаются регулярно. Эффект пользуется популярностью. Во избежание дальнейших ответов написан этот урок.

Инструментарий

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. В конце работы я их сведу вместе командой «объединить с предыдущим». Приступаем непосредственно к рисованию. Сильно увеличиваем изображение лупой. Выбираем инструмент «пипетка» и берем образец цвета для «закраски» глаза (рис.8).

Рис.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.