![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_00.jpg)
每次梅干常開玩笑說，十年前會平面就等於會網頁，只需要把Photoshop中的版型分割後，再搭配Photoshop輸出為網頁用，就能將平面稿，轉存成HTML的網頁格式，相當的簡單，但隨著科技的演變，現在設計網頁，已不像十年前那麼的單純的，除了要考量版面的配置外，還要想到版型是否能在各裝置中正常的顯示，因此現在網頁真的是用寫出來，而不像早期是用畫出來的。
雖然在設計網頁版型時，梅干依然還是習慣使用Photoshop，但設計完畢後，就得將版面中圖塊一一的匯出，再到網頁編輯器中進行編排，在長時間的訓練下，梅干早已練就看到原始碼，就可想像版型大概會怎呈現，但這對於許多剛從平面轉網頁的設計師，會感到相當的挫折，因此梅干也不斷在尋找是否有更好用的圖形化工具，找了好久了，最近找到一套相當強大的外掛，除了能將Photoshop中所設計的版型，直接轉換成HTML格式外，甚至還可將PSD轉成WordPress佈景主題，讓梅干感到吃驚，怎會這麼強大好用，因此想跨入網頁世界的平面設計師們，有福囉！
PSD to HTML5
Step1
首先進到外掛頁面後，選擇要安裝Photoshop的版本。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_01.jpg)
Step2
接著將Adobe Cloud開啟後，再按Free鈕。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_02.jpg)
Step3
再按「Accept and Continue」。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_03.jpg)
Step4
這套外掛最特別的地方就在於，目錄就是輸出的標籤名稱，就相當一個DIV。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_04.jpg)
Step5
當都設計完畢後，將檔案儲存，再選擇 「視窗 / 延伸功能 / Export Kit-Lightning Strom」選項。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_05.jpg)
Step6
接著需先註冊為會員才能使用。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_06.jpg)
Step7
當註冊並登入後，再按上方的「Exports」頁籤。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_07.jpg)
Step8
再選擇要輸出格式，很酷的是，這個外掛竟然也可輸出成WordPress佈景主題，由於目前這範例的結構是以HTML為主，因此選擇HTML5。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_08.jpg)
Step9
再按右邊的「Export Now」。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_09.jpg)
Step10
這時就會開始進行轉檔。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_10.jpg)
Step11
當輸出完畢後，就會跳出檔案的輸出目錄與位置。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_11.jpg)
Step12
再進入後，分別就會看到html與css。
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_12.jpg)
Step13
再將HTML檔，透過編輯器開啟，這時會看到，裡面的結構就與Photoshop的圖層一模一樣，這真的是太酷了，期待未來Photoshop內建也有這功能，而該外掛非免費軟體，因此若覺得好用，也可考量升級為付費會員，因此有這外掛，讓在設計網頁版型，更加的得心應手啦！
![梅問題－[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題](https://photo.minwt.com/img/Content/Photoshop/export-kit-psd-to-html/export-kit-psd-to-html_13.jpg)