Вадим,
пожалуйста, прекрати приглашать меня как эксперта для ответов на твои вопросы.
Твои вопросы абсолютно бесполезны, получая на них ответы ты не повышаешь свой уровень знаний. Дизайн - это прикладная наука. Вопросы нужно задавать, столкнувшись с реальной проблемой. "Какую кнопку нажать, чтобы получить конкретный результат?". На этом принципе строится любое обучение. Задавая вопрос "Какой результат я получу, если нажму на эту кнопку?", ты просто тратишь время и забиваешь свою оперативную память бесполезной информацией.
По канонам типографики — конечно от базовой линии.
Но верстальщики ооочень редко верстают по бэйслайну. Вечно все отмеряют от нижних выносных элементов. Хотя давно все для них придумано https://www.smashingmagazine.com/2012/12/css-basel...
Как уже сказал Павел - фотошоп вам тут не поможет.
Но 2016 год на дворе и мир изменился.
Ostagram или погуглите, аналогов сейчас много.
Загружаете фото, которое хотите обработать, загружаете эту картинку из вашего вопроса и ждете волшебства.
Не конвертируй через фотошоп, он устал.
Заливай на giphy.
Потом можно скачать гифку, вставить ссылку, настроить размеры, настроить встраивание (например, на биханс)
