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

作者:Lander 翻譯　  出處:

第1步

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

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

第2步

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

 

第3步

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

 

第4步

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

第5步

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

 

第6步

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

 

第7步

一個顏色疊加，和圖案疊加。

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

第8步

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

 

第9步

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

 

第10步

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

第11步

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

 

第12步

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

 

第13步

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

第14步

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

 

 

第15步

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

第16步

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

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

步驟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)航項以及。 當您轉(zhuǎn)換成HTML的CSS文件中的PSD， 你需要這些書籍的轉(zhuǎn)換到圖像， 所以它的行，如果你想添加更多的樣式給他們。最后， 使用一些導(dǎo)游把它放入一個適當?shù)奈恢玫奈淖謱印?/p>

 

步驟19

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

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

步驟20

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

 

步驟21

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

 

步驟22

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

步驟23

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

 

為了讓我們的樣品后多一點的態(tài)度， 我們要添加就像在塔茨網(wǎng)站預(yù)覽圖像， 但它是一個垃圾設(shè)計，我們需要添加一個背景，因為這垃圾 我們的形象。 這是因為，添加填充CSS的頂部和底部簡單， 然后設(shè)置一個重復(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的意見和一些文字， 這是一個好主意，將所有相關(guān)層后進入一個新 文件夾，名為“后。“然后增加文件的一點點的高度， 你可以通過使用裁剪工具， 這樣做只是為了看看我們設(shè)計的外觀，如果有兩個或三個 職位就可以了。重復(fù)的“郵報”集團， 和更改文本和圖像，如下圖所示。

26步

其實這看起來相當不錯， 現(xiàn)在添加補充工具欄的項目的冠軍。 喲可以為每個項目的資料夾以及。

 

步驟27

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

步驟28

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

步驟29

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

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