CSS3Ps圖層轉CSS3代碼工具是一款由專業(yè)團隊開發(fā)安裝在PhotoShop上的可以將圖層轉為CSS3代碼的小插件,該軟件體積小功能強大使用便捷,能在日常生活、辦公中起到強大的作用,馬上下載使用吧。
安裝說明
1、對該文件進行重命名,將后綴改成zxp,圖標將會變成
2、打開Adobe Extension Manager來安裝
3、找到文件下載的目錄選擇
4、下一步選擇css3ps.zxp
5、點擊接受并開始下一步安裝
6、安裝后可以在軟件工具欄查看插件具體信息
使用方法
我特定自己嘗試了一下:
我目前使用的是CS6, 因此,下載的是下面這個文件(PS3/PS4使用參見官方示意),雙擊之:
然后就會出現(xiàn)下面這個:
然后下面這個:
然后就會下面這樣:
接受之,然后就會:
如上,安裝完畢。此時,重啟或打開photoshop,點擊window(窗口) -> Extension(擴展) -> CSS3Ps 就會出現(xiàn)一個方塊區(qū)域,見下圖右側:
下面變身設計師,畫個圓角矩形,搞個漸變投影什么的,選中該圖層,然后點擊上面那個有CSS3Ps字樣的方框區(qū)域:
默認的瀏覽器就會打開,稍等一段時間后,就會出現(xiàn)下面這個:
至此,個人親測完畢。
常見問題
如果安裝失敗,可以嘗試以下方法:
把壓縮包里面的文件放到Css安裝目錄下 Plug-insPanels 文件夾中即可
X:AdobeAdobe Photoshop CC (64 Bit)Plug-insPanels
使用技巧
可以將Photoshop圖層特效等效果直接轉為CSS3代碼,無需為了再瀏覽網頁查詢css3代碼的寫法,無需手動查看ps圖層特殊的數(shù)據(jù)來編寫css3代碼,大大提升編寫代碼的效率
混合選項菜單
有了CSS3Ps,上面的特效可以直接導出CSS3代碼~
圓角邊框:-webkit-border-radius: 5px;
模塊陰影:-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.45);
模塊內陰影:-webkit-box-shadow: inset 0 20px rgba(255,255,255,.55);
文本陰影:text-shadow: 3px 4px 5px rgba(4,0,0,.75);
文本內陰影:text-shadow: inset 3px 4px 5px rgba(0,0,0,.75);
模塊內發(fā)光:-webkit-box-shadow:inset 0 0 17px rgba(255,255,190,.41);
文本內發(fā)光:text-shadow: inset 0 0 5px rgba(249,247,189,.75);
線性漸變:-webkit-linear-gradient(bottom, rgba(222,0,120,.74), rgba(255,150,0,.74));
這些效果,只要一鍵即可轉化為css3代碼,操作起來十分簡單
注意事項
能夠識別成CSS3的圖層是有限制的。例如,漸變CSS3似乎只能使用圖層樣式的漸變才能識別,投影、描邊等都盡量使用fx圖層樣式
圓角需要使用圓角矩形工具,而且似乎要保留路徑。這是參數(shù)獲取所必須的。