快速提示：使用 Adobe Illustrator 中的切片導出圖標

今天我們來看看導出圖標的不同方法，這種工具常常讓人感到畏懼，可妳壹旦掌握了它， 那就是切片工具。相信我，如果妳從未使用過它，妳會想閱讀這篇文章，因為我將解釋所有在導出圖標時要知道的內容。

無論妳選擇使用預先做好的圖標包，還是從頭開始，我們將教給妳壹些在導出寶貴產出時的關鍵考慮因素。

在我們得到所有技術之前，我想花幾秒鐘，並解釋寫這篇文章的原因。

在上壹個教程中，我談到使用畫板和圖層作為導出寶貴圖標的方法，但是老實說，當妳有壹個更大的包時，這些方法可能會讓妳失望。 這個想法是，我想/需要提出壹個適合初學者的流程，這將很容易理解，假設他們知道如何使用最基本的 Illustrator 工具。

現在，雖然這些方法可能不是最佳生產力的最優選擇，但它們操作簡單、應用方便，可以給出完全相同的結果。

因為妳們中的壹些人認為這個過程太慢而且痛苦，所以我決定開始我的遊戲，向妳展示導出圖標包的更高級的方式，也是最快的方式。嗯，我可能會說高級，

但說實話，壹旦玩幾次，妳就知道這並不是很難。

話雖如此，讓我們回到我們的主題，談談關於切片和如何在 Illustrator使用它們。

1.什麽是“切片”？

妳可以將“切片”視為妳可以創建的壹個藝術品的明確的部分，以便單獨導出而不是導出整個作品。

最初為網頁設計師創建了切片，但是與大多數 Illustrator 的工具壹樣，這壹切很快就發現了壹個新的用途：導出圖標。

2.“切片”如何工作？

實際上很簡單。 首先讓我們將畫板看成是放在妳的作品上的壹張紙。 現在，當妳創建壹個“切片”時，妳實際上是劃分該紙張的壹部分，通過創建壹個剪切，然後可以從較大的作品中自由移除。

我喜歡把這個過程想象成類似於拿起刀具並切割該部分的邊緣，將其與紙張分開。

每個創建的切片，Illustrator 分配壹個數字，從左上角壹直到右下角。 起初，妳可能不會太在意這個動作，但是有時妳會來欣賞它，因為妳會更好地了解妳的作品。

3.如何創建“切片”？

如果妳以前從未創建過切片，請不用擔心，因為它很容易做到。 創建切片的方式有三種，妳應該註意：

• 使用選定對象
• 使用參考線
• 使用切片工具

3.1. 使用所選對象創建切片

第壹個選項真的很容易理解，因為它允許妳在壹個或多個對象的邊界周圍創建切片。

所以我們假設我們有幾個圖標，我們要分割第壹個圖標。

要做到這點，我們要選擇圖標，然後前往 對象>切片>建立。

這將通過在其周圍創建壹個分界線來立即將該圖標與其余圖標分開。

雖然我們為壹個圖標創建了壹個切片，但 Illustrator 將畫板的其余部分分成更大的切片，圖標切片的每壹側分別為壹個切片。 頂端有壹個大切片，左側有壹個較窄的切片，右側有壹個寬的切片，底部是相對窄的。

現在，如果妳仔細看看妳的畫板，妳可能會看到這些切片是以壹個非常簡單的方式編號的，從左上角到右下角。 Illustrator 將數字分配給其切片，以便妳選擇要導出的切片，以及哪些切片。 我將在輸出過程中更多地談談這個問題。

快速提示：妳可以看到，創建的切片邊界具有矩形形式，因為 Illustrator 通過查看圖標的總寬度和高度而不是其形狀來創建分隔。 這是非常可以理解的，因為如果妳正在設計壹個網頁，使用更多的參考線分解妳的作品將非常困難，然後將其完美地放在壹起。

使用這種方法時，應該註意幾件事情。 如果打開“對象”>“切片”菜單，妳將看到妳已經使用了以前使用的“創建”選項，並從選項創建”中創建了幾個下拉列表。 當妳只選擇壹個對象時，兩者都會做同樣的事情，當妳選擇多個對象時，它們的行為完全不同。

兩者之間的關鍵區別在於，妳可以在每個選定對象周圍建立切片，而通過“從選項中創建”選項，妳將指示 Illustrator 在所有選定對象的整個表面周圍創建切片。

現在，如果要創建壹個 Web 項目（網頁），從選項中創建將是完全正確的使用，但如果妳創建壹個圖標包，妳會壹直想使用建立，因為妳要單獨導出妳的每個圖標。

3.2. 使用參考線創建切片

與先前的方法相比，“參考線”更加細致，因為該過程需要妳手動添加要分割的作品部分的每壹側的垂直和水平向導。

首先，妳必須通過按 Control-R（右鍵單擊 > 顯示標尺）來激活標尺，然後拖動參考線並將它們放置在想要切割線落下的位置。 使用參考線界定妳的部分後，妳可以轉到“對象”>“切片”>“從參考線創建”以創建實際切片。

如果仔細觀察 Illustrator 向切片添加數字的方式，妳將看到壹旦壹個部分被分隔和分配，它將強制其他部分抓取以下數字值，無論它們有多大。 此外，看到切片是圍繞對象的界定表面創建的，而不是參考線的交點，這很有趣。

3.3. 使用切片工具創建切片

第三種方法在準確性方面可能是“優勝者”，因為它允許妳單擊並拖動以創建 100％ 手動切片選擇。 說實話，會有壹些情況，妳會想要更好地控制妳的切片，但是我不覺得它是有用的，當涉及到切片壹個大的圖標包，因為需要很長時間才能做到這壹點。

但是，以防妳需要使用它，妳應該知道如何做到這壹點。 首先，妳需要抓住切片工具，默認情況下位於左側欄的底部，就在手型工具的上方。 選擇工具後，妳可以將自己放置在要分割的圖稿部分上，然後只需點擊並拖動即可創建壹個選項，壹旦釋放鼠標按鈕，該選擇將自動變成切片。

與常規選擇相比，切片工具允許妳按住空格鍵以移動/重新定位妳的選擇，這是非常有幫助的，因為有時妳可能會發現妳已經開始錯誤了。

現在，關於這個方法的很酷的就是立即創建切片，而不需要轉到對象> 切片子菜單，以便建立或者從選項中創建切片。

我唯壹可以想到的缺點是，直到打開“ px預覽”模式（“視圖”>“ px預覽”或“Alt-Control-Y”），妳可能沒有100％的精確，允許讓妳創建 px完美的選擇，是今天的設計師所必須的。

4.輸出流程

所以到目前為止，我已經討論過可以用來創建切片的三種不同的方法。 現在是時候看到輸出我們寶貴的小圖標的哪個方法是最好的。

4.1. 使用所選對象導出方法

我們先來看壹下第壹種方法。 正如妳記憶的，這個依賴於使用壹個或多個對象來創建切片。

現在讓我們說，我們有和之前壹樣的小圖標包，只是這次，我們要切片和導出所有的組合圖標，而不只是壹個。

那麽通常妳只需按Control-A選擇所有的資源，然後去對象>切片>建立。

然後妳會前往 文件>存儲為Web，選擇 PNG 為妳想要的格式，設置導出選項選片，最後點擊保存。

事情是，壹開始妳可能會認為這壹切都很順利，但是壹看到妳的圖標（更確切地說是他們的大小），妳可能會發現有問題。

這是因為即使妳使用自定義網格來對圖標進行設置，作品本身也可能不會在寬度和高度方面全部移動，並且由於妳將圖標用作所選對象而不是實際的網格，因此不應該驚喜。

訣竅是使用實際的網格而不是圖標，並在其周圍創建切片。 這樣妳的導出圖標將完全符合妳的要求。 這樣妳的導出圖標將完全符合妳的要求。

現在，在我的例子中，我使用的是壹個48 x 48 px的網格，但是我已經添加了壹個全新的2 px填充。 更不用說我的圖標略短，高度只有40 px。 這意味著如果我使用圖標自己創建切片，然後導出它們，我的圖標將略小（44 x 40 px），因為 Illustrator 使用了我的作品的寬度和高度，而不是網格（48 x 48 px）。

話雖如此，妳應該壹直有第二圖層放置妳的網格，並使用它們創建切片，以正確導出妳的作品。

現在，很酷的是，壹旦創建了切片並轉到文件> 存儲為web，Illustrator 就可以手動選擇或刪除導出的圖標。 所以例如，如果我決定我不想選擇最後壹個圖標，我可以簡單地轉變它，並在按住 Shift 的同時左鍵單擊壹次，從而將其從最終導出中刪除。

默認情況下，如果妳選擇所有圖標，然後進行保存，Illustrator 將保留所有切片。 妳可以查看是否通過查看其定界來選擇切片。 如果作品周圍的線條是紅色（除了第壹個圖標之外），那麽妳的對象將被添加到最終選擇中；如果它是藍色和稍微褪色，那麽它不是（第壹個圖標）。

妳可以通過按住 Shift 鍵並左鍵單擊來取消選擇圖標包的部分。 妳可能會想知道為什麽我們使用 Shift 鍵。 這是因為由於 Illustrator 已經選擇了所有這些選項，妳需要按住該鍵以保持其余資源的選擇，否則最終只會有壹個圖標處於活動狀態。

現在說實話，我不明白為什麽妳會這樣，因為壹旦妳完成妳的包，我很確定妳會輸出所有的資產，而不只是壹些，但我想，指出這壹點是好的。

壹旦妳點擊“保存”按鈕，Illustrator 將要求妳提供壹個存儲文件的位置，為妳提供命名作品的選項。 這部分是有點棘手的，因為妳分配的名字將被轉移到所有的圖標，這是我們想要的，但本身將攜帶它們的序數。

妳只需導出文件，然後重命名它們，或者妳可以直接在存儲為web 的彈出窗口中雙擊每個圖標選擇並給出所需的名稱。

不管妳選擇什麽方法，妳仍然需要花時間去完成所有這些工作，才能正確地命名它們。

現在，說實話，我發現這個選項是超級快的，因為它超級快，只會導出妳的圖標，所以沒有空的畫板切片需要被刪除。

4.2. 使用參考線方法導出

與以前的方法壹樣，事情是非常簡單的。 首先，使用參考線創建切片（對象>切片>從參考線創建），然後轉到文件>儲存為Web。

這裏有幾件妳應該註意的事情。 如果妳將導出選項設置為所選項目，就像我們第壹種方法壹樣，Illustrator 將導出妳的圖標，但它也會在它們之間導出空切片。 現在，如果妳沒有壹個大集合，那麽妳可以選擇那些切片，但如果妳有，那麽它可以被證明是壹個非常痛苦的過程。

另壹方面，妳只需導出圖標，然後刪除不需要的切片，但再次可能需要壹些時間。

現在，如果妳考慮到必須手動將參考線添加到圖標的每壹側，則顯而易見的是，第壹種方法更適合，因為它不麻煩，而且更快。

4.3. 使用切片工具方法導出

如果妳認為“參考線”方法是緩慢而痛苦的，然後將最後壹個釘子放在妳的棺材裏，因為它會用妳的年齡來完成。

現在妳可能知道妳必須手動創建每個圖標的切片，然後直接轉到 文件> 存儲為web。

在這裏，妳將會嘗試使用“選定切片導出”選項，但與其他兩種方法相比，此操作只會從妳的“畫板”導出最後壹個切片。 這意味著妳必須使用“全部切片”選項，當然這些選項將導出所有切片，無論它們是填充圖標或只是空格。

最後，妳必須遍歷整個文件夾，並刪除所有不必要的圖標，

並根據需要重新命名。所以我推薦這種方法嗎？不，那為什麽我甚至提到呢？ 在談論這些工具和方法的時候，我喜歡盡可能的明確。

結論

所以，在这一点上，我真的希望你知道切片是什么，更重要的是它们是如何制作的，以便你可以利用这个工具，使图标快速、轻易地导出。

现在，我通常倾向于把决定放在你身上，但是这一次，我必须粗暴地告诉你，使用第一种方法，即对象，因为很明显它是唯一的方式。

话虽如此，我要感谢你的时间和关注，一如以往，下次再聊。