Найти в Дзене
NeuroWeb

Неделя 9. Почему все используют этот эффект?

Оглавление

Идет девятая неделя моего обучения. Мой заработок на данный момент равен нулю, и я все еще не начинаю искать клиентов.

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

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

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

Как убрать фон с фотографии

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

Просто загрузите фото, нейросеть все вырежет за вас. И не нужно устанавливать никаких сторонних программ. Все делается в окне браузера.

Результат работы в https://www.photoroom.com/background-remover/
Результат работы в https://www.photoroom.com/background-remover/

Как сделать фигуру неправильной формы

Если вы читаете этот текст, то вероятно вы знакомы с Тильдой и понимаете, что фигуры неправильной формы в нем делать не получится. Поэтому мы прибегнем к помощи сторонних ресурсов. Создания разных фигур неправильной формы можно использовать данный сайт.

Создание фигуры на сайте https://www.blobmaker.app/
Создание фигуры на сайте https://www.blobmaker.app/

Процедура предельно простая:

  • Выбираем цвет (к сожалению выбор цвета ограничен)
  • Двигаем бегунки, их всего два. Один определяет количество точек для скругления, второй изменяет углы. При этом постоянно генерируются новые фигуры.
  • Если вы не хотите разбираться с бегунками, можно просто нажать на кубик. В этом случае вам выдаст случайный результат.
  • Жмем кнопку загрузить и пользуемся.

Как заставить фигуру вращаться

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

  • Выделяем нужную фигуру и заходим в настройки анимации
  • Выбираем в качестве условия "element on Screen"
  • В строке "Loop" меняем базовую строку на "Loop". Это команда заставит вашу фигуру циклично повторять анимацию.
  • Дальше нажимаем "Add Step"
  • В появившемся окне ставим значение "60" в строке "Duration". Это длительность анимации.
  • В строке "Rotate" ставим значение "360" - это вращение на 360 градусов по часовой стрелке.
Настройка вращения объекта по часовой стрелке в Tilda
Настройка вращения объекта по часовой стрелке в Tilda

Это, собственно все. Теперь вы можете делать моднявый эффект, который используют на множестве сайтов, в рекламе и т.д.

Возможно вы мне скажете, почему это излюбленный эффект для многих заказчиков?

Информация оказалась полезной. Ставь лайк и подписывайся на канал. Будут здесь вещи и поинтереснее.