photoshop網(wǎng)頁(yè)應(yīng)用教程:制作色彩豐富的網(wǎng)頁(yè)(6)

作者甜筒　  出處:UCD博客


所需素材： 煙葉   pixelated  藍(lán)色矩形  

先看下效果吧！




第1步：創(chuàng)建一個(gè)新的photoshop文件（按Ctrl + N ）大小為1200px，750px 。然后背景顏色選擇漸變工具（ G ）從＃792700到＃000000從頂部向底部的文件。





第2步：創(chuàng)建一個(gè)新層，選擇畫(huà)筆工具（B組），選擇一個(gè)軟刷直徑300px和添加一些顏色您布局。我用紅色，橙色和藍(lán)色命名此層"color"。





第3步：添
加一個(gè)紋理的背景，下載煙葉（在本教程上方所需素材）點(diǎn)擊這里下載。右鍵單擊該層，并選擇轉(zhuǎn)換為智能對(duì)象。然后進(jìn)入過(guò)濾器“藝術(shù)”膠片顆粒和使用的設(shè)置以
下的形象，然后進(jìn)入過(guò)濾器“ Pixelate ”馬賽克，并再次使用設(shè)置以下設(shè)置混合模式為這層差異，不透明度為30 ％
，并將其命名為"texture"







,                                            
第4步：創(chuàng)建一個(gè)黑色的背景，創(chuàng)建一個(gè)新層，選擇圓角矩形工具（ ü ） ，設(shè)置半徑為3像素，并創(chuàng)建一個(gè)圓形黑色矩形。然后雙擊在此層，打開(kāi)圖層樣式窗口的設(shè)置和使用的下列圖像陰影。設(shè)置這一層不透明為70 ％ ，并將其命名為"black shape"





步驟5：使用組編制織您層按住Ctrl鍵并選擇所有圖層您創(chuàng)建到現(xiàn)在，然后將它們組合（或Control + G ） 。名稱(chēng)為"background."




第6步：創(chuàng)建更多的組。創(chuàng)建一個(gè)新組，并將其命名為"home" 。  然后創(chuàng)建另一個(gè)組，并將其命名為"logo" 。







第7步：添加一個(gè)標(biāo)志和口號(hào)創(chuàng)建一個(gè)新的層內(nèi)的“標(biāo)識(shí)”組。然后選擇文字工具（T）和寫(xiě)的名稱(chēng)布局使用顏色＃f4f4f4 。雙擊該層，打開(kāi)圖層樣式窗口的設(shè)置和使用的下列形象。然后創(chuàng)建一個(gè)新層和寫(xiě)標(biāo)語(yǔ)用的顏色＃eeeeee 。








,                                            
第8步：“注
冊(cè)”和“登錄”按鈕現(xiàn)在我們要建立兩個(gè)按鈕在右上角。創(chuàng)建一個(gè)新組并將其命名為“Sign up | Login”。然后選擇圓角矩形工具（ u
）和創(chuàng)建一個(gè)圓角矩形。雙擊形成的層，打開(kāi)圖層樣式窗口的設(shè)置和使用的下列形象。設(shè)置前景顏色為白色，使用文字工具（ T ）的輸入 “Sign up
| Login”的按鈕。設(shè)置不透明的文字層至75 ％ 。








第9步：創(chuàng)建一個(gè)新組并將其命名為“Navigation” 。創(chuàng)建一個(gè)新層，選擇單列選框工具，然后單擊您的文件后，創(chuàng)建一個(gè)高度1px 。填補(bǔ)這一選擇顏色＃ 406f94 。設(shè)置這一層不透明的40 ％ ，并將其命名為“Line” 。






第10步：創(chuàng)
建一個(gè)新層，選擇矩形選框工具（ M ）和創(chuàng)建一個(gè)選擇，輔助線。然后選擇漸變工具（ G ）從＃
35423e到透明，從底部到頂部拉。然后按Ctrl + D鍵取消。然后進(jìn)入過(guò)濾器 “噪音
”添加噪音和使用的設(shè)置下面的圖片。命名此層“gradient” ，并留下一個(gè)距離1像素。



步驟11：寫(xiě)你的名字布局的網(wǎng)頁(yè)選擇文字工具（ T ）和寫(xiě)的名字，你的布局的頁(yè)面在導(dǎo)航欄中。然后雙擊文字層，打開(kāi)圖層樣式窗口的設(shè)置和使用從明年形象。字體我用被稱(chēng)為灰度基本法。







,                                            

步驟12：現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)分隔符。創(chuàng)建一個(gè)新層，選擇單柱選框工具，然后點(diǎn)擊一次您的布局。然后選擇矩形選框工具（m） ，點(diǎn)擊“ ，它們與選擇”按鈕，選擇律師，并建立一個(gè)選擇，如從明年形象。填補(bǔ)選擇白色，然后按Ctrl + D鍵取消。






第13步: 打開(kāi)圖層樣式窗口的設(shè)置和使用的下列形象。命名此層的“l(fā)ine 1”






步驟14：重復(fù)“ 1號(hào)線”層（按Ctrl + J ）條和命名新的層“l(fā)ine 2 ”選擇移動(dòng)工具（ V ）一次右箭頭，然后雙擊在“l(fā)ine 2”層，打開(kāi)圖層樣式窗口設(shè)置。






第15步：按住Ctrl鍵并選擇“l(fā)ine 1”和“l(fā)ine 2”層。然后右鍵單擊其中之一，并選擇轉(zhuǎn)換為智能對(duì)象。姓名智能物體“separator ”






,                                            
第16步：在
“separator”層下方創(chuàng)建一個(gè)新層。選擇矩形選框工具（M） ，創(chuàng)建一個(gè)選擇就是這樣從以下圖片和填補(bǔ)它的顏色＃35423e
。右鍵單擊該層，并選擇轉(zhuǎn)換為智能對(duì)象。進(jìn)入過(guò)濾器“模糊”高斯模糊。然后進(jìn)入過(guò)濾器 “噪音
”添加噪音，并再次使用的設(shè)置以下的形象。設(shè)置這一層不透明的60 ％ ，并將其命名為“highlight”






第17步：層單擊“separator”層在圖層調(diào)色板以選中它，然后轉(zhuǎn)到圖層“圖層蒙版”顯示所有。選擇漸變工具（ G ）從黑色到透明梯，從頂部到中東的拉漸變。






步驟18：按住Ctrl鍵并單擊“separator”和“highlight”層的圖層調(diào)色板選取它們。然后選擇移動(dòng)工具（V） ，按住Alt和Shift鍵，然后單擊您的文件并拖動(dòng)鼠標(biāo)。現(xiàn)在你已選定復(fù)制圖層。使用移動(dòng)工具V） ，重復(fù)此步驟，創(chuàng)造盡可能多的分隔。






步驟19：選擇所有的“separator”和“highlight”層的圖層調(diào)色板和然后按Ctrl + G 組名 “separators”






步驟20：現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)背景下的積極菜單頁(yè)面以區(qū)別于其他人。選擇矩形工具（ u ）和創(chuàng)建一個(gè)矩形。將此層放在文字層的下方，雙擊這一層的設(shè)置。然后將其命名為“active menu” ，并設(shè)置其不透明度為50 ％ 。








,                                            
步驟21：創(chuàng)建一個(gè)新組，將它命名為“search”并把它放在 “navigation”組的上面。選擇圓角矩形工具（ ü ） ，設(shè)置半徑為3 PX和創(chuàng)造一個(gè)圓角矩形，我沒(méi)有使用顏色＃ 104f59 。 命名此層“text field” ，并設(shè)置其不透明度為80 ％ 。






步驟22：選擇矩形工具（ u ）和創(chuàng)建一個(gè)矩形，我做到了。將此矩形在右側(cè)的搜索欄。雙擊這一層的設(shè)置。然后右鍵單擊在此層，并選擇創(chuàng)建裁剪面具。





步驟23：在上按鈕寫(xiě)“search” 使用白色。設(shè)置不透明為75 ％ 。






步驟24：選擇行工具（ u ）和創(chuàng)建一條垂直線，使用顏色＃123036 。命名 “l(fā)ine”，使用移動(dòng)工具V）。






步驟25：新建組，并將其命名為“Showcase”。創(chuàng)建另一個(gè)組將其命名為“background”。選擇矩形工具（u）使用顏色＃219aad。長(zhǎng)方形983像素寬，273像素高。并將其命名為“bg4” 可以點(diǎn)擊這里下載 （矩形）








,                                            步驟26：添加一個(gè)紋理的藍(lán)色矩形 。“pixelated藍(lán)色矩形”的形象，移動(dòng)到您的文件，并把這個(gè)圖像上方的藍(lán)色矩形。設(shè)置這一層不透明為55 ％ ，并將其命名為“bg3”




步驟27：添加一個(gè)藍(lán)色矩形按Ctrl -點(diǎn)擊“ bg4 ”層，選中矢量遮罩，然后再創(chuàng)建一個(gè)新層，選擇漸變工具（ G ）＃56b8e5到透明從底部到頂部。然后按Ctrl + D鍵取消。






步驟28：創(chuàng)建一個(gè)新層，選擇矩形選框工具（ M ）。選擇漸變工具（ G ）＃0f2b42到＃2a607f，從底部到頂部。然后按Ctrl+ D鍵取消。命名此層“bg1”.






步驟29：創(chuàng)建一個(gè)新組，并將其命名為“sign up button”按鈕。選擇圓角矩形工具（ü） ，設(shè)置半徑為2像素，并創(chuàng)建一個(gè)圓角矩形想我做到了。雙擊該層，打開(kāi)圖層樣式窗口的設(shè)置。然后選擇文字工具（T）寫(xiě) “sign up”使用白色。






步驟30：重復(fù)上一步創(chuàng)建另一個(gè)按鈕，但是這一次寫(xiě)的話“l(fā)earn more”在您的按鈕。然后創(chuàng)建一個(gè)新層，選擇自定義形狀工具（u）和建立一個(gè)白箭像我做到了。






步驟31：創(chuàng)建一個(gè)新層，并將其命名為“l(fā)eft arrow”。選擇橢圓工具（ u ）和建立一個(gè)循環(huán)使用的顏色＃406f94 。雙擊該層，打開(kāi)圖層樣式窗口的設(shè)置。








,                                            
步驟32：建立一個(gè)箭頭的藍(lán)色圓圈內(nèi)。創(chuàng)建一個(gè)新層，并使用自定義形狀工具（ü）創(chuàng)建一個(gè)白色箭頭。雙擊該層，打開(kāi)圖層樣式窗口的設(shè)置和使用的下列形象。設(shè)置不透明的這層到50 ％ 。






步驟33：重復(fù)前兩個(gè)步驟，創(chuàng)建另一個(gè)箭頭右側(cè)的藍(lán)色矩形。






步驟34：創(chuàng)建一個(gè)精選圖片






步驟35：圖片添加了一層陰影






步驟36：添加一些文字





選擇文字工具（ T ）和添加一些文字。
步驟37：建立一個(gè)白色長(zhǎng)方形 ，創(chuàng)建一個(gè)新組并將其命名為“content。”創(chuàng)建另一個(gè)組內(nèi)本，并將其命名為"shadows."。選擇矩形工具（ u ）和創(chuàng)建一個(gè)矩形，我沒(méi)有使用白色。命名此層"white shape"并設(shè)置其不透明度為90 ％ 。








,                                            
步驟38：按
Ctrl單擊載體面具"white shape"層以選中它。 T然后創(chuàng)建一個(gè)新層，選擇漸變工具（ G
）＃8f8f8f透明。設(shè)置這一層不透明的50 ％ ，并將其命名為"top shadow."然后選擇移動(dòng)工具（ V
）和打擊的向下箭頭，然后按鍵盤(pán)上的2px。







步驟39：創(chuàng)
建一個(gè)新層，使用矩形選框工具。然后使用漸變工具（ g ）＃8f8f8f透明。這一層和使用黑色大軟刷掩蓋中心的陰影。設(shè)置不透明的這一層的30 ％
，并將其命名為"vertical shadow 1."復(fù)制這一層（按Ctrl + j ）條，命名新層"vertical shadow 2"
，將它移到權(quán)利。






步驟40：創(chuàng)建一個(gè)水平線 ，選擇行工具（ u ）和建立一個(gè)橫向1PX和顏色＃aebcc7命名此層"line."






步驟41：添加一些文字，選擇文字工具（ T ）寫(xiě)內(nèi)容。







,                                            步驟42：創(chuàng)建一個(gè)的頁(yè)腳 。創(chuàng)建一個(gè)新組，并將其命名為"footer" 。創(chuàng)建一個(gè)新的層，選擇矩形選框工具（ M ）擇。然后設(shè)置前景顏色為＃ 555555 ，選擇一個(gè)大軟刷。設(shè)置這一層不透明的50 ％ ，并將其命名為"gradient." 。






步驟43：添加一個(gè)符合高度1px，創(chuàng)建一個(gè)新層，選擇單列選框工具，然后單擊您的文件。 填補(bǔ)選擇白色，然后按Ctrl + D鍵取消。轉(zhuǎn)到圖層“圖層蒙版”顯示所有，選擇一個(gè)大黑色軟刷�？纯聪旅娴膱D片，以供參考。設(shè)置這一層不透明的15 ％ ，并將其命名為"line."






步驟44：添加一些文字到頁(yè)腳 選擇文字工具（ T ）和添加一些文字的頁(yè)腳。


最后結(jié)果