前端人員從photoshop中獲取css代碼的方法

很多時候拿到設計圖的時候,如果UI沒有給配色、字體大小什麼的說明文件,這時就需要我們自己去取,傳統的方法是在photoshop中取色、量取像素大小之類的,在photoshop cc 中爲我們提供了自動提取css的方法,下面就爲大家介紹這種方法。

psd練習文件
http://pan.baidu.com/s/1pL2dwL1

工具:我這裏用的是photoshop cc 2015

沒有photoshop的,這裏準備了photoshop cc 2015的安裝包和破解工具,具體安裝和破解方法可以百度一下

http://pan.baidu.com/s/1gfJUEzT

開始

1.這裏我們就查看一下標題的CSS,找到文字對應的圖層
這裏寫圖片描述

2.選擇“圖層”=》“複製CSS”
這裏寫圖片描述

3.打開編輯器,在一個新文件中CTRL+V,然後就可以看到對應的CSS內容
這裏寫圖片描述


這個方法非常方便的提供了css樣式給我們,爲我們前端開發更精準,設計圖還原度更高,UI和前端又能愉快的一起玩耍了
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章