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

最終效果



第一步

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

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

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



第二步

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



第三步

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



第四步

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



第五步

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



第六步

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



第七步

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

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



第八步

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



第九步

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



第十步

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



第十一步

標(biāo)簽的最后一個(gè)修飾，將飽和度更改為-40，使其更加灰暗一些。



第十二步

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



第十三步

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



第十四步

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



第十五步

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



第十六步

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

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



第十七步

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



第十八步

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

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



第十九步

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

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



第二十步

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



第二十一步

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



第二十二步

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



第二十三步

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



第二十四步

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

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



第二十五步

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



第二十六步

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



第二十七步

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



第二十八步

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



第二十九步

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

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



結(jié)論

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