如何做出類似 iPhone 5c Case 貼在手機背後的效果？

12-17

Like this：

知乎圓桌和微博用的這個圖是 @鄭紫陽和我共同設計、製作的。回答一下這個問題，希望能幫助到有需要的朋友們。

提問者問的是如何用 Photoshop 來做出類似的效果。不過，實際上原圖並不是用 PS 做的，而是用 Adobe Illustrator CS 6 做的，所以在這裡，簡單說一下用 AI 大概是怎麼做出這個圖的。做出這個圖，在技術上其實一點也不難，但要留意很多細節。我把 AI 文檔放到 Droplr 上了，有需要的同學可以看一下： Droplr ? 知乎圓桌.ai

首先，可以看一下高清無碼的原圖（可以點擊打開大圖）：

源文件在製作的時候，用了兩個圖層。不過實際上也可以用一個圖層做到。在這裡使用兩個圖層是為了方便起見:

（頂層）

（底層）

如何製作頂層？首先，新建文檔，把文檔的寬度設置為 960 像素。因為孔洞的排列陣列是 5 x 3，所以高度先設置為 960 / 5 x 3 = 576 像素。文檔的高度和寬度在後面的步驟中需要修改，不過現在先這樣設置。

由於孔洞的布局是 5 x 3，所以每個孔洞和周圍的空白空間大小是 192 x 192 像素。那麼，在左上角拉橫豎兩條輔助線，划出一個 192 x 192 像素的空間。這一步是為了確定圓形孔洞和周圍空間的比例關係。經多次嘗試，發現圓形孔洞的直徑為 164 像素最佳，如圖：

接著，把 5 x 3 的孔洞陣列做出來。

然後，擴大一下畫布，使得位於邊緣的孔洞到邊緣的距離，為孔洞與孔洞之間的距離：

用路徑查找器工具的「聯集」工具將所有的圓形孔洞做個聯集運算，使它們成為一個對象。然後畫一個畫布大小的矩形，用聯集出來的形狀與矩形做個差集運算，就可以把 Case 的圖形做出來了：

（聯集和差集命令，就是路徑查找器「形狀模式」的前兩個命令，如圖）

做好後，開始填色，畫陰影什麼的。使用 95% 明度的白色填充圖形。用 AI 的「投影」效果來模擬陰影。投影的顏色就是純黑，其他選項如圖所示：

如果仔細觀察，可以看到我做了一個模擬孔洞邊緣倒角的效果：

這個效果是這樣做出來的。在「外觀」面板新建一個填色層，顏色為純白，然後使用「變換」效果，把這個填色層向上移動兩個像素：

最終的對象效果如圖：

然後，我們把底層做出來。底層的填色和頂層的填色相同，均為 95% 的白色。西文文字的字體為 Helvetica Neue，使用 Light 字重。中文文字的字體為「圓體-簡」，也是 Light 字重。

下一步，給文字增加一個白色，1 像素粗的描邊。首先把文字轉成曲線，然後把描邊顏色設置為白色，粗細設置為 1 像素，並令描邊沿外側對齊：

最後，就是調整一些細節了。@鄭紫陽在 iMessage 上和我敲定了一些細節，如 "Apple Special Event" 中 "Special" 的那個字母 "e" 應該在孔洞的中間左右。還有，「知乎」的「知」應做到讓孔洞的邊緣正好擋住右半部分，等等。

這個圖雖然很簡單，不過做了大概兩個小時左右，大部分的時間，都是在推敲細節。如圓形孔洞的大小、色彩的運用（白色是相當難以駕馭的色彩之一）、字體的大小及位置、描邊及陰影效果的調整，等等。

差不多就這樣了，不是很難是吧？

謝邀。

三個圖層，三步：

一：新建100×100的圖層，以中心為圓心，畫正圓，根據需要調整圓與邊界的相對距離，將其定義為圖案。
二：新建700×500圖層，填充色彩。新建圖層，填充剛才的圖案，然後內陰影。
三：輸入文字，放到最上一層，ctrl+單擊圖層一，然後用剛才的選區對文字層做蒙版。

具體如圖。

其實這只是利用蒙版轉移了圖層的順序，其實多一步就是另外一種做法：

在這種方法下，我們需要將我們之前填充的圖層的選區從背景副本這個圖層中刪掉
剩下的就是圓形以外的部分了
同樣的效果

我用 Pixelmator 製作，接下來用 Pixelmator 演示。 Adobe Photoshop 大同小異。

1、小圓點

層次邏輯：

步驟：

在 Pixelmator 中建立一個 100x100 的畫布

添加一個矩形充滿整個畫布

按 Shift-Command-V 進入 Vectormator 模式

圓形

Mode 選擇第三個

拖動滑鼠添加圓，尺寸拉伸到 100x100 ，再按住 Shift 和 Option 來拉伸小點

按 Shift-Command-V ，退出 Vectormator 模式，做出來了這個圖形

如果有陰影，編輯 Shape Style 去掉陰影

2、陰影

隱藏剛才的圖層

新建一個圓形，略大於之前那個圖層中央的圓形空洞

編輯 Shape Style ，背景色透明，添加內陰影

(我這裡用的是 Fill: color, rgba(255, 255, 255, 0))
（要注意 Pixelmator 里如果 Fill 是 None 那麼是不可以設置 Inner Shadow 的）

按順序疊放並隱藏或刪除背景圖層

輸出為 PNG ，保留透明度

3、最後一步

新建個畫布（工程），大些，例如百度貼吧簽名檔 500x200

將導出的 PNG 文件拖進來，排列（我這裡縮放到了 50x50 ）

添加文字

設置背景色

按照順序排列好圖層

大功告成

導出圖片即可使用

ZPCL
Zhihu Public Commercial License v1.1
知乎通用商業許可證（版本1.1）

以下答案為本人（知乎 ID: Joy Neop ， http://www.zhihu.com/people/joyneop ）（個人網站： http://neop.me/ ）原創，版權屬於本人所有。
除知乎依用戶協議使用外，任何媒體、單位或個人以轉載或其他方式複製發表本答案，即視為同意按以下辦法向本人支付報酬：
1、對法定許可的，依中華人民共和國《報刊轉載、摘編法定許可付酬標準暫行規定》的標準向本人支付報酬。
2、對信息網路傳播等非法定許可的情形，應保留答案全文、本人知乎網 ID、出處鏈接及本聲明全文，並按100元/次的標準向本人支付報酬。轉載人支付報酬後，即取得本人同意轉載的許可。
3、本人的收款帳戶為：PayPal 賬戶：joyneop@me.com。
4、需要以其他方式使用本答案的，除中華人民共和國相關法律和行政法規另有規定外，應取得本人書面授權。
5、本人保留隨時將原來以舊版 ZPCL 釋出的內容改為以新版釋出的權利，但是已經按照舊版 ZPCL 授權的內容不受影響。重新以新版本 ZPCL 取得授權（不必重複付費）還是不變更授權版本的選擇權歸授權取得者。
6、如果本文修改到了新版本並同時以新版 ZPCL 釋出，那麼本文的新版本只能按照新版本的 ZPCL 授權。

同時，再次強調：
1、不得對本文進行任何刪改。
2、在轉載時必須附帶上這份許可證全文。
3、本許可證由 Joy Neop 改寫自 GayScript 的個人著作權法律聲明。ZPCL 本身以 GPLv2 釋出。
4、知識產權是人類個體的一項基本權利，是中華人民共和國憲法和法律授予創作者的神聖不可侵犯的權利。侵犯他人著作權違反中華人民共和國法律，違反憲法確立的基本方針，是反黨、反革命、反社會主義的行為。

革命尚未成功，同志仍需努力。為廣大知友的根本利益，為中國社會主義偉大事業的前程，望繼新帶領知乎團隊加強法律力量與侵權行為繼續長期鬥爭下去。奇蹟還能再出現一次嗎？溫柔的聲音描繪出扭曲的未來。為了再沒有人盜文的世界，我仰望赤色污穢的天空，發出未曾擴散就已消逝的吶喊與祈禱，捨棄悲傷繼續前行。綺麗的月光，緩緩沉入它出現的方向。緩緩閉上眼睛，向遠方伸出手去，只因相信你的嘆息。

前兩天也是受到知乎圓桌那張圖片的「刺激」，自己動手做了一次。
剛開始只是想仿照著知乎圓桌的樣子做，想法很簡單：開了圓孔的蓋子+文字+底部。於是計算好比例，設置好多參考線（甘願用笨辦法無可救藥地懶，然後建立一個矩形，然後再用橢圓工具去除前面形狀畫正圓，把圓孔一個個開出來，然後設置陰影，在底下添加文字，完工。
成果就是這樣

可是我又開始不滿足這樣了，更加喪病地想把5c試著做出來，於是開始往上面加東西，等到我添加混合選項的時候，才發現圓孔的陰影和機殼的陰影一致會變得很違和。
所以我咬咬牙，又重新設置參考線……這次是和樓上的前輩們用的相似的方法，畫圓，添加內陰影，然後將文字設立剪裁遮色片。
最終是做了個這樣的東西：

因為還只是初心者，所以手法顯得拙劣，做出來的東西也不成熟，還是本著交流的想法貼上來，各位前輩們輕拍。

1、--------------------------------------------------------------------------------------------------------------------------------------

2、--------------------------------------------------------------------------------------------------------------------------------------

3、--------------------------------------------------------------------------------------------------------------------------------------

4、--------------------------------------------------------------------------------------------------------------------------------------

是這樣的嗎。

ai 還是強大啊，如果adobe ，能給ai加上點陣圖處理功能呢，那就完美了

下面圖層放個圖片，再新建一個圖層，用形狀工具畫個圓，填充為0%，然後在圖層效果添加內陰影就可以了，新建第三層填充白色，按ctrl選擇第二圖層然後按反選，再選第三層新建圖層蒙版