ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Ищешь чем бы украсить свой форум или сайт к Хэллоуину? 🎃 Мы поможем нарядиться! 🎃

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



ГАЙД: Первые шаги в работе с анимацией

Сообщений 1 страница 2 из 2

1

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

Введение. Где и как делается анимация?

Способ 1. Через окно анимации в фотошопе

Открываем "Window - Animation" (Окно - Анимация). В новых версиях ФШ "Шкала времени".

# увеличивается по клику

Способ 2. Через Image Ready

Adobe ImageReady CS - это приложение фотошопа для работы с анимацией. Открывается как отдельная программа.
Необходимо сначала провести в самом фотошопе предварительную работу, потом сохранить файл в формате psd (Файл > Сохранить как...), а затем открыть сохраненный файл в ImageReady.

Сохранять в ImageReady нужно через оптимизацию:

# увеличивается по клику

Подробней о работе в Image Ready

Чем, собственно, удобно это приложение - это тем, что в нем хорошо работать, если у вас нет необходимости создавать/обрабатывать картинки в фотошопе. Например, если у вас есть несколько любимых аватарок одинакового размера и вы хотели бы совместить их в одну анимированную. Сохраняем каждое изображение (для простоты в отдельную папочку) и называем их тоже циферками - в том порядке, в котором они должны "проигрываться".
(это позволит нам избежать лишних операций при экспорте файлов)

# увеличивается по клику

Открываем Acrobe ImageReady CS
Файл > Импортировать > Файлы как Фреймы. Выбираем папочку с нашими рисунками.

У вас появятся ваши картинки в окне анимации в виде отдельных кадров.
Далее можно настроить анимацию и поработать с стилями слоев.

Редактирование анимированных изображений

Для этого тоже оптимален ImageReady.

Размер изображения: Допустим мы хотим сделать из изображения размеров 100х100 пкс иконку размером 40х40. Перетаскиваем гифку в Acrobe ImageReady CS.

# увеличивается по клику

затем Image > Size и устанавливаем нужный размер

# увеличивается по клику

Изменить порядок слайдов: Это можно сделать простым перетаскиванием:

# увеличивается по клику

Зажимаете мышкой фрагмент и перетаскиваете на этой панельке его в то место, где вы бы хотели его видеть.

Видоизменение анимированного изображения/раскадрировать анимацию.

  • Для этого сначала нужно перетащить его в Acrobe ImageReady CS. Затем жмете Файл > Экспорт > Фрагменты анимации как файлы. Там выбираем папочку, в которую нам нужно сохранить файлы.

  • Открываем папочку и перетаскиваем все фрагменты в фотошоп. И видоизменяем файлы. (например, я сделала все файлы черно-белыми). Каждый видоизмененный фрагмент сохраняем (можно сохранить поверх старых с теми же именами).

  • Снова экспортируем видоизмененные файлы в Acrobe ImageReady CS. Затем выбираем интервал показа слайдов и сохраняем. (как это все делается см. предыдущие посты). Вот что у меня получилось: https://i.imgur.com/EqzzH0h.gif

!!! Черно-белыми кадры можно сделать и в самом ImageReady, как и множество других манипуляций. (я это сделала только для примера) Поэтому при работе стоит сначала поискать стандартные функции фотошоп, чем маяться с обработкой целой кучи кадров по отдельности.

Инструменты окна анимации

# увеличивается по клику

  • создать дубликат кадра

  • удалить кадр

  • время отображения кадра

  • создать промежуточные кадры

  • панель управления выделением кадра (в начало, предыдущий кадр, проиграть, следующий кадр)


Часть 1. Анимация - чередование картинок

Шаг 1. Подготовка кадров

Файл > Новый: создаем холст нужного размера и рисуем на нем (или вставляем в него нужные картинки).

# увеличивается по клику

затем создаем новый слой и размещаем на нем второй кадр (рисунок).

# увеличивается по клику

Для примера, я создала 5 слоев и нарисовала на них цифры.

Шаг 2. Создание анимации

переходим в Image Ready или открываем окно анимации.
Перед нами окошко из 1 кадра. Создаем 4 дубликата кадра (всего должно получиться 5 кадров).

# увеличивается по клику

Теперь работаем со слоями. Делаем невидимыми те слои, которые нам не нужны в конкретном кадре. Например, в первом кадре убираем слои 2, 3,4 и 5, во втором 1, 3,4 и 5 и т.д.

# увеличивается по клику

Настраиваем время отображения кадров

# увеличивается по клику

Сохраняем: Файл > Сохранить для Web, ставим формат gif

https://forumupload.ru/uploads/0007/e3/f7/32921-1.gif


Часть 2. Анимация - плавный переход кадров (растворение)
Часто могли видеть красивые переходы на баннерах (плавно появляющиеся надписи, "перетекание" картинок одно в другую). Делается это с помощью кнопки промежуточных кадров. Итак, я создала 2 слоя с рисунками и фоновый слой.

# увеличивается по клику

Работаем с анимацией. Создаем дубликат кадра, на первом кадре оставляем видимым только первый слой, а на втором кадре - второй слой. Можно еще заранее настроить время отображения кадров. (Если тут что-то не понятно, читаете предыдущий пост)

# увеличивается по клику

Выделяем второй кадр и нажимаем кнопку создания промежуточных кадров.

# увеличивается по клику

В выскочившем окошке задаем количество промежуточных кадров. (чем больше их будет, тем медленней/плавней будет переход)

# увеличивается по клику

Сохраняем в формате gif.

https://forumupload.ru/uploads/0007/e3/f7/32930-5.gif

Вот пример картинки, где применялась такая анимация:

https://i.imgur.com/PS6Dsbk.gif

Поиграйте с настройками кадров, порядком их "перетекания" - и может получиться много интересных вариантов.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

2

Гайд отформатирован и воскрешён, картинки перезалиты.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
http://forumstatic.ru/files/0015/1e/ae/64347.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."