Nest Pastiche 製作過程

這是模仿 Nest 煙霧警報器 做的 icon,打洞實在被難倒了沒辦法完全一樣,只能做個差不多相似的樣子出來。打洞排列怎麼做可以參考這篇:製作螺旋圓點花紋的方法 ,不怎麼好做就是了。

圖層數

比起之前的Icon Design:My Wallet ,這個 Nest Pastiche icon 只有 9 個圖層,最難搞的就是那堆洞的排列,其他都還好處理。

  1. 邊緣高光陰影
  2. 文字
  3. 中間的環和彩色光
  4. 中間的凹槽
  5. 滿滿的打洞
  6. 方型底
  7. 陰影a
  8. 陰影b
  9. 白底

陰影

為了模擬真實影子,我會做2層的陰影,略微修改尺寸、位置、透明度、高斯模糊的數值。如果只用單層,影子漸層感會比較呆板。


靠近主體、尺寸較小,用於加深主體的影子、增強對比度。


偏離主體、高斯模糊的數值更大、尺寸也比較大,透明度低,做影子外圍漸層的效果。

邊緣導角

這種彎進去的作法挺常見的,稍微試了下,發現只要一個圖層、設定 2 種圖層樣式就能表現出還不錯的視覺效果。光線由上往下打,所以上方有高光、陰暗面在下方。想像一下實物、方體邊緣是導了 R 角,所以高光不會是銳利一條線,而是漸層。


製作陰影面,離光緣越遠的部份一定比較暗。


製作 R 角緩和的反光。因為內陰影和內光運會重疊在一起,注意數值設定,內光暈要比內陰影的尺寸更大。

成品


中間的文字模擬 3C 產品上常見的金屬文字貼紙。因文字較細,僅設定筆畫、漸層、陰影。原版產品的光圈是藍色、我試著改成粉紅色。

Nest 除了白色機型之外、也有黑色款,有興趣的人可以試著把黑色款做出來。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
快速製作圓形漸層icon


看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。

Icon Design:My Wallet

20131207-DEMO.png
總時數超過 30 小時,超過 100 個圖層。逼我換 MACBOOK PRO,還得加滿 RAM。舊 AIR 跑不太動。希望有人可以因為這顆 icon,分我個 Dribbble 的邀請碼。(真的拿到了!感謝 Mike Bronk

各式按鈕背景:進階篇

32.jpg
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影,為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景:基本篇 製作~

各式按鈕背景:基本篇


最常見的按鈕就是個長條型的色塊,配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化,在視覺上更顯精緻。可接著各式按鈕作法:文字篇 的步驟接著做。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close