PS網(wǎng)頁(yè)制作中切片應(yīng)用

2022-12-26 11:32:04 來(lái)源/作者: / 己有:44人學(xué)習(xí)過(guò)

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

12.3.4網(wǎng)頁(yè)制作

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

下面我們來(lái)通過(guò)使用ps的切片制作一個(gè)網(wǎng)頁(yè),對(duì)切片工具以及網(wǎng)頁(yè)格式的存儲(chǔ)和鏈接做一深入的學(xué)習(xí)。

1.首先我們打開(kāi)ps,選擇【文件】,【新建】,再?gòu)棾龅膶?duì)話框中,我們輸入網(wǎng)頁(yè)的名稱以及它的長(zhǎng)寬比。一般正規(guī)網(wǎng)站的寬度為777,高為500。我們輸入數(shù)值,如圖12-3-57所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-57

2.輸入完成后,我們單擊【確定】。下面我們要制作網(wǎng)頁(yè)的背景,我們?cè)O(shè)置它的前景色以及背景色。如圖12-3-58所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-58前景色背景色

3.設(shè)置好了前景色和背景色,我們選擇漸變工具,在漸變工具選項(xiàng)欄中我們選擇【徑向漸變】,如圖12-3-59所示。然后我們對(duì)圖像進(jìn)行填充,如圖12-3-60所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-59

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-60

4接下來(lái)我們制作網(wǎng)頁(yè)的標(biāo)題,我們單擊文字工具,進(jìn)行文字的輸入,如圖12-3-61所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-61

5.設(shè)置文字的大小,字體以及顏色。如圖12-3-62所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-62

6.接下來(lái)我們選擇畫筆工具,簡(jiǎn)單的為標(biāo)題繪制背景來(lái)對(duì)其進(jìn)行優(yōu)化,繪制效果如圖12-3-63所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-63

7.使用以上方法我們?cè)賮?lái)制作一個(gè)文字按鈕,作為跳轉(zhuǎn)到下頁(yè)的鏈接。如圖12-3-64所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-64

8.那么這樣呢我們網(wǎng)頁(yè)的第一個(gè)頁(yè)面就制作完成了,下面我們打開(kāi)一張網(wǎng)頁(yè)的首頁(yè)圖像,如圖12-3-65所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-65

9.這是一張已經(jīng)做好的首頁(yè),下面我們就通過(guò)使用ps的切片工具將這個(gè)頁(yè)面的文字以及圖像部分進(jìn)行切分。

首先我們?cè)诠ぞ邫谥羞x擇【切片】工具,然后對(duì)圖像整體進(jìn)行一下切割,這時(shí)我們會(huì)看到在圖像的左上角出現(xiàn)了一個(gè)標(biāo)注,如圖12-3-66所示,這說(shuō)明我們的圖像已被切割。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-66

10..接下來(lái),我們繼續(xù)切分。我們先將頁(yè)面的大致結(jié)構(gòu)切分出來(lái),切分后效果如圖12-3-67所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(五)

圖12-3-67