Как я спроектировал известное здание в изометрическом 3D с помощью Figma

1656587556 kak ya sproektiroval izvestnoe zdanie v izometricheskom 3d s pomoshhyu

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

viM7c-W3PjUbmCPhgcOD5LJhG9Y9pBAM7OG0
Оригинальное изображение против моего изометрического 3D изображения.

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

С тех пор как я разработал свой первый 3D-объект в Figma, я стал больше интересоваться воспроизведением различных сложных объектов и иллюстраций. В конце концов это поможет мне улучшить свои навыки дизайна. Я хочу создавать дизайны, заставляющие людей думать «Вау! Вы действительно использовали Figma для этого? Я хочу услышать, как они выражают свое удивление, поскольку они считали Figma инструментом для дизайна интерфейса пользователя.

Именно так я лично хочу позиционировать Figma внутри своего ближайшего сообщества и за его пределами. Как говорят разработчики, «дело не о доступных инструментах, а о том, насколько хорошо эти инструменты можно использовать». Действительно речь идет о том, как эти инструменты можно использовать для достижения желаемых результатов. Кроме того, важнейшим аспектом разработки программного обеспечения является то, что определяет ваш уровень владения определенным языком программирования. Хотя я тоже мало делаю фронтенд.

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

Хотя изометрические дизайны постепенно становятся популярны, я хочу выйти за рамки обычных изометрических 3D-проектов. Я хочу, чтобы они двигались к чему-то более реалистичному, сохраняя при этом свою оригинальность.

Теперь вернемся к делу. Я хочу вернуть его к истокам (африканцы, а-у! Я знаю, что некоторые из нас знают эту популярную песню JJC. Лол.) Ну, это первый дизайн из моего знакового проекта Isometric Nigeria 3D, и он также является одним из самых сложных. Я считал, что если я смогу успешно спроектировать это здание (Национальный театр в Лагосе), я смогу спроектировать любой другой изометрический 3D-объект.

Этап 1: Предварительное проектирование

Я начал с того, что потратил некоторое время на изучение здания. Я использовал изображение, которое я получил от Google как ориентир, перенеся изображение в свою рабочую область Figma. Пока я работал над дизайном, я продолжал изучать эталонное изображение и продолжал настраивать дизайн до тех пор, пока не получил что-то хорошо изготовленное.

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

Этап 2: Правильное проектирование (Создание верхней секции сиденья театра)

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

BYH0t8jp-PoVmlULTBvYPwE-hA7mqCca7V7G
Шаг 1 дизайн.

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

Neu8RSh8UkvEJ7SS8Bxrq1R4yZkBIT3Ix-Eo
Шаг 2: закладка фундамента
cypJDUWFr7txnAGTjf0H7vNm1905NsszkVCT
Градиентная заливка.
YrQTWjawMGBFL34Nkd8qTLZGepOPNb1UOq2I
Градиентная заливка 2.
0cusFCQp55dfxRI7YQ5Ry2dFybFKSTmSbGQW
Градиентная заливка 3.

После завершения следующим этапом было создание нижней части здания.

3 этап: Оформление наружной части сцены театра

Я создал прямоугольник, применил радиус угла 100 пикселей к верхнему левому и правому углам, а также применил линейную градиентную заливку. Угловой радиус и градиент используются, чтобы показать, что структура круговая. Результат – изображение ниже.

FZQyWXCfV5wBWOgEh6vrkCaFwYxKz4Z-SKi1

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

1R1ou1-eSbsQktblpfU5jOX3f1lh9vdcAzk3

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

t5ejchg827bKZ8PRWlmzQbK53KINY5GyvbmE

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

M0ns6IXkxAathFKIxY6TVhnJWr7n0-PxNzTq
UPa5emAj91tBY3c2rOdiwOthTCHp0Acxodzy

Этап 4: Проектирование первого этажа

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

VMKuNRdLcMf4r83ABixKLBenQLPVdAczGTa5

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

3Ku83JUPN3bUv2hRdZ2txeAEYNGeoVOS06NM

На картинке выше я создал 12 прямоугольников, аккуратно размещенных друг на друга, которые я изменил, чтобы получить изображение ниже

ZXLHjRdgboIgoA8LE6xEI71yPqmmeRAUhqdE

Этап 5: Добавление дополнительных эффектов

Я применил линейную градиентную заливку и тень к шести светло-серым прямоугольникам выше. Градиент придает ему реалистичный вид блока стен с отражающимся от него светом. Я добавила тень, чтобы поддержать этот вид и эффект. Более темные прямоугольники внизу – это только плоские стены/основание здания. Тени шести светло-серых прямоугольников снаружи распространяются на изогнутые стены/столбы, на которые он бросал.

-4DWFO-ew66kTsqAPEgIYQk6Wc0sWAj7wmyW
Градиентная заливка.

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

A-wX2G6gCIaBplbbp0wfXcR8DS1SILpa-1HS

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

oBfPt42WqSUGImR6iP7ByclbR4d5xPe--clU

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

AWPu85pTyB6vhp2r3SFFlMgVgPUZ1Etw2H8g

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

sPBpUyVGW8OSHvfTX7RJEyQkkshcoW4MBYDm

Этап 6: Работа над внешними столбами

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

aauqsoQsAH3EyIfsLYIaqkcBny0mf2QcZw9I
вертикальные столбы

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

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

nge-viTdiWZIgeoydp1Of7OQCXJLutfsFXNf
Горизонтальные столбы

Этап 7: Проектирование крыши

Я совершил какую-то магию на верхней части вертикальных столбов. Я создал новый прямоугольник и использовал опцию «редактировать объект», чтобы изменить его так, чтобы он выглядел так, как у нас есть ниже. Я изменил его в соответствии с разными частями круглой конструкции крыши. Вы можете увидеть, что они разного размера, а также отображают, сколько света падает на них сверху.

WHp6g1StHKi--4bm8Z60SfZs36nLpcX0hPfv
Создание крыш
NIw04MrqwXpNtpbLVCSG1hcrVcovE-h9icDL
Крыши

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

cOqXgyShCWY5DhLJaBz4s3cytn4quTRVq7Fn

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

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

-2vgXCqeD-Hh2LyCB93xeRv4Wc0f21g5JAt2

Этап 8: Добавление эффектов к столбам

Вот изображения разных способов применения линейной градиентной заливки к вертикальным столбам. Это придает им солидный вид. Вы также заметите, что вертикальные столбы были наклонены по направлению кривизны здания?

UrQOmQUJIw5pbpKcarWaE4c6I0EQClHqZfRg
FC2w5bFcBALRHEjvP3CjOgljR6AenGFRJNeQ
TI0gk-tL9PXZrrfHpAfEM1Fk0pfyw9HOGBUj
IevRRdvUZzjFVwKg9nujaZYMN1xfk8maunN1

Этап 9: Добавление окон и стеклянных стен.

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

1Hks1F-5xWbzJle4RiszrLtpLcF7DDz4aiLA
Размытые черные линии

Я также сделал что-то вроде создания стеклянных окон на картинке ниже.

oOv1QWRszqfHkVVmpC1CoCgP1YI39q8SOARX

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

nBYvJdNxoKqC8LPK2Z1NDx23K-j1dAH5Ftfv

Окончательный результат показан ниже.

oWCLDkZeZOv9rhghjTr3-tZU49NegZx6pvSg

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

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

Что-то из-за кулис

gopvR68T4POEA9h1lZwB7hC0ocn81BtAsbt9
Вне сцены? нижняя часть столба

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

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

wdc2NOg6U5T055a9bNseRXaSnTAIG51DPsBk

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

k-JjsilSrJ1XbtuoTbeyAwIAxd6sPD8BiXeJ
Градиент для формирования неба.
17Xo689mALGv8zI8pKVLRK2AYqUSGVEeY9yp
прямоугольный травяной слой

Этап 10: Нигерийский герб

На этом этапе я почти кончил с дизайном. Поскольку я не был доволен, я попробовал создать нигерийский герб. Однако это было быстро, поскольку я предпочел создать что-то не идеальное, чем вообще ничего не вставлять.

Лошади и орлы созданы с помощью инструмента «Перо». Для части ‘Y’ слои под щитом и фон щита были изменены. Я также применил тень к сгруппированному Гербу, чтобы он выскочил из фона.

tkFr75JxP2qSVKysGXaw6cytfKuQghTyDvlw
Примерный эскиз (Герб).

11 этап: Растительность и география

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

Тени под деревьями – это просто круги, которые были растянуты, чтобы выглядеть блюдцем и плоским видом. Затем они были размыты, чтобы выглядеть как настоящие тени.

R9nYJUdxlT168YqIcJhwM7tnR79ZMIsyS7Fy
Тени от деревьев.

Я также создал некоторые объекты в дизайне, представляющих кусты и зеленые цветы. Они были взорваны в разных местах, чтобы выглядеть как эталонное изображение. Кусты и цветы – это прямоугольники, которые я создал, наложил закругленные углы в верхних частях, заполнил градиентным слоем и размыл, чтобы создать этот отдаленный эффект. Чем ближе вы приближаетесь, объекты становятся четче и четче, но кусты и цветы далеко. Это также является причиной их малых размеров.

qgNIXhNj-5dWBxrIWyzflINaakDUnZRsi0Xs
Кусты при увеличении.

Окончательный дизайн показан ниже.

tFmlyNx0fye3NMVwU51SnrCmn7HU5wE-8wOA

Ссылка на дизайн есть здесь.

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

Вы можете связаться со мной в Twitter здесь

Не забудьте присоединиться к сообществу Figma Africa на Slack здесь.

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

Ваш адрес email не будет опубликован.