對於使用photoshop與illustrator(後面內容以PS與AI作表示)製作網頁設計最麻煩的地方,因該是做出的按鈕或版面樣式要轉換成CSS時產生一種卡卡的傾向,而我在上一篇文章中介紹CSS3Ps一個PS的外掛,而在最新版的PS CC與AI CC都加入了CSS3的樣式轉換功能,這對在製作網頁時大大改上在點陣與向量繪圖軟中排版網頁後,樣式可以轉換給HTML使用,雖然CSS的發展已久,在台灣的網頁設計上的使用上其實還是算少數,使用table框架與圖片切片的製作方式也是大有人在,話不多說!也差不多要進入主題了。

先來看看PS吧!先說明一下與上一篇所測試結果一樣的部分,點陣圖層上的製作效果無法轉為CSS,如圓角、漸層、顏色,轉為CSS時會以載入背景圖片檔案方式顯示CSS,如下表。

psaicss01

.圖層_1 {
  background-image: url("images/圖層 1.png");
  position: absolute;
  left: 172px;
  top: 460px;
  width: 132px;
  height: 50px;
  z-index: 5;
}

在上CSS所顯示這段background-image: url(“images/圖層 1.png”);可以說明一切。就算是在圖層上做混合選項效果一樣不會以CSS的方式呈現,會需要載入一張圖片檔。

而用矩形工具所做出來的圖層就不一樣了,如下圖與CSS。

psaicss00

.DAFATIME {
  font-size: 24px;
  font-family: "Microsoft JhengHei";
  color: rgb( 0, 0, 0 );
  font-weight: bold;
  position: absolute;
  left: 376.469px;
  top: 203.637px;
  z-index: 4;
}
.box {
  border-style: solid;
  border-width: 1px;
  border-color: rgb( 91, 148, 0 );
  border-radius: 10px;
  background-image: -moz-linear-gradient( 90deg, rgb(125,190,10) 0%, rgb(128,194,24) 51%, rgb(161,213,79) 51%, rgb(162,217,63) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(125,190,10) 0%, rgb(128,194,24) 51%, rgb(161,213,79) 51%, rgb(162,217,63) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(125,190,10) 0%, rgb(128,194,24) 51%, rgb(161,213,79) 51%, rgb(162,217,63) 100%);
  position: absolute;
  left: 360px;
  top: 195px;
  width: 127px;
  height: 44px;
  z-index: 3;
}

清楚的把邊框、高度、寬度、漸層、顏色、圓角的CSS3樣式碼都顯示出來,而就連字型的CSS也標示出來,如字型顏色、粗體、大小、字體。說到這PS要如何輸出CSS呢?其實很簡單,只要滑鼠在圖層上按下滑鼠右鍵跳出選單,按下拷貝CSS即可,在貼到CSS檔或HTML檔裡。

再來就換AI拉!必須先開啟CSS內容面板,才看得到CSS樣式,只要物件有做樣式就會在CSS內容面板顯示CSS,選取物件後CSS內容下面就顯示CSS樣式碼,如下圖。

psaicss02

選取文字物件CSS內容也顯示文字的CSS樣式,如下圖。

psaicss03

當然啦!在AI裡可以做一些不同的形狀物件,像是星星或三角形這種物件,顯示出的CSS只有寬跟高,在網頁上也不會出現這中形狀,其實能顯示出CSS3的樣式算不錯了。

各位是否有發現PS與AI所產生的CSS的class與圖層名稱相同,還有PS所產生的CSS會代座標位置,座標位置是以開啟的圖面大大小為準。而AI的CSS就沒有帶入座標位置。甚下的就各位自己去玩吧!謝謝觀賞XD

最後修改日期: 2019 年 2 月 21 日

作者