ベクターグラフィックスを作成し、それらからアイコンを生成する方法

Question

開発中のWebサイトの場合、グラフィックを作成する必要があります。まだサイズをロックしていないので、レイアウトとUIをさらに進めて何が機能し、何が機能しないかを考えた後に気が変わった場合に備えて、画像ファイル（PNG、GIF、JPG）を直接生成したくありませんでした。

これは私に考えさせられました：おそらく私はそれらをベクトルグラフィックス（例えばSVG）として生成し、それから私のサイトで使用するための画像ファイルのセットを生成する必要があります。私は以前にベクターグラフィックスをいじったことがありませんでしたので、私がしたいことは次のとおりです：

• いくつかのベクトルグラフィックを許容可能な形式で（できればグラフィカルに）作成するツール;
• ベクターグラフィックスを作成するプログラムによる方法。たとえば、グリッドがある場合、必ずしも手動でグリッドを描画する必要はありません。 「グリッドにスナップ」同様の機能がこのケースをカバーしますが、他の機能はカバーしませんそして
• プログラムで（ビルドタスクとして）一連のベクターグラフィックスを取得して一連の画像を生成し、できれば命名規則、出力形式、サイズなどを（コマンドラインから）制御できる方法など。プログラムに行きたくないので、「名前を付けて保存...」を個別に実行します。 100個以上のファイルでアイコンを生成します。

このような状況に適したツールとワークフローはどのようなものですか？

Answer 1

市販のベクターグラフィックスパッケージがいくつか存在するため、さまざまなアプローチがあります。私が使用しているのは、Adobe Illustrator、Adobe Fireworks、Adobe Photoshopです。確かに、FireworksとPhotoshopはベクターをサポートするビットマップグラフィックパッケージです。

Fireworksでは、ベクターが「ファーストクラス」であるため、ベクターを扱う方が簡単です。オブジェクト、Photoshopでは実際にはベクトルマスクとカラーフィルの組み合わせです。ベクターを使用してビットマップパッケージで設計する利点は、個々のピクセルを表示できるようにドキュメントを拡大することで、ラスタライズされた結果をプレビューすることがはるかに簡単になることです。 Illustratorは「ピクセルプレビュー」を追加しました。同様にこれを達成するモード。

3つすべてのパッケージには、マルチエクスポート、命名などの反復タスクを自動化できるスクリプト機能があります。ただし、Photoshopにはアクションもあります。単純なバッチアクティビティを記録および再生できる単純化されたマクロシステム。

アイコンパックを作成する方法は、1つのドキュメント内ですべてのアイコンを設計することです。 「グループ」を使用します（Illustratorで）または「フォルダ」 （FireworksまたはPhotoshop）を使用して各アイコンを互いに分離しますが、アイコンを構成する個々のレイヤーをすべて平らにしないようにします。

エクスポートに行くとき、トップレベルのグループ/フォルダーを反復処理するスクリプトを実行し、一度に1つをすべて非表示にし、すべての主要な解像度の結果をビットマップにエクスポートします。 16x16、24x24、32x32、48x48、128x128、256x256。

ここに優れたスタイルガイドがあります。 VistaおよびXPのアイコンを設計します。 Photoshopを使用してほとんどの作業を行うことに焦点を当てています。

Answer 2

カイロとそのさまざまなバインディングをご覧ください。実際、SVGをCairoコマンドに変換するためのレシピもあります。

Answer 3

SVGを作成し、必要なサイズを決定したときにビットマップイメージにダンプするための堅牢な無料ツールが必要な場合は、 Inkscape は良いオプションです。 UIはIllustratorよりも少し洗練されていないように見えますが、Windows、Mac、Linuxでは正常に動作します。制限事項は、カラーマネジメントがIllustratorよりもはるかに強力でなく、Linuxボックスを使用していない場合、感圧グラフィックタブレットのサポートがあまり良くないことです。