Дизайн и оформление соцсетейNeumorphism в Photoshop

Как создать эффект неоморфизм в Photoshop

В этом уроке вы узнаете, как создать эффект Neumorphism в Photoshop. Для работы мы будем использовать стили слоя, тени и сочетания цветов. Урок простой и не займет у вас много времени.

Памятка с цветами

  • Цвет BG #F1F3F6   Цвет тёмной тени #3754AA
  • Цвет BG #E7EDF2   Цвет тёмной тени #ABC2D4
  • Цвет BG #272934   Градиент шейпа #272934 – #3B3D4B   Цвет тёмной тени #14151D   Цвет светлой тени #303240

 

Еще больше вариантов цветовых палитр на сайте: http://santhoshsivan.com/neu.html

Там же вы можете сгенерировать CSS эффекта неоморфизма

Шаг 1 - создаем документ

Для начала создадим новый документ. Вы можете использовать размеры в зависимости от вашей задумки. Я буду использовать размеры как в видео-инструкции. Используя инструмент заливки (горячая клавиша G) зальем бэкграунд (задний фон) в темный цвет. 

Цвета для создания эффекта неоморфизма можно взять из памятки.

Шаг 1 Неоморфизм
Шаг 1.2 Неоморфизм

Шаг 2 - создаем прямоугольник

Используя инструмент Прямоугольник (горячая клавиша U), разместим прямоугольник на рабочем холсте. Цвет прямоугольника необходимо выбрать такой же как задний фон. Используя свойства прямоугольника, скруглим углы на необходимый угол. Угол вы можете выбрать произвольно, в зависимости от вашей задумки.

Шаг 2 Неоморфизм
Шаг 1.2 Неоморфизм

Шаг 3 - добавляем стиль слоя Drop Shadow - бросить тень

Двойным щелчком левой кнопки мыши по слою с прямоугольником на панели слоёв вызываем меню стилей слоя. 

Настраиваем стиль слоя Drop Shadow (Бросить тень) как на скриншоте. 

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

Основной рекомендацией к тени будет то, чтобы она отбрасывалась только в две стороны объекта.

Цвета тени также можно использовать из памятки.

Шаг 3 Неоморфизм

Шаг 4 - добавляем еще один стиль слоя Drop Shadow - бросить тень

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

Будем использовать белый цвет тени. Настройки можете использовать как на скриншоте, или выбрать индивидуальные.

 

Шаг 4 Неоморфизм

Шаг 5 - радуемся полученному результату

Шаг 5 Неоморфизм

Используя стиль внутренняя тень, вы можете создать эффект нажатой кнопки – впуклости. Для подробной информации смотрите видео в начале поста.

 

Добавить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Оставить комментарий