04 Facebook 封面相片與大頭貼設計

2. 04 Facebook 封面相片與大頭貼設計 4.1 認識 Facebook "封面相片" 與 "大頭貼照" 4.2 設定版面尺寸與配置 4.3 置入相片並設定圖層剪裁 4.4 相片趣味設計 4.5 裁切與儲存為指定圖片格式 4.6 上傳至 Facebook

3. Facebook封面設計 2012 年 4 月 開始 Facebook專頁全面更新為擁有 Timeline 的動態時報，其中最能張顯頁面特色的就屬 "封面相片" 與 "大頭貼照" 的設計，網路上常見網友將自己的 Facebook「門面」加上搞怪、創意、趣味取勝的影像，輕鬆創造出屬於自己的個人專頁。

4. 4.1 認識 Facebook "封面相片" 與 "大頭貼照" 突顯專頁特色 設計出一份好作品，事先了解正確的尺寸與格式是最基本的，這樣才能有效掌握作品。 過去使用 Facebook專頁時，僅能放置大頭照，並在頁面上方放置一連串相簿內的相片來佈置專頁的內容。新的版面上，我們可以在 Facebook專頁的上方放置一個大型橫幅的相片來當做封面相片，以突顯最新的活動與專頁特色。

5. 尺寸規定 "封面相片" 是專頁上方較大張的圖片，"大頭貼照" 則是封面相片左下角的正方型圖片。因為封面相片與大頭貼照重疊，在設計時可以一起考量，更可透過創意加深人們在瀏覽專頁時的印象，提高按 "讚" 加入的意願，其設計相對位置如下：

6. 不能放上去的訊息 Facebook希望您用獨一無二的照片來吸引粉絲，可能是餐廳裡最受歡迎菜色、鞋店中最熱賣的球鞋，或是您在店裡與客戶熱情互動的照片，都是很好的主題素材，如果能再加些創意就更好了！ 但是封面照片內容，不是您想放什麼都可以，它可是有限制的喔！除了圖片的寬度之外，還必須注意不能包含以下的內容：(相關資訊若有異動以 Facebook官網公告為主) • 價格或購買資訊，例如「40% 的折扣」或「從我們的網站下載」 • 相關的聯絡資訊，例如網址、電子郵件、聯絡電話與郵寄地址...等訊息。 • 提及用戶介面的元件，例如讚或分享，或其他 Facebook網站功能 • 號召行動，例如「馬上取得」或「告訴您的朋友」。 另外所有的封面照片都是公開的，其中所呈現的內容不能造假、欺騙或誤導，也不能侵犯第三方合作夥伴的智慧財產權。您不能鼓勵或誘導他人上傳您的封面相片到他們個人的動態時報上，這是要特別注意的。

7. 4.2 設定版面尺寸與配置 利用螢幕擷取版面 掌握了 Facebook專頁封面的設計要點後，就要開始著手製作囉！先透過螢幕擷取的方式快速取得正確尺寸與位置，再以參考線規畫配置 01直接於瀏覽器拍下 1:1 畫面 進入瀏覽器 (在此以 Google Chrome 為例)，開啟個人的 Facebook頁面或粉絲專頁均 可，先將視窗調整為 最大化 ，設定瀏覽器顯示比例為100%， 再拍下版面參考圖。

8. 02將拍下的畫面圖貼入新文件 回到 Photoshop，將剛才拍下的畫面貼入新的檔案文件中。 03裁切主題區域 因為拍到的參考圖是整個螢幕畫面，現在先將頁面上的 "封面相片" 與 "大頭貼照" 區裁切下來：

9. 用參考線定位相片區域 貼上版面參考圖後，相片與相關設計的擺放有許多時刻需要精準繪製路徑位置，最常用的輔助工具即是參考線。 01設定尺標與對齊 為方便參考線建立請先開啟 尺標(會在編輯區的上方與左方顯示)，並考量有些參考線需拖曳至圖上較不易對齊的位置所以建議先關閉 靠齊 功能。

10. 02拖曳參考線 參考線分為垂直與水平二種，若是垂直的參考線請由左側尺標處新增，水平的參考線請由上方尺標處新增。

11. 在相片區域繪製矩形 依循前面拖曳出來的參考線，繪製出準確的 "封面相片" 與 "大頭貼照" 區塊： 01開啟對齊功能 為方便等一下繪製的矩形物件可以精準對齊參考線的位置，請選按 檢視 \ 靠齊 (功能文字左側顯示 )，開啟 靠齊 功能。 02繪製封面相片與大頭貼照區塊 運用 矩形工具 繪製出封面 "封面相片" 與 "大頭貼照" 所在位置的區塊，待加入相片設計時就可輕鬆置入正確的位置中。 03合併形狀物件 完成了依循版型參考線繪製的 "封面相片" 與 "大頭貼照" 區塊，接著要將二個區塊進行合併才能於後續置入喜愛的相片。

12. 4.3 置入相片並設定圖層剪裁 繪製形狀的過程中，由外部插入圖片進入形狀中整合，其實是經常使用的動作，這裡將介紹如何置入外部圖片，並利用剪裁遮色片的方式融入作品中。 01置入外部圖片 首先將要設計為 "封面相片" 的相片圖檔置入作品： 02設定圖層剪裁遮色片 利用剪裁遮色片的方式，將置入的相片放置在指定範圍內。

13. 4.4 相片趣味設計 影像去背與縮放旋轉 簡單去背可以更加突顯相片主角，讓主角有趣的融入背景圖中。 01選取相片中的主角 開啟範例原始檔 <04-02.jpg>，這是一張背景單純的人物相片，所以運用 魔術棒工具 就可輕鬆的去除背景僅取材人物的部分。

14. 02調整主角大小與角度 由於去背後的主角圖片是張較長的影像，若以一般直立方式擺放在 "大頭貼照" 區塊，待剪裁上傳到 Facebook後，網友則只能看到主角的腳！這時動動腦，以趣味手法設計出不同的擺放角度，就可簡單解決這個問題。 03加入另一張相片的主角 接著開啟範例原始檔 <04-03.jpg>，以相同的方法為該相片去背僅取材人物的部分，再設計到 "封面相片" 中。

15. 繪製漸層、透明向量背景 好的相片創意後，可再運用向量物件加上簡單背景色塊設計： 01繪製形狀與變形 首先繪製一個最基本的矩形，再將其變形為梯形。 02套用漸層色彩 選取剛才調整好的梯形形狀物件後，將其設計為咖啡色漸層的色彩效果。 03調整圖層順序 因為剛才繪出的梯形形狀物件擋住了整張相片，只要簡單調整圖層順序就可讓被壓在下層的相片再次浮出台面。 04調整圖層混合模式與透明度 接著套用圖層的混合模式與透明度效果，讓上下圖層間進行像素運算，變化出令人驚豔的效果。

16. 繪製創意對話雲 最後運用向量物件加上簡單插圖效果，讓作品更加亮眼： 01繪製自訂形狀 常見漫畫中以俏皮的對話雲方式呈現主角心中的 OS，在此以簡單的形狀繪製就可擁有這樣的效果。 02複製圖層 複製圖層是進行物件處理時很重要的動作，可依下述方式複製對話雲物件設計重疊效果。

17. 03調整形狀物件的色彩 調整複製出來的對話雲色彩與位置，以搭配等一下要設計的文字內容 04調整形狀物件的角度 同時選取二個對話雲圖層，稍加旋轉物件角度，讓插圖與人物主角更融合。 05加入文字 文字在作品中是個畫龍點睛的角色，最後運用 水平文字工具 輸入合適的文字再移至對話雲物件上擺放，即完成 Facebook封面相片與大頭貼的設計。

18. 4.5 裁切與儲存為指定圖片格式 完成前面作品每個細節的設計，最後也是最重要的環節即是要依參考線準確的將 "封面相片" 與 "大頭貼照" 區塊裁切並儲存為 JPG 格式的圖片。 01裁切與另存 "封面相片" 區塊 編輯區已運用參考線規劃出上方橫向 "封面相片" 區塊的部分，現在就動手將這個區塊中的內容裁切下來並轉成 JPG 格式圖片：

19. 02裁切與另存 "大頭貼照" 區塊 CS6 新功能中將 裁切工具 設計為非破壞性的，可選擇將裁切的像素刪除或是可再使用，而上一步驟使用 裁切工具 鈕時已取消核選 刪除裁切像素，所以現在要裁切出 "大頭貼照" 區塊時只要重新規劃裁切範圍即可。 03調整 "大頭貼照" 影像大小；符合 180 x 180 像素 "大頭貼照" 的尺寸為 160 x 160 像素，但目前 Facebook規定上傳的 "大頭貼照" 寬度至少須為 180 像素，所以再此技術性調整一下已製作好的 "大頭貼照" JPG 圖片。(若日後 Facebook有調整這個區塊內容的上傳尺寸，則依官網說明為主。)

20. 4.6 上傳至 Facebook 透過 Photoshop 製作完成 "封面相片" 與 "大頭貼照" 設計後，請依下述步驟上傳到您的 Facebook專頁。 01上傳 "封面相片" 請先進入您的 Facebook專頁，並上傳要擺放於封面位置的圖檔。

21. 02上傳 "大頭貼照" 接著上傳 "大頭貼照"的圖檔，讓 Facebook專頁上方的設計完整呈現 完成了以上設定之後，Facebook專頁上方即會顯示 "封面相片" + "大頭貼照" 的完美組合，讓整個專頁擁有量身訂作的設計感。