С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создаем gif анимацию в фотошопе - Целующиеся смайлики

Создаем gif анимацию в фотошопе - Целующиеся смайлики

В этом уроке фотошоп подробно рассказано как сделать gif анимацию в программе Adobe Photoshop. Мы вместе с вами шаг за шагом создадим анимированные целующиеся смайлики и у вас больше не будет вопросов как делать анимацию и тем более как сохранить анимацию в фотошопе используя палитру Animatiom (Анимация).

Итак, давайте начнем!

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

Могу сказать, что изначально Анимация была для меня достаточно трудным инструментом, но я попытаюсь как можно более в доступной форме объяснить Вам его суть. Он похож на флэш-анимацию, но, конечно же, не является таким сложным инструментом и с меньшим количеством элементов в работе. С другой стороны может показаться, что это очень просто создать два целующихся смайлика, но не будем торопиться с выводами. Сложность состоит в работе над крошечными элементами, добиваясь того что бы каждый пиксел находился на своем месте. Это все делается для того, что бы получить очень милых смайликов. Выбор правильных цветов также очень важен.

Как создать анимированные целующиеся смайлики в Photoshop

Шаг 1 - Смайлик девочки и смайлик мальчика

Создайте новый файл размером 100*50 пикселей. С помощью простых настроек нарисуйте светло-коричневый пол и светло-розовые стены на фоне. Сейчас я собираюсь сделать два маленьких смайлика: один синий (мальчик) и один розовый (девочка), для этого я использую следующий простой метод. Основой этого урока будет работа с маленькими областями. Для того что бы увеличить холст, что бы увидеть все детали, используйте сочетание клавиш CTRL и «+» что бы увеличить, CTRL и «-» для уменьшения масштаба и CTRL и «1» для фактического размера. Нарисовать идеальный круг вы сможете с помощью такого инструмента как Ellipse tool (Эллипс) и нажатием кнопки SHIFT на клавиатуре. Я выбрал голубой градиент (Gradient) для этой фигуры, и голубую обводку (Stroke).

 

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

Создайте новый слой (CTRL+SHIFT+N) поверх остальных и нарисуйте лица. Используйте инструмент Pencil Tool (Карандаш), размером 1 пиксель.

В палитре слоев (Layers) выделите все три слоя, начиная с верхнего, и объедините их в группу под названием «Мальчик». Повторите шаги, на этот раз изображая смайлик-девочку в розовых тонах.

Наша картинка теперь выглядит вот так:

 


Шаг 2 - Основы анимации в фотошопе

Чтобы создать анимированный gif в Photoshop следует использовать инструменты анимайции (Animation) фотошопа. Вы можете найти их тут: меню Окно - Анимация (Window Menu - Animation). Вы увидите, что в нижней части экрана появится новая область, под названием Анимация. Сначала я хотел бы немного рассказать о кнопках в этой области:

  • o    Selects Looping Options: определяет, сколько раз ваш ролик прокрутится перед тем, как остановиться. Он может продолжаться вечно, вы также можете выбрать определенное количество циклов.
    o    Select First Frame, Select Previous Frame и Select Next Frame – очевидные инструменты навигации между кадрами.
    o    Plays Animation Button начинает проигрывать ваш ролик, пока вы не нажмете Stops Animation если вы выбрали Forever looping. В противном случае, ролик остановится после установленного количества циклов..
    o    Twins Animation Frames открывает новое диалоговое окно, где вы можете задать количество продублированных кадров для переходной фазы, а также выбрать, какие параметры необходимо сохранить на продублированном кадре: position, opacity, effects.
    o    Duplicates Selected Frames, дублирует выбранные слои. Используйте кнопку SHIFT, чтоб выбрать диапазон кадров или  CTRL для выбора отдельных кадров.
    o    Deletes Selected Frames, удаляет слои, которые вы выбрали. Используйте кнопку SHIFT, чтоб выбрать диапазон кадров или  CTRL для выбора отдельных кадров.

Вы видите, что на каждом кадре есть номер сверху, который обозначает его позицию, и количество секунд от 0 (без задержки) до 240 секунд (максимальное время). Количество секунд, фактически, означает как долго каждый кадр будет оставаться на экране перед появлением следующего. Вы можете просто перетащить кадр на необходимую позицию.

 

Шаг 3 - Создание GIF Анимации в Photoshop

Давайте приступим непосредственно к анимации. У нас есть две группы, – Мальчик и Девочка, – с которыми мы работаем. Я мог бы выполнить слияние слоев, но наш способ оставляет возможность легко изменять формы и цвета. Итак, у нас есть первоначальный кадр, который содержит все видимые слои. Установите время задержки кадров на 0,2 сек. Вы видите. Что при смене для слоя позиции, цвета, стиля и т.п., эти изменения отражаются также в кадре. Нажмите кнопку Копировать выделенные кадры (Duplicates Selected Frames) чтоб создать новый кадр. Теперь двигайте группу Мальчик и группу Девочка так, чтобы они встретились в центре кадра.  Нажмите Tweens Animation Frames (настройки по умолчанию) и установите 5 кадров;  теперь кадр 2 стал кадром 7; было создано 5 промежуточных кадров, и мы получили мягкий переход из позиции А в позицию Б.

На кадре 7 добавьте три сердечка. Я сделал из анимированными с помощью Tween Animation Frames, они двигаются вверх-вниз. Получился всего 31 кадр. Легкий способ создать это – сделать анимацию с сердечками для цикличного эффекта и просто выбрать кадры, а затем нажать Duplicates Selected Frames. Для последнего кадра увеличьте Delay Frame Time с 0,2 сек на 2 сек.

Шаг 4 - Сохраните анимацию Photoshop

Пришло время сохранить нашу анимацию photoshop. В меню Файл (File) выберите Сохранить для Веб & устройств (Save for Web & Devices). В новом окне выберите GIF, параметры повтора (Looping Options) поставьте - Всегда (Forever) (или выберите остановку после нужного количества циклов), затем нажмите кнопку Сохранить (Save). Если вы откроете анимацию в программе для просмотра изображений на вашем рабочем столе, она не сработает! Чтобы просмотреть ролик нужно открыть файл GIF в веб-браузере.

GIF анимация целующиеся смайлики

На этом все, надеюсь вам урока оказался полезным.

Перевод урока: Мария Репко

Источник урока



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • Источник: http://photoshop-help.ru
  • 30.11.2011
  •   Просмотров: 24034
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Sasha S (05.11.2013 | 18:53)
 когда на седьмом кадре рисую сердечки , получается так , что на каждом предыдущем кадре появляются сердечки ! не могу разобраться в чём проблема
 


кто нибудь ответит на вопрос или нет ? почему при рисовании сердечек на 7 кадре , сердечки появляются на всех кадрах ? спасибо за внимание   
Нина (11.06.2014 | 12:59)
Цитата: Sasha S
 когда на седьмом кадре рисую сердечки , получается так , что на каждом предыдущем кадре появляются сердечки ! не могу разобраться в чём проблема
 


кто нибудь ответит на вопрос или нет ? почему при рисовании сердечек на 7 кадре , сердечки появляются на всех кадрах ? спасибо за внимание   

 
Та же фигня
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки