這種icon效果是如何實現的？

12-07

如上圖所示，上面的音控以及下陷的感覺是如何通過PS做出來的？音控難道是C+A+T找角度複製的嗎？

細節多到髮指……

上午試了一個，先放成圖↓↓。好久沒這麼磨圖標了……

其實不難，就是細節太多了太多了太多了
跟原圖還是有差距，我就說下方法，想精益求精還要沉下心再調調。

——————————————————————————————————
我是拿PS畫的，AI助攻了下。
看下圖層先：
1.白色圓角矩形打底，這是最下面一層，給投影，原圖投影偏青色。大概給了下，後期可以細調。

2.再做一個稍微小一點的圓角矩形，給描邊和漸變。

3.畫個圓，給圖層樣式-斜面和浮雕。就是凹陷的效果，試了很久，參數如下，可依個人口味酌情調節~

4.做完凹陷，現在再做凹陷底部的樣式，依舊各種圖層樣式的疊加。都要慢慢試，我先放我的參數。↓

5.其實這步是到最後才做的。這個很簡單，兩個矩形兩個圓，吸色就行。

6.這步做的是中間圓的邊緣一圈，用的漸變疊加，對照原圖一點一點吸色，調整角度。

7.簡單的給個圓，吸色。

8.中心的白色小圓，有點陰影，給個淺色的描邊即可。

9.黑片，黑圓+三個白色圓角矩形做布爾運算。注意黑片的顏色，也是深灰色的漸變，左上角稍亮。

10.再畫一個圓，吸色。

11.MUJI的LOGO，我直接用的原圖的。

12.喪心病狂的蜂窩矩陣，這步是AI做的。稍後說。

————————————————
AI部分
觀察原圖的蜂窩點點們，從中心向外放射，很整齊，而且有從小到大從密到疏的漸變趨勢。

打開AI
1.畫一個圓。我畫的大概1.5MM，不過矢量的多大都可以，最後調就行。

2.效果-扭曲和變換-變換。調節參數如下圖。

3.達到上圖效果後，再次選擇小圓點，菜單欄-對象-擴展外觀。

4.選擇這一圈小點，然後再次打開第二步的變換。調節參數如下圖↓：

5.將圖形再次擴展外觀，然後複製到PS中，選擇「形狀圖層」方式複製，調節下顏色給個遮罩就可以了。

————————————————————————————————————
完成。注意細節細節，我畫的比較敷衍，憋學我。

寫的這麼辛苦，恬不知恥求個贊啊~謝謝。

（利益相關：「原」圖作者。原圖最早發自：Behance)

用 AI 畫的，真的不難。

放大看音孔的細節是這樣的。圓形，底色灰色，描邊是豎直方向的漸變，上面暗下面亮來模仿從上方打光的效果。一個圓形，沿播放機徑向複製幾次，然後環繞複製一圈即可。

如圖所示，凹陷部分立體感靠的是豎直方向的兩個投影效果來實現的。一個黑色投影，向上方向；另一個是白色投影，向下方向，來通過光影創造體積感。圓形「底盤」內部的陰影用的是一個漸變網格。

若用 AI 畫的話，有一點要說一下：

注意光碟外部的那個彩色環。AI 本身不支持角度漸變，這裡用了一個 trick: Quick Tip: Create a Conical Gradient with Adobe Illustrator, in Two Minutes! ，用一個網格來實現了角度漸變。

其餘就是細節了。光碟上商標的西文部分是 Helvetica，漢字部分是日語無襯線字體「ヒラギノ角ゴ StdN W8」。把投影該用的地方都用上，能增加不少真實感。（原理是模擬 ambient occlusion，即環境光遮蔽，推薦了解一下這個概念）

總之其實沒有什麼難度。畫這張圖那時水平很菜的，能看出來這張圖有不少值得改進的地方。有什麼不明白的可以在評論區問。

擴展閱讀：
如何用 PS 或 AI 做出這個電視機？ - Akira Zhang 的回答
如何做出類似 iPhone 5c Case 貼在手機背後的效果？ - Akira Zhang 的回答

仿就要仿到一模一樣。

---
效果圖:

對比圖：

---
製作此類文件我都是使用Illustrator，一般不用Photoshop。
這個選擇因人而異，但Illustrator就是被設計來做這類圖片的，我個人也更偏向矢量圖，所以建議用Illustrator來製作比較好。

將畫面里的所有圖形都先畫出輪廓，可根據物體的物理結構進行分層，比如光碟和機器可以分開繪製。

中間凹陷進去的部分實際上是畫了一個圓環，然後添加了傾斜45度的黑白的線性漸變，再高斯模糊20個像素，透明度60%，放在凹陷的框體周圍，就有了這個陰影和反光的效果。

別的部分基本上都是通過顏色漸變來添加立體感，當然肯定會運用到投影。

小孔是畫一條橫貫整體的連貫小孔，編組後用旋轉工具以2度的角度複製（Ctrl+D)，完成後刪除多餘的小孔即可得到，仔細看的話我的小孔是和原圖完全一致的。

光碟的反光要搜索一下方法，搜「Illustrator 角度漸變」就可以找到。

最中間的黑色CD卡扣可以用Illustrator的3D功能直接模擬。

權當練習，具體步驟就不貼了，挺需要耐心的，任何問題歡迎評論。

給一個 Sketch 的方法，拋磚引玉。不得不說Sketch還不能很好地處理這麼多密密麻麻的細節，這種圖還是啊逗比的工具比較好（或者是本人小白，求老司機開個車）。因為工作的地方日常都用Sketch，所以這是個很好的技術挑戰，其蛋疼本質和用Excel做動畫差不多。

先上圖為敬：

講道理，除了幾百個中心放射狀圓點比較難辦以外，其餘的效果用Sketch都可以無壓力還原，方法和AI大同小異，都是通過調整陰影來達到立體感，而且Sketch有時可以做得更快。所以我只著重說一下這些要人命的點是怎麼用Sketch搞的。

先看一下要人命的點的細節圖：

其他答案也有提到，用Sketch自帶的功能大失敗，i7都帶不起來（應該指的是 Layer -&> Path -&> Rotate Copies）。這種做法具體是先畫一豎列的點，假定每一列點之間是2度，所以再選擇旋轉複製180次，然後等Mac小綵球等到天荒地老……等Sketch畫完了以後你也沒辦法給每個點加陰影和漸變，因為你每動一次滑鼠，Sketch就要卡個十分鐘，更別提給幾百個點加特技了。所以用自帶的功能是絕對不行的，估計得等下兩代的Intel CPU。

作弊方法：使用Sketch的一個簡單插件：Rotate Line.

這個插件可以快速地畫出旋轉中心對稱圖形，其本質是把Sketch的Rotate功能自動化了。雖然依然沒有Illustrator快，但是……總比沒有強……

具體做法，先畫一豎列點，減去中間的部分（為的是盡量減少Sketch的運算量），設定旋轉角度為2度，複製一次，這時你得到了兩列相差2度的點。然後再複製這2豎列的點，旋轉4度，於是你現在有4列 -&> 再複製到8列 -&> 再加兩條，複製到10列 -&> 複製到30列 -&> 複製到90列 -&> 複製到180列 -&> 完成！

如果按照 2-&>4-&>8-&>16 -&>32 -&> 64 -&> 128 -&> 256 -&> 512 的順序複製的話，刪多餘的點會讓你刪到手軟，所以提前要想好角度和需要複製的角度和步數，一步到位。

你的Sketch還是會卡，但是……不會卡到天荒地老了，只是稍微卡一點兒。總比沒有強……這一步結束以後，加上圖標背景，加上中心的圓，刪掉周圍多餘的點，效果大概如圖：

真正卡的是下一步。

首先選中所有的點，然後 Layer -&> Path -&> Flatten，重置所有被旋轉過的豎列點的狀態。

然後就可以統一改變所有的點的Fill和Border啦！只要把Border設定成從上到下的黑白漸變就可以了。但是我推薦一部分一部分地改這些點（一次改四分之一的量），因為感覺沒那麼卡。一下子改變所有的點也可以，但是我i5的機器卡了大概有三分鐘。

好處在於，只要修改一個點的漸變，所有被選中的點都會跟著變。

經過一番蛋碎，終於所有的點都有了立體感。剩下的就是摳其他細節了。

如果有老司機有更好的、更快的、這裡有哪一步有更優化的、只用Sketch以及其插件的方法，認真求帶。

點點的漸變用grasshopper拖個腳本來解決吧

邊緣虛線模糊怎麼回事！微信AA782137983

一直以為這CD機是實拍的orz
話說回來，誰會用這麼煩的東西做個icon啊
http://wap.sogou.com/web/uID=ap1MV1csQ5ITJANc/v=5/type=1/sp=2/ct=160411002350/keyword=MUJICD%E6%9C%BA/id=820f607e-be3c-4718-bf0d-ac1cd7981960/sec=MzxRxXQaUCKiGdxVjJMxBQ../vr=30000909/id=820f607e-be3c-4718-bf0d-ac1cd7981960/tc?key=MUJICD%E6%9C%BApno=2g_ut=3bid=sogou-mobp-8fd7f981e10b4133dp=1pg=webzclk=14url=http%3A%2F%2Fwww.xueui.cn%2Ftutorials%2Fphotoshop-tutorials%2Fcd-ps-tutorial.htmlf=0vrid=30000909linkid=0wml=0w=1347mcv=14pcl=277,2772sed=0ml=55sct=300