ps圖片如何轉換為網頁

來源：酷知科普網 2.99W

很多精美的網頁都是用photoshop製作，並生成網頁的，下面我們來介紹一下怎樣使用ps來生成網頁，方法比較簡單，介紹了很多引數的設定所以看起來內容比較多，細心一點就可做好了。我們使用的基本工具就是切片工具，將圖片切割成切片，然後轉換為網頁，這樣網頁上的圖片其實是一張一張的被分割的小圖片拼成一個大圖片，這樣可以加快圖片的下載速度。

步驟/方法

（01）先開啟photoshop設計好你的網頁背景，如圖所示，如何設計這樣的頁面我就不講了，不屬於該經驗的內容，下面就是要介紹如何將這樣的圖片轉換問網頁。

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

（03）屬性欄進行設定，先來設定樣式，有三種樣式可供選擇，正常樣式、固定長寬比、固定大小。

（04）正常模式下，滑鼠拖動可以繪製一個矩形的切片，切片的大小和長寬比都是任意的，點選切片就會使切片的邊框變成棕褐色（如下面第二幅圖），並出現八個控制點（如下面第三幅圖，拖動控制袋可以任意的改變切片的大小），另外，直接拖動切片也可以改變切片的位置。

（05）固定長寬比模式下，拖動滑鼠可以繪製切片，切片的大小是任意的，但是切片的長寬比是固定不變的。為了方便，一般長寬比和影象的的長寬比是相同的。怎樣知道影象的長寬比呢，參考下面第二幅圖，在影象--影象大小下，開啟影象大小對話方塊，這裡你可以找到影象的寬度和高度。

（06）固定大小模式下，切片的長和寬都是你設定的，不會改變，如圖所示，點選一下滑鼠就可以繪製一個切片，我繪製的這些切片都是一樣大小的。選中一個切片，切片變成棕色的邊框，並出現了八個控制點，拖動控制點也可以改變切片的大小。

（07）一般將圖片切割成網頁的時候，我們可以使用一種簡便的方法，切換到任意一種模式下，右鍵單擊影象，然後在開啟的右鍵選單中，選擇【劃分切片】，開啟劃分切片的對話方塊。

（08）設定將圖片切分為水平4個切片，垂直5個切片，點選確定按鈕，下面第二幅圖就是我們建立這個切片。這是建立切片最快的速度了。

（09）拖動控制點可以改變整行或者整列的寬度和高度。

（10）除此之外，我們還可以對某個切片進行進一步的切割，右鍵單擊某個切片，然後選擇【劃分切片】，開啟劃分切片對話方塊，設定橫向和縱向的切片個數，如圖所示

（11）最後，一個關鍵的設定就是，右鍵單擊某個切片，然後在開啟的右鍵選單中選擇【編輯切片選項】，開啟切片選項對話方塊。

（12）在這裡你要設定的有切片的名稱，這個名稱也就是網頁圖片的名稱，預設系統給出的名稱即可。設定url，也就是圖片的連結，在網頁上點選圖片就能開啟這個連結；目標在動態圖片中需要設定，即載入URL時的楨，在靜態的圖片中不需要設定；資訊文字也就是鼠表放在網頁上的圖片上的時候，出現在瀏覽器底部狀態列的文字資訊；Alt標記就是滑鼠放在圖片上，自動出現在圖片周圍的文字。設定好這些引數以後點選確定按鈕。