Animation in psd. How to pass it to the layout designer, and how should the animation look like?

Question

Design

Animation in psd. How to tell the layout designer how the animation should look like?
I drew a psd layout of the site. And how to arrange the animation so that the layout designer understands what and how it works
For example: when you hover over an image, it approaches or an inscription appears on it,

Answer 1

Описать словами что должно происходить с элементами. Можно лично, можно в документе или прямо в PSD файле разместить заметки (notes). Добавить примеры аналогичного поведения на других сайтах или показать конкретные плагины/скрипты (легко гуглится по нужным запросам типа "hover animation" или иные запросы согласно тому, что надо объяснить).
Вообще в макете можно показать сразу разные виды (я так и делаю). Например, разместить прямо в макете изображение курсора и показать вид при наведении. Для элементов сделать 3 папки: normal, hover и pressed, в которых будут лежать соответствующие виды элементов. Ещё один способ показать разные виды элементов на странице это использование композиций Layer comps — очень полезная штука. Если не пользуетесь, то очень советую почитать и изучить её.
А делать гифки под каждый элемент на странице слишком затратно по времени и не очень целесообразно т.к. нужные эффекты средствами Фотошопа достигаются не также легко, как каким-нибудь плагином (если вообще достигаются). Проще приучить себя делать в макете все состояния для интерактивных элементов и, при необходимости, словами и на примерах объяснять и показывать верстальщику поведение того или иного элемента.

Answer 2

Сделать GIFку

Answer 3

Спросить у верстальщика и сделать так как он попросит.

Answer 4

Если анимация сложная - то все кадры вам придется нарисовать.
Это как мультфильмы рисуют.

Answer 5

Отдельным документом сделать макет на моушен дизайна с максимально точным описанием

Answer 6

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