|
 |
 [分享] 如何將Photoshop.psd 檔案轉存成 HTML 網頁 |
|
Photoshop 軟體本身就內含一個可輕易將整塊完整的設計圖檔
轉換成 HTML 語法的軟體 --- ImageReady , 以下的例子我以 PS CS2 作範例 |
| 步驟一： |
將設計好的網頁圖檔，約略區分為 : 上、中、下與左、中、右後
拉伸出預計的切割輔助線，以便後續進行網頁切割時不會有太複雜的切割面
或是重覆切割到同一區域圖檔的問題發生
完成設定後，點選工具箱最下方的 PS --> IR 切換鈕(紅線框起處) |
 |
| 步驟二： |
利用 ImageReady 工具箱中的美工刀工具
依切割輔助線依續切割出版面 1,2,3...... |
 |
| 步驟三： |
若有些單純的區塊或依使用者偏好
請利用美工刀選取工具，點選要變更圖檔格示的切割區
即可變更圖檔格式：GIF, JPEG, PNG-8, PNG-24... |
 |
| 步驟四： |
點選下拉選單：檔案 --> 另存最佳化檔案
指定預計輸出圖檔與HTML檔的存檔空間位置 |
 |
| 步驟五： |
叫出檔案總管，找到剛剛存檔的位置後
會發現一個 images 的圖檔目錄與 html 檔
請雙擊 html 檔即可呼叫出剛剛轉檔完成的網頁 |
 |
| 步驟六： |
網頁預覽，再依設計或需求加入 JavaScript 或 Flash 動畫
讓網頁更加豐富有內容深度 |
 |
|
Home > Blog
