[外掛] PSD to HTML5一鍵將PSD檔轉存成HTML或WordPress佈景主題

　　每次梅干常開玩笑說，十年前會平面就等於會網頁，只需要把Photoshop中的版型分割後，再搭配Photoshop輸出為網頁用，就能將平面稿，轉存成HTML的網頁格式，相當的簡單，但隨著科技的演變，現在設計網頁，已不像十年前那麼的單純的，除了要考量版面的配置外，還要想到版型是否能在各裝置中正常的顯示，因此現在網頁真的是用寫出來，而不像早期是用畫出來的。

雖然在設計網頁版型時，梅干依然還是習慣使用Photoshop，但設計完畢後，就得將版面中圖塊一一的匯出，再到網頁編輯器中進行編排，在長時間的訓練下，梅干早已練就看到原始碼，就可想像版型大概會怎呈現，但這對於許多剛從平面轉網頁的設計師，會感到相當的挫折，因此梅干也不斷在尋找是否有更好用的圖形化工具，找了好久了，最近找到一套相當強大的外掛，除了能將Photoshop中所設計的版型，直接轉換成HTML格式外，甚至還可將PSD轉成WordPress佈景主題，讓梅干感到吃驚，怎會這麼強大好用，因此想跨入網頁世界的平面設計師們，有福囉！

PSD to HTML5

Step1
首先進到外掛頁面後，選擇要安裝Photoshop的版本。

Step2
接著將Adobe Cloud開啟後，再按Free鈕。

Step3
再按「Accept and Continue」。

Step4
這套外掛最特別的地方就在於，目錄就是輸出的標籤名稱，就相當一個DIV。

Step5
當都設計完畢後，將檔案儲存，再選擇 「視窗 / 延伸功能 / Export Kit-Lightning Strom」選項。

Step6
接著需先註冊為會員才能使用。

Step7
當註冊並登入後，再按上方的「Exports」頁籤。

Step8
再選擇要輸出格式，很酷的是，這個外掛竟然也可輸出成WordPress佈景主題，由於目前這範例的結構是以HTML為主，因此選擇HTML5。

Step9
再按右邊的「Export Now」。

Step10
這時就會開始進行轉檔。

Step11
當輸出完畢後，就會跳出檔案的輸出目錄與位置。

Step12
再進入後，分別就會看到html與css。

Step13
再將HTML檔，透過編輯器開啟，這時會看到，裡面的結構就與Photoshop的圖層一模一樣，這真的是太酷了，期待未來Photoshop內建也有這功能，而該外掛非免費軟體，因此若覺得好用，也可考量升級為付費會員，因此有這外掛，讓在設計網頁版型，更加的得心應手啦！

未經允許不得轉載：花粉小姐的部落 » [外掛] PSD to HTML5一鍵將PSD檔轉存成HTML或WordPress佈景主題