Как сделать неофморфизм элементы 2020?
Первый раздел - мои мысли по поводу перерождении сквеморфизма в 2020 году, если вам они не интересны, то можете сразу перейти к разделу “Создаем неофморфизм элементы”.
Мои мысли о неоморфизме в 2020
Как можно заметить, просматривая ресурсы вроде Dribbble и Behance, в начале 2020 года, все большую популярность набирает неоморфизм, реинкарнация скевоморфизма.
Причины данного явления просты, когда человек к чему-либо привыкает, ему хочется ощутить что-то новое. Плоский дизайн перестал впечатлять людей, и тот объем и глубина, которые может предоставить неоморфизм, насыщает желание новых ощущений.
Поэтому неоморфизм будет восприниматься пользователями, как что-то интересное и необычное.
Теперь скевоморфизм может не только исполнять роль проводника, знакомящего человека с электронными устройствами, посредством схожести дизайна приложения с дизайном привычных в жизни вещей, как было в начале 2000-х годов, а просто быть глотком “новизны”.
Итак,
Создаем неоморфизм элементы
Для примера я беру элементы своих работ. Первый пример, выполнен в светлых тонах и это круглые кнопки как можно увидеть на рисунке ниже.
Я буду работать в Figma, но вы можете выполнить мои действия в любой другой программе.
- Все начинается с заливки фона, в данном примере я выбрал цвет #E1E6EC.
2. Далее необходимо расположить элемент и сделать его одним цветом с фоном.
3. Накладываем первую тень на элемент (Drop Shadow). Тень со следующими параметрами, смещение “X -9, Y -9”, размытие “Blur 16”, и цвет — обыкновенный белый #FFFFFF, с интенсивностью 50%.
4. Накладываем вторую тень на элемент. Тень со следующими параметрами, смещение “X 9, Y 9”, размытие “Blur 16”, и цвет — #A3B1C6, с интенсивностью 50%. Готово!
Теперь, выполним кнопку немного другим способом. И получим кнопку как на примере 2.
- Фон в данном примере — градиент #3A3D4E и #1F1523. Его расположение не критично, и легко определяется на глаз.
- Располагаем наш элемент, в данном случае 75x75, и тоже выбираем для него градиент. Цвета #4D3C50 и #1A1523 c интенсивностью 100%.
3. Накладываем тень на элемент. Данная тень имеет следующие параметры, смещение “X 3, Y 3”, размытие “Blur 13”, с черным цветом #000000 и интенсивностью 100%. На данном этапе готова первая часть кнопки.
4. Приступаем ко второй части кнопки. Создаем еще один элемент, в данном случае 90x90. С градиентом #271827 и #2С2535 c интенсивностью 100%.
5. Теперь накладываем (Drop Shadow) две тени.
Верхняя тень со следующими параметрами, смещение “X -4, Y -4”, размытие “Blur 8”, и цвет — #584С62, с интенсивностью 30%.
Нижняя тень со следующими параметрами, смещение “X 7, Y 7”, размытие “Blur 16”, и цвет — #150С19, с интенсивностью 100%.
6. Далее присваиваем объекту еще одну тень, только в этот раз Inner Shadow. Параметры следующие, смещение “X 4, Y 4”, размытие “Blur 8”, и цвет — #000000, с интенсивностью 35%.
7. Далее добавляем элементу обводку (Stroke), с параметром Inside и градиентом цветов #151923 и #614C63.
8. Объединяем наши 2 элемента и получаем готовую кнопку.
Поздравляю, вы прошли все пункты и теперь умеете работать с элементами используя неоморфизм.
Это мой первый опыт написания статьи. Пожалуйста не забывайте ставить ладошки, это очень мотивирует меня,если есть вопросы, пишите комментарии под статьей, с удовольствием отвечу.
