figma下載

by Gbolahan Taoheed Fawale

通過Gbolahan Taoheed Fawale

如何在Figma中創建逼真的3D對象 (How to create realistic 3D objects in Figma)

Prior to using Figma, I used Adobe Illustrator for most of my designs (like logos, mockups, illustrations, and so on). But since I joined the “Figma gang” ?, I’ve dropped illustrator so I can focus on Figma and learn as much as I can about it.

在使用Figma之前，我將Adobe Illustrator用于大多數設計(如徽標，模型，插圖等)。但是自從我加入“ Figma幫派”以來，我就丟掉了插畫家，這樣我就可以專注于Figma并從中學到很多。

I wanted to discover more tricks with the software, so I could arrive at end-results that aren’t “typical Figma.” This stemmed from the fact that the designs I hope to make aren’t necessarily what the software was developed to do.

我想通過該軟件發現更多技巧，因此可以得出并非“典型Figma”的最終結果。這源于一個事實，即我希望進行的設計不一定是軟件開發完成的。

Figma is more of a UI/UX design tool than a visual designing or illustrating tool like Adobe Illustrator.

與可視設計或插圖工具(如Adobe Illustrator)相比，Figma更像是UI / UX設計工具。

This post is about me exploring Figma beyond UI/UX to uncover new ways of using it and new things I could discover while using it as my complete design tool. In the end, it didn’t really matter what type of design I might want to do or venture into.

這篇文章是關于我在UI / UX之外探索Figma的，以發現使用它的新方法以及將其用作完整設計工具時可以發現的新事物。最后，我可能想做或嘗試哪種類型的設計并不重要。

So, I will take you through the process of how I came up with the above image.

因此，我將引導您完成以上圖片的制作過程。

步驟1：建立類似的方塊 (Step 1: Create a similar box)

The first thing I created was a box that looks similar to the brown one in the picture above. This was created with the use of shapes (rectangles only). I know some people are fans of the pen tool. But in the above example, the pen tool doesn’t afford us the flexibility to create shadows, add gradients, or do any sort of object manipulation to individual shapes or parts of the box.

我創建的第一件事是一個盒子，看上去類似于上圖中的棕色盒子。這是通過使用形狀(僅限矩形)創建的。我知道有些人喜歡鋼筆工具。但是在以上示例中，鋼筆工具無法為我們提供創建陰影，添加漸變或對盒子的各個形狀或零件進行任何類型的對象操縱的靈活性。

In the above illustration, I used the edit object tool to resize and manipulate the rectangles to make a rhombus-like shape. The next thing I did was recreate the same rectangles and turn them backwards to make up the third and fourth sides of the box.

在上面的插圖中，我使用了編輯對象工具來調整矩形的大小并對其進行操作，以使其形成菱形形狀。我要做的第二件事是重新創建相同的矩形，然后將它們向后旋轉以組成框的第三和第四邊。

步驟2：添加陰影 (Step 2: adding shading)

I added color to differentiate each side of the box, and also to give an idea of how the shadows, contrast, and gradient fill would be applied. This laid a foundation so that the sides of the box could be worked on independently. I also created the box lid pieces.

我添加了顏色以區分框的每一側，還給出了如何應用陰影，對比度和漸變填充的想法。這奠定了基礎，使盒子的側面可以獨立加工。我還創建了盒蓋件。

第三步：使其更加逼真 (Step 3: making it more realistic)

I added a gradient fill to the visible box lids (f1 & f2) to make it look much more realistic and flat. Notice the way the gradient is layered on f2? I did the same for f1, and then adjusted the degree of the gradient fill to match the direction of light on the box.

我在可見的盒蓋(f1和f2)中添加了漸變填充，以使其看起來更加逼真和平坦。注意漸變在f2上分層的方式嗎？我對f1進行了同樣的操作，然后調整了漸變填充的程度以匹配盒子上的光線方向。

After adding the gradient, I added the shadows. When rays of light fall on an object, a shadow is automatically formed relative to the direction of light and the object.

添加漸變后，我添加了陰影。當光線落在物體上時，會相對于光線和物體的方向自動形成陰影。

Note: The layer highlighted above is actually beneath the visible on. That’s what will be resized to form the shadow.

注意：上方突出顯示的層實際上位于可見的下方。 那將被調整大小以形成陰影。

步驟4：調整蓋子 (Step 4: making adjustments to the lid)

To add shadow, I simply copied f1 and pasted it on the same layer. I then chose the original/initial copy of f1 (which is below the newly copied ‘f1,’) clicked the edit object tool, and resized it to protrude a little underneath “f1 copy”. This was done just to perfectly create the shadow effect. The default Figma shadow effect feature wouldn’t have given me the flexibility to create the brown box in the picture.

要添加陰影，我只復制了f1并將其粘貼在同一層上。然后，我選擇了f1的原始/初始副本(位于新復制的“ f1”下方)，然后單擊“編輯對象”工具，并調整其大小以使其突出于“ f1副本”下方。這樣做只是為了完美地創建陰影效果。默認的Figma陰影效果功能無法讓我靈活地在圖片中創建棕色框。

So I added a dark color to it and blurred it with a value of 20. You might also notice that the original f1 is not as sharp as the other layers. Blurring it gives it that cool realistic shadow effect and reduces the black color saturation. I then replicated the same process for f2.

因此，我向其添加了深色并使用20值對其進行了模糊處理。您可能還注意到，原始f1不如其他層那么清晰。對其進行模糊處理可使其具有酷逼真的陰影效果，并減少黑色飽和度。然后，我為f2復制了相同的過程。

In Figma, you can easily copy and paste a style/effect from one layer to another using ctrl + alt + c for copy and ctrl + alt + v on the layer that you want a similar effect or style to be applied to.

在Figma中，您可以輕松地將樣式/效果從一層復制和粘貼到另一層，使用ctrl + alt + c進行復制，并在要應用類似效果或樣式的圖層上使用ctrl + alt + v。

步驟5：與身體打交道 (Step 5: dealing with the body)

Now that we are done with the carton box cover, let’s work on the body of the box. We want to reflect the ray of light bouncing on it as well as the shadows that give the box a contrasting and realistic appearance.

既然我們已經完成了紙箱盒子的蓋，讓我們在盒子的主體上工作。我們要反射在其上反射的光線以及使盒子具有鮮明對比和逼真的外觀的陰影。

All we need for b1 and b2 is gradient fill, as seen in the above illustration.

如上圖所示，我們需要的b1和b2是漸變填充。

Did you notice that the box is starting to look more real? Can you spot the difference when a gradient is added to b1 but not yet to b2? Or when gradient fill is applied to both sides?

您是否注意到盒子看起來更真實了？當將梯度添加到b1但尚未添加到b2時，您能發現差異嗎？還是在兩側都應用漸變填充？

Let’s move on.

讓我們繼續。

第六步：內飾的挑戰 (Step 6: the challenge of the interior)

Working on the inner part of the box (b3 and b4) was a little bit challenging. I had to pause for a few minutes to study the shadows and level of saturation at different corners of the inner parts before thinking of a way to replicate it — all while still using shadows and gradients.

在盒子的內部(b3和b4)工作有點挑戰。我不得不停頓幾分鐘來研究內部各個角落的陰影和飽和度，然后才想出一種復制它的方法-同時仍在使用陰影和漸變。

In the same way as before, I applied a layer of gradient fill on b4 with darker colors — since it’s the darkest part of the box — to achieve the level of saturation I wanted. See the image below:

以與以前相同的方式，我在b4上應用了一層漸變填充，并使用了較暗的顏色(因為它是盒子中最暗的部分)，以達到我想要的飽和度。見下圖：

Notice the way the gradients are being arranged vertically with one of the color boxes on the gradient liner close to the other one? The idea is to make the shadow appear like it grew from inside the box. Though we can not see inside the box, we do know that as it gets deeper, rays of light reduce, which makes the innermost parts get darker automatically.

請注意，漸變是垂直排列的，而漸變色襯板上的一個顏色框靠近另一個顏色框？這樣做的目的是使陰影看起來像是從盒子內部長出來的。盡管我們看不到盒子內部，但我們確實知道，隨著盒子變深，光線會減少，這會使最里面的部分自動變暗。

最后一部分：盒子下面的陰影 (Final part: shadows underneath the box)

Here, we’ll take the same idea I used above to create the shadows for the box covers above (copying the layers, resizing, and applying some dark colors and effects) and repeat it. Though I already applied it in the picture above, the one below is the workaround ?

在這里，我們將采用與我上面創建框陰影(復制圖層，調整大小并應用一些深色和特效)的陰影相同的想法并重復進行。盡管我已經在上圖中應用了它，但是下面的一個是解決方法？

I made extra copies of b1 and b2 and chose the original layer. I then dragged it down a little, added a darker color, blurred it a little, and also resized it to have that perspective view. Creating realistic images in art and architecture is all about perspective.

我制作了b1和b2的額外副本，并選擇了原始圖層。然后，我將其向下拖動一點，添加較深??的顏色，使其模糊一點，并調整其大小以具有該透視圖。在藝術和建筑中創建逼真的圖像完全是透視。

Now we have created a realistic 3D box — it’s not perfect, but it’s realistic enough. ??

現在，我們創建了一個逼真的3D盒子-雖然不是完美的，但是足夠逼真的。 ??

最終調整 (Final tweaks)

At this stage, I stopped to compare what I had done with the original brown box I got off the internet. I wasn’t satisfied, so I decided to push further to see what I could achieve by attempting to make the box look very real with a high contrast.

在這個階段，我停下來比較一下我與互聯網上的原始棕色盒子所做的事情。我不滿意，所以我決定進一步嘗試看看如何通過使包裝盒在高對比度下看起來非常真實來實現我的目標。

So how did I achieve this?

那么我是如何實現的呢？

I created extra copies of b3 and b4, and applied a gradient layer to their original copies (which are the dark parts facing us in the picture below).

我創建了b3和b4的額外副本，并對它們的原始副本應用了漸變層(下圖中是我們面對的深色部分)。

Upon closer observation, you will notice that it does looks like the edges of b1 and b2 have a shadow of their own towards b4 and b3, respectively. This is because light rays have fallen on them from the sides, projecting their shadows on the closest available layer or object.

仔細觀察，您會發現它確實看起來像b1和b2的邊緣分別對b4和b3都有自己的陰影。這是因為光線從側面落到了它們上，將它們的陰影投射在最近的可用圖層或對象上。

Remember the extra b1 and b2 copies that I made earlier to form the shadow beneath the box? Well, first I resized these two layers (original b1 and b2) to protrude above the copied versions of (b1 and b2). You can see them as the current outer sides of the box which the ray of light falls on. Then I added another darker gradient layer.

還記得我之前制作的額外b1和b2副本，以在盒子下面形成陰影嗎？好吧，首先，我調整了這兩層的大小(原始b1和b2)，使其突出于復制的版本(b1和b2)之上。您可以將它們視為框上當前光線照射到的外側。然后，我添加了另一個較暗的漸變層。

Below is what the box looks like now.

下面是該框現在的樣子。

Note: The picture above is a little different from the one in the introductory part of this piece, as I had to create another one to be able to explain some of the things I did in the first design. It was a really fast one ?

注意：上圖與本文的介紹部分略有不同，因為我必須創建另一幅圖才能解釋我在第一個設計中所做的一些事情。 那真的是一個快嗎？

To get more details and understand everything I did, here is the link to both the original version and the example version I created.

要獲取更多詳細信息并了解我所做的一切，請點擊此處 是指向原始版本和我創建的示例版本的鏈接。

Thanks for reading!

謝謝閱讀！

Feel free to reach out on twitter @GbMillz

隨時聯系Twitter @GbMillz