如何用Sketch畫微質感圖標?

2022-01-05 UI充能站

加微信  「786318553」 進設計群 

111

今天為大家介紹一下如下圖這種帶有寫實質感的圖標，如何使用sketch進行繪製。

我以下圖繪製的這個圖標為例，拆分成了3個步驟為大家介紹具體的繪製過程。

繪製微質感圖標，第一步需要找到一個適合的圖片參考。我找了以下幾個扳手和螺絲刀的實物圖，用於基礎形狀的繪製。

找圖的重點是：圖片中物體的光影關係明確，有一定的透視，便於後期繪製光影關係。

根據以上找到的圖片參考，我提取出了下面的基礎形狀。

接著確定一個光源方向，參照參考圖拉出圖形基礎的漸變，這裡可以多加幾個節點豐富層次，使漸變更加柔和。根據參考圖形，在後期光影細節上我還要在基礎形狀上加入圖形疊加，固這裡的漸變我只加了3~4個節點。一般加3~5個左右的節點皆可，節點之間注意顏色深淺的變化。

以上就基本完成了這個圖標的繪製，但現在還是很扁平的感覺，質感不夠強烈。接下來我們要通過分析參考圖的光影關係進一步對圖標優化。

由於添加細節較多，我就重點說明一下不同的細節對應的繪製方法。

1.柔和過渡，虛化高光，投影

善用高斯模糊工具，先繪製基礎圖形，然後對齊進行高斯模糊，調整到合適的數值。

這裡強調一下投影需要進行兩層或多層模糊，外層模糊數值更高，內層模糊數值較低，形成過渡。

2.平緩凹陷轉折

圖形剪切疊加，同時拉出漸變，交匯處圖形間漸變顏色明暗關係明顯，形成凹陷感。

3.深凹處光影

可直接採用內陰影疊加，也可繪製圖形剪切並進行高斯模糊。

用sketch繪製微質感圖標，重點是拉出多節點漸變，一般3~5個，以及後期對光影細節的刻畫。

在光影細節刻畫中，要靈活使用高斯模糊工具繪製需要過渡的地方。繪製漸變剪切圖形進行疊加，形成平緩的凹陷感。

-- END --

掃碼加入【UI充能站粉絲團】知識星球

和 522 位小夥伴共同成長

後臺回復「圖標網格」即可領取

小程序控制項 | 包圖小白體 | 面試技巧 | 圖標規範

UI設計規範 | UI教程 | AE教程

字體設計 | 作品集 | 點這裡獲取更多資源

相關焦點

  • 乾貨 | Sketch畫圖標技巧+源文件分享
    今天葉哥給大家分享我用Sketch畫的100個店鋪類圖標的設計思路，我在繪製的過程中呢，一開始還是覺得SK不如AI，後來總結出了一些實用小技巧，於是對SK又有了新的認識（真香），效率提高了不少。首頁、帳單、秤的圖標我提供了多種方案供選擇，你想用哪個就用哪個。
  • Sketch新圖標,經典是如何被設計出來的
    翻譯文章，來源於Sketch社區https://www.sketch.com/blog/2020/12/02/how-we-redesigned-the-sketch-icon-for-big-sur/
  • zeplin和sketch協作的三個小竅門
    重要的事情說三遍聽到這裡，大家是不是都想用它了呢？UI設計師們趕緊用起來吧！那麼zeplin和sketch協作時有沒有什麼需要注意的問題呢？是不是在sketch中完成視覺稿後，直接command＋E上傳到zeplin就可以了呢？為了讓開發人員更好的「讀懂」視覺稿，接下來我就簡單講一些zeplin和sketch協作時的三個小竅門。
  • sketch切圖基礎教程
    因為大部分公司沒能給設（qie）計(tu)師(zai)配mac電腦，所以用sketch少，不然我相信大部分設（qie）計(tu)師(zai)都會轉移到sketch今天為大家分享切圖相關問題，先說說最基礎的，在sketch中，一個項目的所有界面通常可以放在一個畫布裡，然後快捷鍵"A"創建畫板Artboard.然後一個項目的縮略圖就如下圖所示。
  • PS教程:製作金屬質感的圖標
    所以今天我們就來教大家製作有金屬質感的效果，當然做之前希望大家可以觀察一下家裡既有金屬光澤的東西，在心裡大體上遊的印象。效果圖：2、新建畫布之後我們開始創作圖標，首先建立一個圓角矩形，按住shift畫一個正圓角形，然後右側工具欄調整圓角大小，參數如下：
  • 如何直接用Sketch製作動畫|Sketch插件|
    1.下載並解壓 Anima Tookit.ziphttps://timeline.animaapp.com/2.雙擊 Anima Tookit.sketchplugin馬克筆設計留學的MUzi老師就以一個加載動畫為例來詳細講一下Timeline該如何使用：首先新建一個Sketch文件，創建一個如下圖這樣的圖案。這裡直接創建一個圓形，然後將它的描邊設置為角度漸變就可以了！
  • 善用新功能,老司機帶你榨乾Sketch
    了解 Numbers 或者 Excel 操作的同學只需要在這些圖表軟體裡用表格達搭建一套簡單的數據並生成相應的圖形演示，再把這些圖形導出成 PDF，就可以將 PDF 拖拽進 Sketch 文件裡了。而 Numbers 更簡單，只需要右擊生成好的圖形選擇「拷貝為 PDF」，然後在 Sketch 裡粘貼 (command+v )，All Set！
  • 【乾貨教程】萌萌噠機器人 用sketch手把手教你做
    ↑↑↑伸出手指點這裡原創/自譯教程：用sketch創作萌萌噠機器人形象(翻譯)本作品由站酷網：紫豔冰琳 原創，未經許可請勿作商業用途。本教程介紹的是如何在sketch中用最簡單的形狀、線條以及快捷鍵來創作機器人形象。作者創作了以下幾種機器人形象。
  • 資源:11款超好用的sketch插件打包給你
    不清楚怎麼設置的同學，就直接用默認的標準像素就好了，反正後面前端看的index預覽文件裡面可以再設置，所以這個其實不影響。使用這個插件能快速的完成與前端的交接工作，我一般是用sketch默認的切圖（製作導出項）完成切圖後，選中所有要交接的界面（畫板），然後點開Sketch Measure-導出規範（都是默認設置）就完成啦。
  • 免費素材資源系列:AI筆刷和icon圖標大合集(優設公眾號專屬福利)
    上次發布的PS筆刷和插件（後臺回復「筆刷插件」下載），有童鞋反應版本不兼容的問題，小編親測CS6，CC，CC2015都有效（不要問我為什麼有這麼多版本），另外小編還找了設計師朋友測試了CC2017也是可以用的
  • 圖標+字體+組件庫資源合集
    ，課後又苦於不知該如何獲取。所有文件中，以 dmg 為後綴的文件是專門給 macOS 用的！Windows 能用的我都已經解壓好了。另外，如果沒有 sketch 但想要打開 sketch 文件，可以用 XD 或 figma 打開。
  • 更新 | Sketch 58 中文破解版
    另一方面，Sketch提供的模板可以幫助您設計iOS和Mac OS X的圖標，以及效果和像素網格。配合矢量工具和基本的形狀，無論你在設計的圖標、網站、界面或其它任何設計，結合成複雜的形狀或使用非破壞性的布爾運算，你都可以自由地編輯它們，然後應用先進的圖層樣式選項，填充如多重陰影
  • Sketch基礎教程(一)界面
    #如何使用標尺和創建參考＃「sketch」默認情況下會隱藏「標尺」，但你可以通過選擇「 視圖」>「畫布」>「顯示標尺」或按Ctrl+R來顯示它們。你可以在標尺上單擊並拖動以在畫布上任意位置設置其零原點。要將其鎖定在適當的位置，請單擊角落的鎖定圖標。
  • 如何快速設置 Sketch 快捷鍵 | Sketch 技能分享
    習慣使用快捷鍵的小夥伴對這個界面一定很熟悉，是通過 進入 Mac OS X 的系統偏好設置 sketch 快捷鍵的界面。
  • Sketch 69 軟體介紹及安裝
    Sketch是優秀的輕量級矢量繪圖設計應用，對於網頁設計和移動設計者來說，比PhotoShop好用N倍！尤其是在移動應用設計方面。
  • sketch教程 介紹篇
  • sketch插件下載連結大全
    昨天的微信連結：設計師推薦Sketch插件sketch官網：https://www.sketchapp.com/sketch中文網：http://www.sketchcn.com/用過Zeplin的同學基本都會覺得這款免費的插件，好用到淚流滿面。直接在本地生成html，非常便捷查看尺寸顏色等參數，和Zeplin一樣的思路。它能夠真正的徹底告別標記尺寸和顏色等dirty work。
  • 用 CSS3 畫心形和搜索放大鏡圖標
    1、新建個div，或者span什麼的<span class="ex-search"></span> .ex-search {     position: relative; } 2、用:
  • 谷歌全棧設計師打造的 Sketch 插件,好用!
    圖標庫比較強大，支持四種顏色的換色以及搜索，錄入了幾乎所有 material design 裡用到的圖標。吐司生成功能支持移動端和桌面端的吐司，所有可見欄位均可編輯。當你選擇一個圖層或分組時，可以用該功能來調節其浮高投影，總共分了六個投影值。
  • Sketch 插件導出切片
    除了標註之外還有個比較重要的功能就是切圖的導出。Sketch 中如果要導出一張切圖，需要將其標記為切片（Slice）。在 Sketch 中切片的標記是多種多樣的，針對不同的切片標記插件需要處理的邏輯也有細微的差別。下面我們就來看看不同的切片操作在插件中應該如何導出吧。