Inkscapeはデフォルトでファイルタイプ.SVGを使用します。これはScalable Vector Graphicsを表します。 このファイルタイプでは、コンポジションに作成した編集可能なオブジェクトとレイヤーが保持されるため、後でファイルを再度開いてコンポジションの元の要素を編集し続けることができます。
ただし、PNGなどの別のファイルタイプとしてファイルをエクスポートして、コンポジションをよりアクセスしやすくしたり、デバイス上で開きやすくする場合が多くあります（Inkscapeを使用していない人向け）。 デザインをWebサイトにアップロードしたい場合や、プリンターがSVGファイルよりもPNGファイルを好む場合があります。
PNGはPortableNetwork Graphicsの略で、「インデックスカラーのビットマップを含み、.GIFファイルと同様にロスレス圧縮を使用しますが、著作権の制限はありません。 PNGファイルは通常、Web画像のグラフィックを保存するために使用されます。」 （による FileInfo.com） PNGは、結果としてファイルサイズがわずかに大きくなることがよくありますが、JPEGよりもわずかに品質が良くなる傾向があります。 PNGは透明な背景を含むグラフィックもサポートします（JPEGはサポートしません）。
PNGを使用する理由が何であれ、Inkscapeを使用すると、必要に応じてこのファイルタイプに簡単にエクスポートできます。 方法は次のとおりです。
この記事では、 最近のInkscapeのビデオチュートリアルで作成したアイソメ電話デザイン。 背景パネルをレイヤーパネルに隠し（上の写真では赤い矢印で表示）、キャンバスを市松模様の背景にしたので、コンポジションが透明な場所を確認できます（チュートリアルをチェックすることをお勧めします）。 InkscapeキャンバスをAdobeIllustratorのアートボードのように見せるための方法ここでは、ドキュメントのプロパティの設定について説明します。
1 PNG画像にページをエクスポート
すべての設定が完了し、エクスポートの準備ができたら、[ファイル]> [PNG画像のエクスポート]（上の画像の赤い矢印）に移動できます。
これにより、キャンバスの右側に[PNG画像のエクスポート]ダイアログが表示されます（写真で赤で強調表示されています）。 私の最初のオプションは、「エクスポート領域」の下にあるタブを選択することです。XNUMXつの異なる設定から選択できます。 キャンバスの境界内のすべて（つまり、基本的にコンポジション全体）をエクスポートする場合は、[ページ]エクスポート領域オプション（緑色の矢印）を選択します。 このセクションには、数値データを含むXNUMXつの列とXNUMXつの行、および単位を選択するためのドロップダウンボックスが表示されます（私の画像/キャンバスは現在pxまたはピクセル単位です）。
このセクションの上部にある最初の0つの値は、「x0」と「y0」です（上の緑色で強調表示されています）。 これらの値は、画像の左下の境界またはコーナーが配置される場所（つまり、画像の開始座標）を表します。 X変数は常に幅を表し、Yは常に高さを表します。 ページ全体をエクスポートするので、画像はxの場合は0、yの場合はXNUMXの座標から始まります。
次の値は「x1」と「y1」です（上記の緑色で強調表示されています）。 これらの値は、画像の右上の境界またはコーナーが配置される場所（つまり、ドキュメントの終了座標）を表します。 このコンポジションのキャンバスの合計サイズは1920ピクセルx1080ピクセルだったので、x1座標は1920、y1座標は1080です（このセクションの[単位]ドロップダウンでページ単位がピクセルに設定されていることを思い出してください）。
このセクションの最後の2つの値はWidthとHeightです。これらはエクスポート領域の合計サイズを反映しています。 これは私のキャンバス全体のサイズなので、私の幅は1920として表示され、私の高さは1080です。 そのため、エクスポート時のPNGは私のキャンバスと同じサイズになります。
[PNG画像のエクスポート]ダイアログの次のセクションは、「画像サイズ」（上記の緑色で強調表示）です。 このセクションでは、画像の全体的な解像度に基づいて、最終的な画像サイズの全体的な幅と高さを調整できます。 解像度は、画像のXNUMXインチあたりに表示するピクセルまたは「ドット」の数によって決まります（ピクセルとドットは基本的に同じものです。これらは画像の最小単位です。dpi、つまりXNUMXインチあたりのドット数ですがプリンターはドットを生成するため、プリンターを操作するときに一般的に使用されます。ピクセルは、コンピューターに表示される画像を記述するときに一般的に使用されます）。 エリアに表示するピクセルまたはドットが多いほど、画像の解像度は高くなります。 ただし、全体的なファイルサイズが大きくなるため、解像度を高くすることにはトレードオフがあります。 上の写真の赤い矢印で示されているボックスを使用して、解像度を調整できます。
したがって、たとえば、画像の最終解像度を300 dpi（300インチあたりのドット数）にする必要があることがわかっている場合は、dpiフィールド（赤い矢印）に「96」と入力して解像度を設定できます。 Tabキーを押すと、画像の幅と高さが突然変化することがわかります（緑色の領域が強調表示されています）。 解像度を300から1920に上げたため、画像はより高解像度の画像になります（画像の1080インチごとにより多くのドットが表示されます）。 その結果、全体の画像サイズがはるかに大きくなりました（幅と高さが6000×3375からXNUMX×XNUMXになりました）。
一方、最初のdpiフィールドに「72」と入力して解像度を下げると、画像サイズが1440×810に縮小することがわかります。 これは、画像の解像度が低くなり、画像のXNUMXインチあたりに表示されるドットが少なくなっているためです。
値をデフォルト値の96 dpiに戻します。
[画像サイズ]セクションの下には、画像をエクスポートするファイルの名前と、画像をエクスポートするコンピューター上の場所（緑色で強調表示）を設定するオプションがあります。 Inkscapeに他のファイルを保存するために使用した最後の場所、またはまだファイルを保存していない場合はInkscapeに現在設定されているデフォルトの場所にファイルをエクスポートします。
ファイルの名前またはエクスポート先を変更するには、[名前を付けてエクスポート]ボタン（上の写真の赤い矢印）をクリックします。
ここでは、ファイルエクスプローラーまたはファインダーウィンドウ（使用しているオペレーティングシステムによって異なります）が表示され、保存先のファイルの場所をコンピューターで検索できます。 私の場合、私は（D :)ドライブの「写真」という名前のフォルダーと、「インクスケープ写真」という名前の別のフォルダーにいます（上の画像で強調表示されている緑色の領域にフォルダー全体の場所が表示されます）。
「PhoneIsometricDesign Gen 3.png」という名前を使用する前にこのファイルをエクスポートしたので、ファイル名がデフォルトでこのように表示されるのはなぜですか（赤い矢印）。 名前を「IsometricPhoneDesignNoBackground」に変更します。
「ファイルの種類」ドロップダウンをクリックすると、「PNG」が唯一のオプションになります。 InkscapeはPNGにのみエクスポートします。 JPEGファイルや別のファイルタイプなどにエクスポートする必要がある場合は、ファイルをInkscapeからPNGにエクスポートしてから、次のような別のプログラムを開く必要があります。 GIMP （私が持っているもう一つの素晴らしい無料プログラム、 何百ものチュートリアル そして）あなたが望むどんなファイルタイプにでもエクスポートしてください。
エクスポートする準備ができたら、「保存」ボタンをクリックします。
ちょっと待って！ まだ完了していません。画像が実際にエクスポートされる前に、最後の重要なステップがXNUMXつあります。 実際にファイルをエクスポートするには、緑色のチェックマークが付いた「エクスポート」というラベルの付いたボタンをクリックする必要があります（上の画像の赤い矢印）。 このボタンをクリックしないと、ファイルはエクスポートされません。。 このボタンをクリックした後、SVGファイルはPNGファイルにエクスポートされます。
Note: [エクスポート]ボタンの左側にある[完了時に閉じる]オプション（上の写真で青色で囲まれている）をオンにすると、エクスポートが完了すると[PNG画像のエクスポート]ダイアログボックスが閉じます。
2 図面をPNG画像にエクスポート
最後のセクションでは、ページ全体をPNGファイルにエクスポートする方法について説明しましたが、ページ上の図面のみをエクスポートし、その周囲の空白スペースをエクスポートしたくない場合はどうしますか。
さて、[エクスポート領域]セクションの下のXNUMX番目のタブでは、まさにそれを行うことができます。 [ファイル]> [PNG画像のエクスポート]に移動して[PNG画像のエクスポート]ダイアログボックスを表示した後（前の手順でまだ開いていない場合）、[エクスポート領域]セクションの下にある[描画]というラベルの付いたタブをクリックできます（赤矢印）。
このオプションは、図面を含む画像の領域のみをエクスポートします。 したがって、この場合、電話のデザインが含まれている領域のみがエクスポートされます。 電話のデザインとキャンバスの境界の間のすべての空きスペースは、最終的にエクスポートされたPNGに到達しません。 これは、「ページ」設定での値と比較して変更された画像座標の値に反映されています。
今、私のx0値は317.278ピクセルであり、私のy0値は121.273ピクセルです（緑色でハイライトされています）。 これは私の画像の左下隅（または開始座標）の新しい位置です。
さらに、私のx1値は現在1602.722ピクセルであり、私のy1値は911.076です。 これは私の画像の右上隅（または終了座標）の新しい位置です。
そのため、画像のエクスポート領域がキャンバスの全長（1920×1080ピクセル）をカバーしなくなります。 図面の周りの空きスペースがなくなるため、小さくなります。 これは、新しい幅と高さ（緑色で囲まれている）によって確認されます。 幅は1285.444になり、新しい高さは789.803になりました（両方の値はピクセル単位）。
[画像サイズ]セクション（上の画像で緑色で囲まれています）で、画像の解像度をもう一度変更できます。これにより、エクスポートPNGの最終的な幅と高さが増減します。 前のセクションの値が丸められているため、幅と高さは1285×790ピクセルとして表示されます。 Inkscapeはピクセルの一部をエクスポートできないため、値は最も近い整数に丸める必要があります。
図面をエクスポートする準備ができたら、もう一度[名前を付けてエクスポート]オプション（赤い矢印）をクリックしてファイル名と場所を変更し（ファイル名を[Isometric Phone Drawing]に変更しました）、[エクスポート]ボタンをクリックします。 SVGをPNGにエクスポートします（青い矢印）。
上が最終的なエクスポートされた図面です。 マウスで写真をハイライトすると、画像の境界線が描画が終了するところで終わることに気付くでしょう（注：この記事では少し縮小されています）。
3 選択範囲をPNGにエクスポート
コンポジション全体をエクスポートして図面だけをエクスポートするのとは別に、エクスポートした領域を選択範囲に絞り込むこともできます。
それで、仮に、電話の前面だけをエクスポートしたいとしましょう。 ツールボックス（上の写真の赤い矢印）から選択ツールを取得し、エクスポートするために選択するすべての要素をShiftキーを押しながらクリックします（電話の前面を構成するすべての形状をクリックしました） 。 これらの要素をすべて選択すると、[PNG画像のエクスポート]ダイアログで、[エクスポート領域]タブが自動的に[選択]タブ（写真の緑色の矢印）に変わったことがわかります。
私の始点と終点の座標は、選択した領域の始点と終点を反映するようになり、イメージの幅と高さはこの領域の寸法と一致するように変更されました（上の写真の緑色の輪郭）。
[画像サイズ]セクション（赤で囲まれている部分）で画像の解像度をもう一度変更できます。これにより、設定されている解像度に応じて画像の全体サイズが増減します。
ファイルの名前（今回は「IsometricPhone Front Face」に変更しました）と保存する場所を、[ファイル名]セクションの[名前を付けてエクスポート]ボタン（青色で囲まれています）を使用して変更し、[エクスポート]をクリックすることもできます。 」を選択して、選択をPNGにエクスポートします。 ここには、言及する価値のある他のオプションもいくつかあります。 まず、選択したオブジェクトを「バッチエクスポート」できます。つまり、各オブジェクトは個別のPNGとしてエクスポートされます。 その下に、「選択したものを除くすべてを非表示にする」オプションがあります。これは、選択しなかったものが最終的なコンポジションに表示されないことを意味します。 このオプションをチェックしない場合、エクスポート先のフレーム領域に収まる限り、選択しなかったアイテムは引き続き表示されます。
上記は、選択をエクスポートしたXNUMXつの異なる結果です。左側は[選択を除くすべてを非表示]オプションがオフになっている結果であり、右側はそのオプションがオンになっている結果です。
4 カスタム領域をPNGにエクスポート
PNG画像に書き出しダイアログボックスの最後のセクションは、コンポジションのカスタム領域を書き出すオプションです。 ここでは、同じ規則が他の設定からも適用されます（x0とy0は開始座標、x1とy1は終了座標、WidthとHeightはコンポジションの合計サイズになります）。
ここでの主な違いは、これらの値を使用して設定した領域は、その領域に図面があるかどうかに関係なく、エクスポートされた領域になることです。 つまり、設定した値以外のものを切り抜くので、切り抜きを設定するのとほとんど同じです。
この設定の実際を示すために、x0とy0の値を250に設定し、x1とy1の値を1250に設定します。これにより、幅と高さが1000ピクセルの画像が作成されます。 画像の名前を「IsometricPhoneCustom Area」に変更し、「Export」をクリックします。
私の最終的なコンポジションは、デザインがエクスポート領域の外側にあるところはどこでも、デザインの一部がカットオフされた1000 x 1000ピクセルの正方形です。
このチュートリアルは以上です！ あなたがそれを楽しんだ場合、あなたは私の他のいずれかをチェックアウトすることができます Inkscapeのヘルプ記事, Inkscapeビデオチュートリアルまたは GIMPチュートリアル.
