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

來源:薛欣博客 作者:薛欣姚輝 學習:7727人次

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

12.3.4網(wǎng)頁制作

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

下面我們來通過使用ps的切片制作一個網(wǎng)頁,對切片工具以及網(wǎng)頁格式的存儲和鏈接做一深入的學習。

1.首先我們打開ps,選擇【文件】,【新建】,再彈出的對話框中,我們輸入網(wǎng)頁的名稱以及它的長寬比。一般正規(guī)網(wǎng)站的寬度為777,高為500。我們輸入數(shù)值,如圖12-3-57所示。

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

圖12-3-57

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

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

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

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

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

圖12-3-59

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

圖12-3-60

4接下來我們制作網(wǎng)頁的標題,我們單擊文字工具,進行文字的輸入,如圖12-3-61所示。

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

圖12-3-61

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

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

圖12-3-62

6.接下來我們選擇畫筆工具,簡單的為標題繪制背景來對其進行優(yōu)化,繪制效果如圖12-3-63所示。

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

圖12-3-63

7.使用以上方法我們再來制作一個文字按鈕,作為跳轉(zhuǎn)到下頁的鏈接。如圖12-3-64所示。

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

圖12-3-64

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

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

圖12-3-65

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

首先我們在工具欄中選擇【切片】工具,然后對圖像整體進行一下切割,這時我們會看到在圖像的左上角出現(xiàn)了一個標注,如圖12-3-66所示,這說明我們的圖像已被切割。

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

圖12-3-66

10..接下來,我們繼續(xù)切分。我們先將頁面的大致結構切分出來,切分后效果如圖12-3-67所示。

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

圖12-3-67

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!