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

Chinese (Traditional) (中文（繁體）) translation by Yu_lab (you can also view the original English article)

Final product image — What You'll Be Creating

我將在這個教程中秀出如何在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。