slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
04 Facebook 封面相片與大頭貼設計 PowerPoint Presentation
Download Presentation
04 Facebook 封面相片與大頭貼設計

Loading in 2 Seconds...

play fullscreen
1 / 21

04 Facebook 封面相片與大頭貼設計 - PowerPoint PPT Presentation


  • 202 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '04 Facebook 封面相片與大頭貼設計' - price-grant


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
04

Facebook

封面相片與大頭貼設計

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

4.2 設定版面尺寸與配置

4.3 置入相片並設定圖層剪裁

4.4 相片趣味設計

4.5 裁切與儲存為指定圖片格式

4.6 上傳至 Facebook

facebook
Facebook封面設計

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

4 1 facebook
4.1 認識 Facebook "封面相片" 與 "大頭貼照"

突顯專頁特色

設計出一份好作品,事先了解正確的尺寸與格式是最基本的,這樣才能有效掌握作品。

過去使用 Facebook專頁時,僅能放置大頭照,並在頁面上方放置一連串相簿內的相片來佈置專頁的內容。新的版面上,我們可以在 Facebook專頁的上方放置一個大型橫幅的相片來當做封面相片,以突顯最新的活動與專頁特色。

slide5
尺寸規定

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

slide6
不能放上去的訊息

Facebook希望您用獨一無二的照片來吸引粉絲,可能是餐廳裡最受歡迎菜色、鞋店中最熱賣的球鞋,或是您在店裡與客戶熱情互動的照片,都是很好的主題素材,如果能再加些創意就更好了!

但是封面照片內容,不是您想放什麼都可以,它可是有限制的喔!除了圖片的寬度之外,還必須注意不能包含以下的內容:(相關資訊若有異動以 Facebook官網公告為主)

  • 價格或購買資訊,例如「40% 的折扣」或「從我們的網站下載」
  • 相關的聯絡資訊,例如網址、電子郵件、聯絡電話與郵寄地址...等訊息。
  • 提及用戶介面的元件,例如讚或分享,或其他 Facebook網站功能
  • 號召行動,例如「馬上取得」或「告訴您的朋友」。

另外所有的封面照片都是公開的,其中所呈現的內容不能造假、欺騙或誤導,也不能侵犯第三方合作夥伴的智慧財產權。您不能鼓勵或誘導他人上傳您的封面相片到他們個人的動態時報上,這是要特別注意的。

slide7
4.2 設定版面尺寸與配置

利用螢幕擷取版面

掌握了 Facebook專頁封面的設計要點後,就要開始著手製作囉!先透過螢幕擷取的方式快速取得正確尺寸與位置,再以參考線規畫配置

01直接於瀏覽器拍下 1:1 畫面

進入瀏覽器 (在此以 Google

Chrome 為例),開啟個人的

Facebook頁面或粉絲專頁均

可,先將視窗調整為 最大化

,設定瀏覽器顯示比例為100%,

再拍下版面參考圖。

slide8

02將拍下的畫面圖貼入新文件

回到 Photoshop,將剛才拍下的畫面貼入新的檔案文件中。

03裁切主題區域

因為拍到的參考圖是整個螢幕畫面,現在先將頁面上的 "封面相片" 與 "大頭貼照" 區裁切下來:

slide9
用參考線定位相片區域

貼上版面參考圖後,相片與相關設計的擺放有許多時刻需要精準繪製路徑位置,最常用的輔助工具即是參考線。

01設定尺標與對齊

為方便參考線建立請先開啟 尺標(會在編輯區的上方與左方顯示),並考量有些參考線需拖曳至圖上較不易對齊的位置所以建議先關閉 靠齊 功能。

slide10

02拖曳參考線

參考線分為垂直與水平二種,若是垂直的參考線請由左側尺標處新增,水平的參考線請由上方尺標處新增。

slide11
在相片區域繪製矩形

依循前面拖曳出來的參考線,繪製出準確的 "封面相片" 與 "大頭貼照" 區塊:

01開啟對齊功能

為方便等一下繪製的矩形物件可以精準對齊參考線的位置,請選按 檢視 \ 靠齊 (功能文字左側顯示 ),開啟 靠齊 功能。

02繪製封面相片與大頭貼照區塊

運用 矩形工具 繪製出封面 "封面相片" 與 "大頭貼照" 所在位置的區塊,待加入相片設計時就可輕鬆置入正確的位置中。

03合併形狀物件

完成了依循版型參考線繪製的 "封面相片" 與 "大頭貼照" 區塊,接著要將二個區塊進行合併才能於後續置入喜愛的相片。

slide12
4.3 置入相片並設定圖層剪裁

繪製形狀的過程中,由外部插入圖片進入形狀中整合,其實是經常使用的動作,這裡將介紹如何置入外部圖片,並利用剪裁遮色片的方式融入作品中。

01置入外部圖片

首先將要設計為 "封面相片" 的相片圖檔置入作品:

02設定圖層剪裁遮色片

利用剪裁遮色片的方式,將置入的相片放置在指定範圍內。

slide13
4.4 相片趣味設計

影像去背與縮放旋轉

簡單去背可以更加突顯相片主角,讓主角有趣的融入背景圖中。

01選取相片中的主角

開啟範例原始檔 <04-02.jpg>,這是一張背景單純的人物相片,所以運用 魔術棒工具 就可輕鬆的去除背景僅取材人物的部分。

slide14

02調整主角大小與角度

由於去背後的主角圖片是張較長的影像,若以一般直立方式擺放在 "大頭貼照" 區塊,待剪裁上傳到 Facebook後,網友則只能看到主角的腳!這時動動腦,以趣味手法設計出不同的擺放角度,就可簡單解決這個問題。

03加入另一張相片的主角

接著開啟範例原始檔 <04-03.jpg>,以相同的方法為該相片去背僅取材人物的部分,再設計到 "封面相片" 中。

slide15
繪製漸層、透明向量背景

好的相片創意後,可再運用向量物件加上簡單背景色塊設計:

01繪製形狀與變形

首先繪製一個最基本的矩形,再將其變形為梯形。

02套用漸層色彩

選取剛才調整好的梯形形狀物件後,將其設計為咖啡色漸層的色彩效果。

03調整圖層順序

因為剛才繪出的梯形形狀物件擋住了整張相片,只要簡單調整圖層順序就可讓被壓在下層的相片再次浮出台面。

04調整圖層混合模式與透明度

接著套用圖層的混合模式與透明度效果,讓上下圖層間進行像素運算,變化出令人驚豔的效果。

slide16
繪製創意對話雲

最後運用向量物件加上簡單插圖效果,讓作品更加亮眼:

01繪製自訂形狀

常見漫畫中以俏皮的對話雲方式呈現主角心中的 OS,在此以簡單的形狀繪製就可擁有這樣的效果。

02複製圖層

複製圖層是進行物件處理時很重要的動作,可依下述方式複製對話雲物件設計重疊效果。

slide17

03調整形狀物件的色彩

調整複製出來的對話雲色彩與位置,以搭配等一下要設計的文字內容

04調整形狀物件的角度

同時選取二個對話雲圖層,稍加旋轉物件角度,讓插圖與人物主角更融合。

05加入文字

文字在作品中是個畫龍點睛的角色,最後運用 水平文字工具 輸入合適的文字再移至對話雲物件上擺放,即完成 Facebook封面相片與大頭貼的設計。

slide18
4.5 裁切與儲存為指定圖片格式

完成前面作品每個細節的設計,最後也是最重要的環節即是要依參考線準確的將 "封面相片" 與 "大頭貼照" 區塊裁切並儲存為 JPG 格式的圖片。

01裁切與另存 "封面相片" 區塊

編輯區已運用參考線規劃出上方橫向 "封面相片" 區塊的部分,現在就動手將這個區塊中的內容裁切下來並轉成 JPG 格式圖片:

slide19

02裁切與另存 "大頭貼照" 區塊

CS6 新功能中將 裁切工具 設計為非破壞性的,可選擇將裁切的像素刪除或是可再使用,而上一步驟使用 裁切工具 鈕時已取消核選 刪除裁切像素,所以現在要裁切出 "大頭貼照" 區塊時只要重新規劃裁切範圍即可。

03調整 "大頭貼照" 影像大小;符合 180 x 180 像素

"大頭貼照" 的尺寸為 160 x 160 像素,但目前 Facebook規定上傳的 "大頭貼照" 寬度至少須為 180 像素,所以再此技術性調整一下已製作好的 "大頭貼照" JPG 圖片。(若日後 Facebook有調整這個區塊內容的上傳尺寸,則依官網說明為主。)

4 6 facebook
4.6 上傳至 Facebook

透過 Photoshop 製作完成 "封面相片" 與 "大頭貼照" 設計後,請依下述步驟上傳到您的 Facebook專頁。

01上傳 "封面相片"

請先進入您的 Facebook專頁,並上傳要擺放於封面位置的圖檔。

slide21

02上傳 "大頭貼照"

接著上傳 "大頭貼照"的圖檔,讓 Facebook專頁上方的設計完整呈現

完成了以上設定之後,Facebook專頁上方即會顯示 "封面相片" + "大頭貼照" 的完美組合,讓整個專頁擁有量身訂作的設計感。