天天看點

Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用

Demo1

Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 首先我們看到這個,之前的文章可以實作的差不多,但是中間的斷層很難實作,這裡就說一下怎麼實作他們之間交叉的斷層怎麼實作的,兩種方法
  • 方法1
直接鋼筆工具自己将裡面的所有的零部件全部畫出來,顯然這不是我要說的
  • 方法2
  • 我們直接繪制一個畫闆(快捷鍵是a)
  • 然後我們繪制一個矩形,然後複制一個,旋轉90度,選中兩個,選擇減去頂層
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 我們就得到這個斷層的效果
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
當然又會有擡杠的說了,我不會直接畫兩個矩形嗎?當然是可以的,但是複雜的時候就不那麼舒服了,我隻是給你們示範一下基礎用法,複雜的時候也是一樣的,這裡還有一個點就是減去頂層的時候,看好自己哪個是在上面的

Demo2

Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 這種是怎麼實作的呢,很簡單
  • 我們将原圖扔進去,然後繪制一個圓角的矩形,按照他的比例來
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 選擇旋轉副本
這裡值得注意的一點是,旋轉的時候是不算自己的, 也就是你一共是8個的話,就隻需要7個就夠了
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 旋轉以後拖動中間的白點,就會自己縮小,和原圖一樣的時候就松手
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 然後拖到隔壁的畫闆上,将顔色一個一個的改變
  • 最後就是這樣,
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 但是很明顯,前途的嵌套和我們的不一樣,這個時候我們需要做的是全部選中,将邊框取消(快捷鍵是B),然後我們選擇正片疊底
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 蘋果的Photo的logo就繪制結束了
Demo3
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 這個最難的是這個缺口是怎麼實作的
  • 我們繪制一個圓形,邊框我們按照原圖進行加粗,然後按照圓形的半徑繪制一個正方形,這個正方形隻是一個參考,沒有别的作用,然後我們直接使用剪刀工具,将四分之一的部分減去
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 最後将背景顔色改為目前圓形内部的顔色即可
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 這裡使用到了見剪刀工具,可以減去你不需要的任意部分。

Demo4

Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
  • 這個是怎麼快速實作的,這個icon其實就是一個更多的icon,很常見,這個實作最快的方式是網格
  • 我們繪制一個,然後選擇網格,進行數量和間距的調整即可
Sketch繪制相對複雜效果的Icon(網格、剪刀、旋轉副本)使用
這一篇就寫到這,下一篇我們講一下怎麼将阿裡的svg圖示使用這個軟體進行編輯,然後說一下怎麼切圖!