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

作者:Lander 翻譯　  出處:

第1步

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

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

第2步

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

第3步

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

第4步

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

第5步

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

第6步

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

第7步

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

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

第8步

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

第9步

現(xiàn)在使用橡皮擦工具和一個(gè)不規(guī)則的刷子， 刪除標(biāo)簽的邊境部分地區(qū)。 要添加 剪紙 實(shí)際上， 選擇減淡工具，并使用相同的畫筆形狀應(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)在我們將添加一些支持圖像， 試圖找到圖像周圍的一個(gè)概念， 但由于這是一個(gè)關(guān)于技術(shù)教程， 我選擇一個(gè)隨機(jī)的。 這一個(gè) 是一個(gè)美麗的圖畫老式火車在這里高地 玻利維亞。提取形狀的火車不過你想要的。 然后改變“一條龍”圖層的混合模式為變暗。

第13步

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

第14步

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

第15步

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

第16步

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

步驟17

下載一些垃圾死角，從邊界 這里 此外，添加上的另一側(cè)欄的背景角落， 但是這也帶來了它的不透明度低于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.

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

步驟19

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

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

步驟20

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

步驟21

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

步驟22

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

步驟23

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

為了讓我們的樣品后多一點(diǎn)的態(tài)度， 我們要添加就像在塔茨網(wǎng)站預(yù)覽圖像， 但它是一個(gè)垃圾設(shè)計(jì)，我們需要添加一個(gè)背景，因?yàn)檫@垃圾 我們的形象。 這是因?yàn)椋砑犹畛銫SS的頂部和底部簡單， 然后設(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

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

26步

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

步驟27

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

步驟28

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

步驟29

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

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