下面是范文網(wǎng)小編收集的ps網(wǎng)頁設(shè)計(jì)教程3篇 PS網(wǎng)頁設(shè)計(jì)制作教程，供大家賞析。
ps網(wǎng)頁設(shè)計(jì)教程1
使用 PHOTOSHOP設(shè)計(jì)網(wǎng)站
教學(xué)項(xiàng)目及主要內(nèi)容
焦雅玲
本課程選擇了使用PS設(shè)計(jì)網(wǎng)站典型的６個(gè)項(xiàng)目，總學(xué)時(shí)共計(jì)６4學(xué)時(shí)。具體教學(xué)項(xiàng)目如下：
項(xiàng)目一 網(wǎng)頁元素之LOGO 的設(shè)計(jì)
學(xué)時(shí)：6
１－１
LOGO的基本常識(shí)、常見表現(xiàn)形式以及設(shè)計(jì)原則
１－２ 子項(xiàng)目１：臨摹GEARHEAD公司LOGO １－３ 子項(xiàng)目２：臨摹寶馬公司LOGO １－４ 優(yōu)秀LOGO賞析 １－5 考核及總結(jié)：設(shè)計(jì)自主網(wǎng)站的LOGO
項(xiàng)目二 網(wǎng)頁元素之導(dǎo)航欄的設(shè)計(jì)
學(xué)時(shí)：8 ２－１ 導(dǎo)航欄的基本常識(shí)、常見表現(xiàn)形式以及設(shè)計(jì)原則 ２－２
子項(xiàng)目１：臨摹工業(yè)化網(wǎng)站導(dǎo)航欄 ２－３ 子項(xiàng)目２：臨摹異形導(dǎo)航 ２－４ 優(yōu)秀導(dǎo)航欄賞析 ２－5 考核及總結(jié)：設(shè)計(jì)自主網(wǎng)站的導(dǎo)航
項(xiàng)目三 網(wǎng)頁元素之BANNER的設(shè)計(jì)
學(xué)時(shí)：10 ３－１ BANNER的常識(shí)、表現(xiàn)形式以及設(shè)計(jì)原則 ３－２
子項(xiàng)目１：臨摹動(dòng)態(tài)廣告--北大青鳥廣告 ３－３ 用PHOTOSHOP制作動(dòng)畫的原理 ３－４
子項(xiàng)目２：臨摹動(dòng)態(tài)廣告--我的博客 ３－５ 優(yōu)秀BANNER動(dòng)畫賞析
３－６ 子項(xiàng)目3：臨摹靜態(tài)廣告--網(wǎng)頁設(shè)計(jì)師大賽 ３－7
子項(xiàng)目4：臨摹靜態(tài)廣告--動(dòng)漫學(xué)院
３－8 考核及總結(jié)：設(shè)計(jì)網(wǎng)站內(nèi)所需的各種宣傳廣告
項(xiàng)目四 UI界面設(shè)計(jì)
學(xué)時(shí)：8 ４－１ UI的基本常識(shí)及設(shè)計(jì)原則 ４－２
子項(xiàng)目1：CRM系統(tǒng)登錄界面 ４－３ 優(yōu)秀UI賞析
４－４
子項(xiàng)目2：CRM系統(tǒng)界面
４－５
考核及總結(jié)：為自己的網(wǎng)站加入U(xiǎn)I界面
項(xiàng)目五 項(xiàng)目實(shí)戰(zhàn)—網(wǎng)站前臺(tái)界面設(shè)計(jì)
學(xué)時(shí)：24 ５－１ 子項(xiàng)目1：銀行網(wǎng)站首頁--需求描述 ５－２
子項(xiàng)目1：銀行網(wǎng)站首頁—案例分析 ５－３ 子項(xiàng)目1：銀行網(wǎng)站首頁--推薦步驟
５－４ 考核及總結(jié)：完成自主網(wǎng)站的首頁及子頁設(shè)計(jì)
項(xiàng)目六 裁切網(wǎng)頁效果圖
學(xué)時(shí)：8 ６－１ 切片的基本原理及相關(guān)知識(shí) ６－２
子項(xiàng)目１：七維空間 ６－３ 子項(xiàng)目２：九洲商務(wù)網(wǎng) ６－４ 子項(xiàng)目3：城市健康網(wǎng)
６－５ 考核及總結(jié)：將自主網(wǎng)站切片
ps網(wǎng)頁設(shè)計(jì)教程2
制作一個(gè)好的網(wǎng)頁，需要的內(nèi)容也是非常多，其中有按鈕、橫幅、圖標(biāo)及其它素材等。制作的時(shí)候先規(guī)劃好大致的框架，然后由上至下慢慢細(xì)化各部分的內(nèi)容，注意好整體搭配。最終效果如下：
1、在我們打開PSD網(wǎng)格模板創(chuàng)作前, 我們首先需要先構(gòu)造一下想象中的結(jié)構(gòu).從上面的這張圖，你可以看出來：因?yàn)樵谝粋€(gè)排版中又有排版，所以這是一個(gè)有點(diǎn)復(fù)雜的結(jié)構(gòu)。
2、構(gòu)造了結(jié)構(gòu)之后我們繼續(xù).打開16欄式的PSD模板文件.打開 “圖像>畫布大小”.把畫布的寬度設(shè)置為 1200px 高度設(shè)置為 1700px.把背景色設(shè)置為 #ffffff既白色。
3、用長方形工具在頂部畫一個(gè)寬100%高大概80px的長方形.用顏色： #dddddd填充它。
4、在長方形那層上面創(chuàng)建一個(gè)新層.按住CRTL鍵鼠標(biāo)點(diǎn)擊長方形層.長方形就被選中了，然后把目標(biāo)移至剛建下。通過這個(gè)技巧你畫出了一個(gè)微妙的照亮效果。你現(xiàn)在可以把這兩層聯(lián)合起來了。的新層上.選擇半徑 600px 的軟筆刷（如圖）, 把其顏色設(shè)置為白色, 然后就像圖片所示那樣在選框上邊緣點(diǎn)幾
5、建一個(gè)新層，再用長方形工具如圖所示在上端畫一個(gè)深灰色的小長方形。
角度為-90,縮放為100%。
6、在距離上端長方形500px處開始畫一個(gè)寬 100% 高 575px 的長方形.設(shè)置其由 #d2d2d0到 #ffffff的漸變色、現(xiàn)在我們?nèi)绲谖宀侥菢犹砑诱樟列Ч?。這個(gè)技巧我們將很頻繁地使用，因此下次用到的時(shí)候我只提示是第五步的效果。
在當(dāng)前層之上簡歷一個(gè)新層。Ctrl+鼠標(biāo)點(diǎn)擊這個(gè)大的長方形。選擇 600px的軟筆刷, 設(shè)置顏色為白色，如圖所示對(duì)選區(qū)的邊緣點(diǎn)擊多下。
8、創(chuàng)建一個(gè)新層畫一個(gè)400px高的長方形。這是用作我們網(wǎng)頁頁頭的。給它設(shè)置一個(gè)線性漸變，由顏色 #2787b7 to #258fcd。以下展示顏色的微妙變化。
9、在頁首長方形塊底端畫一條1px的灰藍(lán)色的線, 混合屬性中添加陰影效果。陰影參數(shù): 正底疊加, 透明度: 65%, 方向:-90, 距離: 1px，寬度: 6px。之后再建一個(gè)新層，在灰藍(lán)色線下面畫一條1px的白線。通過這種方式，我們就可以創(chuàng)建一個(gè)輪廓鮮明的邊緣?？梢哉f在你的設(shè)計(jì)中，你可以把這個(gè)技巧用于其他色塊。
10、創(chuàng)建一個(gè)新層,在畫布頂端用”長方形”工具化一個(gè)50px高的長方形,就如圖所示，這個(gè)長方形是用作導(dǎo)航的。
11、為其添加陰影效果.參數(shù)如圖所示。
12、開始話導(dǎo)航啦.使用”圓角工具”，設(shè)置半徑為5px,畫一個(gè)圓角長方形，用顏色 #f6a836 填充它, 之后給他添加以下效果: 內(nèi)陰影-顏色: #ffffff, 混合模式:正底疊加, 透明度: 60%, 角度: 120*, 距離: 7px, 大小: 6px； 內(nèi)發(fā)光 – 混合模式: 正常, 顏色: #ffffff, 大小: 4px.其他參數(shù)默認(rèn)設(shè)置； 描邊 – 大小: 1px, 位置: 內(nèi)部, 顏色: #ce7e01。
13、Ctrl+鼠標(biāo)點(diǎn)擊層產(chǎn)生如圖選區(qū).選擇：選擇->修改>收縮然后在彈出框中輸入1px，確定。
14、在上面再建一層, 把混合模式設(shè)置成疊加，然后好像第五步那樣加照亮效果，不過這次用的是小筆刷。然后就是增加導(dǎo)航文字了。我用 Arial 字體作為導(dǎo)航的連接字體, 所有效果設(shè)置為 “無”。
15、現(xiàn)在我們開始創(chuàng)建搜索框, 圓角長方形，半徑5px,在如第四步所示的網(wǎng)格的右邊、頂端灰色背景網(wǎng)格紋中間創(chuàng)建一個(gè)用于搜索的色塊.為它增加以下樣式: 內(nèi)陰影 – 顏色: #000000,混合模式: 正片疊加, 透明度: 9%, 角度: 90*,距離: 0px, 大小: 6px； 描邊 – 大小: 1px, 位置:內(nèi)部, 顏色: #dfdfdf。
16、給它添加”search”的文本和一個(gè)亮底暗色的”GO”按鈕.如下圖所示。
17、到目前為止已經(jīng)創(chuàng)建了很多層了，為了條例清楚，我們建立一個(gè)叫”search”的層文件夾.把所有于搜索相關(guān)的層一并拖到這個(gè)層文件夾里面去.遲點(diǎn)，我們都會(huì)這樣處理，可以讓我們的創(chuàng)作更合理。
18、新建一個(gè)新層，然后就像畫”搜索框”一樣在這層上面畫一個(gè)”Sign Up”按鈕（字長剛好為背景長的一半）.把這個(gè)組合放在搜索框下方條紋豎直方向中間。
19、再一次如第五步那樣創(chuàng)建亮光效果。
20、使用更小的軟筆刷.這次的筆觸大小為45px。
21、加了logo和網(wǎng)站描述之后，我們的網(wǎng)頁就如上所示。
22、現(xiàn)在我們回到層結(jié)構(gòu)那里提早做一些工作。創(chuàng)建一個(gè)空的層文件夾并命名為”top_bar”。移動(dòng)所有的圖層到這個(gè)文件夾里面（包括logo,條紋,搜索框,注冊(cè)按鈕，導(dǎo)航和背景）。
23、創(chuàng)建另外一個(gè)空層文件夾并命名為”header”。這里用于放置頭部圖層。如上圖所示。
24、頭部看起來有的平淡，因此我們可以再任意位置加相同的亮光效果。選中藍(lán)色的頭部區(qū)域.在它上面創(chuàng)建一個(gè)新層并設(shè)置其混合樣式為“疊加”。
25、選一個(gè)大點(diǎn)的600px軟筆刷，顏色為#ffffff白色。然后再導(dǎo)航下方點(diǎn)擊幾次。假如想更有層次感，你還可以把顏色調(diào)為黑色，然后在頭部區(qū)底部重復(fù)同樣操作。
26、在這一步我介紹一下我是怎么實(shí)現(xiàn)頭部圖片的反光效果的。選擇兩張圖片，我用了我自己另外做的兩個(gè)網(wǎng)頁模板圖片，縮放其中一個(gè)然后把他放在比較大的那個(gè)的下方。
復(fù)制這兩層，用自由變換工具按住shift鍵等比例縮放一下，用長方形工具在上層的圖片下端外部畫一個(gè)選區(qū)，到選擇->修改->羽化，填入30px或者大點(diǎn)羽化一下選框。（這里原教程說得不大清楚，我實(shí)現(xiàn)的方法是這樣的：羽化之后選擇反選，然后選取畫筆工具，選白色，再在圖片的左邊角和右下角點(diǎn)擊數(shù)下，然后用長方形選框和delete鍵修整邊緣）。
27、為了讓兩個(gè)圖片更加突出，可以新建一層，設(shè)置該層模式為疊加，重復(fù)第四步的效果添加的操作。
28、條紋之后，頭部區(qū)域就是像上面那樣子的。不要方劑把圖層都放在’header’層文件夾里面。
29、最終效果圖里面你會(huì)看到在內(nèi)容區(qū)域里面有很漂亮的切換頁。為了創(chuàng)建這種切換頁我們需要實(shí)現(xiàn)額外的一些操作，這是很有必要的。首先用圓角長方形工具創(chuàng)建一個(gè)高70px圓角半徑為10px的圖形（注意要畫路徑圖），現(xiàn)在我們不要底部圓角的部分而為它鄭家一個(gè)更好的角效果。用直接選取工具單擊這個(gè)圖形的路徑，單擊垂直點(diǎn)然后按住shift鍵往下拉直到如圖所示狀態(tài).現(xiàn)在看起來不錯(cuò)了，但是還是比較簡陋。
30、如圖創(chuàng)建了一個(gè)比較好的角。
31、選擇直線工具，設(shè)置大小為1px。
32、按住shift鍵畫灰色的分割線。
33、為每個(gè)切換標(biāo)題添加小圖標(biāo)。通常一個(gè)切換標(biāo)題激活了其他的就處于非激活狀態(tài)了。為了清楚表達(dá)這一點(diǎn)于高亮狀態(tài)。我們需要想個(gè)辦法完成它。我降低其他圖標(biāo)的飽和度并且降低標(biāo)題字眼和描述文字的透明度一保證激活的標(biāo)題
后裁切選區(qū)（按住alt畫選區(qū)即可把不要的選區(qū)去掉）最終使選中的范圍只有第一個(gè)按鈕。
34、為了使激活的按鈕更加明顯，我們將給它添加一個(gè)時(shí)尚的背景。為了達(dá)到這樣的效果我們把整個(gè)對(duì)象選中
35、如上圖所示即為所要達(dá)到的選區(qū)。
36、用一個(gè)更小的軟筆刷，畫出一個(gè)白色背景。
37、增加一個(gè)陰影：在切換菜單的后面如上圖所示畫一個(gè)深灰色的長方形。
38、點(diǎn)擊圖層區(qū)底部的小圖標(biāo)給該層增加一個(gè)蒙版。
39、把前景色設(shè)置為黑色，選一個(gè)大的軟筆刷，在蒙版層上面點(diǎn)擊（如圖所示，蒙板上面出了白色之外的顏色會(huì)遮擋圖層）使部分黑色去掉。結(jié)果，我們創(chuàng)建了一個(gè)比較好看的陰影效果。
現(xiàn)在我們就得到一條比較時(shí)尚好看的線了。40、最后我們加點(diǎn)細(xì)節(jié)。在切換菜單下方畫一個(gè)1px的灰線。然后如上一步一樣用蒙版的方式使左右兩端漸變
41、現(xiàn)在切換菜單就像這樣。
42、現(xiàn)在開始設(shè)計(jì)第一個(gè)切換按鈕的內(nèi)容。我們需要一個(gè)精準(zhǔn)設(shè)計(jì)的圖像（有好看的標(biāo)題和一些文字內(nèi)容）。因此我現(xiàn)在畫一個(gè)白色有1像素灰色邊框的長方形，再給它加上細(xì)微的陰影效果。先我們得創(chuàng)建這個(gè)精準(zhǔn)的圖片。這里我認(rèn)為我們最好打破這個(gè)圖片尖銳的棱角設(shè)計(jì)，從而創(chuàng)造一個(gè)多彩的效果
43、復(fù)制這一層并用變形工具稍微旋轉(zhuǎn)。重復(fù)這個(gè)操作幾次。
44、把你選好的圖片導(dǎo)進(jìn)來，放在白色長方形上面。不用擔(dān)心圖片會(huì)溢出，我們會(huì)修整它。選中最上層的長方形按選擇->修改->收縮，輸入5px,確認(rèn)，然后在圖層管理區(qū)下方點(diǎn)擊添加圖層蒙版，這樣圖片就只顯示選區(qū)范圍
45、這就是你現(xiàn)在圖層的狀態(tài)。
46、不要忘記整理圖層，這里新建圖層夾把圖層歸類。
47、增加一個(gè)漂亮的標(biāo)題、一些文本和列表，我們的設(shè)計(jì)工作又完成一部分?，F(xiàn)在繼續(xù)下一步吧。
48、再組織一下圖層。
色的大概高220像素的長方形。設(shè)置其有1像素的灰色邊。
49、我認(rèn)為這一個(gè)部分要比較大的，因此我把范圍限定在主區(qū)域上的一個(gè)大的盒子里面。首先創(chuàng)建一個(gè)大的淡
50、然后再畫一個(gè)上下左右都比它小10像素的另一個(gè)長方形。同樣設(shè)置其1像素的淡灰色邊框。
51、最后寫上文本就可以了。
52、終于要做頁腳啦。畫一個(gè)400像素高的、深黑色的長方形。
53、如第四步一樣給它加亮光效果。
理。
54、下來，如圖所示，在區(qū)域上方畫一個(gè)10像素高的長方形，并且通過在頂端和底部各多加兩條線增強(qiáng)細(xì)節(jié)
55、創(chuàng)建低端部分用于放置重復(fù)的導(dǎo)航。你可以拷貝頂端放置導(dǎo)航的長方形，移動(dòng)并變形使其40像素高。把這樣：圖像->畫布大小設(shè)置即可。放到你畫布的最低端。你要注意你可能要擴(kuò)張你的畫布使所有東西都有適合的位置。制約擴(kuò)張畫布的操作你可
56、再次強(qiáng)化細(xì)節(jié)。給頁腳的導(dǎo)航區(qū)頂端加一條白色邊，這樣有比較好的邊框效果。
57、給頁腳增加內(nèi)容，你可以依據(jù)網(wǎng)格合理安置它們。
58、然后就是把頁腳相關(guān)的圖層整合起來。
最終效果：
ps網(wǎng)頁設(shè)計(jì)教程3
網(wǎng)頁設(shè)計(jì)教程
一、創(chuàng)建名為Test1的站點(diǎn)，并在其中按如下要求設(shè)計(jì)簡單網(wǎng)頁，如圖所示。
要求：
①設(shè)置網(wǎng)頁標(biāo)題為自己的學(xué)號(hào)，網(wǎng)頁背景為；
②插入一個(gè)3行3列的表格，表格邊框?qū)挾葹?；
③第一行合并單元格，插入動(dòng)畫；
④第二行第一列標(biāo)題的格式為藍(lán)色、楷體、24Px、居中，正文縮進(jìn)兩個(gè)漢字、大小為18Px、左對(duì)齊；中間插入一個(gè)圖片，其寬度為260、高度320；第三列是一個(gè)表單，其中姓名和密碼的字符寬度和最多字符數(shù)為12；
⑤第三行的字體大小為18px；“友情鏈接”鏈接到 開始創(chuàng)建文檔(Ctrl+N);高和寬均為1200 像素.使背景圖層可編輯 按照默認(rèn)設(shè)置, Photoshop將會(huì)鎖定背景圖層因此你不能進(jìn)行編輯.為了使它可編輯, 在圖層面板雙擊背景圖層(如果圖層面板未激活,按下F7觸發(fā)).另外一種方法, 你可以在背景層上擊右鍵,選擇 “背景圖層”.一旦雙擊之后, 將會(huì)彈出對(duì)話框默認(rèn)如下顯示).輸入你背景圖層的名字按下確定;之后我們可以自由的編輯背景層.創(chuàng)建背景層 現(xiàn)在我們的背景層可以編輯了,雙擊圖層縮略圖增加漸變圖層樣式;根據(jù)下圖設(shè)置樣式參數(shù).創(chuàng)建新圖層(Ctrl+Shift+N)命名為 “header background“.選擇矩形選區(qū)工具(M)在畫布頂端繪制矩形選區(qū);選區(qū)大概150px高,寬度與畫布相同.使用任意顏色填充選區(qū)(Alt+Backspace)增加圖層樣式.6 建立新層(Ctrl+Shift+N)標(biāo)志為 “navigation background“.重復(fù)4 – 5步, 只是這次的選區(qū)只有50px高, 寬度仍然與畫布一致,并且一定要放置在上面選區(qū)的下方.填充選區(qū)(Alt+Backspace),任意顏色均可,并且增加一對(duì)圖層樣式,(顏色漸變以及描邊選項(xiàng)).你看到的應(yīng)該是這樣.創(chuàng)建頂部 建立新層(Ctrl+Shift+N)標(biāo)志位”header“,選擇矩形選區(qū)工作,在菜單欄調(diào)整寬度為850px 高度為150px.將選區(qū)置于畫布中央, 確保選區(qū)的底部在”navigation background”圖層的描邊之上.填充選區(qū)(Alt+Backspace)選擇任意顏色, 然后增添以下樣式.增加頂部文字 使用橫排文字工具添加網(wǎng)站的標(biāo)題和口號(hào).設(shè)置參照下圖.效果看起來應(yīng)該是這樣的.創(chuàng)建導(dǎo)航欄 創(chuàng)建新圖層(Ctrl+Shift+N)命名為 “navigation“.使用矩形選區(qū)工具(M),設(shè)置固定大小: 850px 寬 和 50px 高.在頂部下面新建選區(qū), 填充任意顏色.現(xiàn)在,為你的 “navigation”層增加3種樣式.看起來應(yīng)該是這樣的.使用橫排文字工具(T)在你的導(dǎo)航欄上面增加導(dǎo)航鏈接.增添導(dǎo)航經(jīng)過按鈕
16選擇圓角矩形工具(U)設(shè)置半徑為10px.畫出一個(gè)小矩形大小為80px x 50px.使用矩形工具(M)在剛才圓角矩形的上半部分再畫一個(gè)矩形.填充同樣的顏色.19在圖層面板右擊選擇新建的圖層并且復(fù)制.將新復(fù)制的圖層180度旋轉(zhuǎn),編輯> 變換 > 旋轉(zhuǎn) 180.最后, 使用移動(dòng)工具將兩個(gè)新建的圖形緊挨在一起并且處于同一水平線上.o使用矩形選區(qū)工具切除不想要的部分.在新建的圖層下半部份新建一個(gè)選區(qū), 按下 Del鍵清除.使用移動(dòng)工具(V)和方向鍵對(duì)齊兩個(gè)圖形, 確保它們不是直接重疊.按照下圖所示, Ctrl + 點(diǎn)擊圖層面板中的縮略圖載入較小圖形的選區(qū).切換到較大圖層按下del鍵清除不想要的部分.重復(fù)上述步驟,你將看到以下圖形.改變鏈接經(jīng)過樣式
23當(dāng)你的鏈接經(jīng)過按鈕一旦完成你可以刪除副本, 然后重命名為”nav hover“.現(xiàn)在開始,為它增加一組圖層樣式.將 “nav hover”層移至 navigation 文字圖層下方.將文字的顏色改為白色(#FFFFFF).在你”nav hover” 按鈕圖層的下方, 新建一個(gè)圖層(Ctrl+Shift+N)命名為 “nav hover extra“.在本層上, 使用橢圓選區(qū)工具新建一個(gè)小圓,顏色設(shè)置為#切除橢圓被導(dǎo)航欄擋住的下半部分,調(diào)整到合適位置之后再復(fù)制一份.看起來應(yīng)該是這樣的.創(chuàng)建內(nèi)容區(qū)域 建立新圖層(Ctrl + Shift + N)命名為 “content area“.使用矩形選區(qū)工具, 新建選區(qū)寬度為850px , 與我們平時(shí)的框框一樣,高度可以根據(jù)你的內(nèi)容增加.填充任意顏色并且調(diào)整樣式.拖移”content area(內(nèi)容區(qū)域)”圖層到”navigation(導(dǎo)航)” 層下方然后使用移動(dòng)工具(V)調(diào)整內(nèi)容區(qū)域,是它與導(dǎo)航欄相交的部分像凹凸不平的線.創(chuàng)建搜索框 新建圖層(Ctrl+Shift+N)命名為 “search field“在導(dǎo)航區(qū)域的右邊新建矩形選區(qū).選擇 編輯 >填充(Shift+F5)填充白色(#FFFFFF), 增加描邊樣式.31 使用橫排文字工作在搜索區(qū)域插入文字.32 緊挨著搜索區(qū)域的地方,使用矩形選區(qū)工具(M)新建另外矩形.33 填充任意顏色并且為圖層加入漸變疊加和描邊兩種圖層樣式;根據(jù)下面圖片設(shè)置.看起來應(yīng)該是這樣的.創(chuàng)建特色區(qū)域
建立新層(Ctrl+Shift+N)命名為”featured area“,使用圓角矩形工具新建矩形,圓角半徑為 使用多邊形工具(L)創(chuàng)建銳利的箭頭指向左上部分.為箭頭填充同樣的顏色.36 現(xiàn)在為你的特色區(qū)域圖層增加一對(duì)圖層樣式(漸變疊加和描邊).填充特色區(qū)域內(nèi)容
建立新層(Ctrl+Shift+N)命名為 “featured border” 使用矩形選區(qū)工具(U), 在特色區(qū)域里面新建矩形.38 按Ctrl鍵點(diǎn)擊區(qū)域縮略圖載入選區(qū), 然后點(diǎn)擊”旋轉(zhuǎn)> 修改 > 收縮”.收縮區(qū)域威10px, 然后按下 載入你想要的圖片(我使用一些花的圖片), 打開ps, 復(fù)制圖片到你的剪切板(Ctrl + C).確保我們上一步創(chuàng)建的選區(qū)仍然處于激活狀態(tài),點(diǎn)編輯 >粘貼入(Shift+Ctrl+V).圖片就會(huì)粘貼到選區(qū)里面.40 在圖片右側(cè)增加虛擬的標(biāo)題和文字.創(chuàng)建內(nèi)容區(qū)域的三維綢帶
使用和導(dǎo)航經(jīng)過按鈕類似的方法創(chuàng)建左邊部分, 區(qū)別在于這次重疊區(qū)域更加長,并且是水平調(diào)整(如果需要請(qǐng)重新跳回閱讀).42 在綢帶的結(jié)尾部分(右手邊),使自定義形狀工作(L)創(chuàng)建三角形 然后按下del鍵刪除不需要部分.最后, 增添圖層樣式和虛擬文字.43 復(fù)制三維綢帶,點(diǎn)擊圖層選擇編輯 >變換> 水平翻轉(zhuǎn).使用移動(dòng)工具調(diào)整(V)到右邊;他們將作為側(cè)邊欄的標(biāo)題部分
在每個(gè)標(biāo)題下面增加文字或者一兩張圖片.創(chuàng)建頁腳
再次創(chuàng)建鼠標(biāo)經(jīng)過按鈕(或者, 你可以簡單復(fù)制上面已經(jīng)做過的).46 根據(jù)下圖顏色列表更改漸變樣式.47 合并并且旋轉(zhuǎn)該層,通過 編輯> 變換 > 逆時(shí)針旋轉(zhuǎn)90°.移動(dòng)到圖層左邊.48 復(fù)制該圖形通過編輯>變換>水平翻轉(zhuǎn).移動(dòng)到圖層另外一邊.49 將兩個(gè)圖形合并到同一個(gè)層(Ctrl+E), 放大其中任一個(gè)圖形(Z), 類似下圖創(chuàng)建選區(qū),選擇編輯> 自由變形(Ctrl+T).50 選擇中間的錨點(diǎn)拖拉到畫布的另外一邊.看起來應(yīng)該類似這樣.51 最后,使用橫向文字工具寫入你頁腳的信息.
ps網(wǎng)頁設(shè)計(jì)教程3篇 PS網(wǎng)頁設(shè)計(jì)制作教程相關(guān)文章：
★ 網(wǎng)頁制作課程設(shè)計(jì)要求3篇 網(wǎng)頁設(shè)計(jì)與制作課程標(biāo)準(zhǔn)
★ 國際網(wǎng)頁Web設(shè)計(jì)流程3篇(網(wǎng)頁設(shè)計(jì)web前端網(wǎng)站設(shè)計(jì))
★ 網(wǎng)頁設(shè)計(jì)師工作總結(jié)6篇(個(gè)人網(wǎng)頁設(shè)計(jì)總結(jié))
★ 網(wǎng)頁設(shè)計(jì)大賽策劃書3篇(網(wǎng)頁設(shè)計(jì)比賽策劃書)
★ 網(wǎng)站設(shè)計(jì)技術(shù)人員自我評(píng)價(jià)整理14篇 網(wǎng)頁設(shè)計(jì)自我評(píng)價(jià)
★ 實(shí)用的網(wǎng)頁設(shè)計(jì)的實(shí)習(xí)報(bào)告3篇 網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)報(bào)告的內(nèi)容怎么寫
★ 網(wǎng)頁設(shè)計(jì)與制作課程設(shè)計(jì)3篇 網(wǎng)頁設(shè)計(jì)的課程設(shè)計(jì)
★ SVG網(wǎng)頁設(shè)計(jì)軟件實(shí)現(xiàn)分析論文共11篇
★ 網(wǎng)頁設(shè)計(jì)報(bào)告3篇(web網(wǎng)站設(shè)計(jì)報(bào)告)