Transcript 4.1 認識Facebook "封面相片" 與"大頭貼照"

04
FACEBOOK
封面相片與大頭貼設計
4.1 認識 Facebook "封面相片" 與 "大頭貼照"
4.2 設定版面尺寸與配置
4.3 置入相片並設定圖層剪裁
4.4 相片趣味設計
4.5 裁切與儲存為指定圖片格式
4.6 上傳至 Facebook
Facebook 封面設計
2012 年 4 月 開始 Facebook 專頁全面更新為擁有 Timeline 的動態時
報，其中最能張顯頁面特色的就屬 "封面相片" 與 "大頭貼照" 的設計
，網路上常見網友將自己的 Facebook 「門面」加上搞怪、創意、趣
味取勝的影像，輕鬆創造出屬於自己的個人專頁。
4.1 認識 Facebook "封面相片" 與 "大頭貼照"
設計出一份好作品，事先了解正確的尺寸與格式是最基本的，這樣才
能有效掌握作品。
突顯專頁特色
過去使用 Facebook 專頁時，僅能放置大頭照，並在頁面上方放置一
連串相簿內的相片來佈置專頁的內容。新的版面上，我們可以在
Facebook 專頁的上方放置一個大型橫幅的相片來當做封面相片，以
突顯最新的活動與專頁特色。
尺寸規定
"封面相片" 是專頁上方較大張的圖片，"大頭貼照" 則是封面相片左下
角的正方型圖片。因為封面相片與大頭貼照重疊，在設計時可以一起
考量，更可透過創意加深人們在瀏覽專頁時的印象，提高按 "讚" 加入
的意願，其設計相對位置如下：
不能放上去的訊息
Facebook 希望您用獨一無二的照片來吸引粉絲，可能是餐廳裡最受歡迎
菜色、鞋店中最熱賣的球鞋，或是您在店裡與客戶熱情互動的照片，都是
很好的主題素材，如果能再加些創意就更好了！
但是封面照片內容，不是您想放什麼都可以，它可是有限制的喔！除了圖
片的寬度之外，還必須注意不能包含以下的內容：(相關資訊若有異動以
Facebook 官網公告為主)
 價格或購買資訊，例如「40% 的折扣」或「從我們的網站下載」
 相關的聯絡資訊，例如網址、電子郵件、聯絡電話與郵寄地址...等訊
息。
 提及用戶介面的元件，例如讚或分享，或其他 Facebook 網站功能
 號召行動，例如「馬上取得」或「告訴您的朋友」。
另外所有的封面照片都是公開的，其中所呈現的內容不能造假、欺騙或誤
導，也不能侵犯第三方合作夥伴的智慧財產權。您不能鼓勵或誘導他人上
傳您的封面相片到他們個人的動態時報上，這是要特別注意的。
4.2 設定版面尺寸與配置
掌握了 Facebook 專頁封面的設計要點後，就要開始著手製作囉！先
透過螢幕擷取的方式快速取得正確尺寸與位置，再以參考線規畫配置
利用螢幕擷取版面
01 直接於瀏覽器拍下 1:1 畫面
進入瀏覽器 (在此以 Google
Chrome 為例)，開啟個人的
Facebook 頁面或粉絲專頁均
可，先將視窗調整為 最大化
，設定瀏覽器顯示比例為100%，
再拍下版面參考圖。
02 將拍下的畫面圖貼入新文件
回到 Photoshop，將剛才拍下的畫面貼入新的檔案文件中。
03 裁切主題區域
因為拍到的參考圖是整個螢幕畫面，現在先將頁面上的 "封面相片" 與
"大頭貼照" 區裁切下來：
用參考線定位相片區域
貼上版面參考圖後，相片與相關設計的擺放有許多時刻需要精準繪製
路徑位置，最常用的輔助工具即是參考線。
01 設定尺標與對齊
為方便參考線建立請先開啟 尺標 (會在編輯區的上方與左方顯示)，並
考量有些參考線需拖曳至圖上較不易對齊的位置所以建議先關閉 靠齊
功能。
02 拖曳參考線
參考線分為垂直與水平二種，若是垂直的參考線請由左側尺標處新增
，水平的參考線請由上方尺標處新增。
在相片區域繪製矩形
依循前面拖曳出來的參考線，繪製出準確的 "封面相片" 與 "大頭貼照"
區塊：
01 開啟對齊功能
為方便等一下繪製的矩形物件可以精準對齊參考線的位置，請選按
檢視 \ 靠齊 (功能文字左側顯示 )，開啟 靠齊 功能。
02 繪製封面相片與大頭貼照區塊
運用 矩形工具 繪製出封面 "封面相片" 與 "大頭貼照" 所在位置的區塊
，待加入相片設計時就可輕鬆置入正確的位置中。
03 合併形狀物件
完成了依循版型參考線繪製的 "封面相片" 與 "大頭貼照" 區塊，接著
要將二個區塊進行合併才能於後續置入喜愛的相片。
4.3 置入相片並設定圖層剪裁
繪製形狀的過程中，由外部插入圖片進入形狀中整合，其實是經常使
用的動作，這裡將介紹如何置入外部圖片，並利用剪裁遮色片的方式
融入作品中。
01 置入外部圖片
首先將要設計為 "封面相片" 的相片圖檔置入作品：
02 設定圖層剪裁遮色片
利用剪裁遮色片的方式，將置入的相片放置在指定範圍內。
4.4 相片趣味設計
簡單去背可以更加突顯相片主角，讓主角有趣的融入背景圖中。
影像去背與縮放旋轉
01 選取相片中的主角
開啟範例原始檔 <04-02.jpg>，這是一張背景單純的人物相片，所以
運用 魔術棒工具 就可輕鬆的去除背景僅取材人物的部分。
02 調整主角大小與角度
由於去背後的主角圖片是張較長
的影像，若以一般直立方式擺放
在 "大頭貼照" 區塊，待剪裁上傳
到 Facebook 後，網友則只能看
到主角的腳！這時動動腦，以趣
味手法設計出不同的擺放角度，
就可簡單解決這個問題。
03 加入另一張相片的主角
接 著 開 啟 範 例 原 始 檔 <0403.jpg>，以相同的方法為該相片
去背僅取材人物的部分，再設計
到 "封面相片" 中。
繪製漸層、透明向量背景
好的相片創意後，可再運用向量物件加上簡單背景色塊設計：
01 繪製形狀與變形
首先繪製一個最基本的矩形，再將其變形為梯形。
02 套用漸層色彩
選取剛才調整好的梯形形狀物件後，將其設計為咖啡色漸層的色彩效
果。
03 調整圖層順序
因為剛才繪出的梯形形狀物件擋住了整張相片，只要簡單調整圖層順
序就可讓被壓在下層的相片再次浮出台面。
04 調整圖層混合模式與透明度
接著套用圖層的混合模式與透明度效果，讓上下圖層間進行像素運算
，變化出令人驚豔的效果。
繪製創意對話雲
最後運用向量物件加上簡單插圖效果，讓作品更加亮眼：
01 繪製自訂形狀
常見漫畫中以俏皮的對話雲方式呈現主角心中的 OS，在此以簡單的
形狀繪製就可擁有這樣的效果。
02 複製圖層
複製圖層是進行物件處理時很重要的動作，可依下述方式複製對話雲
物件設計重疊效果。
03 調整形狀物件的色彩
調整複製出來的對話雲色彩與位置，以搭配等一下要設計的文字內容
04 調整形狀物件的角度
同時選取二個對話雲圖層，稍加旋轉物件角度，讓插圖與人物主角更
融合。
05 加入文字
文字在作品中是個畫龍點睛的角色，最後運用
水平文字工具 輸入
合適的文字再移至對話雲物件上擺放，即完成 Facebook 封面相片與
大頭貼的設計。
4.5 裁切與儲存為指定圖片格式
完成前面作品每個細節的設計，最後也是最重要的環節即是要依參考
線準確的將 "封面相片" 與 "大頭貼照" 區塊裁切並儲存為 JPG 格式的
圖片。
01 裁切與另存 "封面相片" 區塊
編輯區已運用參考線規劃出上方橫向 "封面相片" 區塊的部分，現在就
動手將這個區塊中的內容裁切下來並轉成 JPG 格式圖片：
02 裁切與另存 "大頭貼照" 區塊
CS6 新功能中將 裁切工具 設計為非破壞性的，可選擇將裁切的像素
刪除或是可再使用，而上一步驟使用
裁切工具 鈕時已取消核選 刪
除裁切像素，所以現在要裁切出 "大頭貼照" 區塊時只要重新規劃裁切
範圍即可。
03 調整 "大頭貼照" 影像大小；符合 180 x 180 像素
"大頭貼照" 的尺寸為 160 x 160 像素，但目前 Facebook 規定上傳的
"大頭貼照" 寬度至少須為 180 像素，所以再此技術性調整一下已製
作好的 "大頭貼照" JPG 圖片。(若日後 Facebook 有調整這個區塊內
容的上傳尺寸，則依官網說明為主。)
4.6 上傳至 Facebook
透過 Photoshop 製作完成 "封面相片" 與 "大頭貼照" 設計後，請依下
述步驟上傳到您的 Facebook 專頁。
01 上傳 "封面相片"
請先進入您的 Facebook 專頁，並上傳要擺放於封面位置的圖檔。
02 上傳 "大頭貼照"
接著上傳 "大頭貼照"的圖檔，讓 Facebook 專頁上方的設計完整呈現
完成了以上設定之後，Facebook 專頁上方即會顯示 "封面相片" + "
大頭貼照" 的完美組合，讓整個專頁擁有量身訂作的設計感。