T
T
TheBenifis2015-12-28 15:11:05
Design
TheBenifis, 2015-12-28 15:11:05

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

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 the question

In order to leave comments, you need to log in

6 answer(s)
P
Pavel Designer, 2015-12-28
@TheBenifis

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

Сделать GIFку

F
FoxInSox, 2015-12-28
@FoxInSox

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

N
Nivka, 2015-12-29
@Nivka

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

Андрей, 2015-12-28
@svistiboshka

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

A
AlexandrKom, 2016-07-19
@AlexandrKom

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question