如何使用Photoshop切片工具將大圖片轉(zhuǎn)換為多個(gè)小圖的網(wǎng)頁

時(shí)間：2022-05-25 19:18:01 | 來源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-25 19:18:01 來源：網(wǎng)絡(luò)營(yíng)銷

很多的網(wǎng)站為了顯示網(wǎng)站的美觀大氣，都會(huì)在網(wǎng)站的首屏使用大的banner圖片，尤其是企業(yè)網(wǎng)站，但這也會(huì)導(dǎo)致圖片屬性過大，影響網(wǎng)站的打開速度，這就需要我們使用Photoshop的切片工具，將圖片切割成切片，然后轉(zhuǎn)換為網(wǎng)頁，這樣網(wǎng)頁上的圖片就變成一張一張的被分割的小圖片拼成一個(gè)大圖片，這樣可以加快圖片的下載速度。在此，我就借助億企邦的平臺(tái)跟大家詳細(xì)的介紹一下具體的操作步驟：

1、先打開photoshop設(shè)計(jì)好你的網(wǎng)頁背景，如下圖所示，至于要選擇什么樣的圖片可以自己選擇，下面就是要介紹如何將這樣的圖片轉(zhuǎn)換成網(wǎng)頁。

2、在工具欄選擇【切片工具】，大部分人的工具欄只顯示裁剪工具，右鍵單擊裁剪工具就能看到切換工具，選擇它即可。

3、屬性欄進(jìn)行設(shè)置，先來設(shè)置樣式，一般來說，有三種樣式可供選擇，正常樣式、固定長(zhǎng)寬比、固定大小。

4、正常模式下，拖動(dòng)鼠標(biāo)可以繪制一個(gè)矩形的切片，切片的大小和長(zhǎng)寬比都是任意的，如下圖所示：

點(diǎn)擊切片就會(huì)使切片的邊框變成棕褐色，如下圖所示：

并出現(xiàn)八個(gè)控制點(diǎn)，拖動(dòng)控制袋可以任意的改變切片的大小，如下圖所示，另外，直接拖動(dòng)切片也可以改變切片的位置。

5、在固定長(zhǎng)寬比模式下，拖動(dòng)鼠標(biāo)可以繪制切片，切片的大小是任意的，但是切片的長(zhǎng)寬比是固定不變的。為了方便，一般長(zhǎng)寬比和圖像的的長(zhǎng)寬比是相同的，如下圖所示：

那么，我們?cè)鯓硬拍苤缊D像的長(zhǎng)寬比呢？如下圖所示，在圖像--圖像大小下，打開圖像大小對(duì)話框，這里你可以找到圖像的寬度和高度。

6、固定大小模式下，切片的長(zhǎng)和寬都是你設(shè)定的，不會(huì)改變，如圖所示，點(diǎn)擊一下鼠標(biāo)就可以繪制一個(gè)切片，我繪制的這些切片都是一樣大小的。選中一個(gè)切片，切片變成棕色的邊框，并出現(xiàn)了八個(gè)控制點(diǎn)，拖動(dòng)控制點(diǎn)也可以改變切片的大小。

7、一般將圖片切割成網(wǎng)頁的時(shí)候，我們可以使用一種簡(jiǎn)便的方法，切換到任意一種模式下，右鍵單擊圖像，然后在打開的右鍵菜單中，選擇【劃分切片】，打開劃分切片的對(duì)話框。

8、設(shè)置將圖片切分為水平4個(gè)切片，垂直5個(gè)切片，點(diǎn)擊確定按鈕，如下圖所示：

下面第幅圖就是我們建立的切片，億企邦覺得這是建立切片最快的速度了。

9、拖動(dòng)控制點(diǎn)可以改變整行或者整列的寬度和高度，如下圖所示：

10、除此之外，我們還可以對(duì)某個(gè)切片進(jìn)行進(jìn)一步的切割，右鍵單擊某個(gè)切片，然后選擇【劃分切片】，打開劃分切片對(duì)話框，設(shè)置橫向和縱向的切片個(gè)數(shù)，如圖所示：

11、最后，一個(gè)關(guān)鍵的設(shè)置就是，右鍵單擊某個(gè)切片，然后在打開的右鍵菜單中選擇【編輯切片選項(xiàng)】，打開切片選項(xiàng)對(duì)話框，在這里你要設(shè)置的有切片的名稱，這個(gè)名稱也就是網(wǎng)頁圖片的名稱，默認(rèn)系統(tǒng)給出的名稱即可。

設(shè)置url，也就是圖片的鏈接，在網(wǎng)頁上點(diǎn)擊圖片就能打開這個(gè)鏈接；目標(biāo)在動(dòng)態(tài)圖片中需要設(shè)置，即加載URL時(shí)的楨，在靜態(tài)的圖片中不需要設(shè)置；信息文本也就是鼠表放在網(wǎng)頁上的圖片上的時(shí)候，出現(xiàn)在瀏覽器底部狀態(tài)欄的文字信息；Alt標(biāo)記就是鼠標(biāo)放在圖片上，自動(dòng)出現(xiàn)在圖片周圍的文字。如下圖所示：

設(shè)置好這些參數(shù)以后，點(diǎn)擊確定按鈕即可。

12、最后就是要保存html文件了，在菜單欄上執(zhí)行：文件--存儲(chǔ)為web和設(shè)備所用格式，如下圖所示：

13、在打開的對(duì)話框中，點(diǎn)擊【雙聯(lián)】你會(huì)看到兩個(gè)圖片，上面這個(gè)是處理前的原圖，下面這個(gè)是處理后的圖片，如下圖所示，你可以對(duì)比兩個(gè)效果以后再保存圖片。

14、一般來說，將格式設(shè)置為jpeg比較好（在此，大家不妨看下億企邦的《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》相關(guān)介紹），其他參數(shù)參考下面的這幅圖，一般默認(rèn)系統(tǒng)給出的參數(shù)即可，如下圖所示，點(diǎn)擊儲(chǔ)存按鈕。

15、最關(guān)鍵的步驟就是在這里，設(shè)置格式為【html和圖像】，然后點(diǎn)擊保存按鈕，如下圖所示：

16、你會(huì)看到保存后有兩個(gè)文件，一個(gè)是圖片文件夾，一個(gè)是html文件，雙擊打開html就可以看到一個(gè)網(wǎng)頁了。

如果再有什么需要改動(dòng)的，可用dreamweaver打開網(wǎng)頁文件，進(jìn)一步進(jìn)行編輯。

億企邦點(diǎn)評(píng)：

使用此方法雖然能把大圖轉(zhuǎn)換成多個(gè)小圖，加快網(wǎng)頁打開的速度，但也會(huì)導(dǎo)致網(wǎng)頁附帶的圖片過多，所以，當(dāng)網(wǎng)站大量使用此方法的時(shí)候，一定要注意圖片路徑的設(shè)置分類，以免需要修改時(shí)，找不到對(duì)應(yīng)的圖片。