Как создать реалистичные 3D-объекты в Figma

1656623773 kak sozdat realistichnye 3d obekty v figma

автор Гболахан Таохед Фавале

Для использования Figma я использовал Adobe Illustrator для большинства своих дизайнов (например, логотипов, макетов, иллюстраций). Но с тех пор как я присоединился к «группе Figma», я бросил иллюстратору, чтобы сосредоточиться на Figma и узнать о ней как можно больше.

Я хотел обнаружить больше трюков с программным обеспечением, чтобы я мог получить конечные результаты, не являющиеся «типичными Figma». Это связано с тем, что проекты, которые я надеюсь сделать, не обязательно соответствуют программному обеспечению.

Figma — это больше инструмент для дизайна UI/UX, чем инструмент визуального дизайна или иллюстрации, например Adobe Illustrator.

Эта публикация рассказывает о том, как я исследую Figma вне UI/UX, чтобы открыть новые способы ее использования и новые вещи, которые я мог бы открыть, используя его как полноценный инструмент для дизайна. В конце концов, было не столь важно, какой тип дизайна я мог бы захотеть сделать или рискнуть.

Итак, я расскажу вам о том, как я придумал изображение выше.

Шаг 1: Создайте подобное поле

Первое, что я создал, это коробка, похожая на коричневую на рисунке выше. Это было создано с использованием фигур (только прямоугольников). Я знаю, что некоторые люди являются поклонниками инструмента ручка. Но в вышеприведенном примере инструмент «Перо» не дает нам гибкости создавать тени, добавлять градиенты или выполнять какие-либо манипуляции с объектами к отдельным фигурам или частям коробки.

1*Z00lKKJqwukXunl84Opinw
шаг первый?

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

1*jmv3ZmYhU31lFOq8dIbY6g
1*flcE2QrMjONEyC85lZqd1w
инструмент редактирования объекта

Шаг 2: добавляем затенение

Я добавил цвет, чтобы различать каждую сторону коробки, а также дать представление о том, как будут применяться тени, контраст и градиентная заливка. Это заложило основание, чтобы по бокам ящика можно было работать самостоятельно. Я также создал части коробки крышки.

1*Am7RNhHO6VGF-hOupNcVqg
создание обложек

Шаг 3: сделать его более реалистичным

Я добавил градиентную заливку к видимым крышкам коробки (f1 и f2), чтобы она выглядела гораздо более реалистичной и плоской. Обратите внимание на то, как градиент накладывается на f2? Я сделал то же для f1, а затем отрегулировал степень градиентной заливки в соответствии с направлением света на коробке.

1*Rf23OEHaAvNHFa6c95BTRg

После добавления градиента я прибавил тени. Когда лучи света падают на объект, автоматически появляется тень относительно направления света и объекта.

1*G8uX_CbCCNk1oKGQPmBN_w
создание слоя тени путем копирования существующего слоя и его редактирования

Примечание: выделенный выше слой на самом деле находится под видимым. Это то, что будет изменено, чтобы образовать тень.

Шаг 4: регулировка крышки

Чтобы добавить тень, я просто скопировал f1 и вставил ее на тот же слой. Затем я выбрал оригинал/начальную копию f1 (которая находится под только скопированным ‘f1’), щелкнул инструмент редактирования объекта и изменил его размер, чтобы немного выступать под копией f1. Это было сделано просто для того, чтобы создать эффект тени. Функция эффекта тени Figma по умолчанию не дала бы гибкости для создания коричневой рамки на изображении.

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

В Figma вы можете легко скопировать и вставить стиль/эффект из одного слоя в другой, используя ctrl+alt+c для копирования и ctrl+alt+v на слое, к которому нужно применить подобный эффект или стиль.

1*weTcM5eJwXqNTh1hNL5kSA

Шаг 5: работа с телом

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

1*CQhAsTiCwk3LCa8zAye_pQ
Первое изображение: B1 с градиентом. Второе изображение: B1 и B2 с примененным градиентом

Все, что нам нужно для b1 и b2 это градиентная заливка, как показано на иллюстрации выше.

1*tC9U9RJipP1mmrY3dNLLzA
b1 и b2

Вы заметили, что коробка начинает выглядеть настоящей? Можете ли вы заметить разницу, когда градиент добавлен в b1, но еще не в b2? Или когда градиентная заливка применяется к обеим сторонам?

Идём дальше.

Шаг 6: вызов интерьера

Работа над внутренней частью коробки (b3 и b4) была несколько сложной. Мне пришлось сделать паузу на несколько минут, чтобы изучить тени и уровень насыщенности в разных углах внутренних частей, прежде чем думать, как это воспроизвести – все еще используя тени и градиенты.

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

1*xps_zitJODTxsbZ1INf3XA

Обратите внимание, как градиенты располагаются вертикально, когда одна из цветных коробок на подводке градиента находится близко к другому? Идея состоит в том, чтобы тень выглядела так, словно она выросла изнутри коробки. Хотя мы не можем видеть внутри коробки, мы знаем, что когда она становится глубже, лучи света уменьшаются, из-за чего внутренние части автоматически темнеют.

Заключительная часть: тени под коробкой

Здесь мы возьмем ту же идею, которую я использовал выше, чтобы создать тени для обложек коробки выше (копирование слоев, изменение размера и применение некоторых темных цветов и эффектов) и повторим это. Хотя я уже применил это на изображении выше, приведенный ниже является обходным путем?

1*YuQ5gNYsFZh43QslCvu6bQ
изменяя размер исходного слоя b1, расширяя высоту к основанию и добавляя более темный градиент.

Я сделал дополнительные копии B1 и B2 и выбрал оригинальный слой. Затем я немного перетащил его вниз, прибавил более темный цвет, немного размыл, а также изменил его размер, чтобы иметь перспективу. Создание реалистических изображений в искусстве и архитектуре – это все о перспективе.

Теперь мы создали реалистичную 3D коробку – она не идеальная, но достаточно реалистичная. ☺️

1*tC9U9RJipP1mmrY3dNLLzA
наша реалистичная 3D картонная коробка

Последние настройки

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

Как же я этого достиг?

Я создал дополнительные копии b3 и b4 и применил градиентный слой к их оригинальным копиям (которые являются темными частями, обращенными к нам на рисунке ниже).

1*__4V1Or93Bzur9qvXgzQTA
применив градиент к b4, чтобы увеличить контраст
1*zA-1ZEpHV8IYS3jjPlZFvQ

При более подробном наблюдении вы заметите, что кажется, что ребра b1 и b2 имеют собственную тень в направлении b4 и b3 соответственно. Это потому, что световые лучи падают на них по бокам, проецируя свои тени на ближайший доступный слой или объект.

Помните дополнительные копии b1 и b2, которые я предпринял раньше, чтобы сформировать тень под коробкой? Ну сначала я изменил размер этих двух слоев (оригинальный b1 и b2), чтобы они выступали над скопированными версиями (b1 и b2). Вы можете видеть их как текущие внешние стороны коробки, на которые падает луч света. Затем я добавил еще один более темный градиентный слой.

Ниже показано, как выглядит коробка сейчас.

1*WQGPpKjovMxOaDb6Fxyu8w
финальная версия

Примечание. Изображение выше чуть-чуть отличается от изображения во вводной части этого произведения, поскольку мне пришлось создать еще одно, чтобы объяснить некоторые вещи, которые я сделал в первом дизайне. Это было очень быстро ?

Чтобы получить более подробную информацию и понять все, что я сделал, здесь Является ссылкой как на оригинальную версию, так и на созданный мной пример.

Спасибо, что прочли!

Не стесняйтесь обращаться в Twitter @GbMillz

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

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