【行動網頁規劃】Brackets(PSD)切片

Hi! 各位朋友大家好,我是小蔡老師,了解Brackets基本介面後這邊在指導一個網頁版型設計師一定會喜歡的PSD切片功能,這也是Brackets目前最具特色的功能,這邊先簡單的提供申請與做法,下個單元我們會直接下載範例來操作練習

1.開啟Brackets右側Brackets PSD圖層選項 第一次開啟會如下圖

2.它會要求你連結Adobe的雲端硬碟系統

3.沒有帳號就註冊一個吧! 免費(for free)

4.新增電話號碼

5.連結上Adobe所提供的雲端硬碟,你可以直接丟PSD上傳

6.這邊因應ADOBE給人試用有提供一個PSD模版

7.PSD自動上傳後就會在編輯語法下面出現你的PSD模版(這邊是ADOBE提供的試用模版)

8.點選模版他會自動顯示切版的圖型大小與畫素這樣方便我們可以直接寫入CSS或html語法

9.因為這個試用原始模版只有切6層而已你可以從上述的圖看到切片圖層,但是這邊可以更徹底看到它有部分掃描功能你可以利用這個功能去做上下切片分層例如背景圖與文字,這樣我們在做客戶觀看的圖像時就可以只抓取背景圖,文字也不用特別關掉直接用語法套上就可以完成方便許多

10.完全無縫直接套在CSS上面

11.同樣的我們把文字先框出來可以直接複製在語法上,然後套用HTML語法

12.最後再套用CSS格式去調整,因為這些對已經熟悉語法的朋友應該就不用特別說明了

我們在下一個單元會直接教學如何直接完成一個PSD模版語法範例做為ENDING希望大家會喜歡優!
(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問