PS網(wǎng)頁制作中切片應(yīng)用
12.3.4網(wǎng)頁制作
下面我們來通過使用ps的切片制作一個(gè)網(wǎng)頁,對切片工具以及網(wǎng)頁格式的存儲和鏈接做一深入的學(xué)習(xí)。
1.首先我們打開ps,選擇【文件】,【新建】,再彈出的對話框中,我們輸入網(wǎng)頁的名稱以及它的長寬比。一般正規(guī)網(wǎng)站的寬度為777,高為500。我們輸入數(shù)值,如圖12-3-57所示。
圖12-3-57
2.輸入完成后,我們單擊【確定】。下面我們要制作網(wǎng)頁的背景,我們設(shè)置它的前景色以及背景色。如圖12-3-58所示。
圖12-3-58前景色背景色
3.設(shè)置好了前景色和背景色,我們選擇漸變工具,在漸變工具選項(xiàng)欄中我們選擇【徑向漸變】,如圖12-3-59所示。然后我們對圖像進(jìn)行填充,如圖12-3-60所示。
圖12-3-59
圖12-3-60
4接下來我們制作網(wǎng)頁的標(biāo)題,我們單擊文字工具,進(jìn)行文字的輸入,如圖12-3-61所示。
圖12-3-61
5.設(shè)置文字的大小,字體以及顏色。如圖12-3-62所示。
圖12-3-62
6.接下來我們選擇畫筆工具,簡單的為標(biāo)題繪制背景來對其進(jìn)行優(yōu)化,繪制效果如圖12-3-63所示。
圖12-3-63
7.使用以上方法我們再來制作一個(gè)文字按鈕,作為跳轉(zhuǎn)到下頁的鏈接。如圖12-3-64所示。
圖12-3-64
8.那么這樣呢我們網(wǎng)頁的第一個(gè)頁面就制作完成了,下面我們打開一張網(wǎng)頁的首頁圖像,如圖12-3-65所示。
圖12-3-65
9.這是一張已經(jīng)做好的首頁,下面我們就通過使用ps的切片工具將這個(gè)頁面的文字以及圖像部分進(jìn)行切分。
首先我們在工具欄中選擇【切片】工具,然后對圖像整體進(jìn)行一下切割,這時(shí)我們會看到在圖像的左上角出現(xiàn)了一個(gè)標(biāo)注,如圖12-3-66所示,這說明我們的圖像已被切割。
圖12-3-66
10..接下來,我們繼續(xù)切分。我們先將頁面的大致結(jié)構(gòu)切分出來,切分后效果如圖12-3-67所示。
圖12-3-67
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 網(wǎng)頁圖片,設(shè)計(jì)一個(gè)網(wǎng)頁登陸框圖片教程
- 設(shè)計(jì)知識,新手詳情頁制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- 圓角教程,教你制作網(wǎng)頁常用的圓角矩形邊角
- 進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條
推薦教程
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- Photoshop制作網(wǎng)頁搜索條
- banner教程,用ps制作960*90的廣告圖片
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 用ps制作豎列導(dǎo)航
- Photoshop制作網(wǎng)站導(dǎo)航圖
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 陰影效果,教你制作各類陰影教程