1. 程式人生 > >前端人員從photoshop中獲取css程式碼的方法

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

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

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

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

開始

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

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

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

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