PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程

作者:Lander 翻譯　  出處:

第1步

這一次，我們要?jiǎng)?chuàng)建一個(gè)完整的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的步驟，使用Photoshop和制作圖像的人很多。 由于這是一個(gè)中級(jí)到高級(jí)的教程。我會(huì)跳過(guò)一些基本的步驟說(shuō)明。 在RGB 72dpi首先創(chuàng)建一個(gè)新文件，800像素*950像素。 顯示標(biāo)尺和參考線(xiàn)拖動(dòng)四個(gè)邊界的文件， 這將是最佳的設(shè)計(jì)領(lǐng)域。 我打算保持一個(gè)固定寬度的布局。

圖像>“畫(huà)布大小在，增加了很多的寬度和高度 此外，1200 1000像素PX是好的， 這樣，我們將設(shè)計(jì)更廣泛的屏幕分辨率。 再添加更多的指導(dǎo)，你打算加入容器（標(biāo)題，導(dǎo)航欄，側(cè)邊欄，頁(yè)腳）。

第2步

現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)標(biāo)題的背景圖案， 這是相當(dāng)簡(jiǎn)單的。 創(chuàng)建一個(gè)新的文件300像素*50像素。參考下面的圖片。 然后進(jìn)入“編輯>定義圖案保存為”模式1的形狀。“

第3步

接下來(lái)在我們的設(shè)計(jì)文件里建議一個(gè)新層，繪制矩形的高度為300像素使用矩形工具。 前往過(guò)濾器，并添加圖案疊加， 為您的全新模式搜索和應(yīng)用它。為了使它看起來(lái)糾正你必須按一下按鈕，捕捉到原點(diǎn)。 更改圖層填充為0％， 創(chuàng)建一個(gè)新的形狀圖層上面空白層，合并兩者，這種方式，您將有準(zhǔn)備的模式給它添加一些效果。 名稱(chēng)層“模式1。“

第4步

選擇“模式1”,并運(yùn)用這一層的層風(fēng)格:陰影效果,梯度涂層和模式疊加。盡量讓類(lèi)似的底部下面的圖像,利用以下的價(jià)值觀

第5步

再次在我們的設(shè)計(jì)文件里建議一個(gè)新層， 繪制矩形的高度為300像素使用矩形工具。 前往過(guò)濾器，并添加圖案疊加，樂(lè)一模式覆蓋，黑色紅色黑色漸變疊加， 和軟陰影。 作為參考使用下面的圖像的值。下一步， 添加一個(gè)隱藏所有圖層蒙版“， 并繪制一個(gè)黑色到白色到黑色反射層上的梯度 口罩，你會(huì)得到類(lèi)似下圖的底部。

第6步

命名為“輕，“并應(yīng)用高斯模糊半徑為50像素到它。 我創(chuàng)建了一個(gè)額外的指南，畫(huà)中的光中心 頭。 下面的導(dǎo)航欄上的刪除一切，改變層的 混合模式為顏色減淡。

第7步

一個(gè)顏色疊加，和圖案疊加。

在這一點(diǎn)上，你必須考慮你要的方式 切 將HTML圖像的CSS; 這就是為什么我使用遠(yuǎn)程0px大多數(shù)陰影 當(dāng)時(shí)，只有水平或垂直梯度。 在這種情況下，紋理有許多水平線(xiàn)。 它需要很容易轉(zhuǎn)換成一個(gè)重復(fù)的背景本 許多地區(qū)。此外，這是一個(gè)很好的人來(lái)休息一下，在您的組織層 文件夾，讓一切組織。

第8步

現(xiàn)在開(kāi)始的細(xì)節(jié)， 我想補(bǔ)充一個(gè)顯眼的地方，在網(wǎng)站的名稱(chēng)， 這就是為什么我會(huì)用 這 漂亮的垃圾標(biāo)簽形象。 顯然，你必須提取的標(biāo)簽，并放置在左側(cè)的頂部 角落我們的設(shè)計(jì)。嘗試得到像第一張圖片下面的東西。 接下來(lái)，使用魔術(shù)棒工具選擇棕色小圈， 然后命令移一逆選擇。 調(diào)整的水平和色相/飽和度使用下面的值。

第9步

現(xiàn)在使用橡皮擦工具和一個(gè)不規(guī)則的刷子， 刪除標(biāo)簽的邊境部分地區(qū)。 要添加 剪紙 實(shí)際上， 選擇減淡工具，并使用相同的畫(huà)筆形狀應(yīng)用 道奇到標(biāo)簽的邊框。

第10步

我們將陰影添加到我們的標(biāo)簽下。為此， 重復(fù)的“標(biāo)簽”層， 改變色相/飽和度>亮度為-100， 并應(yīng)用半徑為10像素的高斯模糊。下一步， 改變“標(biāo)簽副本”混合模式為正片，并設(shè)置 不透明度為75％。

第11步

為標(biāo)簽的最后修整， 改變飽和度為-40，使其更加灰色。

第12步

現(xiàn)在我們將添加一些支持圖像， 試圖找到圖像周?chē)囊粋�(gè)概念， 但由于這是一個(gè)關(guān)于技術(shù)教程， 我選擇一個(gè)隨機(jī)的。 這一個(gè) 是一個(gè)美麗的圖畫(huà)老式火車(chē)在這里高地 玻利維亞。提取形狀的火車(chē)不過(guò)你想要的。 然后改變“一條龍”圖層的混合模式為變暗。

第13步

讓我們添加一些文字，第一頁(yè)面的名稱(chēng)。使用類(lèi)型的東西 垃圾字體，你可以找到一些有趣的東西了 這里。為標(biāo)題用黑色的類(lèi)型，改變圖層的混合模式 覆蓋， 然后復(fù)制該層，改變副本的不透明度為75％。 為了得到一個(gè)微小的模糊效果， 復(fù)制層移動(dòng)一個(gè)或兩個(gè)像素左或右。 添加更多的文本使用的東西就像一個(gè)口號(hào)或這種技術(shù)。此外， 這是一個(gè)很好的時(shí)機(jī)，添加導(dǎo)航鏈接，以及。

第14步

現(xiàn)在，添加更多的東西，它的垃圾風(fēng)格！我下載了一些 和Jenn B的 撥開(kāi) 這里這些刷子有限制。 使用這些筆刷添加一些數(shù)字，角落， 膠帶和諸如此類(lèi)的東西， 隨意做任何你想要在這一步。 只要記住下面都添加所有的“標(biāo)簽”和“標(biāo)簽層 復(fù)制“圖層。

第15步

然后應(yīng)用中風(fēng)和模式覆蓋層的影響。

第16步

我創(chuàng)建了四個(gè)文件夾，以保持版面組成：一種一 “頭”高于一切，為“側(cè)欄”下方的“頭一，“一”內(nèi)容“下面的”頁(yè)眉“和”補(bǔ)充工具欄，“和最后一個(gè)”注腳。“

步驟17

下載一些垃圾死角，從邊界 這里 此外，添加上的另一側(cè)欄的背景角落， 但是這也帶來(lái)了它的不透明度低于25％。

第18步

Let’s add some text. You can add any sample text, imagine that it’s javascript driven text recent posts section, or a featured post section, something like that. I’m using the same grunge display typeface as used for the navigation bar with the color #4D0D0D and Arial with a color of #3F3F3F for the body text.

套用陰影效果的名稱(chēng)和添加相同效果 導(dǎo)航項(xiàng)以及。 當(dāng)您轉(zhuǎn)換成HTML的CSS文件中的PSD， 你需要這些書(shū)籍的轉(zhuǎn)換到圖像， 所以它的行，如果你想添加更多的樣式給他們。最后， 使用一些導(dǎo)游把它放入一個(gè)適當(dāng)?shù)奈恢玫奈淖謱印?/p>

步驟19

我們的特色酒吧是尋找一個(gè)小空， 所以讓我們添加一個(gè)支持圖像。在這種情況下，我用寶麗來(lái)拍攝。 你可以下載圖片，從寶麗 這里。提取寶麗來(lái)， 粘貼到上面一層灰色的背景和它的垃圾 角落里的“內(nèi)容”的文件夾， 然后改變色相/飽和度，使寶麗多一點(diǎn) 深褐色（選擇著色選項(xiàng)）。

使用“標(biāo)簽”層的邊緣（步驟9）相同的技術(shù)。 擦除和道奇的寶麗來(lái)照片的邊緣。最后， 添加陰影使用相同的技術(shù)，如用10步 本教程。

步驟20

本人有過(guò)這樣的自己，所以我將它添加到深褐色的設(shè)計(jì)圖片。 加入一個(gè)以上的“寶麗來(lái)”層新層的任何圖像， 選擇黑色正方形的寶麗來(lái)， 然后命令移一逆選擇。 選擇圖像層，并刪除所有額外費(fèi)用。下一步， 你可以添加更多的垃圾細(xì)節(jié)， 像一些在圖片膠帶， 列在下面的圖片。 我申請(qǐng)1px的陰影效果，以及添加的磁帶。

步驟21

然后應(yīng)用到了以下影響：內(nèi)發(fā)光， 一圖案疊加，一個(gè)陰影， 使用如下圖所示的值。下一步， 上面繪制的矩形或粘貼到一個(gè)新的層標(biāo)準(zhǔn)的RSS 形狀，并填充黑色。最后， 改變“的RSS形狀”圖層的混合模式為疊加。

步驟22

現(xiàn)在放在側(cè)邊欄的左上角的RSS圖標(biāo)。 添加一些像文本“RSS源。”畫(huà)出另一塊膠帶， 寫(xiě)在它的用戶(hù)數(shù)量。記住， 現(xiàn)在，我們正努力在“側(cè)欄”文件夾。

步驟23

現(xiàn)在是時(shí)候增加一個(gè)職位，我們的設(shè)計(jì)。 只要寫(xiě)一些作為標(biāo)題，日期變更線(xiàn)的另一項(xiàng)隨機(jī)文本， 分類(lèi)和作者。此外，由于該職位的一些文字的話(huà)。 印刷術(shù)是最重要的這一步。 我喜歡用的標(biāo)題和對(duì)身體無(wú)襯線(xiàn)serif字體， 但就是我。決定你認(rèn)為最適合你的設(shè)計(jì)最好的。

為了讓我們的樣品后多一點(diǎn)的態(tài)度， 我們要添加就像在塔茨網(wǎng)站預(yù)覽圖像， 但它是一個(gè)垃圾設(shè)計(jì)，我們需要添加一個(gè)背景，因?yàn)檫@垃圾 我們的形象。 這是因?yàn)�，添加填充CSS的頂部和底部簡(jiǎn)單， 然后設(shè)置一個(gè)重復(fù)的背景圖片。

此圖片將是 35毫米膠片. Extract two small stripes from the film, and change their Hue/Saturation using the values in the image below. Next, using an irregular Eraser, Delete some areas of the stripes. Finally, add a Drop Shadow to each stripe. When you have finish with the film, paste any image below the film layers. I’m adding a picture of one of my travels. Finally, apply a Stroke Effect (#2F261D) to that image.

步驟25

下面畫(huà)一條紅線(xiàn)后 2px的意見(jiàn)和一些文字， 這是一個(gè)好主意，將所有相關(guān)層后進(jìn)入一個(gè)新 文件夾，名為“后。“然后增加文件的一點(diǎn)點(diǎn)的高度， 你可以通過(guò)使用裁剪工具， 這樣做只是為了看看我們?cè)O(shè)計(jì)的外觀，如果有兩個(gè)或三個(gè) 職位就可以了。重復(fù)的“郵報(bào)”集團(tuán)， 和更改文本和圖像，如下圖所示。

26步

其實(shí)這看起來(lái)相當(dāng)不錯(cuò)， 現(xiàn)在添加補(bǔ)充工具欄的項(xiàng)目的冠軍。 喲可以為每個(gè)項(xiàng)目的資料夾以及。

步驟27

現(xiàn)在添加一個(gè)列表圖標(biāo)。你可以使用任何自定義形狀。 添加一些隨機(jī)文本，我使用的工具條格魯吉亞。 重復(fù)的圖標(biāo)和編輯一個(gè)代表 徘徊 狀態(tài)。對(duì)各個(gè)Sidebar的項(xiàng)目相同。

步驟28

我們正在接近完成。 在側(cè)邊欄添加一些垃圾底部的細(xì)節(jié)， 加入到一個(gè)新層以上的一些垃圾刷子補(bǔ)充工具欄的 背景層。選擇補(bǔ)充工具欄的背景層， 然后到“圖層>圖層蒙版>”顯示所有。下一步， 一些隱藏的底部邊欄的背景左側(cè)區(qū)使用 一個(gè)不規(guī)則的黑色畫(huà)筆。

步驟29

最后， 選擇補(bǔ)充工具欄的背景層，并復(fù)制它的圖層樣式。 繪制在底部設(shè)計(jì)里面的“頁(yè)腳”一矩形 文件夾，將它粘貼圖層樣式。下一步， 提取并貼上 這 上圖中的頁(yè)腳的背景。

調(diào)整飽和度，使之成為多一點(diǎn)灰色。此外， 你可以申請(qǐng)到該紙重復(fù)陰影 技術(shù)步驟10。添加一些在紙上的文字， 也許一個(gè)口號(hào)或東西。并添加一些頁(yè)腳文本， 就像一個(gè)快速導(dǎo)航欄，和版權(quán)信息。