Пятница, 20.10.2017, 07:16:14
MyPhotoshop
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
Форма входа
Категории раздела
Мои статьи [2]
Элементы веб-дизайна [14]
Уроки Фотошопa [19]
Уроки анимации [34]
Поиск
Наш опрос
Оцените мой сайт
Всего ответов: 244
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
     Каталог статей
    Главная » Статьи » Уроки анимации

    анимированный радар
    В этом уроке мы научимся с помощью приложений Adobe Photoshop и ImageReady рисовать и анимировать радар, пеленгующий надпись. Но вы можете заменить надпись на что угодно - хоть на фотографию любимой девушки, этот радар справится и с ней )).

    итак:
    Создадим холст размером 300х300
    Сделаем новый слой с черным кругом (хотя вы можете сделать радар и квадратным - ваша работа, сделанная по этому уроку,будет еще круче, когда вы ее сюда выложите):

    Рисуем анимированный радар *

    Дублируем слой дважды. Верхний слой выключаем.Рисуем анимированный радар *
    Выбираем средний слой-дубликат.
    Выбираем с помощью magic wand tool (W) пустое пространство, и инвертируем выделение (Select > Inverse)
    Применяем фильтр Filter > Noise > Add noise… с включенной галочкой Monocromatic, переключателем на Gaussian и примерно 25 % шумности.
    Применяем фильтр Filter > Blur > Motion blur… с углом около 40 и степенью размытости около 500. Снимаем выделение (Select > Deselect)
    Выбираем первый (нижний) слой с черным кругом.
    Заходим в Blending options.
    Меняем цвет color overlay на # CECEDA (я буду называть цвета так. Это быстрее, чем перечислять RGB, и уж тем более быстрее вам быстрее его ввести. куда именно вводить этот параметр).
    Inner glow делаем черного цвета, blend mode = normal, choke = 0, size = 15, antialiased = вкл., range = 50.
    Outer glow делаем черного цвета, opacity = 80, blend mode = normal, spread = 0, size = 13, antialiased = вкл., range = 50.
    Включаем верхний слой. Рисуем анимированный радар * Уменьшаем его до 85 %: Edit > free transform с включенным сохранением пропорций.
    Заходим в Blending options.
    Inner glow делаем цвета #17F000, opacity = 100, blend mode = normal, choke = 0, size = 10, antialiased = вкл., range = 42.
    Outer glow делаем черного цвета, blend mode = normal, spread = 0, size = 3, antialiased = вкл., range = 50.
    Нам надо сделать надпись следующего вида:
    Рисуем анимированный радар *

    Для этого создадим с помощью Ellipse tool (U) вспомогательный слой с окружностью:

    Рисуем анимированный радар *
    (я скрыл для наглядности слой с черным кругом со свечением)

    Наведем на край окружности Horizontal type tool (T) и – пишем по кругу. Вспомогательный слой с окружностью удаляем.
    Надпись пока скроем, дабы не мешалась.
    Создаем над всей этой красотой папку (layer set), обзовем ее «детектор»
    В папке «детектор» создадим папку «кадр»
    В папке «кадр» нарисуем горизонтальную «палочку» цвета: #17F000
    Заходим в Blending options.
    Outer glow делаем цвета #17F000, opacity = 100, blend mode = normal, spread = 0, size = 8, antialiased = вкл., range = 38.

    Рисуем анимированный радар *

    Создаем новый слой над «палочкой» и рисуем в нем «конфету» wink.gif

    Рисуем анимированный радар *

    Применяем к ней Filter > Radial Blur… с параметрами: 25, spin, best. Поворачиваем при помощи Edit > Free transform так, чтобы «конфета» располагалась по горизонтали относительно своей оси:
    (примечание (рисунок): при применении фильтра radial blur... необходимо сначала сделать круглое выделение, так, чтобы "конфета" была в это выделение вписана. это нужно для того, чтобы эффект действовал только в пределах выделения, а не на весь холст, который у нас квадратный)

    Рисуем анимированный радар *




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

    Рисуем анимированный радар *

    Создаем новый слой под «палочкой» и рисуем в нем «обгрызенный тортик»:
    (примечание (рисунок): при применении фильтра radial blur... необходимо сначала сделать круглое выделение, так, чтобы "тортик" была в это выделение вписан. это нужно для того, чтобы эффект действовал только в пределах выделения, а не на весь холст, который у нас квадратный)

    Рисуем анимированный радар *
    (часть слоев отключено для наглядности)

    Применяем к нему Filter > Radial Blur… с параметрами: 100, spin, best.

    Рисуем анимированный радар *

    Поворачиваем при помощи Edit > Free transform так, чтобы просвет «тортика» располагался по горизонтали, после чего отрезаем нижнюю половину. Слой дублируем, копию разворачиваем: Edit > Transform > flip horizontal, Edit > Transform > flip vertical. Объединяем два слоя в один:

    Рисуем анимированный радар *

    Выделяем наш «квази-торт», и уменьшаем выделение на 85 % с сохранением пропорций (Select > transform selection), инвертируем его (select > inverse) и отрезаем от торта излишества, уменьшив его диаметр, таким образом, на 15%.
    Выбираем папку «кадр» в окне layers.
    Теперь нам нужен небольшой такой action.
    Заходим в окно Actions, создаем новый сет (create new set) и назовем его «радар». В нем создадим новый action (create new action), пишем название «кадры», жмем record и:
    Дублируем папку «кадр».
    Выбираем дубликат. Поворачиваем его на 5 градусов. (Edit > free transform)
    В окне Actions жмем «стоп». Выбираем action «кадры». Жмем «play». Повторяем до тех пор, пока поворот не достигнет 180 градусов, т.е. пока полоска снова не встанет в горизонталь.
    удаляем последнюю папку. Не нужен нам поворот на 180 градусов.
    Отключаем все папки «кадр». Рисуем анимированный радар *
    Включаем круговую надпись, которую мы выключили в 20 пункте. Рисуем анимированный радар *
    Сверху всей этой красоты можно создать ось, на которой все это крутится. (не в папке «кадр»!) Вид – по вкусу.

    Рисуем анимированный радар *

    Здесь один из «кадров» включен, но это для наглядности.

    но чего-то все-таки не хватает. Чего? Сетки! У радаров обычно имеются координатные сетки для оценки дальности объекта. Рисуем вот такую сетку:

    Рисуем анимированный радар *

    которую я нарисовал следующим образом: сначала самый большой круг нарисовал круглым шейпом Ellipse Tool (U) с применением стиля "рамка", после чего продублировал этот слой с кругом несколько раз, каждую из копий пропорционально уменьшая (Edit > Free Transform...). Ну а с поперечными линиями все еще проще. Line Tool (U) с дублированием и поворотом. Затем все кусочки сетки слил в один слой (в версиях до CS 2 - объединить нужные слои цепочкой и затем Layer > Merge linked, в CS 2 же все намного проще: выбираем группу слоев, щелкаем по ним правой кнопкой мыши и в контекстном меню выбираем - merge layers), поставил ему opacity = 40%, и разместил этот слой сразу под слоем (слоями) с текстом.
    Затем сделал его копию, перетащил ее на самый верх, под ось, и посавил ей opacity = 15%[list]
    идем в ImageReady.
    создаем количество фреймов в окне Animation = количеству папок «кадр».
    Выбираем последний фрейм, включаем последнюю папку «кадр». Рисуем анимированный радар *
    Выбираем предпоследний фрейм, включаем предпоследнюю папку «кадр».Рисуем анимированный радар *

    Выбираем… ну вы поняли, короче. До первого фрейма.
    теперь идем в окошко optimize и выставляем пресет gif, подобающий случаю. Какой больше нравится.
    File > Save optimized.

    Рисуем анимированный радар *

    Категория: Уроки анимации | Добавил: myphotoshop (30.08.2008) | Автор: копирайт: AlexanderKa
    Просмотров: 1221 | Комментарии: 5 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *:
    Copyright MyCorp © 2017