圖片中的icon怎麼用PS和AI完成的？

作品來自：Behance
使用的工具：PS AI
有誰知道這是怎麼實現的嘛？

---

謝邀，因為自己不是做UI的，所以畫這些擬物圖標並不如UI設計師專業，畫得比較少。

連續工作了二十幾個小時現在腦子有點亂……（這麼累了還要畫膠囊，不給個贊說得過去嗎！）我就放一下大致的繪製流程圖吧，具體的就不說了，腦殼疼，聰明的大家一定可以領悟！

總之最最最重要的就是理解圖中的各種明暗關係，沒有什麼奇淫技巧，就是老老實實地畫。

評論里說到這更像是炫技不像教程……這是我的錯，我太懶了所以從來不把細節的地方一步一步說清楚……但是我還是相信大家可以理解怎麼畫的！

打好基礎很重要，如果各項功能都一片空白不會用，比如連矩形工具都不會用，而是我一步一步地教，相信我你一定會忘記怎麼畫的。但是基本功能都了解後，哪怕你從沒畫過某樣東西，你只要看一遍這樣的流程圖你也懂了，而且忘不了。

首先定型，把一些基本形狀畫出來。

開始描繪膠囊的各種明暗關係，這裡比較複雜，但個人認為沒必要多說，主要靠自己理解，硬套教程沒意義，主要是分清楚圖中事物的各種明暗關係。這個膠囊是我第一次畫，完全就是靠理解圖中的關係再結合軟體的功能實現。

另外一半直接用之前的那個改下顏色就好

板上的凹凸主要是用了斜面與浮雕里的紋理效果

透明塑料殼的繪製思路和膠囊其實差不多

加下陰影等等細節

下面放一些自己之前畫的，都是自己平時用的東西，算是看到什麼畫什麼吧，我沒學過美術，也沒上過設計班，大學主修的文案策劃方向的廣告學，畫這些純粹是喜歡而已。

所以這些怎麼畫？我覺得最重要的還是【理解、分解、再構築】

先理解事物本身的各種關係，比如明暗、材質等等，接著把他們分解開，從無開始再構築。

---

PPT是個做UI的好工具，來挑戰一下

過程參考這個：
如何用 PS 或 AI 做出這個電視機？ - 野合菌的回答

---

樓上答得挺好的了，正好前段時間看到過這個icon教程，從三聯把圖片轉過來了

沒想到沒貼全。。。。。轉個站酷的鏈接吧擬物PS膠囊教程

---

首頁刷到。自己很早之前也見過類似的膠囊圖標，下面是自己去年4月份（文件顯示最後更新時間）照著之前看到的圖自己摸索著做出來（為了看起來比較相似，顏色是剛才吸取了題主圖中的顏色）：

基本上用圖層樣式就可以達到差不多的效果,下面是一些個人認為在實現效果比較重要的截圖（參數僅供參考）：
這是最底下的圓角矩形，也就是上面「包裝」的樣式。

（↑）用斜面浮雕控制「包裝」的立體效果。

上圖（↑）的紋理是「包裝」上點的效果。

漸變控制「包裝」的光影效果。

下面是最上圖中「膠囊」的樣式。

（↑）等高線可以實現「膠囊」的光影、體積感等效果。

上圖（↑）的漸變可以對「膠囊」的顏色、位置等進行更改。

外發光是「膠囊」外圍的那層塑料。 使用圖層樣式有個好處就是方便，只要4個圖層就可以實現大致的效果。不過認真觀察可以發現最終效果並不是很好。效果圖中「膠囊」的投影不能透過外面的那層塑料，也就是上圖（↑）的外發光，另外還有膠囊的高光效果等等。
總之方法很多，以上是自己之前實現效果的一些思路（參數僅供參考）。

---

來交作業，謝謝群青找的教程，但是沒有貼全，補上剩下的，先放作業

再放剩下的教程步驟

最後放個鏈接ps教程之繪製膠囊圖標(2)

---

瞎扯
背景圖 css3的圓角 漸變 陰影

---

不請自答，樓上已經說的很好了，在說細節就該說調的什麼顏色，什麼形狀了。一個白色的盤子，好吧，我認為他是盤子，找一個材質做一個剪切蒙版，剪切到裡面。顏色什麼的還是自己調。

---

推薦閱讀：