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

2022-12-26 13:21:38 來(lái)源/作者： / 己有：34人學(xué)習(xí)過(guò)

作者: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)尺和參考線拖動(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í)，只有水平或垂直梯度。在這種情況下，紋理有許多水平線。它需要很容易轉(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è)”注腳。“

您可以添加到“內(nèi)容”層這個(gè)矩形，你也可以添加多個(gè)文件夾，里面這四個(gè)文件夾需要。一旦你放置在一個(gè)適當(dāng)?shù)奈恢镁匦危?申請(qǐng)陰影及中風(fēng)效果使用以下值。

步驟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ě)在它的用戶數(shù)量。記住，現(xiàn)在，我們正努力在“側(cè)欄”文件夾。

步驟23

現(xiàn)在是時(shí)候增加一個(gè)職位，我們的設(shè)計(jì)。只要寫(xiě)一些作為標(biāo)題，日期變更線的另一項(xiàng)隨機(jī)文本，分類(lèi)和作者。此外，由于該職位的一些文字的話。印刷術(shù)是最重要的這一步。我喜歡用的標(biāo)題和對(duì)身體無(wú)襯線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à)一條紅線后 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à)筆。