如何快速將無聊的圖標變成原創傑作
已發表: 2022-03-11圖標是我們設計中不可或缺的一部分。 它們是指示各種動作的視覺線索，它們可以賦予產品獨特的身份。 但是我們經常選擇通過下載相同的圖標集並使每個網站的每個圖標看起來或多或少相同來慶祝它們的重要性。 處理如此重要的事情的方法是什麼。
為了解決這個問題，我創建了一個指南來幫助設計師為他們的圖標增加視覺深度，並使它們對他們所代表的產品來說是獨一無二的。 本教程很大程度上受到了有影響力的 Google Material design 的啟發。
谷歌的材料設計原則
正如穀歌所說，“材料是一種隱喻。” 它藉鑑了物理世界的視覺線索，並創建了一種新的視覺語言來標準化其所有界面。 Material Design 原則易於理解，可以快速應用於改善界面的吸引力和用戶體驗。
1.使用簡單的幾何形狀和大膽的顏色
扁平化設計趨勢啟發了 Material Design，它也是基於基本的扁平形狀。 仔細選擇最能代表圖標所描繪元素的形狀。
2.通過微妙的陰影添加深度
陰影是一種欺騙眼睛並為您的設計賦予深度感的好方法，因為它會激發光線投射在物體上的效果。
請注意，自然光通常被模擬為來自左上角。
3.使用顏色陰影替換陰影
每種顏色都用於多種色調以模擬視覺深度。 例如，在 Gmail 圖標中，您可以看到 M 的形狀使用了不同深淺的紅色，而信封蓋下方則使用了較深的灰色陰影。
你也可以這樣做：分步演示
我們將應用 Material Design 風格的簡化版本，對於每個圖標，我們將只使用三種相同顏色的陰影，並保持陰影平坦而短，而不是常見的“長陰影”效果。
資源
- 在此處查看來自 Google 的完整免費圖標集。
讓我們開始吧。
1. 螺栓圖標
將原來的圖標一分為二，讓頂部看起來是抬起的。 您可以通過在兩個形狀的交叉處創建陰影效果來實現這一點。 使用三種黃色陰影 - 頂部較淺，底部較深，並為陰影保留最暗的陰影。
2.聊天圖標
在原始圖標上，我們在兩個氣泡之間的間隙中有一點陰影效果，這就是您將創建陰影的地方。
在下部形狀上，選擇在間隙中形成直角的點，然後將其向上移動到左側，直到在左上角形成直角。
複製頂部氣泡並將副本向下和向右移動。 選擇副本和較低的氣泡形狀，使用“探路者”創建一個分區，只保留與之前副本的交集。
現在您可以應用三種深淺的藍色，並在頂部塗上最淺的藍色，在中間塗上最深的藍色，在底部塗上第二深的藍色。
3.複選標記圖標
我們將創建一個折疊的紙效果。
複製圖標，並刪除右上角多餘的兩個點，然後在最左邊取出兩個部分。
複製左側折疊，並將其移動到右側折疊的頂部。
將兩個形狀相交以創建陰影效果。 然後塗上三種顏色，同時保持陰影最深，長片第二深，頂部淺色。
4. 標誌圖標
首先將邊緣修圓，然後提取標誌的底部。
要創建折疊效果，請跟踪對角相交的兩條線。 使用“探路者”，將旗幟形狀與線條分開，並在旗幟上應用三種綠色陰影，同時保持底色為灰色。
5. 心形圖標
複製心形圖標。
隔離形狀的左半部分。
從右上角向下追踪一條對角線。
將生成的形狀與心形重疊，然後將其向右移動以減去陰影形狀。 應用你的三種粉紅色。
6. 山脈圖標
原始圖標內的空白表示我們可以放置陰影的位置。
從每個選擇中創建兩個三角形。
將較小的副本向右移動，並將生成的交叉點提取為陰影形狀。
應用三種深淺的棕色，左邊最亮，大三角形第二亮，中間陰影最暗。 應用一些圓角半徑來柔化結果。
7.人物圖標
選擇並複制左側人物的下半部分。 將該副本與右側的人對齊。 現在，選擇三個重疊的形狀，並應用“路徑查找器”面板中的“分割”工具。 現在，實現顏色以完成。
8. 浮動方形圖標
選擇較低的形狀，然後向上移動它的中點，直到它看起來像一個菱形。
複製上面的菱形，並將副本向下移動 10 或 20 像素。
選擇兩個較低的形狀，並從“探路者”面板應用“分割”工具。
從產生的相交形狀中，只保留兩個較低的部分，並刪除任何多餘的點。
通過應用三种红色陰影將其包裹起來，同時將最暗的部分放在中間。
9. 字母圖標
使用“直接選擇工具 (A)”，選擇信封形狀的第二個較高點。
使用“鋼筆工具”在段的右側添加一個點。
現在你有了一個額外的點，你可以通過抬起兩個上面的點並將它們左右移動，如圖所示，將負空間重塑為看起來像一張紙。
選擇所有內容，然後從“探路者”面板中應用一個分區。 將頂部紙張形狀與信封分開，然後將信封部分複製到紙張頂部以剪下陰影形狀，然後再應用三種藍色。
10. 蛋糕圖標
隔離蛋糕底部的重複版本。
通過向內移動左右邊緣來縮小其寬度。
將生成的形狀移動到原始圖標的頂部，並延伸較高的點以與結冰形狀重疊。
使用“探路者”創建所有重疊形狀的分割，並刪除您之前創建的狹窄蛋糕底座旁邊的額外點。
通過在糖霜和蠟燭上塗上淺橙色，在底部塗上較深的陰影，為火焰形狀和陰影邊緣塗上更深的橙色來完成您的蛋糕。
改善圖標集的外觀和感覺
可以通過簡單的方式創建具有 Material 風格的圖標。 您只需要考慮周到的幾何形狀、大膽的色調和陰影效果的良好組合。
好消息是，您甚至不需要像我們在本教程中所做的那樣從頭開始創建所有圖標。 您可以從現有的免費平面圖標開始，並應用您剛剛學到的簡單技術。
讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。
• • •
進一步閱讀 Toptal 設計博客：
- 設計原則及其重要性
- 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
- 探索完形設計原則
- Adobe XD 與 Sketch – 哪種 UX 工具適合您？
- 頂級設計師使用的 10 個 UX 可交付成果