フリーのドローソフトInkscapeでアプリのストア画像を作る

2020-11-14T21:38:06+09:00

イラストレータのようにベクター形式でグラフィックを作ることができるフリーのInkscapeというソフトを使って僕はいつも画像を作っています。Windows、mac、Linuxどれでも使うことができます。

せっかくですので今回は実際に使ってアプリストアのスクリーンショットを作っている風景を記事にしてみます。Inkscapeのインストールは下記です。

ドキュメントのサイズを変更する

まずはドキュメントのサイズを実際にストアに登録するためのサイズに変更します。メニューからドキュメントのプロパティを開きます。

下記のようなダイアログが開きます。

App Storeのサイズで作っておけばPlayストアでも使えるためそのサイズに合わせます。今回は縦長にするため 1242 x 2208 のサイズにします。

まず、わかりやすくするためDisplay unitsをpxにします。次に、サイズは上記のサイズを入力するため、カスタムサイズを設定します。こちらの単位もpxにしておきます。するとピクセル単位で入力できるため幅を1242、高さを2208にします。入力できたら自動的に更新されますのでそのままダイアログを閉じて大丈夫です。

下記のようにドキュメントのサイズが更新されます。

キャンバスの操作

キャンバスは下記のように操作します。Windowsの場合ですので他は場合によってはちょっと違うかもしれません。

スクロール

ホイールでスクロールできます。Shiftを押しながらホイールで左右スクロールです。

キャンバスを掴んで移動

ホイールボタンでドラッグするとキャンバスを移動できます。

拡大縮小

Ctrlキーを押しながらホイール操作すると拡大縮小できます。

背景を配置する

まずは背景色とするための矩形を配置してみたいと思います。実際には先程のドキュメントのプロパティで背景色も設定できるのですが、練習も兼ねて配置します。

まずは矩形ツールを選択します。

あとはドラッグ＆ドロップで適当に矩形を配置できます。

矩形のサイズを変更

ちなみに左上と右下のマークをつまむとサイズを変更できます。右上の丸いツマミを使うと角丸にできます。

今回は背景サイズにあわせるため直接数値を指定します。矩形ツールの状態で矩形を選択していると上部で矩形のサイズを設定できます。こちらで幅と高さを合わせます。

次に位置も合わせましょう。オブジェクトを移動したい時は選択ツールを使いますのでそちらを選択します。

選択ツールで移動したり、端の矢印を使えばサイズの拡大縮小もできます。

今回は正確に配置するため、直接入力します。選択ツールの状態だと座標を入力できます。このXとYを0にします。

これできっちりドキュメントのサイズに矩形が配置されました。

矩形の色を変更

次にこの矩形の色を変更します。フィル/ストローク設定を利用します。

見つからない場合は右下のツールバーのボタンから開きます。

この設定パネルのフィルというところで色を指定できます。適当に操作して変えてみましょう。変える前に矩形を選択している状態になっているか確認しておいてください。

ちなみにストロークという設定項目を使うと枠線の設定ができます。

設定できれば背景は完成です。

プロジェクトを保存する

一旦プロジェクトを保存しておきましょう。

Inkscapeの保存形式はsvgです。

svgですので直接ブラウザで閲覧したりもできます。

スクリーンショットを使う

次にスクリーンショットを実際に使って画像を作っていきます。

レイヤーを分ける

その前に、貼り付けたスクリーンショットが先程の背景とごちゃごちゃになると面倒ですので、レイヤーを分け、背景はもうロックしていじれないようにしておきましょう。まずはレイヤーパネルを表示します。

見つからない場合は右下のメニューから開いてください。

まずは最初からあるレイヤーを背景専用にします。レイヤーをクリックすると名前を変更できますのでわかりやすい名前をつけましょう。

そして鍵アイコンをクリックすればロックできます。これで背景レイヤーは編集できないようになりました。

次にスクリーンショット用のレイヤーを作成します。プラスボタンをクリックします。

レイヤーの追加設定が現れますので名前と位置を入力して追加します。背景の全面に追加するため、現在のレイヤーの前面側の位置を指定します。間違えてもレイヤーの位置は自由に入れ替えられます。

これでレイヤーが追加されました。こちらにスクリーンショットを貼っていきます。レイヤー一覧から編集するレイヤーをその都度選択しておいてください。

画像を貼る

画像はエクスプローラからドラッグ＆ドロップすれば貼り付けできます。ドロップする時にインポート設定が出ます。今回はこのままOKして貼り付けます。

貼り付けられました。

画像を調整する

貼り付けた画像の位置やサイズを調整します。今回はマウスで操作して配置します。

移動

移動するには選択した状態でそのままドラッグ＆ドロップすれば移動できます。Ctrlキーを押しながら移動することで縦横どちらかを固定して移動させることもできます。

拡大縮小

選択した状態で周りに矢印が出ているため、それらをドラッグすれば拡大縮小できます。Ctrlキーを押しながら拡大縮小することで縦横比を維持したまま拡大縮小できます。Shiftキーを押しながらだと中央の位置からの拡大縮小になります。

最終的に下記のようにしました。もちろんスクリーンショットとフレームが既に両方含まれている画像がある場合はそちらをそのまま貼る形で大丈夫です。

更にその下にレイヤーを作成し、スクリーンショットやフレーム内の余った空白を隠す白背景用の矩形を追加しました。

文字を入れる

あとは上部の空いた欄に文字を入れてみます。文字はツールバーのテキストツールを使って入力します。

文字を入力するレイヤーを選択後、画面上の好きなところをクリックすると文字入力欄が追加されます。まずは適当に文字を入れましょう。

文字を設定する

次に文字の大きさなどを調整します。テキストとフォントの設定パネルを開きます。

ない場合が右下のツールバーから選択してください。

入力した文字を全範囲選択した状態で、フォント、スタイル、フォントサイズを選択します。決まったらApplyボタンをクリックしましょう。

文字を大きくしました。

あとはテキストツールから選択ツールに切り替え、丁度いい箇所に移動します。

これで完成です！　保存しておきましょう。

PNGファイルとしてエクスポート

ではPNGファイルとしてエクスポートします。メニューからPNGファイルにエクスポートを選択します。

エクスポート設定のパネルが現れます。

サイズはもう決めてありますので、エクスポート領域から「ページ」を選択します。これではみ出した部分などは無視され、最初に設定したサイズの画像として出力されます。エクスポート先のファイル名を設定したらエクスポートボタンを実行します。

これで完成です！　エクスポート先情報が更新されていますので、プロジェクトはまた保存しておきましょう。

まとめ

ほかにもInkscapeには色々な機能があります。いろいろ試してみると面白いと思いますし、これくらいの最低限の切り貼りでOKという場合はそれでも良いと思います。もちろんスクリーンショット作成以外にも色々なことに利用できて便利です。

フリーソフトInkscapeで生成したPDFでオリジナル名刺を注文する

2018-10-04T21:12:08+09:00

PDFでオリジナルの名刺を作成できると、送料を含めても千円以内で名刺100枚を作ることができます。InkscapeというソフトはWindows, mac, Linux関わらず無料で使えるドローソフトですので、これを使えばIllustrator等を持っていなくても作成することができます。

僕も実際にこんな感じのイベント用の名刺を作ってみましたので、作り方を紹介します。

※ 今回試したのは４色までの名刺になります。

Inkscapeのインストール

WindowsはMicrosoft Store、Linuxはパッケージマネージャ、macは公式サイトからのダウンロードでインストールできます。

用紙の設定

インストールができたら起動し、まずは用紙の設定を行います。「ファイル」メニューから「ドキュメントのプロパティ」ダイアログを開きます。

ここで、用紙のサイズを幅93mm、高さ57mmに変更します。

通常の名刺のサイズは 91mm x 55mm なのですが、下記のPDF入稿の説明ページの通り、実際のサイズより幅を持たせる必要があるためこのサイズにしています。今回はマットコートで注文をしたため、93mm x 57mm にしています。

完全PDF入稿について - 印刷通販なら印刷専門サイト【アドプリント】

色々書く

あとはもう自由です。必要な文言や画像を適宜配置していきましょう。Inkscapeの使い方を詳しく説明しているサイトはいくつかありますので、そのあたりを参考にするとわかりやすいです。（とはいえ画像や文字を配置するだけなのでさほど必要な知識は多くはないです）

用紙はちょっと大きくなっており、そこは印刷されるかされないか分からないスペースになっていますので、どちらでも問題ないようにしておきましょう。

あと、今回は４色までの名刺になるので、色を使いすぎないよう注意しましょう。

PDFで出力する

「名前を付けて保存」ダイアログを開くと、「ファイルの種類」を選択する箇所がありますので、そこで「Portable Document Format (*.pdf)」を選択して保存すればPDFが完成します。

注文する

僕が今回使ったのはアドプリントです。

例えば今回試した一番安いものはマットコート 22kg ラミネート無しで100枚460円になります。（＋送料）

注文画面へ行くと、データの入稿方法の選択がありますので、「完全データ入稿注文」を選択して進むと最終的にPDFを登録して注文ができます。

まとめ

イベント用の名刺などは時々変えたくなったりしますので、いちいちお店で注文するよりもこうやって自分で手直しして安くで作り直しができると非常に便利です。

Web上の注文でも、デザインを選択する形式だとTwitterアカウントや自分のサービスの画像を入れることができなかったりすることもあり、ちょうどよいサービスを探すだけでも結構な労力になってしまいますので、自分で作ったもので入稿できると何も考えなくて良いので楽です。

品質よりも伝えたい情報が第一！　という場合にはぜひ試してみてください。

「Inkscape」の記事 - Crieit

フリーのドローソフトInkscapeでアプリのストア画像を作る

フリーソフトInkscapeで生成したPDFでオリジナル名刺を注文する