Как сделать фото до и после

С помощью формата "До и После" можно сравнить городские улицы "тогда и сейчас", показать известных людей в молодости и сегодня, результат таяния ледников или других событий. Как создать "До" и "После"? Вы можете создать собственное сравнение за несколько минут с помощью универсального конструктора интерактивного контента Interacty. Для этого откройте галерею шаблонов и выберите механику "До и после". В галерее вы найдете шаблоны с заголовком, надписью и кнопкой "поделиться".

Если вы планируете внедрить проект на свой сайт и хотите получить слайдер "До и после" в чистом виде, остановитесь на шаблоне без дополнений. Вы всегда сможете добавить их позже. Подходит ли он вам?

Нажмите "Использовать шаблон". Если у вас нет аккаунта, сервис предложит вам создать его бесплатно, и это займет меньше минуты. Если у вас уже есть аккаунт, вы сразу попадете в редактор Interacty.

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

Все это поле теперь можно масштабировать и перемещать в рабочем пространстве. Когда вы это сделаете, на панели справа появятся кнопки загрузки изображений для левого и правого изображений. Нажмите кнопку "Редактировать загрузку", и вы увидите всплывающее окно с возможностью выбора или загрузки изображений. Для примера мы взяли фотографии тающих ледников с сайта NASA.

Если вы выбрали шаблон без текстов, ваш проект готов - публикуйте его! Если вы выбрали шаблон с дополнениями, самое время изменить тексты, настроить шрифт, убрать лишние элементы. Все блоки можно перемещать.

Если вы хотите добавить больше текста, например, переместите блок с фотографиями вниз - он автоматически увеличится в высоту. Если вы хотите добавить логотип или, скажем, кнопку Поделиться ВКонтакте, нажмите режим Эксперт на панели справа. В этом режиме вы можете добавлять тексты, картинки и кнопки, перетаскивая их в рабочую область или просто щелкая по нужному элементу. В итоге у вас получился такой дизайн: Если вы активно занимались редизайном, не забудьте переключиться на мобильный редактор, чтобы адаптировать дизайн для мобильных устройств.

Просто настройте блоки и верните "расползшийся" текст и кнопки в рабочую область - это займет всего около минуты. Перед публикацией вы можете настроить, как ссылка на ваш проект будет отображаться в социальных сетях. Для этого перейдите на вкладку "Проверка" и нажмите на кнопку "Изменить". Откроется окно, где вы можете выбрать заголовок и пояснительный текст, и даже загрузить фотографию - вы будете знать, что она с сайта NASA.

Посмотрите на панель слева. Экраны 1 и 2 предназначены для настройки внешнего вида поста в Facebook и ВКонтакте при нажатии кнопки Поделиться, поскольку мы установили две социальные кнопки. В нашем примере мы будем использовать одни и те же значения везде. Если вы планируете встроить проект на сайт - в поле "Redirect" укажите страницу, на которой он будет размещен. После публикации проект будет выглядеть красиво и именно так, как вам нужно. Теперь смело публикуйте свой проект: ставьте прямую ссылку на проект или встраивайте его на свой сайт или блог, используя код, который вы получили при публикации.

Учебник актуален по состоянию на октябрь. Следующие проекты были реализованы с использованием этой технологии.

Инструкции актуальны по состоянию на октябрь.

Навигация

Comments

  1. Что то слишком мудрено… И по-моему расчитано на блогера чем на вебмастера