Главное меню


Посетителей онлайн:87
 Логин:
 Пароль:
Защитный код:

Секретный код
Повторить код
 
Забыли пароль?
Забыли логин?

  Статьи / Как рисовать аниме и манга / Уроки рисования от Shara: Стильная анимационная подпись в Photoshop

Уроки рисования от Shara: Стильная анимационная подпись в Photoshop


Как рисовать аниме и манга

Всем привет! 

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

Я буду выполнять всё это в CS3 (который представляет собой Photoshop+Image Ready в одной тарелке), но всё можно спокойно сделать и в этих двух прогах.

Желательно чтоб у вас был хоть какой-никакой опыт работы с PS и IR, так как подробно расписывать каждый шаг не буду, да и с какой стати, всё-равно, у каждого своя фантазия, так что показываю только основы.

Итак, приступим.

1) Создадим новый документ (я возьму 210x50). Фон-прозрачный.

2) Теперь

rectangle.gif

рисую прямоугольник. И применяю градиент (Layer>Layer Style> Blending Options>Gradient Overlay)

Вот:
Стильная анимационная подпись *

3) Рисую ещё один прямоугольник.

Вот:
Стильная анимационная подпись *

4) Я нарисовал ещё один (практически монотонную подложку для бегалки), вы-как хотите.

Стильная анимационная подпись *

5) Теперь нужно сделать Элемент, который будет бегать под решёткой. Рисую прямоугольник, убираю Fill=0 и навешиваю градиент нужного цвета (у меня-от прозрачности к красному). Слой можно как-нить обозвать, чтобы впоследствии долго искать не пришлось.
 Я обозвал "progress"

Стильная анимационная подпись *

6) Теперь нам нужна решётка. Рисуем прямоугольник. И растрируем слой.
Вот так, (если кому не знакомо)
Стильная анимационная подпись *

6.1) "Нарезаем" в ней дырки. Я использовал выделение, передвигал по горизонтали кнопками "влево"

"вправо" на клавиатуре и очищал выделение Delet'oм
Вот что получилось:
Стильная анимационная подпись *

-------------------------------------------------------------------
Теперь нарисуем сам индикатор
-------------------------------------------------------------------

1) Я нарисовал корпус при помощи

rounded_rectangle.gif

, но тут всё на ваше усмотрение. Хоть кругом.
(радиус выставил на 6pix)

Вот:
Стильная анимационная подпись *

ещё один скруглённый прямоугольник, только с развёрнутым градиентов. (я ещё применил Layer>Layer Style>Blending options>Stroke только прозрачный и шириной в один пиксель)

Вот что должно получиться:
Стильная анимационная подпись *

2) Далее нарисуем или стырим откуда-нибудь текстурку разводки платы и разместим её вот-так:
(поиграем с opacity, способом наложения и.т.д для лучшего результата. Мне пришлось наложить на картинку полупрозрачный градиент (как накладывать градиент, описано выше))
Стильная анимационная подпись *

3) Теперь текстом

horisontal_type.gif

навесим индикаторы (я использую цифру восемь).

Я использовал шрифт "a_LCDNova" Если кому надо, выкладываю.

Стильная анимационная подпись *

С дизайном всё!

-------------------------------------------------------------------
Анимирование
-------------------------------------------------------------------

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

1) Сначала заставим бегать полоску.
1.1) Утащим слой с полоской (progress) за документ (влево, чтобы небыло видно) (используйте клавиши влево и вправо на клавиатуре).

***
ПРИМЕЧАНИЕ
Нам щас часто будет нужна менюшка (на скрине она помечена красным кругом), для экономии места давайте

назовём её "AnimOpt"

Стильная анимационная подпись *
***
1.2) Создадим новый фрейм из имеющегося. (AnimOpt>New Frame)

1.3) На втором фрейме Утащим слой с полоской (progress) под корпус индикатора (вправо, чтобы небыло видно)

1.4) Зажимаем Ctrl и выделяем оба фрейма путём кликанья на них.
Стильная анимационная подпись *

1.5) Теперь заставим её двигаться. (AnimOpt>Tween...)
Параметры выставляем по вкусу. (Я поставил Frames to Add = 25 (это количество кадров, в которых наш

"progress" будет перемещаться от позиции фрейма1 до позиции фрейма2))
Layers=All Layers;
Остальное оставить как есть.

1.6) Теперь я подогнал скорость. Выделил все фреймы (AnimOpt>Select All Frames) и поменял скорость

(снизу иконки фрейма). Со скоростью советую поиграть (используйте "Other..." для точной подстройки),

так-как для разных ситуаций подходит разная скорость (оптимально для просмотра на компе (как я подобрал)

0,06 на деми , чтобы не тормозило, я кажется ставил 0,02). Причём даже эта сотая ишрает большую роль, так-что экспериментируем, товарисчи.
Стильная анимационная подпись *

Теперь наша progress'ина должна бегать.

Вот:
Стильная анимационная подпись *


2) Индикация. Для примера я буду выводить слово "hello".
Вот здесь передо мною стала запороловка... Если кто-нибудь придумает решение лучше, просьба сообщить.
Так-как способов менее извращённых не вижу, будем делать так:

2.1) Для начала, срежем лишнее (Image>Trim Transparent Pixels)

2.2) Выделяем наш документ (Ctrl+A) и копируем (обязательно Ctrl+ Shift +C)

2.3) Создаём новый документ. Размер должен быть равен размеру нашего документа.

2.4) Вставляем скопированное на новый документ (Ctrl+V)
Положение изображения подгоняем так, чтобы оно было равно положению изображения на нашем первом документе. (иначе потом на анимации оно будет прыгать)

2.5) Теперь с помощью

horisontal_type.gif

, на месте первой 8-ки пишу "О" (последняя из слова Hello)
Стильная анимационная подпись *

2.6) Помещаем кадр на нашу анимацию. (AnimOpt>Copy Frame)
потом переходим на наш документ с анимацией. (должен быть выделен последний имеющися фрейм) и Вставляем (AnimOpt>Paste frames After Selection)

3) Вернёмся к нашим бара... к нашей копии.

3.1) Сдвигаем слой с буквой "О" на второе место, а на первое место размещаем букву "L" и так далее...
Стильная анимационная подпись *

думаю алгоритм понятен и проблем с текстом не будет.

4) После того как всё будет готово, не забудьте поменять скорость у кадров с текстом.

Вот что получилось:
Стильная анимационная подпись *


ДОПОЛНЕНИЕ: Объясняю как избавиться от белого ободка. Я объясню на примере шарика:
(цвета для деми)
Стильная анимационная подпись *
он получился с белум ободком. чтобы это исправить, возьмём два цвета, которые на деми используются как фоны сообщения. Делаем два слоя(первый заливаем одним цветом, второй другим) и ставим opacity верхнего на 60% (правда тут стоит поиграть, но я ставил на 60)
Вот:
Стильная анимационная подпись *

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

Кого устроит такое безобразие? Никого. Поэтому сливаем наш мячик (если делаете подпись, то корпус) и получившийся фон. Берём палку выручалку (magic wand)

magic_wand.gif

, в настройках у неё отключаем Anti-alias (из-за которого весь балаган), ставим Tolerance = 1 выделяем наш фон (ободок останется не выделенным):
Стильная анимационная подпись *

Удаляем выделенное. Все! Сохраняем. Теперь наш шарик выглядит не ступеньками и без ободка, как будто сохранили в png24! Если надо, могу вынести в отдельный урок, так что говорите.
Стильная анимационная подпись *


Вот и всё!

Автор: Shara

  

[ Предыдущая статья ] [ Назад в раздел - Как рисовать аниме и манга ] [ Главная страница ] [ Случайная статья ] [ Следующая статья ]


(1139 Всего слов в этой статье)
(4761 Прочтено)   Напечатать текущую страницу








Реклама на сайте | Конфиденциальность | Контакты