當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁圖片>教程內(nèi)容

ps切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式(3)

來源:昵圖 作者:CS375855759 學(xué)習(xí):3185人次

PhotoShop中:切片工具是該軟件自帶的一個平面圖片制作工具。切片工具:將一個完整的網(wǎng)頁切割許多小片,以便上傳。是將我們設(shè)計的網(wǎng)頁設(shè)計稿切成一片一片的,或一個表格一個表格的,這樣我們可以對每一張進(jìn)行單獨的優(yōu)化,以便于網(wǎng)絡(luò)上的下載。可以做成網(wǎng)格的,然后可以用dreamwaver來進(jìn)行細(xì)致的處理。利用切片工具可以快速的進(jìn)行網(wǎng)頁的制作。分成切片工具與切片選擇工具。

我們在制作網(wǎng)站的時候如何把做好的效果圖轉(zhuǎn)成網(wǎng)頁格式呢?這里就有很多方法,如果是比較復(fù)雜的網(wǎng)頁就需要用手動來切圖。如果不是很復(fù)雜的可以直接用PS自帶的切片工具來切割。教程中介紹的是規(guī)則切圖,實際應(yīng)用中需要用手動來劃分區(qū)塊的大小。

素材:

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

1、 打開要分割的圖片,點工具欄的切片工具,選擇切片選擇工具——劃分切片(這里我們假定將一張遠(yuǎn)途平均分為12張小圖)

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

2、 將劃分切片的水平劃分為4,垂直劃分為3,點好后出現(xiàn)12個等分的圖片。

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

3、 將圖片劃分好后,我們點工具欄最下面的鍵計入IR狀態(tài)下編輯圖片。

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

4、直接點文件,將優(yōu)化結(jié)果儲存為HTML格式

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

5、保存在電腦桌面或其它文件夾,會出現(xiàn)一個HTML格式的網(wǎng)頁,我們打開另一個文件名為Images的文件包,里面就是我們剛才分割好的小圖片。

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

6、我們打開這些小圖時會返現(xiàn)默認(rèn)為索引顏色,這時選擇菜單:圖像 > 模式 > RGB顏色就可以對這些小圖片進(jìn)行處理了。

我們在做網(wǎng)頁的時候,使用分割好的小圖片有利于網(wǎng)頁的瀏覽速度。

Photoshop切片工具吧圖片轉(zhuǎn)成網(wǎng)頁格式,PS教程,16xx8.com教程網(wǎng)

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
1537965792021-02-24 09:45
謝謝樓主的分享。
鵬宇2018-11-19 02:56
太棒了
飄蕩的云2018-11-19 01:08
很不錯
飄蕩的云2018-11-19 11:00
贊一個
我愛漫畫52113142018-11-19 10:15
太喜歡了
與天作對2017-05-28 05:01
動手練練
男銀要有范2017-05-28 08:46
動手了
蘭小黎2017-05-28 03:05
動手
荒島晴空882017-05-28 02:55

關(guān)注大神微博加入>>

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