Photoshop是做網(wǎng)頁設(shè)計的非常好的工具，特別是如果你要在設(shè)計中使用大量的圖片和筆刷效果的話。在這個教程中，我會教給你如何完成一個破舊風格的主頁設(shè)計。我們將要設(shè)計頁頭、側(cè)邊欄、主體、頁腳以及所有一切非常有質(zhì)感和破舊效果的設(shè)計。
出自：飛魚的聲納

最終效果



第一步

這次我們要使用Photoshop創(chuàng)建一個破舊風格的網(wǎng)頁設(shè)計，需要用到很多的圖片。由于這是一個中間難度的教程，我將會略過對于基本步驟的解釋。首先創(chuàng)建一個寬950像素高800像素，分辨率為72dpi的新文檔。將標尺打開，拖拽出文檔的邊界，這將會是設(shè)計的最佳區(qū)域。我計劃設(shè)計一個固定寬度的布局。

選擇圖片>畫布大小，增加寬度和高度到1200像素和1000像素，這樣做是為了寬顯示器的分別率設(shè)計。然后給你計劃添加內(nèi)容的區(qū)域(頁首、導航欄、側(cè)邊欄、頁腳)增加參考線。

讓我們假設(shè)這個設(shè)計最終目的是一個wordpress主題，因此我們需要一個頁首，一個在頁首中的導航欄以及一個右邊的側(cè)邊欄。如下圖所示。之后將背景色填充為#7A8173。



第二步

現(xiàn)在我們要給頁首的背景創(chuàng)建圖案。很簡單，創(chuàng)建一個50像素寬，300像素高的文檔，畫出如下圖所示的圖形。我使用了參考線讓圖形盡可能的對稱。然后選擇編輯>定義圖案，保存為”Pattern 1″。



第三步

在主設(shè)計文件的新圖層上，使用矩形工具畫出一個300像素高的矩形。打開圖層樣式，添加圖案疊加，選擇前面創(chuàng)建的圖案。為了達到理想效果，你必須點擊貼緊原點按鈕。將圖層的填充不透明度更改為0%，在這個圖層上再創(chuàng)建一個新的圖層，將兩個圖層合并，這種方法可以讓你直接給頁首增添效果。將這個圖層命名為Pattern1。



第四步

選擇”Pattern 1″圖層，給它添加一些圖層樣式：投影、漸變疊加以及圖案疊加。嘗試著得到如下圖所示的結(jié)果，使用如下值。



第五步

現(xiàn)在我們要添加導航欄背景。畫出一個矩形蓋住”pattern 1″圖層一點點。給矩形應(yīng)用圖案疊加、黑色到黑紅色的漸變疊加以及柔和的投影。使用下面圖片所示的值作為參考。接下來，添加圖層蒙板>隱藏全部，在圖層蒙板上畫出黑色到白色到黑色的漸變，你將會得到如下圖所示的結(jié)果。



第六步

現(xiàn)在在”Pattern 1″圖層上方畫一個橢圓(#691E1B)，命名為”Light”，給其應(yīng)用50個像素半徑的高斯模糊。我又創(chuàng)建了一條額外的參考線，方便將橢圓放置于頁首的中間。將超出導航欄下方的所有部分都刪除掉，更改圖層的混合模式為顏色漸淡。



第七步

為了完成布局的第一部分，接下來我們要畫出側(cè)邊欄的背景。創(chuàng)建一些參考線來給側(cè)邊欄劃定界限并且調(diào)整已經(jīng)創(chuàng)建好的參考線，使他們適應(yīng)目前的布局。然后畫一個紅色的矩形(#3D100B)，應(yīng)用如下圖層樣式：陰影、顏色疊加以及圖案疊加。

這個時候你必須考慮之后如何將圖片剪切以適應(yīng)在HTML和CSS中使用。這也就是為什么我在應(yīng)用投影時經(jīng)常將距離設(shè)置為0像素的原因，而且只使用水平或者垂直漸變。這個案例中的材質(zhì)有很多的水平線。在很多區(qū)域需要很容易的轉(zhuǎn)換成可重復的背景圖片。而且，這個時候也是稍微休息一下，將圖層好好組織一下的時候。



第八步

現(xiàn)在開始設(shè)計細節(jié)，我想將網(wǎng)站名添加到顯眼的位置，這就是為什么我會使用這張漂亮的破舊標簽圖片。很顯然，你必須將標簽放置到我們這個設(shè)計的左上角。試著作出如下圖所示的效果。接下來，使用魔術(shù)棒工具選擇棕色的圓圈，然后使用Ctrl+Shift+I反選選區(qū)。使用如下值調(diào)整色階和色相/飽和度。



第九步

現(xiàn)在使用橡皮擦工具和不整齊的畫筆，刪除標簽的一部分邊緣。要添加剪紙效果，選擇減淡工具，使用和上面相同的畫筆形狀給標簽的邊緣應(yīng)用減淡。



第十步

下面要給標簽添加陰影。首先，將”Label”圖層復制一遍，更改色相/飽和度中的亮度到-100，在添加10個像素半徑的高斯模糊。接下來，將”Label copy”圖層的混合模式更改為正片疊底，將不透明度設(shè)置為75%。



第十一步

標簽的最后一個修飾，將飽和度更改為-40，使其更加灰暗一些。



第十二步

現(xiàn)在我們添加一些圖片，找一些符合這個風格的圖片，由于我們這個教程主要講解技術(shù)，所以我隨便選了一張。這是一張漂亮的玻利維亞高原上的生銹的火車的圖片。將火車從圖片中提取出來。然后將火車圖層的混合模式更改為變暗。



第十三步

我們來添加一些文字，首先是網(wǎng)站名。使用grunge字體鍵入文字，你可以在這里找到這樣的字體。標題文字使用黑色，將圖層混合模式更改為疊加，然后將此圖層復制一遍，將復制的圖層的不透明度更改為75%。為了得到一點點的模糊效果，將復制好的圖層向左或者向右移動一個或者兩個像素。使用這個技術(shù)添加更多的文字，比如標語等等。這個時候我們將導航鏈接也添加上。



第十四步

現(xiàn)在添加更多的東西，都是破舊風格的東西。我從這里下載了一些Jenn B的筆刷，這些筆刷是有使用上的限制的。使用這些筆刷添加一些數(shù)字、邊角、膠帶等等，在這一步中你可以盡情的發(fā)揮。只是要記住添加的所有圖層都要在”Label”和”Label copy”圖層的下方。



第十五步

現(xiàn)在我們開始添加頁面部分。首先，在頁首部分我們需要一個搜索框。鍵入搜索文字。接下來，畫出一個紅色的(#6A0400)矩形作為搜索表單，然后應(yīng)用描邊和圖案疊加圖層效果。



第十六步

現(xiàn)在我們在設(shè)計中添加主要內(nèi)容區(qū)。首先我們要添加一個放置特別文字的區(qū)域。在側(cè)邊欄下方的圖層中畫一個深灰色(#0D0F0E)的矩形。我創(chuàng)建了四個文件夾來組織圖層：一個在所有圖層之上的”Header”文件夾，一個在”Header”文件夾之下的”Sidebar”文件夾，一個在前面兩個文件夾之下的”Content”文件夾，最后一個是”Footer”文件夾。

你可以將這個矩形畫到”Content”圖層上，也可以給上面的四個文件夾中添加更多的文件夾。當你將矩形放置于合適的位置之后，使用下面的值應(yīng)用投影和描邊效果。



第十七步

從這里下載一些破損的邊角和邊框，在灰色背景上粘貼一個。將其顏色更改為#171612，圖層模式為疊加。再給側(cè)邊欄的背景上也添加一個，這次將不透明度降低到25%。



第十八步

讓我們來添加一些文字。想象這是類似于由javascript驅(qū)動的最新日志，或者特別內(nèi)容的日志區(qū)。我在這里使用的是和導航欄上一樣的破損字體，顏色為#4D0D0D，正文部分用的是#3F3F3F色的Arial字體。

給標題應(yīng)用投影效果，導航欄也一樣。當你將這個PSD文件轉(zhuǎn)換成HTML+CSS的時候，你需要將此標題轉(zhuǎn)換成圖片，所以這個時候你給它們添加樣式是可行的。最后，使用參考線將文字圖層放置于合適的位置。



第十九步

我們的特別區(qū)域看上去有一些空白，因此我們來添加一些圖片。在這個教程中，我使用了一張寶麗萊照片，你可以在這里下載寶麗萊圖片。提取寶麗萊圖片，將其放置于灰色背景之上的圖層中，然后更改色相/飽和度讓寶麗萊圖片接近棕黑色。(需要勾選彩色化選項)。

給”Label”圖層的邊緣應(yīng)用相同的技術(shù)(第九步)。將寶麗萊圖片的邊緣刪除一部分并且將顏色漸淡。最后使用在第十步中相同的技術(shù)給其添加投影。



第二十步

我將自己的舊照片添加到了設(shè)計中。在”Polaroid”圖層上添加一個新的圖層，將照片放入其中，選擇寶麗萊的黑色區(qū)域，按下Ctrl+Shift+I反選選區(qū)。選擇照片圖層刪除額外的部分。接下來，你可以添加更多的破舊效果，比如照片之上的膠帶紙，如下圖所示。我還給膠帶紙?zhí)砑恿?個像素的投影效果。



第二十一步

是時候給側(cè)邊欄添加RSS圖標了。畫一個圓角的矩形(#99917E)，然后給它添加如下效果：內(nèi)發(fā)光、圖案疊加和投影，使用下面圖片上的值。接下來，在矩形之上畫出或者粘貼一個RSS形狀，填充為黑色。最后，將”RSS shape”圖層的混合模式更改為疊加。



第二十二步

現(xiàn)在將RSS圖標放置于側(cè)邊欄的左上角。添加類似”RSS FEED”的文字。畫出另外一個膠帶紙，將訂閱者的數(shù)字放置其上。記住，我們現(xiàn)在是在”Sidebar”文件夾中工作。



第二十三步

現(xiàn)在給設(shè)計中添加日志。隨便寫一些文字作為標題，另起一行寫出日期、類別以及作者。再寫出日志內(nèi)容。這一步中最重要的就是排版。我喜歡給標題應(yīng)用Serif字體，給正文應(yīng)用Sans-Serif，這只是我的喜好。你可以選擇你喜歡的字體。



第二十四步

為了給日志增加細節(jié)，我們需要添加一些圖片，就像TUTS網(wǎng)站那樣，但是因為這是一個破舊風格的設(shè)計，我們需要將圖片弄得舊一些。這簡單的就像在CSS中增加上下內(nèi)邊距，然后設(shè)置一個重復的背景圖片。

這個圖片是35毫米的膠卷。從膠卷中提取上下兩邊，使用如下圖所示的數(shù)值改變它們的色相/飽和度。接下來，使用不規(guī)則的橡皮擦刪除圖片的部分區(qū)域。最后，給每一條圖片增加投影。完成膠片的效果之后，在膠片圖層之下粘貼圖片。我使用了一張我旅行時的照片。最后給圖片增加描邊效果(#2F261D)。



第二十五步

在日志下畫一條2個像素寬的線條，增加評論數(shù)字。將所有涉及日志的圖層放入”Post”文件夾中。之后你可以使用裁切工具給文檔增加一些高度，這樣做的目的是看看如果有2-3篇日志的設(shè)計效果。復制”Post”圖層組，如下所示改變文字和圖片。



第二十六步

看起來不錯，現(xiàn)在給側(cè)邊欄增加項目。你可以給每一個項目創(chuàng)建一個文件夾。



第二十七步

現(xiàn)在增加列表圖標。你可以使用任意的自定義形狀。隨意增添一些文字，我使用的是Georgia字體。復制圖標，編輯其中的一個表示鼠標懸停狀態(tài)。其它的項目也這樣來做。



第二十八步

我們快要完成了。給側(cè)邊欄底部增加一些破舊效果，在側(cè)邊欄圖層的上方新建一個圖層，添加破舊筆刷效果。選擇側(cè)邊欄背景層，然后選擇圖層>圖層蒙板>顯示全部。接下來，使用不規(guī)則黑色筆刷隱藏側(cè)邊欄背景的左下角。



第二十九步

最后，選擇側(cè)邊欄背景圖層，拷貝它的圖層樣式。在設(shè)計的下方畫一個矩形，放入”Footer”文件夾中，粘貼樣式。接下來，提取并粘貼這張圖片到頁腳的背景上。

調(diào)整不飽和度讓它變得更灰暗一些。你也可以使用步驟10中的技術(shù)給它添加投影效果。在這張紙上添加一些文字，可以是標語什么的。添加一些頁腳文字，比如導航條和版權(quán)信息。



結(jié)論

網(wǎng)頁設(shè)計不是容易的事。但是我希望這個教程能幫助你提高你的技術(shù)?，F(xiàn)在是輪到你設(shè)計你的網(wǎng)頁作品的時候了。