Brackets支援PSD原始檔轉網頁,切版更快速

梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
  之前曾分享過Adobe所推出的Brackets網頁編輯器,除了支援多種語言外,再來就是可即時預覽結果畫面,由於是Adobe公司所研發的,因此最近新版支援將Photoshop中的PSD檔,直接匯入到Brackets中,同時還可預覽PSD的分層檔,更重要的是,還可選擇PSD網頁的區塊,並取得各區塊的資訊,甚至還可以直接複製區塊中的文字,以及可將區塊中的圖片直接連接到網頁中,而Brackets還會立即將圖片儲存在images的資料夾,完全不用再像以前,還得將照片一一的切割,再放到網頁中,加快網頁的切版時間,相當的方便, 因此有在用Brackets與網頁設計的你,千萬別錯過了。

Step1
開啟Brackets後,點右側的上傳圖示。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step2
再按Accept鈕。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step3
接著再點上方的Open a PSD鈕。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step4
再將製作好未合併的網頁PSD原始檔,直接拖拉到區塊中上傳。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step5
接著檔案就會儲存在Adobe的雲端中。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step6
當上傳完畢後,再點一下開啟它。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step7
接著在右下角,就會看到網頁PSD的分層檔,同時點一下左邊的區塊,立即會示區塊的大小與資訊。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step8
甚至可直接複製PSD的文字,並貼到網頁中,就不用像以前,得開啟Photoshop二邊切來切去。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step9
且當要使用圖片時,先將圖片點一下,選取好後,再網頁的原始碼中,就會出現所選取的圖片,再點一下將它引用到網頁中。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step10
這時圖片的路徑與位置,就會直接套用到網頁中。
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速
Step11
過一回,剛的圖片就會儲存到images資料中,是不是超方便的呀!!這樣就網頁切版就更簡易與快速啦!
梅問題-Brackets 1.4版,支援PSD檔轉網頁,切版更快速

相關文章

「MaxCurve」iOS史上最強的曲線APP,同時能與Photoshop同步編輯

「MaxCurve」iOS史上最強的曲線APP,同時能與Photoshop同步編輯

Photoshop教學-「透視彎曲」數位蛇腹修正廣角鏡拍攝的透視變形

Photoshop教學-「透視彎曲」數位蛇腹修正廣角鏡拍攝的透視變形

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    智偉 說道:

    梅老師你好
    請問有沒有什麼方法可以從brackets中將圖片以photoshop的方式打開
    或者由程式碼的標籤快速找到圖片在側欄中的位置

近期講座

近期講座

更多講座