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

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

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

https://inkscape.org/ja/

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

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

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

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という場合はそれでも良いと思います。もちろんスクリーンショット作成以外にも色々なことに利用できて便利です。