如何用Photoshop設計優雅的部落格版面

我將在這個教程中秀出如何在Photoshop裡製作出一個簡潔、優雅的部落格版面 在最上方，我們將使用一張風格感強烈的影像(任何一張均可)並放上一段字體優雅的小短文。

教程使用素材

依據教程，您將會需要以下的(免費)素材

• 咖啡店的照片從Refe下載
• 從Font Squirrel下載PT Serif字型
• 從Font Squirrel下載Bentham字型

準備開始囉

第一步

開新檔(File>New..)依下圖設定頁面資訊 您可依個人喜好設定任何尺寸-網頁寬度並非固定。

第二步

設定導線，讓整個畫面的空間看起來更加諧調 我並不常使用導線，但它能使網頁看起來整潔並保持寬度的一致性 到上面選單列 檢視>設定新導線(View>Guide...) 通常我將網頁寬度設為1000px並從邊角上加上一些導線，讓整個畫面有更多的留白空間。

註︰ 在教程中導線的設定為 ︰ 垂直 100px、 285px、 445px、 600px、 605px、 765px、 925px 和 1100px。

提示 ︰ 您也可以使用 GuideGuide Photoshop 外掛程式，來加快您的設定。

第三步

依照這個 Photoshop的範例，能讓頁面看起來條列分明且更容易流覽或編輯。 請新增三個圖層群組並分別更名為 Header, Content, Sharing及 Footer。 若要建立新的圖層群組請到主選單 圖層 > 新建 > 群組......，並將群組名更名為上列所述。 您也可直接點下面的小圖標來新增圖層群組。

設計最上層的標頭畫面

標頭的設計於使用者及訪客均扮演重要的角色 在這個部落格，我使用一個具歡迎感的畫面-倫敦一家咖啡館。 當您在選擇影像時，必須注意您的圖像是否與訪客所想要造訪的部落格訊息相符。

第一步

建立部落檔的背景 在Header的群組中，使用工具列上的矩型工具畫出一個長方型。 這裡我使用 1200x600px 大小的矩形，並將它移到在畫面的上方。

現在請把下載的咖啡廳照片拖到 Photoshop 文件裡，並將它放矩形圖層的上方。 將圖像圖層重命名為您以後可以識別的名字，在這裡我使用 IMG。 然後請按住 ALT 鍵並在照片圖層上點一下，直到你看到一個小方格及一個向下箭頭，再放開。(或在照片圖層上按右鍵選擇建立剪裁遮色片) 好的，您已經成功建立一個剪裁遮色片了。

現在請按住 CMD+T 並將圖片縮放至您需要的大小。

提示 ︰ 按住 Shift 鍵，可依原圖比例做縮放。

第二步

現在我們需要將背景色弄的深一點讓它看起來更自然，同時也讓放在上面的文字更清楚易讀。 將影像做一點模糊的效果，到主選單的濾鏡> 模糊 >高斯模糊，將模糊半徑設為 3 px。 使用模糊效果來柔化影像可以讓訪客更聚焦在我們所要傳達的文字訊息上。

在影像圖層的上方再新建一個剪裁遮色片，方法請參照前一步驟。 將其填成黑色並將透明度設為50%，這樣我們的可以使我們的影像顏色更深但仍保有它的能見度。

第三步

現在添加上部落格的Logo。 在Header群組中，建一個新的圖層群組，並命名為Logo。 在本教程中我使用一個以簡單文字排版的Logo。 在工具列上選擇橫排文字工具 (T)，打上您部落格的標題，並將字體設為Bentham，文字大小設為30px。 請注意將字體間的間距拉大並全部使用大寫字體，讓它看起來更為優雅。

在文字外加上邊框讓它看起來更為顯眼。 用矩型工具(U)畫出一個稍微比文字再大一點的矩型。

現在在文字的圖層上按滑鼠右鍵選擇混合模式，將外框筆劃設定如下圖所示。

最後將矩型圖層的填充值設為0%，如此您的Logo周圍就有一個1px寬的外框線。

第四步

現在我們就要加入一些關於部落格簡短介紹的文字。 選擇橫排文字工具(T)將字體設為Bentham，大小為60px，並寫下您想要給部落格訪客的簡介。 請注意每個文字間的間距間是否有足夠的空間，讓文字看起來更為清爽。

關於 & 的符號我使用Baskerville (Italic)，讓它看起來更具裝飾性。 在小標上，我使用PT Serif (Italic) ，大小設為20px。 請確保大小兩段文字均完美的垂直對齊畫面的正中央，讓它看起來更加諧調與優雅。

建立內文部分

按下Header圖層群組旁的小箭頭將圖層群組閉合並打開Content圖層群組，如此您能夠更有組織性且更易於流覽您的所有圖層。

第一步

開始建制我們的部落格文章。 使用橫排文字工具(T)，用深色與較大的字體寫下您的文章標題。 儘量避免使用全黑，請選一個更較細緻的顏色，如黑灰色，如此畫面才不會看起來太過刺眼。 在教程中我使用深灰色 #444444 42px 大小的Bentham字體，並將其全部改為大寫形式。 將您的大標移到文件的中間並讓其上下有更多的留白，如此讀者更能將把視線移到這裡。

第二步

將字體的尺寸縮到約14px並輸入刊登日期、作者、分類、標註、地點或任何您想要加入的，如此它可提供讀者對您發表的文作有些許的概念。 在這裡我只加入了日期和地點，並延續大寫的型式以和大標保持一致性。

第三步

沒有實際內容的部落格是一文不值，無論設計的多好。 使用橫排文字工具 (T) 按住滑鼠左鍵在第二與倒數第二條導線中拖出一個文字框。 文字框的寬度應介於640px而高度則依照您的文章內容。

將背景色改成較亮且磁不傷眼的淺色系。 在這我使用亮灰色 #6f6f6f ，PT Serif字型將文字大小設為18px ，行高設為34px。 根據字體的樣式，行高通常約為 1.5-1.9 倍的字體大小。 您可以輕鬆地以字體大小乘上1.9倍計算出行高，如這裡我使用 18px 字體大小，所以行高即為 18 * 1.8 = 34.2。

第四步

作為一個設計師，你總是需要考慮到整個動態的環境，包含超連結的樣式或滑鼠滑過的狀態。 相信我，程式開發者將會感謝您的這項舉動。 挑選一個適當顏色能使您的文章更加顯著，將文章內能夠連結到其他的地方用不同的顏色突顯出來。 這裡我使用淺紅色#e3514e。

設計分享的按鍵

我們已完成部落格的主要內容，而現在我們要制作一些按鍵讓讀者能夠將它們分享到他們想要的其他網頁上。

第一步

將內容圖層群組(Content)閉合並打開共享圖層群組(Sharing)，我們將會放置我們的按鈕。 如制作內文方式，用矩形工具 (U)在第二和倒數第二條導線之間的繪製一個矩型。 在這裡我用 640x54 px 之後按下右鍵，選擇混合模式，並將選項設定如下圖所示:

最後，將圖層的填充選項設為 0%。您就有一個只有邊框的網路分享區塊了。

第二步

選取線條工具 (U) 並設置寬度為 1px 後，繪製三個垂直的線條，將我們的內文分成均等的四個部分。 您可以使用導線來幫忙對齊。 請確保所有分隔線的線條顏色與外框線一致。

小提示:按住Shift鍵可以畫直完全的直線。

小提示:點擊CMD+; 可以隱藏或顯示出導線。

第三步

最後選取橫排文字工具 (T) 並輸入一些文字，提示訪客可以分享內文至他們想要的媒體上。 在這裡我只使用簡單的分享，之後我輸入一些可供分享的社群網站的名字。

將名字分別放在每個區塊的正中央。

第四步

太棒了! 分享文章的部分已經完成了，現在我們只要再昌上幾個滑鼠滑過的按鍵就大功告成。 一樣使用矩型工具(U)，並選用之前用於超連結的顏色，在社群名程的下面畫出一個將區塊填滿的矩型。

設計頁腳

終於要將我們的部落格加上一些著作權資訊頁腳的時候了。

第一步

將(Sharing)分享的圖層群組閉合，打開(Footer)頁腳的群組。 接著從文件最左至最右畫出一個簡單的矩型，並在其上方預留一些空間。 我用灰色 #555555 並在上方留約 110px 的空間。

第二步

最後用橫排文字工具(T)輸入簡單的版權資訊文字。 這裡我將使用PT Serif 字體 大小14px 顏色設為白色#FFFFFF 將您所輸入的文字放在灰色色框的正中間。

總結

這個教程是把制作一個簡單的部落格版型的步驟跑了一遍。 它只使用了一張較具張力的圖片及一些文字排版。

你可以到 Create and Theme an Evernote Powered Blog With Postach.io 去觀看我們如何適當堨將版型套用到現有的部落格平台上。

如果有任何的疑問或想法，歡迎在下面的回覆欄提出。