ps是一款十分強大的專業(yè)圖像處理軟件,很多人在學習ps后也只是用來處理圖片,其實ps對于設(shè)計、制作網(wǎng)頁的功能也是十分強大,今天就通過兩個實例講解教新手用ps怎么設(shè)計網(wǎng)頁。
ps是圖像處理軟件Adobe Photoshop的簡稱,這款軟件功能強大,幾乎可以對圖片進行任意形式的編輯工作,今天就用兩個實例來談一談用ps怎么設(shè)計網(wǎng)頁的問題。
眾所周知,PS軟件應用十分的廣泛,修改圖像,運用圖層蒙版設(shè)計、文字排版,網(wǎng)頁優(yōu)化,包括導航圖,網(wǎng)頁底端的頁腳,網(wǎng)頁主題內(nèi)容,特效文字的制作,動作按鈕的設(shè)計等。

(圖片來自網(wǎng)絡(luò))
一、ps怎么設(shè)計網(wǎng)頁案例之一
1、先新建一個寬高度,一般網(wǎng)頁全屏大小是1920,高度的話取決于你有多少內(nèi)容。因為是電腦顯示分辨率調(diào)到72就可以了,顏色模式選擇RGB模式。
2、使用ps制作完成你的主頁。
3、使用ps中的切片工具把你的圖片切成小圖片,如果本身圖片夠小可以省略這個步驟。
4、儲存為web所用格式:快捷鍵是ctrl+shift+alt+s鍵。選擇圖片格式為jpeg格式。
5、然后點擊儲存:然后會跳出保存對話框,其中格式選擇為HTML和圖片格式。選擇你保存的路徑。然后點擊保存。
6、然后找到你所保存的地址就會發(fā)現(xiàn)有個images的文件夾和一個 .html的文件。打開文件夾里面就是你所保存的切片圖片。
7、使用ptf工具就能上傳到你的網(wǎng)站上去了,是不是很簡單吶,希望有所幫助,感謝。
8、注意事項
網(wǎng)站上顯示可能和你想要的結(jié)果有點偏差,需要細心調(diào)整。可以適當使用Adobe Dreamweaver工具。

(圖片來自網(wǎng)絡(luò))
二、ps怎么設(shè)計網(wǎng)頁案例之二
1、新建一個800X600像素的空白背景,顏色模式設(shè)置為RGB模式。RGB模式顏色是由紅色,綠色,藍色三種顏色相交構(gòu)成,可以更好的顯示網(wǎng)頁中的色彩內(nèi)容。
2、新建文件,點擊確定,空白文件會自動顯示在軟件中。對于新建空白文件來說,圖像的寬度和高度的大小要按照等比例進行設(shè)計,也可以不勾選重新定義新像素來實現(xiàn)。
3、打開一張車的圖片,移動到白色背景畫布中,選擇圓角矩形工具,選擇路徑為了方便轉(zhuǎn)換為選區(qū),設(shè)置為5個像素,像素越大,圓角矩形的四個圓角就是更加的明顯,然后選擇漸變工具,選中系統(tǒng)自帶的黑白漸變,修改黑白漸變的顏色,改為灰白,也可以設(shè)置前景色為灰色,背景色為白色進行漸變的填充,然后點擊確定。
4、然后選擇工作路徑,鼠標CRL點擊工作路徑,設(shè)置為選區(qū),選中線性漸變類型,然后畫出漸變的顏色。漸變的方向是從上到下為白色到淺灰色的漸變效果圖。
5、然后選擇修改收縮2個像素,就是將選區(qū)收縮小2個像素,變小一些,然后再次從下向上漸變,然后alt快捷鍵復制2個,如圖所示,然后找到車的一個的圖標按鈕,然后用磁性套索工具勾勒好,然后鼠標左鍵拉動到合適位置,然后選擇3個圖層,然后水平分布,和居中分布對齊。然后選擇左對齊分布,分布均勻。分布按鈕是在選擇工具上方的工具欄中,有平均分布對齊等多個按鈕。

(圖片來自網(wǎng)絡(luò))
6、然后再次用鋼筆工具勾畫另外一個車的圖標,然后再用自由變換調(diào)整到合適位置,然后點擊2個圖層之后,進行左對齊分布。分布到形狀中的最左邊位置即可。
7、再次選擇一個不同的車的圖標設(shè)計圖片,然后用鋼筆工具進行勾畫圖標,或者為了方便,可以直接用魔棒工具來選擇,選中其需要圖形的一部分。
8、然后再次選中圖形,形狀圖形,全部選中相應圖層,調(diào)整水平分布和左對齊分布。當分布不均勻,可以按住鼠標左鍵自動進行調(diào)整。
9、所有的圖標都自由變換,調(diào)整到合適位置,如圖。按住crl+t來實現(xiàn)圖形的自由變換的內(nèi)容。如圖
10、輸入相應的文字,文字的顏色設(shè)置為黑色,將其三個文字圖層,按住shift鍵和左右方向鍵進行移動調(diào)整來改變。之后將車的圖片進行調(diào)整,便于觀看,文字進行排版即可。
由于篇幅有限,關(guān)于用ps怎么設(shè)計網(wǎng)頁的辦法今天就只能先說這么多了。ps軟件功能強大,但是需要較長時間的學習、練習才能得心應手。如果覺得上面的短文對你有所幫助就請關(guān)注小編,我們之后會持續(xù)更新PS網(wǎng)頁設(shè)計的相關(guān)內(nèi)容。


在微信中搜索faceui