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

Анимация в psd. Как передать верстальщике как должна выглядеть анимация?
Я нарисовал psd макет сайта. И как оформить анимацию что бы верстальщик понял что и как работает
Например: при наведение на картинку она приближается или на ней появляется надпись,
  • Вопрос задан
  • 2778 просмотров
Решения вопроса 2
pozZzitiv
@pozZzitiv Куратор тега Дизайн
Дизайнер и перфекционист
Описать словами что должно происходить с элементами. Можно лично, можно в документе или прямо в PSD файле разместить заметки (notes). Добавить примеры аналогичного поведения на других сайтах или показать конкретные плагины/скрипты (легко гуглится по нужным запросам типа "hover animation" или иные запросы согласно тому, что надо объяснить).

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

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

Если нужно что-то особенное, то можно дать ссылку например на https://daneden.github.io/animate.css/
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@FoxInSox
Спросить у верстальщика и сделать так как он попросит.
Ответ написан
@Nivka
Если анимация сложная - то все кадры вам придется нарисовать.
Это как мультфильмы рисуют.
Ответ написан
svistiboshka
@svistiboshka
живые веб интерфейсы
Отдельным документом сделать макет на моушен дизайна с максимально точным описанием
Ответ написан
@AlexandrKom
Например: при наведение на картинку она приближается или на ней появляется надпись

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы