2009-01-04 40 views
4

對於我正在開發的網站,我需要創建一些圖形。我還沒有鎖定尺寸,所以我不想直接生成圖像文件(PNG,GIF,JPG),以防我在佈局和用戶界面進一步改進後,改變主意,以查看哪些內容有效,哪些內容不起作用。如何創建矢量圖形,然後從它們生成圖標?

這讓我想到:也許我應該生成它們作爲矢量圖形(例如SVG),然後生成一組圖像文件在我的網站上使用。我以前從來沒有玩過矢量圖形,所以我之後是:

  • 一些工具來創建(最好是圖形)一些可接受的格式的矢量圖形;
  • 創建矢量圖形的編程方法。例如,假設我有一個網格,我不一定要手工繪製。 「對齊網格」和類似的功能將涵蓋這種情況,但不包括其他人;和
  • 某些我可以編程的方式(例如作爲構建任務)採用一組矢量圖形並生成一組圖像,並且最好對命名約定,輸出格式,大小等內容進行一些控制(例如從命令行)等我不想進入一個程序,並單獨做「另存爲...」100 +文件生成我的圖標。

什麼樣的工具和工作流程適合這種情況?

回答

4

有不同的方法,因爲有幾個不同的商業矢量圖形包在那裏。我使用的是Adobe Illustrator,Adobe Fireworks,Adobe Photoshop。無可否認,Fireworks和Photoshop是具有矢量支持的位圖圖形包。

我覺得Fireworks更容易處理矢量,因爲它們是「一流」對象,而在Photoshop中它們實際上是矢量蒙版和顏色填充的組合。使用矢量在位圖包中進行設計的好處是通過放大文檔以預覽光柵化結果更容易,因此您可以看到各個像素。 Illustrator增加了一個「像素預覽」模式來實現這一點。

所有這三個軟件包都具有腳本功能,可以讓您自動執行重複性任務,例如多輸出,命名等。然而,Photoshop也具有操作功能;一個簡化的宏觀系統,讓您錄製和回放簡單的批量活動。

我傾向於構建我的圖標包的方式是通過設計單個文檔中的所有圖標。我使用「組」(在Illustrator中)或「文件夾」(Fireworks或Photoshop)將每個圖標彼此隔離,但讓我保留組成該圖標的所有單獨圖層不平整。

當我導出時,我運行了一個腳本,它遍歷頂層組/文件夾,每次隱藏除一個以外的所有內容,並將結果導出到所有主要分辨率的位圖; 16x16,24x24,32x32,48x48,128x128和256x256。

這是微軟在如何設計Vista和XP圖標方面出色的style guide。它專注於使用Photoshop來完成大部分工作。

0

看看Cairo及其各種綁定。事實上,甚至有一個recipe可用於將SVG轉換爲Cairo命令。

0

如果您需要一個實用的免費工具來創建SVG,然後在決定所需的尺寸時將其轉儲爲位圖圖像,那麼Inkscape將是一個不錯的選擇。UI看起來比Illustrator稍遜一籌,但它在Windows,Mac和Linux上運行良好。限制是色彩管理功能比Illustrator強大得多,如果你不在Linux機器上,對壓敏圖形輸入板的支持就不太好。