How to Make a Flat Image 3D in Illustrator
如何在Illustrator中創建3D平面圖像
日·6分鐘閱讀

In order to make a flat image 3D, Illustrator has the 3D and Materials window with plenty of settings and cool features to apply. Let's discover them and create this 3D look in minutes!
為了使平面圖像3D,Illustrator有3D和材質窗口,有大量的設置和很酷的功能應用。讓我們發現它們並在幾分鐘內創建這個3D外觀!
If you don't have the time to learn how to turn an image from flat to 3D, you can always try Envato Elements, where you will find a large selection of resources that are ready to be used to create unique 3D styles.
如果您沒有時間學習如何將圖像從平面轉換為3D,您可以隨時嘗試ga-analytics #sendElementsClickEvent "data-immersive-martite-walked =" d2ab3564 - 3d31 - 4c50 - 9f3a-4d51513c50dd "> Envato Elements,在那裡您可以找到大量可用於創建獨特3D樣式的資源。
What You'll Learn in This Tutorial
你會在這個過程中學到什麼
- How to prepare artwork for applying 3D effects
如何準備應用3D效果的藝術品 - How to convert a flat image to 3D in Adobe Illustrator
如何在Adobe Illustrator中將平面圖像轉換為3D - How to save a 3D graphic style in Illustrator
如何在Illustrator中保存3D圖形樣式
Tutorial Assets企業資產
You'll need the following resources in order to complete this project:
您需要以下資源才能完成此項目:
1. How to Make a Flat Object Look 3D in Illustrator
1. 如何在Illustrator中讓平面對象看起來像3D
Step 1步驟1
Launch Illustrator, go to File > Open, and locate the Cute Cat Witch Sitting on Pumpkin file that you downloaded on your computer. Select the entire artwork, and let's scale it down from 4000 x 4000 px to about 1500 x 1500 px. We are doing this so that the 3D effects will be applied faster and will not slow down your computer as they would if the artwork were too big.
啟動Illustrator,轉到文件>打開,然後找到您在計算機上下載的4000 x 4000 px縮小到大約1500 x 1500 px。我們這樣做是為了使3D效果應用得更快,並且不會像藝術品太大時那樣減慢您的計算機速度。
To do so, type 1500 px as the Width and Height in the Transform panel. Once that's done, go ahead and Ungroup (Shift-Ctrl-G) the artwork a few times until all the elements are separate. Now you are ready to learn how to make a flat object look 3D in Illustrator.
為此,請在「變換」面板中鍵入1500 px作為「寬度」和「高度」。一旦完成,繼續和解組(Shift-Ctrl-G)的藝術品幾次,直到所有的元素是分開的。現在,您已準備好學習如何在Illustrator中使平面對象具有3D外觀。

Step 2步驟2
First, you need to clean up the artwork by removing all the outlines, highlights, shadows, or any other details. Select all these shapes using the Selection Tool (V) and delete them. Once you are done with the cat (2), continue with the pumpkin. I decided to keep the highlight shape at the top of the pumpkin so that we don't lose too many details on it, but I replaced the existing appearances with a flat indigo color (3).
首先,您需要通過刪除所有輪廓,高光,陰影或任何其他細節來清理藝術品。使用選擇工具(V)選擇所有這些形狀並刪除它們。一旦你完成了貓(2),繼續與南瓜。我決定保留南瓜頂部的高光形狀,這樣我們就不會丟失太多的細節,但我用一個平坦的靛藍色替換了現有的外觀(3)。

Step 3步驟3
The next key step in converting a flat image to 3D is to organize the artwork. Select all the shapes that make up the facial expression of the cat and Group them (Control-G). Next, select all the shapes that make up the pumpkin face and make another group. I suggest that you also keep the skull separate from the neck of the cat.
將平面圖像轉換為3D的下一個關鍵步驟是組織藝術品。選擇構成貓面部表情的所有形狀,並將它們分組(Control-G)。接下來,選擇所有的形狀,使南瓜臉,使另一組。我建議你把貓的頭骨和脖子分開。
Everything else that makes up this cute illustration (without the background) should be in another group that I've called “Cat on pumpkin”, and we will apply the 3D effect to this group only. Move the face of the cat and the face of the pumpkin next to your artboard for the moment.
所有其他構成這個可愛的插圖(沒有背景)應該在另一個組,我稱之為「貓南瓜」,我們將應用3D效果只對這一組。暫時將貓的臉和南瓜的臉移到畫板旁邊。

Step 4步驟4
In order to learn how to make a flat image 3D in Illustrator, select the Cat on pumpkin group and go to Effect > 3D and Materials > Inflate. Keep the settings as they are, and you can already see a cool 3D appearance.
要了解如何在Illustrator中製作平面圖像3D,請選擇「貓在南瓜上」組,然後轉到「效果> 3D」和「材質>充氣」。保持設置不變,您已經可以看到很酷的3D外觀。

Step 5步驟5
Switch to the Materials tab at the top of the 3D and Materials window. We will keep the Default material for the look we want in this case, but feel free to check out the list of other useful materials that you can use in future projects.
切換到「3D和材質」窗口頂部的「材質」選項卡。在這種情況下,我們將保留我們想要的外觀的默認材質,但請隨時查看您可以在未來項目中使用的其他有用材質的列表。
Set the Base Properties settings:
設置基本屬性設置:
- Roughness: 0.65
粗糙度:0.65 - Metallic: 0.2
金屬:0.2

Step 6步驟6
While the Cat on pumpkin group stays selected, switch to the Lighting tab at the top of the 3D and Materials window. Set the color to off-white, and then change the rest of the settings as indicated.
在「南瓜上的貓」組保持選中狀態的同時,切換到「3D和材質」窗口頂部的「照明」選項卡。將顏色設置為灰白色,然後按照指示更改其餘設置。

Step 7步驟7
Now, select the Cat face group and, in the 3D and Materials window under the Materials > Graphics tab, choose Add as Single Graphic to save your graphics. Do the same for the Pumpkin face group.
現在,選擇Cat面組,然後在「3D and Materials」窗口中的「Materials > Graphics」選項卡下,選擇「Add as Single Graphic」以保存圖形。對南瓜臉組做同樣的事情。

Step 8步驟8
While the Cat on Pumpkin group stays selected, go to the Materials > Graphics window and click on the Cat face graphic to apply it to the 3D object. Notice the circle containing the graphics on the cat: grab it and drag it to the correct spot in the center of the cat's head.
在「Cat on Pumpkin」組保持選中狀態的同時,轉到「Materials > Graphics」窗口,然後單擊「Cat face」圖形以將其應用於3D對象。注意包含貓上圖形的圓圈:抓住它並將其拖到貓頭部中心的正確位置。

Step 9步驟9
Once you are happy with the result, go ahead and click on the Pumpkin face graphic to apply it. Grab and move the circle containing the graphics to the correct spot, in the center of the pumpkin. How easy is this, right?
一旦你對結果滿意,繼續點擊南瓜臉圖形來應用它。抓住並移動包含圖形的圓圈到正確的位置,在南瓜的中心。這有多簡單,對吧?

2. How to Save a 3D Graphic Style
2. 如何保存3D圖形樣式
Step 1步驟1
Before applying any kind of graphics to the 3D object, you can save this 3D style in the Graphic Styles window. With the Cat on pumpkin group still selected, simply click on the New Graphic Style icon at the bottom of the Graphic Styles window to save it.
在將任何類型的圖形應用於3D對象之前,可以將此3D樣式保存在「圖形樣式」窗口中。當貓在南瓜組中仍然被選中時,只需單擊圖形樣式窗口底部的新圖形樣式圖標即可保存它。

Step 2步驟2
Now, you can easily apply the same style to any other artwork, icons, characters, etc. After that, you can apply their faces or any other details that need to be included.
現在,您可以輕鬆地將相同的樣式應用於任何其他藝術品,圖標,角色等,之後,您可以應用他們的臉或任何其他需要包括的細節。
Here are other cute examples: a Cute ghost holding a pumpkin and a Cute Cat holding a skull.
下面是其他可愛的例子:一個

Congratulations! You're Done
恭喜你!操作順利完成
Now you know how to make a flat picture look 3D in Adobe Illustrator. Explore all the settings and options available in the 3D and Materials window to create a unique 3D style that's perfect for your project.
現在你知道如何在Adobe Illustrator中使平面圖片看起來像3D。探索「3D和材質」窗口中提供的所有設置和選項,創建適合您項目的獨特3D樣式。
Make sure to check out Envato Elements, where you'll find plenty of resources like characters, illustrations, icons, and logos that are ready for you to download and use.
請務必查看

Popular Resources From Envato Elements
Envato Elements的熱門資源
Envato Elements is an excellent resource for graphics that you can use to convert into 3D.
Now that you've learned how to make a flat picture look 3D, we'll explore some ready-to-use alternatives available on Envato Elements. You can download as many as you wish with a subscription. Let's take a look!
現在您已經了解了如何使平面圖片看起來像3D,我們將探索
Halloween 3D Icons (PNG)
This set is a fantastic option if you're looking for 3D Halloween icons that are ready to be used in your projects. They are modern-looking, colorful, and suitable for many designs. Have fun!
如果您正在尋找可以在您的項目中使用的3D萬聖節圖標,這套圖標是一個很好的選擇。它們看起來很現代,色彩鮮艷,適合許多設計。玩得開心點!

Animal 3D Icon Set (PNG)
How cute is this set of 3D animals, right? They would be perfect for all sorts of creative designs, avatars, game design, prints, cards, and so much more. Include them in your project, and they will definitely draw everyone's attention.
這套3D動物模型有多可愛?他們將是完美的各種創意設計,頭像,遊戲設計,列印,卡,等等。把它們包含在你的項目中,它們肯定會吸引每個人的注意力。
