想要設(shè)計(jì)網(wǎng)頁的網(wǎng)友們看視頻又看不懂,那么文字版教程來了。小編整理的網(wǎng)頁設(shè)計(jì)視頻教程文字版讓零基礎(chǔ)的你也能設(shè)計(jì)好看漂亮的網(wǎng)頁,一步一步就能做到了,一起看看吧。
網(wǎng)頁設(shè)計(jì)視頻教程文字版整理
視頻教程一: 下載網(wǎng)格模板
在我們開始創(chuàng)作之前,先下載這個(gè)模板. 你能在網(wǎng)站上找到這些模板. 下載之后解壓zip里面關(guān)于PSD的模板. 你會(huì)發(fā)現(xiàn)有兩種規(guī)格: 一個(gè)是12欄式的而另一個(gè)是16欄式的. 他們的區(qū)別就像名字所說的,一個(gè)是按12欄分布一個(gè)按16欄. 更詳細(xì)的介紹一下吧, 如果你的設(shè)計(jì)里面分3個(gè)區(qū)塊你就選擇12欄式的,那是因?yàn)?2能被3整除; 同理假如你的設(shè)計(jì)分四個(gè)區(qū)塊, 你可以選12欄式或者16欄式,那時(shí)因?yàn)?2和16都可以被4整除. 你會(huì)發(fā)現(xiàn)這個(gè)技巧將用于下面教程.
視頻教程二: 構(gòu)造你想象的結(jié)構(gòu)
在我們打開PSD網(wǎng)格模板創(chuàng)作前, 我們首先需要先構(gòu)造一下想象中的結(jié)構(gòu). 從上面的這張圖,你可以看出來:因?yàn)樵谝粋€(gè)排版中又有排版,所以這是一個(gè)有點(diǎn)復(fù)雜的結(jié)構(gòu).
視頻教程三:
構(gòu)造了結(jié)構(gòu)之后我們繼續(xù). 打開16欄式的PSD模板文件. 打開 “圖像 >畫布大小” . 把畫布的寬度設(shè)置為 1200px 高度設(shè)置為 1700px .把背景色設(shè)置為 #ffffff 既白色.
視頻教程四:
用長(zhǎng)方形工具在頂部畫一個(gè)寬100%高大概80px的長(zhǎng)方形. 用顏色: #dddddd 填充它.
(同來自網(wǎng)絡(luò))
視頻教程五:
在長(zhǎng)方形那層上面創(chuàng)建一個(gè)新層. 按住CRTL鍵鼠標(biāo)點(diǎn)擊長(zhǎng)方形層. 長(zhǎng)方形就被選中了,然后把目標(biāo)移至剛建的新層上. 選擇半徑 600px 的軟筆刷(如圖), 把其顏色設(shè)置為白色, 然后就像圖片所示那樣在選框上邊緣點(diǎn)幾下. 通過這個(gè)技巧你畫出了一個(gè)微妙的照亮效果. 你現(xiàn)在可以把這兩層聯(lián)合起來了.
視頻教程六:
建一個(gè)新層,再用長(zhǎng)方形工具如圖所示在上端畫一個(gè)深灰色的小長(zhǎng)方形.
網(wǎng)頁設(shè)計(jì)視頻教程七:
在距離上端長(zhǎng)方形500px處開始畫一個(gè)寬 100% 高 575px 的長(zhǎng)方形. 設(shè)置其由 #d2d2d0到 #ffffff 的漸變色, 角度為-90,縮放為100%
視頻教程八:
現(xiàn)在我們?nèi)绲谖宀侥菢犹砑诱樟列Ч? 這個(gè)技巧我們將很頻繁地使用;因此下次用到的時(shí)候我只提示是第五步的效果 .
在當(dāng)前層之上簡(jiǎn)歷一個(gè)新層. Ctrl+鼠標(biāo)點(diǎn)擊這個(gè)大的長(zhǎng)方形. 選擇 600px的軟筆刷, 設(shè)置顏色為白色,如圖所示對(duì)選區(qū)的邊緣點(diǎn)擊多下.
(圖片來自網(wǎng)絡(luò))
視頻教程九:
建一個(gè)新層畫一個(gè)400px高的長(zhǎng)方形. 這是用作我們網(wǎng)頁頁頭的. 給它設(shè)置一個(gè)線性漸變,由顏色 #2787b7 to #258fcd.
視頻教程十:
在頁首長(zhǎng)方形塊底端畫一條1px的灰藍(lán)色的線, 混合屬性中添加陰影效果. 陰影參數(shù): 正底疊加, 透明度: 65%, 方向: -90, 距離: 1px , 寬度: 6px. 之后再建一個(gè)新層,在灰藍(lán)色線下面畫一條1px的白線.通過這種方式,我們就可以創(chuàng)建一個(gè)輪廓鮮明的邊緣. 可以說在你的設(shè)計(jì)中,你可以把這個(gè)技巧用于其他色塊.
視頻教程十一:
創(chuàng)建一個(gè)新層,在畫布頂端用”長(zhǎng)方形”工具化一個(gè)50px高的長(zhǎng)方形,就如圖所示,這個(gè)長(zhǎng)方形是用作導(dǎo)航的.
為其添加陰影效果.參數(shù)如圖所示.
視頻教程十二:
開始話導(dǎo)航啦.使用”圓角工具” ,設(shè)置半徑為5px,畫一個(gè)圓角長(zhǎng)方形,用顏色 #f6a836 填充它, 之后給他添加以下效果:
1.內(nèi)陰影- 顏色: #ffffff, 混合模式:正底疊加, 透明度: 60%, 角度: 120*, 距離: 7px, 大小: 6px.
2.內(nèi)發(fā)光 – 混合模式: 正常, 顏色: #ffffff, 大小: 4px. 其他參數(shù)默認(rèn)設(shè)置.
3.描邊 – 大小: 1px, 位置: 內(nèi)部, 顏色: #ce7e01.
Ctrl+鼠標(biāo)點(diǎn)擊層產(chǎn)生如圖選區(qū). 選擇: 選擇-> 修改 > 收縮 然后在彈出框中輸入1px,確定.
在上面再建一層, 把混合模式設(shè)置成疊加 ,然后好像第五步那樣加照亮效果,不過這次用的是小筆刷 . 然后就是增加導(dǎo)航文字了.我用 Arial 字體作為導(dǎo)航的連接字體, 所有效果設(shè)置為 “無”.
(圖片來自網(wǎng)絡(luò))
視頻教程十三:
現(xiàn)在我們開始創(chuàng)建搜索框, 圓角長(zhǎng)方形,半徑5px,在如第四步所示的網(wǎng)格的右邊、頂端灰色背景網(wǎng)格紋中間創(chuàng)建一個(gè)用于搜索的色塊. 為它增加以下樣式:
內(nèi)陰影 – 顏色: #000000,混合模式: 正片疊加, 透明度: 9%, 角度: 90*,距離: 0px, 大小: 6px
描邊 – 大小: 1px, 位置:內(nèi)部, 顏色: #dfdfdf.
給它添加”search”的文本和一個(gè)亮底暗色的”GO”按鈕.
到目前為止已經(jīng)創(chuàng)建了很多層了,為了條例清楚,我們建立一個(gè)叫”search”的層文件夾. 把所有于搜索相關(guān)的層一并拖到這個(gè)層文件夾里面去. 遲點(diǎn),我們都會(huì)這樣處理,可以讓我們的創(chuàng)作更合理.
視頻教程十四:
新建一個(gè)新層,然后就像畫”搜索框”一樣在這層上面畫一個(gè)”Sign Up”按鈕(字長(zhǎng)剛好為背景長(zhǎng)的一半). 把這個(gè)組合放在搜索框下方條紋豎直方向中間.
再一次如第五步那樣創(chuàng)建亮光效果.
使用更小的軟筆刷.這次的筆觸大小為45px.
視頻教程十五:
加了logo和網(wǎng)站描述之后,我們的網(wǎng)頁就如上所示.
視頻教程十六:
現(xiàn)在我們回到層結(jié)構(gòu)那里提早做一些工作.創(chuàng)建一個(gè)空的層文件夾并命名為”top_bar” .移動(dòng)所有的圖層到這個(gè)文件夾里面(包括logo,條紋,搜索框,注冊(cè)按鈕,導(dǎo)航和背景).
創(chuàng)建另外一個(gè)空層文件夾并命名為”header”.這里用于放置頭部圖層 .
(圖片來自網(wǎng)絡(luò))
視頻教程十七:
頭部看起來有的平淡,因此我們可以再任意位置加相同的亮光效果. 選中藍(lán)色的頭部區(qū)域.在它上面創(chuàng)建一個(gè)新層并設(shè)置其混合樣式為 疊加.
選一個(gè)大點(diǎn)的600px軟筆刷,顏色為#ffffff白色。然后再導(dǎo)航下方點(diǎn)擊幾次。假如想更有層次感,你還可以把顏色調(diào)為黑色,然后在頭部區(qū)底部重復(fù)同樣操作。
視頻教程十八:
在這一步我介紹一下我是怎么實(shí)現(xiàn)頭部圖片的反光效果的。選擇兩張圖片,我用了我自己另外做的兩個(gè)網(wǎng)頁模板圖片,縮放其中一個(gè)然后把他放在比較大的那個(gè)的下方。復(fù)制這兩層,用自由變換工具按住shift鍵等比例縮放一下,用長(zhǎng)方形工具在上層的圖片下端外部畫一個(gè)選區(qū),到選擇->修改->羽化,填入30px或者大點(diǎn)羽化一下選框。(這里原教程說得不大清楚,我實(shí)現(xiàn)的方法是這樣的:羽化之后選擇反選,然后選取畫筆工具,選白色,再在圖片的左邊角和右下角點(diǎn)擊數(shù)下,然后用長(zhǎng)方形選框和delete鍵修整邊緣)
為了讓兩個(gè)圖片更加突出,可以新建一層,設(shè)置該層模式為疊加,重復(fù)第五步的效果添加的操作。
在添加了一些按鈕和漂亮的條紋之后,頭部區(qū)域就是像上面那樣子的。不要方劑把圖層都放在’header’層文件夾里面。
視頻教程十九:
最終效果圖里面你會(huì)看到在內(nèi)容區(qū)域里面有很漂亮的切換頁。為了創(chuàng)建這種切換頁我們需要實(shí)現(xiàn)額外的一些操作,這是很有必要的。首先用圓角長(zhǎng)方形工具創(chuàng)建一個(gè)高70px圓角半徑為10px的圖形(注意要畫路徑圖),現(xiàn)在我們不要底部圓角的部分而為它鄭家一個(gè)更好的角效果。用直接選取工具單擊這個(gè)圖形的路徑,單擊垂直點(diǎn)然后按住shift鍵往下拉直到如圖所示狀態(tài).現(xiàn)在看起來不錯(cuò)了,但是還是比較簡(jiǎn)陋。
視頻教程二十:
選擇直線工具,設(shè)置大小為1px
視頻教程二十一:
按住shift鍵畫灰色的分割線。
視頻教程二十二:
為每個(gè)切換標(biāo)題添加小圖標(biāo)。我用了來自WebAppers.com的圖標(biāo)。通常一個(gè)切換標(biāo)題激活了其他的就處于非激活狀態(tài)了。為了清楚表達(dá)這一點(diǎn),我們需要想個(gè)辦法完成它。我降低其他圖標(biāo)的飽和度并且降低標(biāo)題字眼和描述文字的透明度一保證激活的標(biāo)題處于高亮狀態(tài)。
(圖片來自網(wǎng)絡(luò))
視頻教程二十三:
為了使激活的按鈕更加明顯,我們將給它添加一個(gè)時(shí)尚的背景。為了達(dá)到這樣的效果我們把整個(gè)對(duì)象選中然后裁切選區(qū)(按住alt畫選區(qū)即可把不要的選區(qū)去掉)最終使選中的范圍只有第一個(gè)按鈕。
用一個(gè)更小的軟筆刷,畫出一個(gè)白色背景。
視頻教程二十四:
增加一個(gè)陰影在切換菜單的后面如上圖所示畫一個(gè)深灰色的長(zhǎng)方形。
點(diǎn)擊圖層區(qū)底部的小圖標(biāo)給該層增加一個(gè)蒙版。
把前景色設(shè)置為黑色,選一個(gè)大的軟筆刷,在蒙版層上面點(diǎn)擊(如圖所示,蒙板上面出了白色之外的顏色都會(huì)遮擋圖層)使部分黑色去掉。結(jié)果,我們創(chuàng)建了一個(gè)比較好看的陰影效果。
最后我們加點(diǎn)細(xì)節(jié)。在切換菜單下方畫一個(gè)1px的灰線。一樣用蒙版的方式使左右兩端漸變?,F(xiàn)在我們就得到一條比較時(shí)尚好看的線了。
視頻教程二十五:
現(xiàn)在開始設(shè)計(jì)網(wǎng)頁設(shè)計(jì)視頻教程一個(gè)切換按鈕的內(nèi)容。我們需要一個(gè)精準(zhǔn)設(shè)計(jì)的圖像(有好看的標(biāo)題和一些文字內(nèi)容)。首先我們得創(chuàng)建這個(gè)精準(zhǔn)的圖片。這里我認(rèn)為我們最好打破這個(gè)圖片尖銳的棱角設(shè)計(jì),從而創(chuàng)造一個(gè)多彩的效果。因此我現(xiàn)在畫一個(gè)白色有1像素灰色邊框的長(zhǎng)方形,再給它加上細(xì)微的陰影效果。
復(fù)制這一層并用變形工具稍微旋轉(zhuǎn)。重復(fù)這個(gè)操作幾次
把你選好的圖片導(dǎo)進(jìn)來,放在白色長(zhǎng)方形上面。不用擔(dān)心圖片會(huì)溢出,我們會(huì)修整它。選中最上層的長(zhǎng)方形,按選擇->修改->收縮 ,輸入5px,確認(rèn),然后在圖層管理區(qū)下方點(diǎn)擊添加圖層蒙版,這樣圖片就只顯示選區(qū)范圍。
視頻教程二十六:
增加一個(gè)漂亮的標(biāo)題、一些文本和列表,我們的設(shè)計(jì)工作又完成一部分。
(圖片來自網(wǎng)絡(luò))
視頻教程二十七:
我認(rèn)為這一個(gè)部分要比較大的,因此我把范圍限定在主區(qū)域上的一個(gè)大的盒子里面。首先創(chuàng)建一個(gè)大的淡灰色的大概高220像素的長(zhǎng)方形。設(shè)置其有1像素的灰色邊。
然后再畫一個(gè)上下左右都比它小10像素的另一個(gè)長(zhǎng)方形。同樣設(shè)置其1像素的淡灰色邊框。
最后寫上文本就可以了。
視頻教程二十八:
終于要做頁腳啦。畫一個(gè)400像素高的、深黑色的長(zhǎng)方形。
視頻教程二十九:
如網(wǎng)頁設(shè)計(jì)視頻教程五:一樣給它加亮光效果。
視頻教程三十:
在區(qū)域上方畫一個(gè)10像素高的長(zhǎng)方形,并且通過在頂端和底部各多加兩條線增強(qiáng)細(xì)節(jié)處理。
(圖片來自網(wǎng)絡(luò))
視頻教程三十一:
創(chuàng)建低端部分用于放置重復(fù)的導(dǎo)航。你可以拷貝頂端放置導(dǎo)航的長(zhǎng)方形,移動(dòng)并變形使其40像素高。把它放到你畫布的最低端。你要注意你可能要擴(kuò)張你的畫布使所有東西都有適合的位置。制約擴(kuò)張畫布的操作你可以這樣:圖像->畫布大小 設(shè)置即可。
視頻教程三十二:
再次強(qiáng)化細(xì)節(jié)。給頁腳的導(dǎo)航區(qū)頂端加一條白色邊,這樣有比較好的邊框效果。
視頻教程三十三:
給頁腳增加內(nèi)容,你可以依據(jù)網(wǎng)格合理安置它們。
視頻教程三十四:
然后就是把頁腳相關(guān)的圖層整合起來。
以上就是小編給大家整理的網(wǎng)頁設(shè)計(jì)視頻教程文字版的整理,看完是不是對(duì)網(wǎng)頁設(shè)計(jì)有了一定的了解了,那么就開始動(dòng)手設(shè)計(jì)吧。