Inkscapeはデフォルトでファイルタイプ.SVGを使用します。これはScalable Vector Graphicsを表します。 このファイルタイプでは、コンポジションに作成した編集可能なオブジェクトとレイヤーが保持されるため、後でファイルを再度開いてコンポジションの元の要素を編集し続けることができます。

ただし、PNGなどの別のファイルタイプとしてファイルをエクスポートして、コンポジションをよりアクセスしやすくしたり、デバイス上で開きやすくする場合が多くあります(Inkscapeを使用していない人向け)。 デザインをWebサイトにアップロードしたい場合や、プリンターがSVGファイルよりもPNGファイルを好む場合があります。

PNGはPortable Network Graphicsの略語で、「.GIFファイルと似ていますが、著作権の制限はありません。 PNGファイルは一般的にWeb画像のグラフィックスを保存するために使用されます。 FileInfo.com) PNGは、結果としてファイルサイズがわずかに大きくなることがよくありますが、JPEGよりもわずかに品質が良くなる傾向があります。 PNGは透明な背景を含むグラフィックもサポートします(JPEGはサポートしません)。

PNGを使用したい理由が何であれ、Inkscapeを使用すると、必要に応じてこのファイルタイプに簡単にエクスポートできます。 これはどうですか。

等尺性電話デザインの背景

この記事では、私は自分の 最近のInkscapeのビデオチュートリアルで作成したアイソメ電話デザイン。 背景パネルをレイヤーパネルに隠し(上の写真では赤い矢印で表示)、キャンバスを市松模様の背景にしたので、コンポジションが透明な場所を確認できます(チュートリアルをチェックすることをお勧めします)。 あなたのInkscapeキャンバスをアドビイラストレーターのアートボードのように見せる方法ここでは、ドキュメントのプロパティの設定について説明します。

1 PNG画像にページをエクスポート

ファイルエクスポートPNG​​画像Inkscapeチュートリアル

すべての設定が完了してエクスポートの準備ができたら、[ファイル]> [PNG画像のエクスポート](上記の画像の赤い矢印)に進みます。

PNG画像ダイアログボックスの書き出し

これにより、キャンバスの右側にExport PNG Imageダイアログが表示されます(写真では赤でハイライトされています)。 私の最初の選択肢は、「エクスポート領域」の下にあるタブを選択して、4つの異なる設定から選択することです。 キャンバスの枠内のすべてのもの(つまり、基本的にコンポジション全体)をエクスポートする場合は、[ページ]エクスポート領域オプション(緑色の矢印)を選択します。 このセクションには、2列3行の数値データと、単位を選択するためのドロップダウンボックスが表示されます(私のイメージ/キャンバスは現在px、つまりピクセル単位です)。

x0とy0のinkscapeエクスポートpng画像

このセクションの上部にある最初の2つの値は、「x0」と「y0」です(上の緑色で強調表示されています)。 これらの値は、画像の左下の境界または角が配置される場所(つまり、画像の開始座標)を表します。 X変数は常に幅を表し、Yは常に高さを表します。 ページ全体をエクスポートするので、画像はxが0、yが0の座標から始まります。

x1とy1のinkscapeエクスポートpng画像

次の値は“ x1”と“ y1”です(上の緑色で強調表示されています)。 これらの値は、画像の右上の境界または角が配置される場所(つまり、文書の終了座標)を表します。 このコンポジションのキャンバスの合計サイズは1920ピクセル×1080ピクセルだったので、私のx1座標は1920、私のy1座標は1080になります(このセクションの[単位]ドロップダウンでページ単位はピクセルに設定されます)。

幅と高さのinkscapeエクスポートpng画像

このセクションの最後の2つの値はWidthとHeightです。これらはエクスポート領域の合計サイズを反映しています。 これは私のキャンバス全体のサイズなので、私の幅は1920として表示され、私の高さは1080です。 そのため、エクスポート時のPNGは私のキャンバスと同じサイズになります。

画像のサイズと解像度inkscapeエクスポートpng画像

Export PNG Imageダイアログの次のセクションは「Image Size」です(上の緑色でハイライトされています)。 このセクションでは、画像の全体的な解像度に基づいて、最終的な画像サイズの全体の幅と高さを調整できます。 解像度は、画像の1インチあたりに表示するピクセル数(「ドット」)によって決まります(ピクセルとドットは基本的に同じものです。これらは画像の最小単位です)。プリンタではドットが生成され、コンピュータで表示される画像を記述するときにはピクセルがより一般的に使用されるので、プリンタで作業するときに一般的に使用されます。 ある領域に表示したピクセルまたはドットが多いほど、画像の解像度は高くなります。 ただし、全体的なファイルサイズが大きくなるため、解像度を高くすることとはトレードオフの関係にあります。 上の写真の赤い矢印で示されているボックスで解像度を調整できます。

Inkscapeで画像の解像度を上げる

したがって、たとえば、画像の最終解像度を300 dpi(ドット/インチ)にする必要があることがわかっている場合は、dpiフィールドに「300」と入力して解像度を設定できます(赤い矢印)。 タブキーを押すと、画像の幅と高さが突然変わることがわかります(緑色の領域がハイライト表示されます)。 96から300に解像度を上げたため、画像はより高解像度の画像になります(画像の各インチに表示されるドット数が増えます)。 結果として、私の全体的な画像サイズは今よりずっと大きくなります(私の幅と高さは1920×1080から6000×3375になりました)。

Inkscapeで画像の解像度を下げる

一方、最初のdpiフィールドに「72」と入力して解像度を下げると、画像サイズが1440×810に縮小されることがわかります。 これは、解像度が低い画像で、1インチあたりのドット数が少なくなるためです。

値をデフォルト値の96 dpiに戻します。

名前セクションエクスポートPNG​​画像ダイアログ

[画像サイズ]セクションの下には、画像のエクスポート先となるファイルの名前と、エクスポート先のコンピュータ上の場所(緑色でハイライトされている場所)を設定するオプションがあります。 Inkscape上の他のファイルを保存した最後の場所、またはまだファイルを保存していない場合はInkscape上に現在設定されているデフォルトの場所にかかわらず、ファイルがエクスポートされます。

ファイルの名前やエクスポート先を変更するには、[名前を付けてエクスポート]ボタン(上の写真の赤い矢印)をクリックします。

Inkscape File Explorer PNGへのエクスポート

ここでは、ファイルエクスプローラまたはファインダウィンドウ(使用しているオペレーティングシステムによって異なります)に移動し、保存先のファイルの場所をコンピュータで検索できます。 私の場合、私は自分の(D :)ドライブの「Photos」という名前のフォルダと「Inkscape Photos」という名前の別のフォルダにいます(上の画像のハイライトされた緑色の領域にフォルダの場所全体が表示されます)。

「Phone Isometric Design Gen 3.png」という名前を使用する前にこのファイルをエクスポートしました。そのため、私のファイル名はデフォルトでこのように表示されます(赤い矢印)。 名前を「等尺性電話デザイン背景なし」に変更します。

タイプファイルとして保存エクスポートInkscapeチュートリアル

[ファイルの種類]ドロップダウンをクリックした場合は、[PNG]のみが使用可能になります。 InkscapeはPNGにのみエクスポートします。 JPEGファイルや他のファイルタイプのようなものにエクスポートする必要がある場合は、InkscapeからPNGにファイルをエクスポートしてから、次のような別のプログラムを開く必要があります。 GIMP (私が持っているもう一つの素晴らしい無料プログラム、 何百ものチュートリアル そして)あなたが望むどんなファイルタイプにでもエクスポートしてください。

エクスポートする準備ができたら、[保存]ボタンをクリックします。

InkscapeのPNGボタンへのエクスポート

ちょっと待って! あなたはまだ終わっていません - あなたのイメージが実際にエクスポートされる前に最後の重要なステップがあります。 実際にファイルをエクスポートするには、緑色のチェックマークが付いた「エクスポート」というボタンをクリックする必要があります(上の図の赤い矢印)。 このボタンをクリックしないと、ファイルはエクスポートされません。。 このボタンをクリックした後、SVGファイルはPNGファイルにエクスポートされます。

注意: 書き出しボタンの左側にある「完了時に閉じる」オプション(上の写真の青い枠内)をオンにすると、書き出しが完了した後に「PNG画像の書き出し」ダイアログボックスが閉じます。

2 図面をPNG画像にエクスポート

最後のセクションでは、ページ全体をPNGファイルにエクスポートする方法について説明しましたが、ページ上の図面のみをエクスポートし、その周囲の空白スペースをエクスポートしたくない場合はどうしますか。

Inkscapeでのエクスポート領域の描画

エクスポート領域セクションの下の2番目のタブで、それを実行できます。 File> Export PNG Imageの順に進んでExport PNG Imageダイアログボックスが表示されたら(前のステップでまだ開いていないと仮定して)、Export Areaセクションの下の「Drawing」というラベルの付いたタブをクリックできます。矢印)。

このオプションは、描画を含む画像の領域のみをエクスポートします。 そのため、この場合は、電話のデザインが含まれている領域のみがエクスポートされます。 電話のデザインとキャンバスの境界との間の空白部分がすべて、最終的にエクスポートされるPNGになるわけではありません。 これは、画像座標の値に反映されています。これは、「ページ」設定の値と比較して変化しています。

x0およびy0描画エクスポート領域のinkscape

今、私のx0値は317.278ピクセルであり、私のy0値は121.273ピクセルです(緑色でハイライトされています)。 これは私の画像の左下隅(または開始座標)の新しい位置です。

x1およびy1描画エクスポート領域のinkscape

さらに、私のx1値は現在1602.722ピクセルであり、私のy1値は911.076です。 これは私の画像の右上隅(または終了座標)の新しい位置です。

幅と高さの描画エクスポート領域のinkscape

そのため、私の画像エクスポート領域は、キャンバスの全長(1920×1080ピクセル)をカバーしなくなります。 図面の周りの空きスペースがなくなるので、小さくなります。 これは、新しい幅と高さ(緑色の枠で囲まれています)によって確認されます。 私の幅は1285.444になり、私の新しいHeightは789.803になりました(両方の値はピクセル単位)。

画像サイズ描画エクスポート領域inkscape

[画像サイズ]セクション(上の画像の緑色で囲まれています)では、もう一度画像の解像度を変更できます。これにより、エクスポートPNG​​の最終的な幅と高さが増減します。 前のセクションの値は丸められているため、幅と高さは1285×790ピクセルとして表示されます。 Inkscapeはピクセルの小数部をエクスポートできないため、値は最も近い整数に丸めなければなりません。

エクスポートとして描画エクスポート領域inkscape

図面をエクスポートする準備ができたら、もう一度[名前を付けてエクスポート]オプション(赤い矢印)をクリックしてファイル名と場所を変更し(ファイル名を[等尺性電話図面]に変更)、[エクスポート]ボタンをクリックします。 SVGをPNGにエクスポートする(青い矢印)。

等尺性電話図面

上が最終的なエクスポートされた図面です。 マウスで写真をハイライトすると、画像の境界線が描画が終了するところで終わることに気付くでしょう(注:この記事では少し縮小されています)。

3 選択範囲をPNGにエクスポート

コンポジション全体をエクスポートして図面だけをエクスポートするのとは別に、エクスポートした領域を選択範囲に絞り込むこともできます。

選択範囲エクスポート域Inkscape 2019

それでは、私は自分の携帯電話の前面だけをエクスポートしたいと仮定してみましょう。 ツールボックスから選択ツールを取得し(上の写真の赤い矢印)、選択したいすべての要素をクリックしてエクスポートします(携帯電話の前面を構成するすべての図形をクリックしました)。 。 これらすべての要素が選択された状態で、Export PNG Imageダイアログの下のExport Areaタブが自動的に“ Selection”タブ(写真の緑色の矢印)に変わりました。

選択エクスポートはSVGをPNG Inkscapeにエクスポートする

私の始点と終点の座標は、選択した領域の始点と終点を反映するようになり、イメージの幅と高さはこの領域の寸法と一致するように変更されました(上の写真の緑色の輪郭)。

[画像サイズ]セクション(赤で囲まれている部分)で画像の解像度をもう一度変更できます。これにより、設定されている解像度に応じて画像の全体サイズが増減します。



ファイル名の下にある[名前を付けてエクスポート]ボタン(青い枠で囲まれている)を使用してファイルの名前(今回は「等角電話の前面」に変更しました)と保存場所を変更し、[エクスポート]をクリックします。選択をPNGにエクスポートします。 言及する価値がある他のいくつかのオプションもここにあります。 まず、選択したオブジェクトを「一括エクスポート」できます。つまり、各オブジェクトは個別のPNGとしてエクスポートされます。 その下には、[選択したもの以外はすべて隠す]という選択肢があります。つまり、選択しなかったものは最終的なコンポジションには表示されません。 このオプションをチェックしない場合、選択しなかったアイテムは、エクスポート先のフレーム領域に収まる限り表示されたままになります。

非表示と非表示のエクスポット選択領域

上記は、選択範囲をエクスポートした2つの異なる結果です。左側には[選択を除くすべて非表示]オプションをオフにした結果が、右側にはそのオプションをオンにした状態が表示されています。

4 カスタム領域をPNGにエクスポート

PNG画像に書き出しダイアログボックスの最後のセクションは、コンポジションのカスタム領域を書き出すオプションです。 ここでは、同じ規則が他の設定からも適用されます(x0とy0は開始座標、x1とy1は終了座標、WidthとHeightはコンポジションの合計サイズになります)。

ここでの主な違いは、これらの値を使用して設定した領域はエクスポートされた領域になるということです - その領域に図面があるかどうかにかかわらず。 あなたが設定した値の外側の何かを切り取っているので、それは、ほとんどトリミングを設定するようなものです。

カスタムエクスポート領域2019 Inkscapeチュートリアル

この設定を実際に説明するために、x0とy0の値を250に設定し、x1とy1の値を1250に設定します。 これは幅と高さが1000ピクセルの画像を作成します。 画像の名前を「アイソメ電話カスタムエリア」に変更し、「エクスポート」をクリックします。

等尺性電話カスタムエリア

私の最終的なコンポジションは、デザインがエクスポート領域の外側にあるところはどこでも、デザインの一部がカットオフされた1000 x 1000ピクセルの正方形です。

このチュートリアルはこれで終わりです。 あなたがそれを楽しんだなら、あなたは私の他のどれでもチェックアウトすることができます Inkscapeのヘルプ記事, Inkscapeビデオチュートリアルに電子メールを送るか、もしくは GIMPチュートリアル.

GIMPニュースレターを購読する

メーリングリストに参加して、新しいチュートリアル、GIMPコースの最新情報、および最新ニュースを入手してください。

あなたが正常に登録しています!

Pinterestの上でそれをピン

これを共有