Анимация в psd. Как передать верстальщику, и как должна выглядеть анимация?

Question

[TheBenifis]

Анимация в psd. Как передать верстальщике как должна выглядеть анимация?
Я нарисовал psd макет сайта. И как оформить анимацию что бы верстальщик понял что и как работает
Например: при наведение на картинку она приближается или на ней появляется надпись,

Answer 1

[Pavel Designer]

Описать словами что должно происходить с элементами. Можно лично, можно в документе или прямо в PSD файле разместить заметки (notes). Добавить примеры аналогичного поведения на других сайтах или показать конкретные плагины/скрипты (легко гуглится по нужным запросам типа "hover animation" или иные запросы согласно тому, что надо объяснить).

Вообще в макете можно показать сразу разные виды (я так и делаю). Например, разместить прямо в макете изображение курсора и показать вид при наведении. Для элементов сделать 3 папки: normal, hover и pressed, в которых будут лежать соответствующие виды элементов. Ещё один способ показать разные виды элементов на странице это использование композиций Layer comps — очень полезная штука. Если не пользуетесь, то очень советую почитать и изучить её.

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

Answer 2

[Денис Инешин]

Обычно рисуют отдельным слоем состояние :hovered (или любое другое). + комментарий, что переход должен быть анимирован. Дальше верстальщик должен сообразить.

Если нужно что-то особенное, то можно дать ссылку например на https://daneden.github.io/animate.css/

Answer 3

[Дмитрий Гавриленко]

Сделать GIFку

Comments

[Денис Инешин]

Джифку))

Answer 4

[FoxInSox]

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

Answer 5

[Nivka]

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

Answer 6

[Андрей]

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

Answer 7

[AlexandrKom]

Например: при наведение на картинку она приближается или на ней появляется надпись

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