雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

用ps怎么設(shè)計(jì)網(wǎng)頁(yè),用2個(gè)實(shí)例教你簡(jiǎn)單易上手的方法

Time: 2020-01-07

ps是一款十分強(qiáng)大的專業(yè)圖像處理軟件,很多人在學(xué)習(xí)ps后也只是用來(lái)處理圖片,其實(shí)ps對(duì)于設(shè)計(jì)、制作網(wǎng)頁(yè)的功能也是十分強(qiáng)大,今天就通過(guò)兩個(gè)實(shí)例講解教新手用ps怎么設(shè)計(jì)網(wǎng)頁(yè)。

ps是圖像處理軟件Adobe Photoshop的簡(jiǎn)稱,這款軟件功能強(qiáng)大,幾乎可以對(duì)圖片進(jìn)行任意形式的編輯工作,今天就用兩個(gè)實(shí)例來(lái)談一談?dòng)胮s怎么設(shè)計(jì)網(wǎng)頁(yè)的問(wèn)題。

  眾所周知,PS軟件應(yīng)用十分的廣泛,修改圖像,運(yùn)用圖層蒙版設(shè)計(jì)、文字排版,網(wǎng)頁(yè)優(yōu)化,包括導(dǎo)航圖,網(wǎng)頁(yè)底端的頁(yè)腳,網(wǎng)頁(yè)主題內(nèi)容,特效文字的制作,動(dòng)作按鈕的設(shè)計(jì)等。


tajam-psd-website-template-580x435.jpg

(圖片來(lái)自網(wǎng)絡(luò))


  一、ps怎么設(shè)計(jì)網(wǎng)頁(yè)案例之一

  1、先新建一個(gè)寬高度,一般網(wǎng)頁(yè)全屏大小是1920,高度的話取決于你有多少內(nèi)容。因?yàn)槭请娔X顯示分辨率調(diào)到72就可以了,顏色模式選擇RGB模式。

  2、使用ps制作完成你的主頁(yè)。

  3、使用ps中的切片工具把你的圖片切成小圖片,如果本身圖片夠小可以省略這個(gè)步驟。

  4、儲(chǔ)存為web所用格式:快捷鍵是ctrl+shift+alt+s鍵。選擇圖片格式為jpeg格式。

  5、然后點(diǎn)擊儲(chǔ)存:然后會(huì)跳出保存對(duì)話框,其中格式選擇為HTML和圖片格式。選擇你保存的路徑。然后點(diǎn)擊保存。

  6、然后找到你所保存的地址就會(huì)發(fā)現(xiàn)有個(gè)images的文件夾和一個(gè) .html的文件。打開(kāi)文件夾里面就是你所保存的切片圖片。

  7、使用ptf工具就能上傳到你的網(wǎng)站上去了,是不是很簡(jiǎn)單吶,希望有所幫助,感謝。

  8、注意事項(xiàng)

  網(wǎng)站上顯示可能和你想要的結(jié)果有點(diǎn)偏差,需要細(xì)心調(diào)整??梢赃m當(dāng)使用Adobe Dreamweaver工具。


1.jpg

(圖片來(lái)自網(wǎng)絡(luò))


  二、ps怎么設(shè)計(jì)網(wǎng)頁(yè)案例之二

  1、新建一個(gè)800X600像素的空白背景,顏色模式設(shè)置為RGB模式。RGB模式顏色是由紅色,綠色,藍(lán)色三種顏色相交構(gòu)成,可以更好的顯示網(wǎng)頁(yè)中的色彩內(nèi)容。

  2、新建文件,點(diǎn)擊確定,空白文件會(huì)自動(dòng)顯示在軟件中。對(duì)于新建空白文件來(lái)說(shuō),圖像的寬度和高度的大小要按照等比例進(jìn)行設(shè)計(jì),也可以不勾選重新定義新像素來(lái)實(shí)現(xiàn)。

  3、打開(kāi)一張車的圖片,移動(dòng)到白色背景畫布中,選擇圓角矩形工具,選擇路徑為了方便轉(zhuǎn)換為選區(qū),設(shè)置為5個(gè)像素,像素越大,圓角矩形的四個(gè)圓角就是更加的明顯,然后選擇漸變工具,選中系統(tǒng)自帶的黑白漸變,修改黑白漸變的顏色,改為灰白,也可以設(shè)置前景色為灰色,背景色為白色進(jìn)行漸變的填充,然后點(diǎn)擊確定。

  4、然后選擇工作路徑,鼠標(biāo)CRL點(diǎn)擊工作路徑,設(shè)置為選區(qū),選中線性漸變類型,然后畫出漸變的顏色。漸變的方向是從上到下為白色到淺灰色的漸變效果圖。

  5、然后選擇修改收縮2個(gè)像素,就是將選區(qū)收縮小2個(gè)像素,變小一些,然后再次從下向上漸變,然后alt快捷鍵復(fù)制2個(gè),如圖所示,然后找到車的一個(gè)的圖標(biāo)按鈕,然后用磁性套索工具勾勒好,然后鼠標(biāo)左鍵拉動(dòng)到合適位置,然后選擇3個(gè)圖層,然后水平分布,和居中分布對(duì)齊。然后選擇左對(duì)齊分布,分布均勻。分布按鈕是在選擇工具上方的工具欄中,有平均分布對(duì)齊等多個(gè)按鈕。


3.jpg

(圖片來(lái)自網(wǎng)絡(luò))


  6、然后再次用鋼筆工具勾畫另外一個(gè)車的圖標(biāo),然后再用自由變換調(diào)整到合適位置,然后點(diǎn)擊2個(gè)圖層之后,進(jìn)行左對(duì)齊分布。分布到形狀中的最左邊位置即可。

  7、再次選擇一個(gè)不同的車的圖標(biāo)設(shè)計(jì)圖片,然后用鋼筆工具進(jìn)行勾畫圖標(biāo),或者為了方便,可以直接用魔棒工具來(lái)選擇,選中其需要圖形的一部分。

  8、然后再次選中圖形,形狀圖形,全部選中相應(yīng)圖層,調(diào)整水平分布和左對(duì)齊分布。當(dāng)分布不均勻,可以按住鼠標(biāo)左鍵自動(dòng)進(jìn)行調(diào)整。

  9、所有的圖標(biāo)都自由變換,調(diào)整到合適位置,如圖。按住crl+t來(lái)實(shí)現(xiàn)圖形的自由變換的內(nèi)容。如圖

  10、輸入相應(yīng)的文字,文字的顏色設(shè)置為黑色,將其三個(gè)文字圖層,按住shift鍵和左右方向鍵進(jìn)行移動(dòng)調(diào)整來(lái)改變。之后將車的圖片進(jìn)行調(diào)整,便于觀看,文字進(jìn)行排版即可。


  由于篇幅有限,關(guān)于用ps怎么設(shè)計(jì)網(wǎng)頁(yè)的辦法今天就只能先說(shuō)這么多了。ps軟件功能強(qiáng)大,但是需要較長(zhǎng)時(shí)間的學(xué)習(xí)、練習(xí)才能得心應(yīng)手。如果覺(jué)得上面的短文對(duì)你有所幫助就請(qǐng)關(guān)注小編,我們之后會(huì)持續(xù)更新PS網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)內(nèi)容。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)