Photoshop, WordPress, 網站架設, 網頁/動畫

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

梅干2018/08/23
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
  每次梅干常開玩笑說,十年前會平面就等於會網頁,只需要把Photoshop中的版型分割後,再搭配Photoshop輸出為網頁用,就能將平面稿,轉存成HTML的網頁格式,相當的簡單,但隨著科技的演變,現在設計網頁,已不像十年前那麼的單純的,除了要考量版面的配置外,還要想到版型是否能在各裝置中正常的顯示,因此現在網頁真的是用寫出來,而不像早期是用畫出來的。
  雖然在設計網頁版型時,梅干依然還是習慣使用Photoshop,但設計完畢後,就得將版面中圖塊一一的匯出,再到網頁編輯器中進行編排,在長時間的訓練下,梅干早已練就看到原始碼,就可想像版型大概會怎呈現,但這對於許多剛從平面轉網頁的設計師,會感到相當的挫折,因此梅干也不斷在尋找是否有更好用的圖形化工具,找了好久了,最近找到一套相當強大的外掛,除了能將Photoshop中所設計的版型,直接轉換成HTML格式外,甚至還可將PSD轉成WordPress佈景主題,讓梅干感到吃驚,怎會這麼強大好用,因此想跨入網頁世界的平面設計師們,有福囉!
PSD to HTML5
外掛名稱:Export Kit-Lightning Storm
外掛下載:http://exportkit.com/downloads

Step1
首先進到外掛頁面後,選擇要安裝Photoshop的版本。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step2
接著將Adobe Cloud開啟後,再按Free鈕。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step3
再按「Accept and Continue」。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step4
這套外掛最特別的地方就在於,目錄就是輸出的標籤名稱,就相當一個DIV。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step5
當都設計完畢後,將檔案儲存,再選擇 「視窗 / 延伸功能 / Export Kit-Lightning Strom」選項。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step6
接著需先註冊為會員才能使用。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step7
當註冊並登入後,再按上方的「Exports」頁籤。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step8
再選擇要輸出格式,很酷的是,這個外掛竟然也可輸出成WordPress佈景主題,由於目前這範例的結構是以HTML為主,因此選擇HTML5
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step9
再按右邊的「Export Now」。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step10
這時就會開始進行轉檔。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step11
當輸出完畢後,就會跳出檔案的輸出目錄與位置。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step12
再進入後,分別就會看到html與css。
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題
Step13
再將HTML檔,透過編輯器開啟,這時會看到,裡面的結構就與Photoshop的圖層一模一樣,這真的是太酷了,期待未來Photoshop內建也有這功能,而該外掛非免費軟體,因此若覺得好用,也可考量升級為付費會員,因此有這外掛,讓在設計網頁版型,更加的得心應手啦!
梅問題-[外掛]CONVERT A PSD TO HTML5將PSD檔轉存成HTML或WordPress佈景主題