PS設(shè)計(jì)網(wǎng)頁(yè)教程,用ps制作多色的網(wǎng)頁(yè)流程教程,photoshop制作色彩豐富的網(wǎng)頁(yè)『ps網(wǎng)頁(yè)制作』由于photoshop軟件的功能強(qiáng)大,現(xiàn)在我們好多設(shè)計(jì)師都用它來設(shè)計(jì)網(wǎng)頁(yè)模板,設(shè)計(jì)網(wǎng)頁(yè),制作漂亮的網(wǎng)頁(yè)模板,今天我們就來教大家用PS設(shè)計(jì)出漂亮的網(wǎng)頁(yè),非常適合網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者學(xué)習(xí),新手們請(qǐng)跟我一起來學(xué)習(xí)一下吧!作者:UCD博客 甜筒 原文:photoshop制作色彩豐富的網(wǎng)頁(yè) 所需素材: 煙葉 pixelated 藍(lán)色矩形
先看下效果吧!
第1步:創(chuàng)建一個(gè)新文件(按Ctrl + N )大小為1200px,750px 。然后背景顏色選擇漸變工具( G )從#792700到#000000從頂部向底部的文件。
第2步:創(chuàng)建一個(gè)新層,選擇畫筆工具(B組),選擇一個(gè)軟刷直徑300px和添加一些顏色您布局。我用紅色,橙色和藍(lán)色命名此層"color"。
第3步:添加一個(gè)紋理的背景,下載煙葉(在本教程上方所需素材)點(diǎn)擊這里下載。右鍵單擊該層,并選擇轉(zhuǎn)換為智能對(duì)象。然后進(jìn)入過濾器“藝術(shù)”膠片顆粒和使用的設(shè)置以下的形象,然后進(jìn)入過濾器“ Pixelate ”馬賽克,并再次使用設(shè)置以下設(shè)置混合模式為這層差異,不透明度為30 % ,并將其命名為"texture"
第4步:創(chuàng)建一個(gè)黑色的背景,創(chuàng)建一個(gè)新層,選擇圓角矩形工具( ü ) ,設(shè)置半徑為3像素,并創(chuàng)建一個(gè)圓形黑色矩形。然后雙擊在此層,打開圖層樣式窗口的設(shè)置和使用的下列圖像陰影。設(shè)置這一層不透明為70 % ,并將其命名為"black shape"
步驟5:使用組編制織您層按住Ctrl鍵并選擇所有圖層您創(chuàng)建到現(xiàn)在,然后將它們組合(或Control + G ) 。名稱為"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)和寫的名稱布局使用顏色#f4f4f4 。雙擊該層,打開圖層樣式窗口的設(shè)置和使用的下列形象。然后創(chuàng)建一個(gè)新層和寫標(biāo)語(yǔ)用的顏色#eeeeee 。
第8步:“注冊(cè)”和“登錄”按鈕現(xiàn)在我們要建立兩個(gè)按鈕在右上角。創(chuàng)建一個(gè)新組并將其命名為“Sign up | Login”。然后選擇圓角矩形工具( u )和創(chuàng)建一個(gè)圓角矩形。雙擊形成的層,打開圖層樣式窗口的設(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)入過濾器> “噪音> ”添加噪音和使用的設(shè)置下面的圖片。命名此層“gradient” ,并留下一個(gè)距離1像素。
步驟11:寫你的名字布局的網(wǎng)頁(yè)選擇文字工具( T )和寫的名字,你的布局的頁(yè)面在導(dǎo)航欄中。然后雙擊文字層,打開圖層樣式窗口的設(shè)置和使用從明年形象。字體我用被稱為灰度基本法。
步驟12:現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)分隔符。創(chuàng)建一個(gè)新層,選擇單柱選框工具,然后點(diǎn)擊一次您的布局。然后選擇矩形選框工具(m) ,點(diǎn)擊“ ,它們與選擇”按鈕,選擇律師,并建立一個(gè)選擇,如從明年形象。填補(bǔ)選擇白色,然后按Ctrl + D鍵取消。
第13步: 打開圖層樣式窗口的設(shè)置和使用的下列形象。命名此層的“l(fā)ine 1”
步驟14:重復(fù)“ 1號(hào)線”層(按Ctrl + J )條和命名新的層“l(fā)ine 2 ”選擇移動(dòng)工具( V )一次右箭頭,然后雙擊在“l(fā)ine 2”層,打開圖層樣式窗口設(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)入過濾器“模糊”高斯模糊。然后進(jìn)入過濾器> “噪音> ”添加噪音,并再次使用的設(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è)圓角矩形,我沒有使用顏色# 104f59 。 命名此層“text field” ,并設(shè)置其不透明度為80 % 。
步驟22:選擇矩形工具( u )和創(chuàng)建一個(gè)矩形,我做到了。將此矩形在右側(cè)的搜索欄。雙擊這一層的設(shè)置。然后右鍵單擊在此層,并選擇創(chuàng)建裁剪面具。
步驟23:在上按鈕寫“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è)圓角矩形想我做到了。雙擊該層,打開圖層樣式窗口的設(shè)置。然后選擇文字工具(T)寫 “sign up”使用白色。
步驟30:重復(fù)上一步創(chuàng)建另一個(gè)按鈕,但是這一次寫的話“l(fā)earn more”在您的按鈕。然后創(chuàng)建一個(gè)新層,選擇自定義形狀工具(u)和建立一個(gè)白箭像我做到了。
步驟31:創(chuàng)建一個(gè)新層,并將其命名為“l(fā)eft arrow”。選擇橢圓工具( u )和建立一個(gè)循環(huán)使用的顏色#406f94 。雙擊該層,打開圖層樣式窗口的設(shè)置。
步驟32:建立一個(gè)箭頭的藍(lán)色圓圈內(nèi)。創(chuàng)建一個(gè)新層,并使用自定義形狀工具(ü)創(chuàng)建一個(gè)白色箭頭。雙擊該層,打開圖層樣式窗口的設(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è)矩形,我沒有使用白色。命名此層"white shape"并設(shè)置其不透明度為90 % 。
步驟38:按Ctrl單擊載體面具"white shape"層以選中它。 T然后創(chuàng)建一個(gè)新層,選擇漸變工具( G )#8f8f8f透明。設(shè)置這一層不透明的50 % ,并將其命名為"top shadow."然后選擇移動(dòng)工具( V )和打擊的向下箭頭,然后按鍵盤上的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 )寫內(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é)果
聯(lián)系客服